From 906ad46768607f636d982ae42bfb03a286c1b5a0 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Fri, 16 Jan 2026 01:58:48 +1100
Subject: [PATCH 1/3] Squash commits from main

Combined commits:
- fix(plausible): use consistent window reference in clientInit stub
---
 .claude/plans/543-plausible-broken.md       | 61 +++++++++++++++++++++
 src/runtime/registry/plausible-analytics.ts | 14 +++--
 2 files changed, 69 insertions(+), 6 deletions(-)
 create mode 100644 .claude/plans/543-plausible-broken.md

diff --git a/.claude/plans/543-plausible-broken.md b/.claude/plans/543-plausible-broken.md
new file mode 100644
index 00000000..ea85c8ed
--- /dev/null
+++ b/.claude/plans/543-plausible-broken.md
@@ -0,0 +1,61 @@
+## DONE
+
+# Fix: Plausible Analytics new script not working (#543)
+
+## Problem
+Users report that the new Plausible script format (with `scriptId`) loads correctly in DOM but no events are sent.
+
+## Analysis
+
+### Root Cause
+The `clientInit` stub uses bare `plausible` identifier inconsistently with `window.plausible`:
+
+```js
+// Current code (plausible-analytics.ts:187)
+window.plausible = window.plausible || function () { (plausible.q = plausible.q || []).push(arguments) }, plausible.init = plausible.init || function (i) { plausible.o = i || {} }
+```
+
+Issues:
+1. **Inconsistent window reference**: First part uses `window.plausible`, second part uses bare `plausible`
+2. **Module scope**: In ES modules (strict mode), bare identifier resolution differs from non-module scripts
+3. **Compare to GA**: Google Analytics uses `w` (window) consistently throughout its clientInit
+
+### How Plausible's new script works
+The `pa-{scriptId}.js` script:
+1. Checks `plausible.o && S(plausible.o)` on load to pick up pre-init options
+2. The stub's `plausible.init()` stores options in `plausible.o`
+3. Script has domain hardcoded, doesn't need `data-domain` attribute
+
+### Verification
+Plausible script expected stub format:
+```js
+window.plausible = window.plausible || {}
+plausible.o && S(plausible.o)  // If .o exists, initialize with those options
+```
+
+Our stub needs to set `plausible.o` before script loads, which it does via:
+```js
+plausible.init = function(i) { plausible.o = i || {} }
+window.plausible.init(initOptions)
+```
+
+## Fix
+
+Update `clientInit` to use `window.plausible` consistently (like GA does):
+
+```ts
+clientInit() {
+  const w = window as any
+  w.plausible = w.plausible || function () { (w.plausible.q = w.plausible.q || []).push(arguments) }
+  w.plausible.init = w.plausible.init || function (i: PlausibleInitOptions) { w.plausible.o = i || {} }
+  w.plausible.init(initOptions)
+}
+```
+
+## Files to modify
+- `src/runtime/registry/plausible-analytics.ts`: Fix clientInit stub pattern
+
+## Test plan
+1. Run existing tests
+2. Test playground with plausible-analytics-v2.vue
+3. Verify script loads and init options are picked up
diff --git a/src/runtime/registry/plausible-analytics.ts b/src/runtime/registry/plausible-analytics.ts
index 9a955032..17ac9c95 100644
--- a/src/runtime/registry/plausible-analytics.ts
+++ b/src/runtime/registry/plausible-analytics.ts
@@ -181,12 +181,14 @@ export function useScriptPlausibleAnalytics<T extends PlausibleAnalyticsApi>(_op
         use() {
           return { plausible: window.plausible }
         },
-        clientInit() {
-          // @ts-expect-error untyped
-          // eslint-disable-next-line @typescript-eslint/no-unused-expressions,@stylistic/max-statements-per-line,prefer-rest-params
-          window.plausible = window.plausible || function () { (plausible.q = plausible.q || []).push(arguments) }, plausible.init = plausible.init || function (i) { plausible.o = i || {} }
-          window.plausible.init(initOptions)
-        },
+        clientInit: import.meta.server
+          ? undefined
+          : () => {
+              const w = window as any
+              w.plausible = w.plausible || function () { (w.plausible.q = w.plausible.q || []).push(arguments) }
+              w.plausible.init = w.plausible.init || function (i: PlausibleInitOptions) { w.plausible.o = i || {} }
+              w.plausible.init(initOptions)
+            },
       },
     }
   }, _options)

From 6720a6a7ceb262f818ff0cbef553dc69b1b93e2d Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Sun, 18 Jan 2026 13:51:10 +1100
Subject: [PATCH 2/3] fix(rybbit): queue custom events before script loads

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../pages/third-parties/rybbit-analytics.vue  | 119 +++++++++++++++++-
 src/runtime/registry/rybbit-analytics.ts      |  56 +++++++--
 2 files changed, 161 insertions(+), 14 deletions(-)

diff --git a/playground/pages/third-parties/rybbit-analytics.vue b/playground/pages/third-parties/rybbit-analytics.vue
index 8b73c496..768a3c63 100644
--- a/playground/pages/third-parties/rybbit-analytics.vue
+++ b/playground/pages/third-parties/rybbit-analytics.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import { ref, useHead } from '#imports'
+import { ref, useHead, watch } from '#imports'
 
 useHead({
   title: 'Rybbit Analytics',
 })
 
-// Rybbit Analytics with demo configuration
+// Rybbit Analytics with real site ID
 const { proxy, status } = useScriptRybbitAnalytics({
-  siteId: 'demo-site-123',
+  siteId: '874',
   autoTrackPageview: true,
   trackSpa: true,
   trackOutbound: true,
@@ -23,37 +23,76 @@ proxy.pageview()
 
 const eventCounter = ref(0)
 const userId = ref('')
+const eventLog = ref<Array<{ time: string, event: string, status: string }>>([])
+
+// Log status changes
+watch(status, (newStatus, oldStatus) => {
+  logEvent(`Status: ${oldStatus} -> ${newStatus}`, newStatus)
+}, { immediate: true })
+
+// Fire an event immediately on component setup (before script loads)
+// This is the actual test for issue #461
+const initialStatus = status.value
+proxy.event('mount_event', { fired_at: 'component_setup' })
+logEvent(`proxy.event('mount_event') - FIRED ON MOUNT`, initialStatus)
+
+function logEvent(event: string, scriptStatus: string) {
+  eventLog.value.unshift({
+    time: new Date().toLocaleTimeString(),
+    event,
+    status: scriptStatus,
+  })
+  // Keep only last 20 events
+  if (eventLog.value.length > 20) {
+    eventLog.value.pop()
+  }
+}
 
 function trackCustomEvent() {
   eventCounter.value++
+  const currentStatus = status.value
   proxy.event('button_click', {
     button_name: 'Custom Event Button',
     click_count: eventCounter.value,
     timestamp: Date.now(),
   })
+  logEvent(`proxy.event('button_click', { count: ${eventCounter.value} })`, currentStatus)
+}
+
+// Test event that runs immediately without checking status
+// This is what the issue #461 tests - events called before script is ready
+function trackImmediateEvent() {
+  const currentStatus = status.value
+  proxy.event('immediate_test', { timestamp: Date.now() })
+  logEvent(`proxy.event('immediate_test') - NO STATUS CHECK`, currentStatus)
 }
 
 function trackConversion() {
+  const currentStatus = status.value
   proxy.event('conversion', {
     conversion_type: 'demo_conversion',
     value: 25.99,
     currency: 'USD',
   })
+  logEvent(`proxy.event('conversion')`, currentStatus)
 }
 
 function identifyUser() {
   if (userId.value) {
     proxy.identify(userId.value)
+    logEvent(`proxy.identify('${userId.value}')`, status.value)
   }
 }
 
 function clearUser() {
   proxy.clearUserId()
+  logEvent(`proxy.clearUserId()`, status.value)
   userId.value = ''
 }
 
 function getCurrentUserId() {
   const currentId = proxy.getUserId()
+  logEvent(`proxy.getUserId() => ${currentId}`, status.value)
   if (currentId) {
     userId.value = currentId
   }
@@ -79,14 +118,29 @@ function getCurrentUserId() {
       />
     </div>
 
+    <!-- Issue #461 Test Section -->
     <UCard>
       <template #header>
-        <h2 class="text-xl font-semibold">
-          Script Status
+        <h2 class="text-xl font-semibold text-orange-600">
+          Issue #461 Test: Refresh Behavior
         </h2>
       </template>
 
       <div class="space-y-4">
+        <UAlert
+          icon="i-heroicons-exclamation-triangle"
+          color="orange"
+          variant="soft"
+          title="How to Test"
+        >
+          <ol class="list-decimal list-inside space-y-1 text-sm mt-2">
+            <li>Refresh this page (Cmd+R / F5)</li>
+            <li>Immediately click "Track Immediate Event" before status becomes "loaded"</li>
+            <li>Check the Event Log - event should be queued and sent when script loads</li>
+            <li>Compare: Navigate away and back (SPA nav) - events should work immediately</li>
+          </ol>
+        </UAlert>
+
         <div>
           <span class="font-medium">Current Status:</span>
           <UBadge
@@ -97,6 +151,61 @@ function getCurrentUserId() {
           </UBadge>
         </div>
 
+        <div class="flex gap-3">
+          <UButton
+            color="orange"
+            @click="trackImmediateEvent"
+          >
+            Track Immediate Event (no status check)
+          </UButton>
+        </div>
+
+        <p class="text-sm text-gray-500">
+          This button calls proxy.event() without checking if status === 'loaded'.
+          Before the fix, this would silently fail on page refresh.
+        </p>
+      </div>
+    </UCard>
+
+    <!-- Event Log -->
+    <UCard>
+      <template #header>
+        <h2 class="text-xl font-semibold">
+          Event Log
+        </h2>
+      </template>
+
+      <div class="space-y-2 max-h-64 overflow-y-auto">
+        <div
+          v-for="(entry, i) in eventLog"
+          :key="i"
+          class="text-sm font-mono p-2 rounded"
+          :class="entry.status === 'loaded' ? 'bg-green-50 dark:bg-green-900/20' : 'bg-yellow-50 dark:bg-yellow-900/20'"
+        >
+          <span class="text-gray-500">{{ entry.time }}</span>
+          <UBadge
+            :color="entry.status === 'loaded' ? 'green' : 'yellow'"
+            size="xs"
+            class="mx-2"
+          >
+            {{ entry.status }}
+          </UBadge>
+          <span>{{ entry.event }}</span>
+        </div>
+        <div v-if="eventLog.length === 0" class="text-gray-400 text-sm">
+          No events logged yet
+        </div>
+      </div>
+    </UCard>
+
+    <UCard>
+      <template #header>
+        <h2 class="text-xl font-semibold">
+          Script Status
+        </h2>
+      </template>
+
+      <div class="space-y-4">
         <div>
           <span class="font-medium">Features Enabled:</span>
           <ul class="list-disc list-inside mt-2 space-y-1 text-sm">
diff --git a/src/runtime/registry/rybbit-analytics.ts b/src/runtime/registry/rybbit-analytics.ts
index c66eb576..372eec96 100644
--- a/src/runtime/registry/rybbit-analytics.ts
+++ b/src/runtime/registry/rybbit-analytics.ts
@@ -61,6 +61,28 @@ declare global {
 }
 
 export function useScriptRybbitAnalytics<T extends RybbitAnalyticsApi>(_options?: RybbitAnalyticsInput) {
+  // Queue for buffering calls before script loads
+  let _queue: Array<[string, ...any[]]> | null = null
+
+  // Helper to check if the real Rybbit script is loaded (not our stub)
+  const isRealRybbit = () => typeof window !== 'undefined'
+    && window.rybbit
+    && typeof window.rybbit.event === 'function'
+    && !('_isStub' in window.rybbit)
+
+  // Flush queued calls to real implementation
+  const flushQueue = () => {
+    if (!_queue || !isRealRybbit()) return
+    const q = _queue
+    _queue = null // Clear queue first to prevent re-entrancy
+    for (const [method, ...args] of q) {
+      const fn = (window.rybbit as any)[method]
+      if (typeof fn === 'function') {
+        fn.apply(window.rybbit, args)
+      }
+    }
+  }
+
   return useRegistryScript<T, typeof RybbitAnalyticsOptions>('rybbitAnalytics', (options) => {
     return {
       scriptInput: {
@@ -81,19 +103,35 @@ export function useScriptRybbitAnalytics<T extends RybbitAnalyticsApi>(_options?
       schema: import.meta.dev ? RybbitAnalyticsOptions : undefined,
       scriptOptions: {
         use() {
-          if (typeof window.rybbit === 'undefined') {
-            return null
-          }
+          // Try to flush queue every time use() is called (it's called on status changes)
+          flushQueue()
           return {
-            pageview: window.rybbit.pageview,
-            event: window.rybbit.event,
-            identify: window.rybbit.identify,
-            clearUserId: window.rybbit.clearUserId,
-            getUserId: window.rybbit.getUserId,
+            pageview: window.rybbit?.pageview,
+            event: window.rybbit?.event,
+            identify: window.rybbit?.identify,
+            clearUserId: window.rybbit?.clearUserId,
+            getUserId: window.rybbit?.getUserId,
             rybbit: window.rybbit,
-          } satisfies RybbitAnalyticsApi
+          } as RybbitAnalyticsApi
         },
       },
+      // Create a stub that queues calls until the real script loads
+      clientInit: import.meta.server
+        ? undefined
+        : () => {
+            const w = window as any
+            if (!w.rybbit) {
+              _queue = []
+              w.rybbit = {
+                _isStub: true,
+                pageview: function () { _queue?.push(['pageview', ...arguments]) },
+                event: function () { _queue?.push(['event', ...arguments]) },
+                identify: function () { _queue?.push(['identify', ...arguments]) },
+                clearUserId: function () { _queue?.push(['clearUserId', ...arguments]) },
+                getUserId: () => null,
+              }
+            }
+          },
     }
   }, _options)
 }

From aa50bd066ef6510983ef8ffbbe28004e99c67898 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Tue, 20 Jan 2026 12:01:11 +1100
Subject: [PATCH 3/3] chore: broken events

---
 .../pages/third-parties/rybbit-analytics.vue  | 50 ++++++++----
 src/runtime/registry/rybbit-analytics.ts      | 80 +++++++++++--------
 2 files changed, 80 insertions(+), 50 deletions(-)

diff --git a/playground/pages/third-parties/rybbit-analytics.vue b/playground/pages/third-parties/rybbit-analytics.vue
index 768a3c63..4c82375b 100644
--- a/playground/pages/third-parties/rybbit-analytics.vue
+++ b/playground/pages/third-parties/rybbit-analytics.vue
@@ -30,11 +30,13 @@ watch(status, (newStatus, oldStatus) => {
   logEvent(`Status: ${oldStatus} -> ${newStatus}`, newStatus)
 }, { immediate: true })
 
-// Fire an event immediately on component setup (before script loads)
-// This is the actual test for issue #461
+// Fire events immediately on component setup (before script loads)
+// This is the actual test for issue #461 - all these should queue and flush
 const initialStatus = status.value
 proxy.event('mount_event', { fired_at: 'component_setup' })
-logEvent(`proxy.event('mount_event') - FIRED ON MOUNT`, initialStatus)
+proxy.identify('test-user-on-mount')
+proxy.pageview()
+logEvent(`Queued on mount: event, identify, pageview`, initialStatus)
 
 function logEvent(event: string, scriptStatus: string) {
   eventLog.value.unshift({
@@ -110,7 +112,7 @@ function getCurrentUserId() {
       </p>
       <UAlert
         icon="i-heroicons-information-circle"
-        color="blue"
+        color="info"
         variant="soft"
         class="mt-4"
         title="Demo Configuration"
@@ -121,7 +123,7 @@ function getCurrentUserId() {
     <!-- Issue #461 Test Section -->
     <UCard>
       <template #header>
-        <h2 class="text-xl font-semibold text-orange-600">
+        <h2 class="text-xl font-semibold text-amber-600">
           Issue #461 Test: Refresh Behavior
         </h2>
       </template>
@@ -129,7 +131,7 @@ function getCurrentUserId() {
       <div class="space-y-4">
         <UAlert
           icon="i-heroicons-exclamation-triangle"
-          color="orange"
+          color="warning"
           variant="soft"
           title="How to Test"
         >
@@ -144,25 +146,39 @@ function getCurrentUserId() {
         <div>
           <span class="font-medium">Current Status:</span>
           <UBadge
-            :color="status === 'loaded' ? 'green' : status === 'loading' ? 'yellow' : 'gray'"
+            :color="status === 'loaded' ? 'success' : status === 'loading' ? 'warning' : 'neutral'"
             class="ml-2"
           >
             {{ status }}
           </UBadge>
         </div>
 
-        <div class="flex gap-3">
+        <div class="flex flex-wrap gap-3">
           <UButton
-            color="orange"
+            color="warning"
             @click="trackImmediateEvent"
           >
-            Track Immediate Event (no status check)
+            Track Event (no status check)
+          </UButton>
+          <UButton
+            color="warning"
+            variant="outline"
+            @click="() => { proxy.identify(`user-${Date.now()}`); logEvent('proxy.identify() - NO STATUS CHECK', status) }"
+          >
+            Identify (no status check)
+          </UButton>
+          <UButton
+            color="warning"
+            variant="outline"
+            @click="() => { proxy.pageview(); logEvent('proxy.pageview() - NO STATUS CHECK', status) }"
+          >
+            Pageview (no status check)
           </UButton>
         </div>
 
         <p class="text-sm text-gray-500">
-          This button calls proxy.event() without checking if status === 'loaded'.
-          Before the fix, this would silently fail on page refresh.
+          These buttons call proxy methods without checking status === 'loaded'.
+          Events are queued and flushed when script loads.
         </p>
       </div>
     </UCard>
@@ -184,7 +200,7 @@ function getCurrentUserId() {
         >
           <span class="text-gray-500">{{ entry.time }}</span>
           <UBadge
-            :color="entry.status === 'loaded' ? 'green' : 'yellow'"
+            :color="entry.status === 'loaded' ? 'success' : 'warning'"
             size="xs"
             class="mx-2"
           >
@@ -237,7 +253,7 @@ function getCurrentUserId() {
 
           <UButton
             :disabled="status !== 'loaded'"
-            color="green"
+            color="success"
             @click="trackConversion"
           >
             Track Conversion
@@ -245,7 +261,7 @@ function getCurrentUserId() {
 
           <UButton
             :disabled="status !== 'loaded'"
-            color="blue"
+            color="info"
             @click="proxy.pageview()"
           >
             Manual Page View
@@ -283,7 +299,7 @@ function getCurrentUserId() {
         <div class="flex gap-3">
           <UButton
             :disabled="status !== 'loaded'"
-            color="orange"
+            color="warning"
             @click="getCurrentUserId"
           >
             Get Current User ID
@@ -291,7 +307,7 @@ function getCurrentUserId() {
 
           <UButton
             :disabled="status !== 'loaded'"
-            color="red"
+            color="error"
             @click="clearUser"
           >
             Clear User ID
diff --git a/src/runtime/registry/rybbit-analytics.ts b/src/runtime/registry/rybbit-analytics.ts
index 372eec96..fcf02c19 100644
--- a/src/runtime/registry/rybbit-analytics.ts
+++ b/src/runtime/registry/rybbit-analytics.ts
@@ -60,22 +60,39 @@ declare global {
   }
 }
 
-export function useScriptRybbitAnalytics<T extends RybbitAnalyticsApi>(_options?: RybbitAnalyticsInput) {
-  // Queue for buffering calls before script loads
-  let _queue: Array<[string, ...any[]]> | null = null
+// Queue state stored on globalThis to persist across module instances
+// Using Symbol to avoid conflicts - don't use window.rybbit as stub
+// because Rybbit's script checks for it and skips init if it exists
+const RYBBIT_QUEUE_KEY = Symbol.for('nuxt-scripts.rybbit-queue')
+
+interface RybbitQueueState {
+  queue: Array<[string, ...any[]]>
+  flushed: boolean
+}
+
+function getRybbitState(): RybbitQueueState | undefined {
+  if (!import.meta.client) return
+  const g = globalThis as any
+  if (!g[RYBBIT_QUEUE_KEY]) {
+    g[RYBBIT_QUEUE_KEY] = { queue: [], flushed: false }
+  }
+  return g[RYBBIT_QUEUE_KEY]
+}
 
-  // Helper to check if the real Rybbit script is loaded (not our stub)
-  const isRealRybbit = () => typeof window !== 'undefined'
+export function useScriptRybbitAnalytics<T extends RybbitAnalyticsApi>(_options?: RybbitAnalyticsInput) {
+  // Check if real Rybbit is loaded
+  const isRybbitReady = () => import.meta.client
+    && typeof window !== 'undefined'
     && window.rybbit
     && typeof window.rybbit.event === 'function'
-    && !('_isStub' in window.rybbit)
 
   // Flush queued calls to real implementation
   const flushQueue = () => {
-    if (!_queue || !isRealRybbit()) return
-    const q = _queue
-    _queue = null // Clear queue first to prevent re-entrancy
-    for (const [method, ...args] of q) {
+    const state = getRybbitState()
+    if (!state || state.flushed || !isRybbitReady()) return
+    state.flushed = true
+    while (state.queue.length > 0) {
+      const [method, ...args] = state.queue.shift()!
       const fn = (window.rybbit as any)[method]
       if (typeof fn === 'function') {
         fn.apply(window.rybbit, args)
@@ -83,6 +100,19 @@ export function useScriptRybbitAnalytics<T extends RybbitAnalyticsApi>(_options?
     }
   }
 
+  // Wrapper that queues or calls directly
+  const callOrQueue = (method: string, ...args: any[]) => {
+    if (isRybbitReady()) {
+      const fn = (window.rybbit as any)[method]
+      if (typeof fn === 'function') {
+        fn.apply(window.rybbit, args)
+      }
+    }
+    else {
+      getRybbitState()?.queue.push([method, ...args])
+    }
+  }
+
   return useRegistryScript<T, typeof RybbitAnalyticsOptions>('rybbitAnalytics', (options) => {
     return {
       scriptInput: {
@@ -103,35 +133,19 @@ export function useScriptRybbitAnalytics<T extends RybbitAnalyticsApi>(_options?
       schema: import.meta.dev ? RybbitAnalyticsOptions : undefined,
       scriptOptions: {
         use() {
-          // Try to flush queue every time use() is called (it's called on status changes)
+          // Flush queue when use() is called (happens on status changes)
           flushQueue()
+          // Return wrappers that queue if not ready
           return {
-            pageview: window.rybbit?.pageview,
-            event: window.rybbit?.event,
-            identify: window.rybbit?.identify,
-            clearUserId: window.rybbit?.clearUserId,
-            getUserId: window.rybbit?.getUserId,
+            pageview: () => callOrQueue('pageview'),
+            event: (name: string, properties?: Record<string, any>) => callOrQueue('event', name, properties),
+            identify: (userId: string) => callOrQueue('identify', userId),
+            clearUserId: () => callOrQueue('clearUserId'),
+            getUserId: () => window.rybbit?.getUserId?.() ?? null,
             rybbit: window.rybbit,
           } as RybbitAnalyticsApi
         },
       },
-      // Create a stub that queues calls until the real script loads
-      clientInit: import.meta.server
-        ? undefined
-        : () => {
-            const w = window as any
-            if (!w.rybbit) {
-              _queue = []
-              w.rybbit = {
-                _isStub: true,
-                pageview: function () { _queue?.push(['pageview', ...arguments]) },
-                event: function () { _queue?.push(['event', ...arguments]) },
-                identify: function () { _queue?.push(['identify', ...arguments]) },
-                clearUserId: function () { _queue?.push(['clearUserId', ...arguments]) },
-                getUserId: () => null,
-              }
-            }
-          },
     }
   }, _options)
 }