Support SvelteKit 2

[dgrebb]

SvelteKit 2 is out. It would be swell if support was added for peerDependencies :)

[till]

Can either of you publish a git-tag and a npm release?

[till]

@dgrebb I tried installing from the git-repo directly, but it fails with:

[plugin:vite:import-analysis] Failed to resolve entry for package "@accuser/svelte-plausible-analytics". The package may have incorrect main/module/exports specified in its package.json.

--- a/rootfs/app/package.json
+++ b/rootfs/app/package.json
@@ -16,7 +16,7 @@
     "test": "playwright test"
   },
   "devDependencies": {
-    "@accuser/svelte-plausible-analytics": "^0.2.0",
+    "@accuser/svelte-plausible-analytics": "https://github.com/accuser/svelte-plausible-analytics.git#6e2b8381b489aacc925840b43b141d89f36f03d0",
     "@dinero.js/currencies": "2.0.0-alpha.13",
     "@ory/client": "^1.1.21",
     "@playwright/test": "^1.31.2",
lines 4-46/46 (END)

Is there a better way to do this?

[dgrebb]

@till you want this format: "svelte-plausible-analytics": "accuser/svelte-plausible-analytics#6e2b8381b489aacc925840b43b141d89f36f03d0"

or npm i -D accuser/svelte-plausible-analytics#6e2b8381b489aacc925840b43b141d89f36f03d0

However, neither of these will work because the dist directory isn't tracked. So there are a few options:

1. pull the repo, run npm run build, then use npm install -D ../path/to/svelte-plausible-analytics
2. pull the repo, remove dist from .gitignore, npm run build, and push your own branch, which would allow you to npm i -D till/svelte-plausible-analytics#hash or npm i -D till/svelte-plausible-analytics#branch-name
3. use this downstream fork temporarily, which has the dist directory tracked: npm i -D dgrebb/svelte-plausible-analytics#v1.0.0

If going the local directory route, you'll end up with this in package.json:

"svelte-plausible-analytics": "file:../svelte-plausible-analytics",

[till]

@dgrebb thanks for helping. When I use your fork, I get a similar error:

[plugin:vite-plugin-svelte] Error while preprocessing /Users/till/Documents/workspaces/app/node_modules/@accuser/svelte-plausible-analytics/dist/PlausibleAnalytics.svelte - src attribute must be string

/Users/till/Documents/workspaces/app/node_modules/@accuser/svelte-plausible-analytics/dist/PlausibleAnalytics.svelte

diff --git a/rootfs/app/package.json b/rootfs/app/package.json
index b3e555a..cf6ec00 100644
--- a/rootfs/app/package.json
+++ b/rootfs/app/package.json
@@ -16,7 +16,7 @@
     "test": "playwright test"
   },
   "devDependencies": {
-    "@accuser/svelte-plausible-analytics": "^0.2.0",
+    "@accuser/svelte-plausible-analytics": "github:dgrebb/svelte-plausible-analytics#v1.0.0",
     "@dinero.js/currencies": "2.0.0-alpha.13",
     "@ory/client": "^1.1.21",
     "@playwright/test": "^1.31.2",

[dgrebb]

@till I'll take a look at this in bit. Are you using TypeScript?

[till]

@dgrebb no, using JavaScript. Thank you for looking. I'd guess that the tag does not include all the changes from yesterday?

[dgrebb]

@till not sure. I'm also using vanilla JS and do not get that error. Here's another branch to try: npm i -D dgrebb/svelte-plausible-analytics#downstream/release-1.0.0-alpha,

This is an exact copy of main, but includes dist.

Can you please share the <PlausibleAnalytics /> component implementation from your project?

[till]

I just tried again with your release-1.0.0-alpha branch. Same result. I deleted the library from node_modules/@accuser/ too to ensure I am re-installing it etc.:

❯ cat node_modules/@accuser/svelte-plausible-analytics/package.json
{
	"name": "@accuser/svelte-plausible-analytics",
	"version": "1.0.0",
	"description": "Plausible Analytics library for SvelteKit apps.",
	"keywords": [
...

All I do in my root layout:

import { PlausibleAnalytics } from '@accuser/svelte-plausible-analytics'
// other code
<PlausibleAnalytics domain={[ownDomain, 'rollup.example.org']} />

When I remove it, the page loads. I've only tried this with npm run dev (aka vite --host --port 3000) yet.

Complete log:

{
  name: 'Error',
  id: '/Users/till/Documents/workspaces/rootfs/app/node_modules/@accuser/svelte-plausible-analytics/dist/PlausibleAnalytics.svelte',
  message: 'Error while preprocessing /Users/till/Documents/workspaces/rootfs/app/node_modules/@accuser/svelte-plausible-analytics/dist/PlausibleAnalytics.svelte - src attribute must be string',
  frame: '',
  code: undefined,
  stack: 'Error: Error while preprocessing /Users/till/Documents/workspaces/rootfs/app/node_modules/@accuser/svelte-plausible-analytics/dist/PlausibleAnalytics.svelte - src attribute must be string\n' +
    '    at getTagInfo (/Users/till/Documents/workspaces/rootfs/app/node_modules/svelte-preprocess/dist/modules/tagInfo.js:32:19)\n' +
    '    at /Users/till/Documents/workspaces/rootfs/app/node_modules/svelte-preprocess/dist/autoProcess.js:95:115\n' +
    '    at script (/Users/till/Documents/workspaces/rootfs/app/node_modules/svelte-preprocess/dist/autoProcess.js:147:39)\n' +
    '    at process_single_tag (file:///Users/till/Documents/workspaces/rootfs/app/node_modules/svelte/src/compiler/preprocess/index.js:285:27)\n' +
    '    at file:///Users/till/Documents/workspaces/rootfs/app/node_modules/svelte/src/compiler/preprocess/replace_in_code.js:30:4\n' +
    '    at String.replace (<anonymous>)\n' +
    '    at calculate_replacements (file:///Users/till/Documents/workspaces/rootfs/app/node_modules/svelte/src/compiler/preprocess/replace_in_code.js:28:9)\n' +
    '    at replace_in_code (file:///Users/till/Documents/workspaces/rootfs/app/node_modules/svelte/src/compiler/preprocess/replace_in_code.js:69:29)\n' +
    '    at process_tag (file:///Users/till/Documents/workspaces/rootfs/app/node_modules/svelte/src/compiler/preprocess/index.js:302:32)\n' +
    '    at Module.preprocess (file:///Users/till/Documents/workspaces/rootfs/app/node_modules/svelte/src/compiler/preprocess/index.js:360:31)',
  plugin: 'vite-plugin-svelte',
  pluginCode: '<script context="module">const plausible = (event, options) => window.plausible(event, options);\n' +
    '</script>\n' +
    '\n' +
    '<script>import { onMount } from "svelte";\n' +
    'import { dev } from "$app/environment";\n' +
    'import { page } from "$app/stores";\n' +
    'import { pa } from "./store.js";\n' +
    'onMount(() => {\n' +
    '  pa.subscribe((events) => {\n' +
    '    let next = events.length && events.shift();\n' +
    '    while (next) {\n' +
    '      const { event, data } = next;\n' +
    '      plausible(event, data);\n' +
    '      next = events.shift();\n' +
    '    }\n' +
    '  });\n' +
    '});\n' +
    'export let apiHost = "https://plausible.io";\n' +
    'export let compat = false;\n' +
    'export let domain = $page.url.hostname;\n' +
    'export let enabled = !dev;\n' +
    'export let fileDownloads = false;\n' +
    'export let hash = false;\n' +
    'export let local = enabled && dev;\n' +
    'export let outboundLinks = false;\n' +
    '$:\n' +
    '  api = `${apiHost}/api/event`;\n' +
    '$:\n' +
    '  src = [\n' +
    '    `${apiHost}/js/script`,\n' +
    '    compat ? "compat" : void 0,\n' +
    '    fileDownloads ? "file-downloads" : void 0,\n' +
    '    hash ? "hash" : void 0,\n' +
    '    local ? "local" : void 0,\n' +
    '    outboundLinks ? "outbound-links" : void 0,\n' +
    '    "js"\n' +
    '  ].filter(Boolean).join(".");\n' +
    '</script>\n' +
    '\n' +
    '<svelte:head>\n' +
    '\t{#if enabled}\n' +
    '\t\t<script data-api={api} data-domain={domain.toString()} defer {src}></script>\n' +
    '\t\t<script>\n' +
    '\t\t\twindow.plausible =\n' +
    '\t\t\t\twindow.plausible ||\n' +
    '\t\t\t\tfunction () {\n' +
    '\t\t\t\t\t(window.plausible.q = window.plausible.q || []).push(arguments);\n' +
    '\t\t\t\t};\n' +
    '\t\t</script>\n' +
    '\t{/if}\n' +
    '</svelte:head>\n'
}

[dgrebb]

@till apologies — I overlooked two things. In dev mode, PlausibleAnalytics is set to false by default. See Line 59 of the src/lib/PlausibleAnalytics.svelte file.

Can you please try adding enabled to component props? Let's see what kinds of errors this yields.

I'm also curious, what is ownDomain's value in the context of <PlausibleAnalytics domain={[ownDomain, 'rollup.example.org']} />?

[till]

ownDomain is a var I fill from Kit. Basically to filter out pre-prod environments.

[till]

I get the same error when I add enabled to it. I can't tell which src attribute it's referring to.

[dgrebb]

I believe it's referring to src from Line 89, which is a joined string.

@till If you console.log(ownDomain), what is the value being passed into <PlausibleAnalytics />?

Edit: or @debug, which I often forget.