@nuxt/scripts 1.3.3 → 1.3.4

package/dist/runtime/composables/useScript.js

@@ -1,10 +1,17 @@
 import { useScript as _useScript } from "@unhead/vue/scripts";
 import { defu } from "defu";
 import { injectHead, onNuxtReady, useHead, useNuxtApp, useRuntimeConfig } from "nuxt/app";
-import { markRaw, ref } from "vue";
+import { markRaw, ref, watch } from "vue";
 import { resolveTrigger } from "#build/nuxt-scripts-trigger-resolver";
 import { debugEnabled } from "../debug.js";
 import { logger } from "../logger.js";
+const DEVTOOLS_EVENT_LIMIT = 250;
+const DEVTOOLS_NETWORK_REQUEST_LIMIT = 500;
+function pushBounded(items, item, limit) {
+  items.push(item);
+  if (items.length > limit)
+    items.splice(0, items.length - limit);
+}
 function resolveProxyPrefix() {
   const devtoolsConfig = useRuntimeConfig().public["nuxt-scripts-devtools"];
   return devtoolsConfig?.proxyPrefix || "/_scripts/p";
@@ -67,6 +74,7 @@ function observeNetworkRequests(payload, domains, onUpdate, scriptSrc) {
   const proxyPrefix = resolveProxyPrefix();
   const matchesScript = createDomainMatcher(domains, proxyPrefix, scriptSrc);
   const seen = /* @__PURE__ */ new Set();
+  const seenOrder = [];
   function entryKey(entry) {
     return `${entry.name}@${entry.startTime}`;
   }
@@ -77,7 +85,13 @@ function observeNetworkRequests(payload, domains, onUpdate, scriptSrc) {
     if (!matchesScript(entry))
       return false;
     seen.add(key);
-    payload.networkRequests.push(toNetworkRequest(entry, proxyPrefix));
+    seenOrder.push(key);
+    if (seenOrder.length > DEVTOOLS_NETWORK_REQUEST_LIMIT) {
+      const oldest = seenOrder.shift();
+      if (oldest)
+        seen.delete(oldest);
+    }
+    pushBounded(payload.networkRequests, toNetworkRequest(entry, proxyPrefix), DEVTOOLS_NETWORK_REQUEST_LIMIT);
     return true;
   }
   for (const entry of performance.getEntriesByType("resource"))
@@ -131,15 +145,35 @@ export function useScript(input, options) {
     });
     const nuxtApp2 = useNuxtApp();
     ensureScripts(nuxtApp2);
+    const existing = nuxtApp2.$scripts[src];
+    if (existing)
+      return existing;
     const status = ref("loaded");
     let disconnectObserver = () => {
     };
-    const stub = {
+    let stopAppUnmountHook = () => {
+    };
+    let cleaned2 = false;
+    let stub;
+    const cleanup = () => {
+      if (cleaned2)
+        return;
+      cleaned2 = true;
+      disconnectObserver();
+      stopAppUnmountHook();
+      if (nuxtApp2.$scripts[src] === stub)
+        delete nuxtApp2.$scripts[src];
+      if (import.meta.dev && import.meta.client && nuxtApp2._scripts?.[src]) {
+        delete nuxtApp2._scripts[src];
+        nuxtApp2.hooks.callHook("scripts:updated", { scripts: nuxtApp2._scripts });
+      }
+    };
+    stub = {
       id: src,
       status,
       load: () => Promise.resolve({}),
       remove: () => {
-        disconnectObserver();
+        cleanup();
         return false;
       },
       entry: void 0
@@ -147,6 +181,8 @@ export function useScript(input, options) {
     nuxtApp2.$scripts[src] = stub;
     if (import.meta.dev && import.meta.client) {
       let syncScripts = function() {
+        if (cleaned2)
+          return;
         nuxtApp2._scripts[src] = payload;
         nuxtApp2.hooks.callHook("scripts:updated", { scripts: nuxtApp2._scripts });
       };
@@ -168,6 +204,7 @@ export function useScript(input, options) {
       disconnectObserver = observeNetworkRequests(payload, domains, syncScripts, src);
       syncScripts();
     }
+    stopAppUnmountHook = nuxtApp2.hooks.hook("app:unmount", cleanup);
     return stub;
   }
   if (import.meta.dev && options.bundle === "unsupported") {
@@ -210,31 +247,75 @@ export function useScript(input, options) {
       options.trigger = onNuxtReady;
     }
   }
-  const instance = _useScript(input, options);
-  const _remove = instance.remove;
+  const unheadOptions = { ...options };
+  const instance = _useScript(input, unheadOptions);
+  delete unheadOptions.eventContext;
+  if (exists)
+    return instance;
+  markRaw(instance);
+  instance.toJSON = () => ({ id: instance.id, status: instance.status.value });
+  const cleanupFns = /* @__PURE__ */ new Set();
+  let cleaned = false;
+  const publicStatus = instance.status;
+  let stopStatusSync = () => {
+  };
+  const addCleanup = (cleanup) => {
+    if (cleaned)
+      cleanup();
+    else
+      cleanupFns.add(cleanup);
+  };
+  const cleanupInstance = () => {
+    if (cleaned)
+      return;
+    cleaned = true;
+    for (const cleanup of cleanupFns)
+      cleanup();
+    cleanupFns.clear();
+    if (nuxtApp.$scripts[id] === instance)
+      delete nuxtApp.$scripts[id];
+    if (import.meta.dev && import.meta.client && nuxtApp._scripts?.[instance.id]) {
+      delete nuxtApp._scripts[instance.id];
+      nuxtApp.hooks.callHook("scripts:updated", { scripts: nuxtApp._scripts });
+    }
+  };
+  let currentRemove = instance.remove;
+  let currentLoad = instance.load;
+  addCleanup(() => stopStatusSync());
   instance.remove = () => {
-    nuxtApp.$scripts[id] = void 0;
-    return _remove();
+    const result = currentRemove();
+    cleanupInstance();
+    return result;
   };
-  const _load = instance.load;
   instance.load = async () => {
     if (err) {
       return Promise.reject(err);
     }
-    return _load();
+    return currentLoad();
   };
   instance.reload = async () => {
-    instance.remove();
+    if (err)
+      return Promise.reject(err);
+    currentRemove();
     const reloadInput = typeof input === "string" ? { src: input, key: `${id}-${Date.now()}` } : { ...input, key: `${id}-${Date.now()}` };
-    const reloaded = _useScript(reloadInput, { ...options, trigger: "client" });
-    Object.assign(instance, {
-      status: reloaded.status,
-      entry: reloaded.entry
+    const reloadOptions = { ...options, trigger: "client" };
+    const reloaded = _useScript(reloadInput, reloadOptions);
+    delete reloadOptions.eventContext;
+    currentRemove = reloaded.remove;
+    currentLoad = reloaded.load;
+    stopStatusSync();
+    stopStatusSync = watch(reloaded.status, (status) => publicStatus.value = status, {
+      flush: "sync",
+      immediate: true
     });
-    return reloaded.load();
+    instance.entry = reloaded.entry;
+    return currentLoad();
   };
   nuxtApp.$scripts[id] = instance;
-  if (import.meta.client && debugEnabled) {
+  addCleanup(nuxtApp.hooks.hook("app:unmount", () => {
+    instance.remove();
+  }));
+  if (import.meta.client && debugEnabled && !exists) {
     const registryKey = options?.devtools?.registryKey;
     const src = input?.src;
     const trigger = options?.trigger;
@@ -252,7 +333,7 @@ export function useScript(input, options) {
       ...ctx,
       trigger: typeof trigger === "object" ? trigger instanceof Promise ? "promise" : JSON.stringify(trigger) : trigger
     });
-    headHooks.hook("script:updated", (entry) => {
+    addCleanup(headHooks.hook("script:updated", (entry) => {
       if (entry.script.id !== instance.id)
         return;
       const status = entry.script.status;
@@ -264,7 +345,7 @@ export function useScript(input, options) {
         payload.loadMs = Math.round(performance.now() - tLoadStart);
       const fn = status === "error" ? log.warn : log.debug;
       fn(`status: ${status}`, payload);
-    });
+    }));
     const _origLoad = instance.load;
     instance.load = () => {
       log.debug("load() called", ctx);
@@ -283,12 +364,11 @@ export function useScript(input, options) {
   }
   if (import.meta.dev && import.meta.client) {
     let syncScripts = function() {
+      if (cleaned)
+        return;
       nuxtApp._scripts[instance.id] = payload;
       nuxtApp.hooks.callHook("scripts:updated", { scripts: nuxtApp._scripts });
     };
-    if (exists) {
-      return instance;
-    }
     const payload = {
       ...options.devtools,
       src: input.src,
@@ -298,64 +378,61 @@ export function useScript(input, options) {
     };
     nuxtApp._scripts = nuxtApp._scripts || {};
     if (!nuxtApp._scripts[instance.id]) {
-      headHooks.hook("script:updated", (ctx) => {
+      addCleanup(headHooks.hook("script:updated", (ctx) => {
         if (ctx.script.id !== instance.id)
           return;
-        payload.events.push({
+        pushBounded(payload.events, {
           type: "status",
           status: ctx.script.status,
           at: Date.now()
-        });
+        }, DEVTOOLS_EVENT_LIMIT);
         payload.$script = instance;
         syncScripts();
-      });
-      headHooks.hook("script:instance-fn", (ctx) => {
+      }));
+      addCleanup(headHooks.hook("script:instance-fn", (ctx) => {
         if (ctx.script.id !== instance.id || String(ctx.fn).startsWith("__v_"))
           return;
-        payload.events.push({
+        pushBounded(payload.events, {
           type: "fn-call",
           fn: ctx.fn,
           at: Date.now()
-        });
+        }, DEVTOOLS_EVENT_LIMIT);
         syncScripts();
-      });
+      }));
       payload.$script = instance;
       if (err) {
-        payload.events.push({
+        pushBounded(payload.events, {
           type: "status",
           status: "validation-failed",
           args: err,
           at: Date.now()
-        });
+        }, DEVTOOLS_EVENT_LIMIT);
       }
-      payload.events.push({
+      pushBounded(payload.events, {
         type: "status",
         status: "awaitingLoad",
         trigger: options?.trigger,
         at: Date.now()
-      });
+      }, DEVTOOLS_EVENT_LIMIT);
       const scriptHostname = extractExternalHostname(input.src);
       const domains = /* @__PURE__ */ new Set([
         ...scriptHostname ? [scriptHostname] : [],
         ...options.devtools?.domains || []
       ]);
       let disconnectObserver = observeNetworkRequests(payload, domains, syncScripts, input.src);
-      const _origRemove = instance.remove;
+      addCleanup(() => disconnectObserver());
       const _origReload = instance.reload;
-      instance.remove = () => {
-        disconnectObserver();
-        return _origRemove();
-      };
       instance.reload = async () => {
         disconnectObserver();
-        const result = await _origReload();
-        disconnectObserver = observeNetworkRequests(payload, domains, syncScripts, input.src);
-        return result;
+        try {
+          return await _origReload();
+        } finally {
+          if (!cleaned)
+            disconnectObserver = observeNetworkRequests(payload, domains, syncScripts, input.src);
+        }
       };
       syncScripts();
     }
   }
-  markRaw(instance);
-  instance.toJSON = () => ({ id: instance.id, status: instance.status.value });
   return instance;
 }

package/dist/runtime/composables/useScriptEventPage.js

@@ -11,30 +11,46 @@ export function useScriptEventPage(onChange) {
   if (import.meta.server)
     return payload;
   let lastPayload = { path: "", title: "" };
-  let stopDomWatcher = () => {
-  };
+  let disposed = false;
+  const pendingCleanups = /* @__PURE__ */ new Set();
   const stopPageFinishHook = nuxt.hooks.hook("page:finish", () => {
-    Promise.race([
-      // possibly no head update is needed
-      new Promise((resolve) => setTimeout(resolve, 100)),
-      new Promise((resolve) => {
-        stopDomWatcher = head.hooks.hook("dom:rendered", () => resolve());
-      })
-    ]).finally(stopDomWatcher).then(() => {
-      payload.value = {
-        path: route.fullPath,
-        title: document.title
-      };
-      if (lastPayload.path !== payload.value.path || lastPayload.title !== payload.value.title) {
-        if (onChange) {
-          onChange(payload.value);
+    let settled = false;
+    let stopDomWatcher = () => {
+    };
+    const timer = setTimeout(finish, 100);
+    function cleanup() {
+      clearTimeout(timer);
+      stopDomWatcher();
+      pendingCleanups.delete(cleanup);
+    }
+    function finish() {
+      if (settled)
+        return;
+      settled = true;
+      cleanup();
+      queueMicrotask(() => {
+        if (disposed)
+          return;
+        payload.value = {
+          path: route.fullPath,
+          title: document.title
+        };
+        if (lastPayload.path !== payload.value.path || lastPayload.title !== payload.value.title) {
+          if (onChange) {
+            onChange(payload.value);
+          }
+          lastPayload = payload.value;
         }
-        lastPayload = payload.value;
-      }
-    });
+      });
+    }
+    pendingCleanups.add(cleanup);
+    stopDomWatcher = head.hooks.hook("dom:rendered", finish);
   });
   onScopeDispose(() => {
-    stopDomWatcher();
+    disposed = true;
+    for (const cleanup of pendingCleanups)
+      cleanup();
+    pendingCleanups.clear();
     stopPageFinishHook();
   });
   return payload;

package/dist/runtime/composables/useScriptTriggerIdleTimeout.js

@@ -8,15 +8,29 @@ export function useScriptTriggerIdleTimeout(options) {
   }
   const { timeout } = options;
   return new Promise((resolve) => {
+    let disposed = false;
+    let settled = false;
+    let stopTimer = () => {
+    };
+    const settle = (value) => {
+      if (settled)
+        return;
+      settled = true;
+      stopTimer();
+      resolve(value);
+    };
+    tryOnScopeDispose(() => {
+      disposed = true;
+      settle(false);
+    });
     onNuxtReady(() => {
+      if (disposed)
+        return;
       const { start, stop } = useTimeoutFn(() => {
-        resolve(true);
+        settle(true);
       }, timeout, { immediate: false });
+      stopTimer = stop;
       start();
-      tryOnScopeDispose(() => {
-        stop();
-        resolve(false);
-      });
     });
   });
 }

package/dist/runtime/composables/useScriptTriggerInteraction.js

@@ -8,27 +8,40 @@ export function useScriptTriggerInteraction(options) {
   }
   const { events, target = document.documentElement } = options;
   return new Promise((resolve) => {
+    let disposed = false;
+    let settled = false;
+    const cleanupFns = [];
+    const cleanup = () => {
+      cleanupFns.splice(0).forEach((fn) => fn());
+    };
+    const settle = (value) => {
+      if (settled)
+        return;
+      settled = true;
+      cleanup();
+      resolve(value);
+    };
+    tryOnScopeDispose(() => {
+      disposed = true;
+      settle(false);
+    });
     onNuxtReady(() => {
+      if (disposed)
+        return;
       if (!target) {
-        resolve(false);
+        settle(false);
         return;
       }
-      const cleanupFns = [];
       events.forEach((event) => {
-        const cleanup = useEventListener(
+        const cleanup2 = useEventListener(
           target,
           event,
           () => {
-            cleanupFns.forEach((fn) => fn());
-            resolve(true);
+            settle(true);
           },
           { once: true, passive: true }
         );
-        cleanupFns.push(cleanup);
-      });
-      tryOnScopeDispose(() => {
-        cleanupFns.forEach((fn) => fn());
-        resolve(false);
+        cleanupFns.push(cleanup2);
       });
     });
   });

package/dist/runtime/composables/useScriptTriggerServiceWorker.js

@@ -9,31 +9,34 @@ export function useScriptTriggerServiceWorker(options) {
       resolve(true);
       return;
     }
-    let resolved = false;
-    const done = () => {
-      if (resolved)
+    let settled = false;
+    let timer;
+    const cleanup = () => {
+      navigator.serviceWorker.removeEventListener("controllerchange", onControllerChange);
+      if (timer !== void 0) {
+        clearTimeout(timer);
+        timer = void 0;
+      }
+    };
+    const done = (value) => {
+      if (settled)
         return;
-      resolved = true;
-      resolve(true);
+      settled = true;
+      cleanup();
+      resolve(value);
     };
+    function onControllerChange() {
+      done(true);
+    }
+    tryOnScopeDispose(() => done(false));
     if (navigator.serviceWorker.controller) {
-      done();
+      done(true);
       return;
     }
-    const onControllerChange = () => {
-      navigator.serviceWorker.removeEventListener("controllerchange", onControllerChange);
-      done();
-    };
     navigator.serviceWorker.addEventListener("controllerchange", onControllerChange);
-    const timer = setTimeout(() => {
-      navigator.serviceWorker.removeEventListener("controllerchange", onControllerChange);
+    timer = setTimeout(() => {
       console.warn("[nuxt-scripts] Service worker not controlling after timeout, loading scripts anyway");
-      done();
+      done(true);
     }, timeout);
-    tryOnScopeDispose(() => {
-      navigator.serviceWorker.removeEventListener("controllerchange", onControllerChange);
-      clearTimeout(timer);
-      resolve(false);
-    });
   });
 }

package/dist/runtime/devtools-standalone-bridge.client.js

@@ -5,15 +5,23 @@ export default defineNuxtPlugin(() => {
   const version = config.public["nuxt-scripts"]?.version;
   const firstPartyData = config.public["nuxt-scripts-devtools"] || null;
   let lastScripts = {};
+  let disposed = false;
+  let requestController;
   function pushState(scripts) {
+    if (disposed)
+      return;
     if (scripts)
       lastScripts = scripts;
     const route = nuxtApp.$router?.currentRoute?.value;
     if (route?.path?.startsWith("/__nuxt-scripts"))
       return;
+    requestController?.abort();
+    const controller = new AbortController();
+    requestController = controller;
     fetch("/__nuxt-scripts-api/state", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
+      signal: controller.signal,
       body: JSON.stringify({
         scripts: serializeScripts(lastScripts),
         version,
@@ -21,16 +29,33 @@ export default defineNuxtPlugin(() => {
         route: route ? { path: route.path, fullPath: route.fullPath, query: route.query } : null
       })
     }).catch((error) => {
-      if (import.meta.dev)
+      if (import.meta.dev && error?.name !== "AbortError")
         console.warn("[nuxt-scripts] Failed to sync standalone devtools state:", error);
+    }).finally(() => {
+      if (requestController === controller)
+        requestController = void 0;
     });
   }
-  nuxtApp.hooks.hook("scripts:updated", (ctx) => {
+  const stopScriptsHook = nuxtApp.hooks.hook("scripts:updated", (ctx) => {
     pushState(ctx.scripts);
   });
-  nuxtApp.$router?.afterEach(() => {
+  const stopRouterHook = nuxtApp.$router?.afterEach(() => {
     pushState();
   });
+  let stopUnmountHook = () => {
+  };
+  const cleanup = () => {
+    if (disposed)
+      return;
+    disposed = true;
+    requestController?.abort();
+    requestController = void 0;
+    lastScripts = {};
+    stopScriptsHook();
+    stopRouterHook?.();
+    stopUnmountHook();
+  };
+  stopUnmountHook = nuxtApp.hooks.hook("app:unmount", cleanup);
   pushState(nuxtApp._scripts || {});
 });
 function serializeScripts(scripts) {

package/dist/runtime/npm-script-proxy.d.ts

@@ -0,0 +1,7 @@
+type ScriptApi = Record<string | symbol, any>;
+/**
+ * Keeps Unhead's recording proxy while an SDK loads, then forwards calls to
+ * the resolved SDK without discarding their return values.
+ */
+export declare function createNpmScriptProxy<T extends ScriptApi>(fallback: T, getApi: () => T | undefined): T;
+export {};

package/dist/runtime/npm-script-proxy.js

@@ -0,0 +1,46 @@
+function walk(root, path) {
+  let owner;
+  let value = root;
+  for (const key of path) {
+    if (value == null)
+      return { owner: void 0, value: void 0 };
+    owner = value;
+    value = Reflect.get(value, key, value);
+  }
+  return { owner, value };
+}
+export function createNpmScriptProxy(fallback, getApi) {
+  function node(path, fallbackValue) {
+    const children = /* @__PURE__ */ new Map();
+    return new Proxy(() => {
+    }, {
+      get(_, property) {
+        const api = getApi();
+        let value;
+        if (api) {
+          const current = walk(api, path).value;
+          value = current == null ? void 0 : Reflect.get(current, property, current);
+        } else {
+          value = Reflect.get(fallbackValue, property, fallbackValue);
+        }
+        if (typeof value !== "function")
+          return value;
+        let child = children.get(property);
+        if (!child) {
+          child = node([...path, property], value);
+          children.set(property, child);
+        }
+        return child;
+      },
+      apply(_, thisArg, args) {
+        const api = getApi();
+        if (api) {
+          const { owner, value } = walk(api, path);
+          return Reflect.apply(value, owner, args);
+        }
+        return Reflect.apply(fallbackValue, thisArg, args);
+      }
+    });
+  }
+  return node([], fallback);
+}

package/dist/runtime/npm-script-stub.js

@@ -3,7 +3,6 @@ import { logger } from "./logger.js";
 export function createNpmScriptStub(options) {
   const status = ref("awaitingLoad");
   const loadedCallbacks = [];
-  let initPromise = null;
   let hasInitialized = false;
   const proxy = options.use?.() || {};
   const stub = {
@@ -17,12 +16,11 @@ export function createNpmScriptStub(options) {
       try {
         if (options.clientInit) {
           console.log(`[NpmScriptStub] Initializing ${options.key}...`);
-          initPromise = Promise.resolve(options.clientInit());
-          await initPromise;
+          await options.clientInit();
           console.log(`[NpmScriptStub] ${options.key} initialized successfully`);
         }
         status.value = "loaded";
-        loadedCallbacks.forEach((cb) => {
+        loadedCallbacks.splice(0).forEach((cb) => {
           try {
             cb(proxy);
           } catch (error) {
@@ -30,6 +28,7 @@ export function createNpmScriptStub(options) {
           }
         });
       } catch (error) {
+        loadedCallbacks.splice(0);
         logger.error(`[NpmScriptStub] Failed to initialize ${options.key}:`, error);
         status.value = "error";
       }
@@ -37,7 +36,7 @@ export function createNpmScriptStub(options) {
     onLoaded(callback) {
       if (status.value === "loaded") {
         callback(proxy);
-      } else {
+      } else if (status.value !== "error") {
         loadedCallbacks.push(callback);
       }
     },