@nuxt/scripts 0.5.1 → 0.6.0

package/dist/module.mjs

@@ -1,8 +1,8 @@
-import { useNuxt, useLogger, addDevServerHandler, createResolver, addTemplate, tryUseNuxt, logger as logger$1, addImports, defineNuxtModule, addImportsDir, addComponentsDir, addPluginTemplate, addBuildPlugin, hasNuxtModule } from '@nuxt/kit';
+import { useNuxt, useLogger, addDevServerHandler, createResolver, addTemplate, tryUseNuxt, logger as logger$1, addImports, defineNuxtModule, addBuildPlugin, addImportsDir, addComponentsDir, addPluginTemplate, hasNuxtModule } from '@nuxt/kit';
 import { resolvePackageJSON, readPackageJSON } from 'pkg-types';
 import { lt } from 'semver';
 import { resolvePath } from 'mlly';
-import { join, relative } from 'pathe';
+import { join, relative, extname } from 'pathe';
 import { existsSync } from 'node:fs';
 import { pathToFileURL } from 'node:url';
 import { createUnplugin } from 'unplugin';
@@ -21,9 +21,12 @@ import { isCI, provider } from 'std-env';
 import { registry } from './registry.mjs';
 import { GooglaAnalyticsData, GoogleAnalytics, GoogleTagManagerData, GoogleTagManager } from 'third-party-capital';
 import { genTypeImport, genImport } from 'knitwork';
+import { parse } from 'acorn';
+import { transform } from 'esbuild';
 
 const DEVTOOLS_UI_ROUTE = "/__nuxt-scripts";
-const DEVTOOLS_UI_LOCAL_PORT = 3030;
+const DEVTOOLS_UI_LOCAL_PORT = 3300;
+
 function setupDevToolsUI(options, resolve, nuxt = useNuxt()) {
   const clientPath = resolve("./client");
   const isProductionBuild = existsSync(clientPath);
@@ -87,7 +90,9 @@ function NuxtScriptBundleTransformer(options) {
         walk(ast, {
           enter(_node) {
             const calleeName = _node.callee?.name;
-            const isValidCallee = calleeName === "useScript" || calleeName?.startsWith("useScript") && /^[A-Z]$/.test(calleeName?.charAt(9));
+            if (!calleeName)
+              return;
+            const isValidCallee = calleeName === "useScript" || calleeName?.startsWith("useScript") && /^[A-Z]$/.test(calleeName?.charAt(9)) && !calleeName.startsWith("useScriptTrigger") && !calleeName.startsWith("useScriptEvent");
             if (_node.type === "CallExpression" && _node.callee.type === "Identifier" && isValidCallee) {
               const fnName = _node.callee?.name;
               const node = _node;
@@ -357,6 +362,8 @@ function installNuxtModule(name, options) {
   }, { rootDir: nuxt.options.rootDir, searchPaths: nuxt.options.modulesDir, ...options });
 }
 
+const HEAD_VAR = "__head";
+const INJECTHEAD_CODE = `const ${HEAD_VAR} =  injectHead()`;
 function getTpcScriptContent(input) {
   const nuxt = useNuxt();
   if (!input.data.scripts)
@@ -364,6 +371,7 @@ function getTpcScriptContent(input) {
   const mainScript = input.data.scripts?.find(({ key }) => key === input.tpcKey);
   if (!mainScript)
     throw new Error(`no main script found for ${input.tpcKey} in third-party-capital`);
+  const mainScriptOptions = getScriptInputOption(mainScript);
   const imports = /* @__PURE__ */ new Set([
     "import { withQuery } from 'ufo'",
     "import { useRegistryScript } from '#nuxt-scripts-utils'",
@@ -379,37 +387,26 @@ function getTpcScriptContent(input) {
     imports.add(genImport("#nuxt-scripts-validator", ["object", "any"]));
     chunks.push(`const OptionSchema = object({${mainScript.params?.map((p) => `${p}:  any()`)}})`);
   }
-  if (input.augmentWindowTypes) {
-    chunks.push(`
+  chunks.push(`
 declare global {
   interface Window extends ${input.tpcTypeImport} {}
 }`);
-  }
   const clientInitCode = [];
-  const runtimeHead = {
-    script: [],
-    link: input.data.stylesheets?.map((s) => ({ ref: "stylesheet", href: s })) || []
-  };
   if (input.data.stylesheets) {
-    runtimeHead.link.push(...input.data.stylesheets.map((s) => ({ href: s, ref: "stylesheet" })));
+    if (!functionBody.includes(INJECTHEAD_CODE)) {
+      functionBody.unshift(INJECTHEAD_CODE);
+    }
+    functionBody.push(`${HEAD_VAR}.push({link: ${JSON.stringify(input.data.stylesheets.map((s) => ({ ref: "stylesheet", href: s })))}})`);
   }
   for (const script of input.data.scripts) {
     if ("code" in script)
       clientInitCode.push(replaceTokenToRuntime(script.code));
     if (script === mainScript)
       continue;
-    if ("url" in script && script.url) {
-      if (!runtimeHead.script)
-        runtimeHead.script = [];
-      runtimeHead.script.push({
-        src: script.url,
-        async: true
-      });
+    if ("url" in script) {
+      functionBody.push(`${HEAD_VAR}.push({scripts:{ async: true, src: ${script.url} }},${JSON.stringify(getScriptInputOption(script))})`);
     }
   }
-  if (runtimeHead.script.length || runtimeHead.link.length) {
-    functionBody.push(`useHead(${JSON.stringify(runtimeHead)})`);
-  }
   chunks.push(`export type Input = RegistryScriptInput${hasParams ? "<typeof OptionSchema>" : ""}`);
   chunks.push(`
 export function ${input.scriptFunctionName}<T extends ${input.tpcTypeImport}>(_options?: Input) {
@@ -421,7 +418,8 @@ ${functionBody.join("\n")}
         ${nuxt.options.dev ? "schema: OptionSchema," : ""}
         scriptOptions: {
             use: ${input.use.toString()},
-            stub: import.meta.client ? undefined :  ${input.stub.toString()}
+            stub: import.meta.client ? undefined :  ${input.stub.toString()},
+            ${mainScriptOptions ? `...(${JSON.stringify(mainScriptOptions)})` : ""}
         },
         ${clientInitCode.length ? `clientInit: import.meta.server ? undefined : () => {${clientInitCode.join("\n")}},` : ""}
     }), _options)
@@ -432,6 +430,17 @@ ${functionBody.join("\n")}
 function replaceTokenToRuntime(code) {
   return code.split(";").map((c) => c.replaceAll(/'?\{\{(.*?)\}\}'?/g, "options.$1")).join(";");
 }
+function getScriptInputOption(script) {
+  if (script.location === "body") {
+    if (script.action === "append") {
+      return { tagPosition: "bodyClose" };
+    }
+    return { tagPosition: "bodyOpen" };
+  }
+  if (script.action === "append") {
+    return { tagPriority: 1 };
+  }
+}
 
 function googleAnalitycsRegistry() {
   const nuxt = useNuxt();
@@ -448,11 +457,11 @@ function googleAnalitycsRegistry() {
           return fn === "dataLayer" ? [] : void 0;
         },
         tpcKey: "gtag",
-        tpcTypeImport: "GoogleAnalyticsApi",
-        augmentWindowTypes: true
+        tpcTypeImport: "GoogleAnalyticsApi"
       });
     },
-    filename: "nuxt-scripts/tpc/google-analytics.ts"
+    filename: "nuxt-scripts/tpc/google-analytics.ts",
+    write: true
   });
   addImports({
     from: dst,
@@ -493,11 +502,11 @@ function googleTagManagerRegistry() {
           return fn === "dataLayer" ? [] : void 0;
         },
         tpcKey: "gtm",
-        tpcTypeImport: "GoogleTagManagerApi",
-        augmentWindowTypes: true
+        tpcTypeImport: "GoogleTagManagerApi"
       });
     },
-    filename: "nuxt-scripts/tpc/google-tag-manager.ts"
+    filename: "nuxt-scripts/tpc/google-tag-manager.ts",
+    write: true
   });
   addImports({
     from: dst,
@@ -524,6 +533,142 @@ function googleTagManagerRegistry() {
   });
 }
 
+const SCRIPT_RE = /<script[^>]*>([\s\S]*)<\/script>/;
+const checkScripts = () => createUnplugin(() => {
+  return {
+    name: "nuxt-scripts:check-scripts",
+    enforce: "pre",
+    async transform(code, id) {
+      if (!code.includes("useScript"))
+        return;
+      const extName = extname(id);
+      if (extName === ".vue") {
+        const scriptAst = await extractScriptContentAst(code);
+        if (scriptAst) {
+          analyzeNodes(id, scriptAst);
+        }
+      } else if (extName === ".ts" || extName === ".js") {
+        if (!code.includes("defineComponent"))
+          return;
+        let result = code;
+        if (extName === ".ts") {
+          result = (await transform(code, { loader: "ts" })).code;
+        }
+        const setupFunction = extractSetupFunction(result);
+        if (setupFunction) {
+          analyzeNodes(id, setupFunction);
+        }
+      }
+      return void 0;
+    }
+  };
+});
+function analyzeNodes(id, nodes) {
+  let name;
+  for (const node of nodes) {
+    if (name) {
+      if (isAwaitingLoad(name, node)) {
+        throw new Error("Awaiting load should not be used at top level of a composable or <script>");
+      }
+    } else {
+      if (node.type === "VariableDeclaration") {
+        name = findScriptVar(node.declarations[0]);
+      }
+    }
+  }
+}
+function findScriptVar(scriptDeclaration) {
+  if (scriptDeclaration.id.type === "ObjectPattern") {
+    for (const property of scriptDeclaration.id.properties) {
+      if (property.type === "Property" && property.key.type === "Identifier" && property.key.name === "$script" && property.value.type === "Identifier") {
+        return property.value.name;
+      }
+    }
+  } else if (scriptDeclaration.id.type === "Identifier") {
+    return scriptDeclaration.id.name;
+  }
+}
+function isAwaitingLoad(name, node) {
+  if (node.type === "ExpressionStatement" && node.expression.type === "AwaitExpression") {
+    const arg = node.expression.argument;
+    if (arg.type === "CallExpression") {
+      const callee = arg.callee;
+      if (callee.type === "MemberExpression" && callee.object.type === "Identifier" && callee.object.name === name) {
+        if (callee.property.type === "Identifier" && callee.property.name === "load") {
+          return true;
+        }
+      }
+    }
+  }
+}
+async function extractScriptContentAst(code) {
+  const scriptCode = code.match(SCRIPT_RE);
+  return scriptCode ? parse((await transform(scriptCode[1], { loader: "ts" })).code, {
+    ecmaVersion: "latest",
+    sourceType: "module"
+  }).body : void 0;
+}
+function extractSetupFunction(code) {
+  const ast = parse(code, {
+    ecmaVersion: "latest",
+    sourceType: "module"
+  });
+  const defaultExport = ast.body.find((node) => node.type === "ExportDefaultDeclaration");
+  if (defaultExport && defaultExport.declaration.type === "CallExpression" && defaultExport.declaration.callee.type === "Identifier" && defaultExport.declaration.callee.name === "defineComponent") {
+    const arg = defaultExport.declaration.arguments[0];
+    if (arg && arg.type === "ObjectExpression") {
+      const setupProperty = arg.properties.find((prop) => prop.type === "Property" && prop.key.type === "Identifier" && prop.key.name === "setup");
+      if (setupProperty) {
+        const setupValue = setupProperty.value;
+        if (setupValue.type === "FunctionExpression") {
+          return setupValue.body.body;
+        }
+      }
+    }
+  }
+}
+
+function templatePlugin(config, registry) {
+  if (Array.isArray(config.globals)) {
+    config.globals = Object.fromEntries(config.globals.map((i) => [hash(i), i]));
+    logger.warn("The `globals` array option is deprecated, please convert to an object.");
+  }
+  const imports = ["useScript", "defineNuxtPlugin"];
+  const inits = [];
+  for (const [k, c] of Object.entries(config.registry || {})) {
+    const importDefinition = registry.find((i) => i.import.name === `useScript${k.substring(0, 1).toUpperCase() + k.substring(1)}`);
+    if (importDefinition) {
+      imports.unshift(importDefinition.import.name);
+      const args = (typeof c !== "object" ? {} : c) || {};
+      if (c === "mock")
+        args.scriptOptions = { trigger: "manual", skipValidation: true };
+      inits.push(`const ${k} = ${importDefinition.import.name}(${JSON.stringify(args)})`);
+    }
+  }
+  for (const [k, c] of Object.entries(config.globals || {})) {
+    if (typeof c === "string") {
+      inits.push(`const ${k} = useScript(${JSON.stringify({ src: c, key: k })}, { use: () => ({ ${k}: window.${k} }) })`);
+    } else if (Array.isArray(c) && c.length === 2) {
+      inits.push(`const ${k} = useScript(${JSON.stringify({ key: k, ...typeof c[0] === "string" ? { src: c[0] } : c[0] })}, { ...${JSON.stringify(c[1])}, use: () => ({ ${k}: window.${k} } }) )`);
+    } else {
+      inits.push(`const ${k} = useScript(${JSON.stringify({ key: k, ...c })}, { use: () => ({ ${k}: window.${k} }) })`);
+    }
+  }
+  return [
+    `import { ${imports.join(", ")} } from '#imports'`,
+    "",
+    `export default defineNuxtPlugin({`,
+    `  name: "scripts:init",`,
+    `  env: { islands: false },`,
+    `  parallel: true,`,
+    `  setup() {`,
+    ...inits.map((i) => `    ${i}`),
+    `    return { provide: { $scripts: { ${[...Object.keys(config.globals || {}), ...Object.keys(config.registry || {})].join(", ")} } } }`,
+    `  }`,
+    `})`
+  ].join("\n");
+}
+
 const module = defineNuxtModule({
   meta: {
     name: "@nuxt/scripts",
@@ -543,6 +688,10 @@ const module = defineNuxtModule({
   async setup(config, nuxt) {
     const { resolve } = createResolver(import.meta.url);
     const { version, name } = await readPackageJSON(resolve("../package.json"));
+    if (!config.enabled) {
+      logger.debug("The module is disabled, skipping setup.");
+      return;
+    }
     const unheadPath = await resolvePath("@unhead/vue").catch(() => void 0);
     if (unheadPath) {
       const { version: unheadVersion } = await readPackageJSON(join(unheadPath, "package.json"));
@@ -551,15 +700,16 @@ const module = defineNuxtModule({
         return;
       }
     }
-    if (!config.enabled) {
-      logger.debug("The module is disabled, skipping setup.");
-      return;
-    }
+    addBuildPlugin(checkScripts());
     nuxt.options.alias["#nuxt-scripts-validator"] = resolve(`./runtime/validation/${nuxt.options.dev || nuxt.options._prepare ? "valibot" : "mock"}`);
     nuxt.options.alias["#nuxt-scripts"] = resolve("./runtime/types");
     nuxt.options.alias["#nuxt-scripts-utils"] = resolve("./runtime/utils");
     nuxt.options.runtimeConfig["nuxt-scripts"] = { version };
-    nuxt.options.runtimeConfig.public["nuxt-scripts"] = { defaultScriptOptions: config.defaultScriptOptions };
+    nuxt.options.runtimeConfig.public["nuxt-scripts"] = {
+      // expose for devtools
+      version: nuxt.options.dev ? version : void 0,
+      defaultScriptOptions: config.defaultScriptOptions
+    };
     addImportsDir([
       resolve("./runtime/composables"),
       // auto-imports aren't working without this for some reason
@@ -575,18 +725,19 @@ const module = defineNuxtModule({
     nuxt.hooks.hook("modules:done", async () => {
       const registryScripts = [...scripts];
       await nuxt.hooks.callHook("scripts:registry", registryScripts);
-      const withComposables = registryScripts.filter((i) => !!i.import?.name);
-      addImports(withComposables.map((i) => {
+      const registryScriptsWithImport = registryScripts.filter((i) => !!i.import?.name);
+      addImports(registryScriptsWithImport.map((i) => {
         return {
           priority: -1,
           ...i.import
         };
       }));
-      const newScripts = withComposables.filter((i) => !scripts.some((r) => r.import?.name === i.import.name));
+      const newScripts = registryScriptsWithImport.filter((i) => !scripts.some((r) => r.import?.name === i.import.name));
       extendTypes(name, async ({ typesPath }) => {
         let types = `
 declare module '#app' {
   interface NuxtApp {
+    $scripts: Record<${[...Object.keys(config.globals || {}), ...Object.keys(config.registry || {})].map((k) => `'${k}'`).concat(["string"]).join(" | ")}, Pick<(import('#nuxt-scripts').NuxtAppScript), '$script'> & Record<string, any>>
     _scripts: Record<string, (import('#nuxt-scripts').NuxtAppScript)>
   }
   interface RuntimeNuxtHooks {
@@ -610,30 +761,11 @@ ${newScripts.map((i) => {
         }
         return types;
       });
-      if (config.globals?.length || Object.keys(config.registry || {}).length) {
+      if (Object.keys(config.globals || {}).length || Object.keys(config.registry || {}).length) {
         addPluginTemplate({
           filename: `modules/${name.replace("/", "-")}.mjs`,
           getContents() {
-            const imports = ["useScript", "defineNuxtPlugin"];
-            const inits = [];
-            for (const [k, c] of Object.entries(config.registry || {})) {
-              const importDefinition = withComposables.find((i) => i.import.name === `useScript${k.substring(0, 1).toUpperCase() + k.substring(1)}`);
-              if (importDefinition) {
-                imports.unshift(importDefinition.import.name);
-                const args = (typeof c !== "object" ? {} : c) || {};
-                if (c === "mock")
-                  args.scriptOptions = { trigger: "manual", skipValidation: true };
-                inits.push(`${importDefinition.import.name}(${JSON.stringify(args)});`);
-              }
-            }
-            return `import { ${imports.join(", ")} } from '#imports'
-export default defineNuxtPlugin({
-  name: "${name}:init",
-  setup() {
-${(config.globals || []).map((g) => !Array.isArray(g) ? `    useScript("${g.toString()}")` : g.length === 2 ? `    useScript(${JSON.stringify(g[0])}, ${JSON.stringify(g[1])} })` : `    useScript(${JSON.stringify(g[0])})`).join("\n")}
-    ${inits.join("\n    ")}
-  }
-})`;
+            return templatePlugin(config, registryScriptsWithImport);
           }
         });
       }
@@ -641,7 +773,7 @@ ${(config.globals || []).map((g) => !Array.isArray(g) ? `    useScript("${g.toSt
       const { normalizeScriptData } = setupPublicAssetStrategy(config.assets);
       const moduleInstallPromises = /* @__PURE__ */ new Map();
       addBuildPlugin(NuxtScriptBundleTransformer({
-        scripts: withComposables,
+        scripts: registryScriptsWithImport,
         defaultBundle: config.defaultScriptOptions?.bundle,
         moduleDetected(module) {
           if (nuxt.options.dev && module !== "@nuxt/scripts" && !moduleInstallPromises.has(module) && !hasNuxtModule(module))

package/dist/registry.mjs

@@ -110,8 +110,8 @@ const registry = (resolve) => {
       scriptBundling(options) {
         return joinURL(`https://widget.intercom.io/widget`, options?.app_id || "");
       },
-      logo: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8.968 8.972" width="64" height="64"><path d="M7.853 0h-6.73C.496 0-.002.498-.002 1.117v6.73a1.12 1.12 0 0 0 1.126 1.126h6.73c.618 0 1.117-.498 1.117-1.117v-6.73A1.119 1.119 0 0 0 7.853 0zM5.68 1.645c0-.17.13-.3.3-.3s.3.13.3.3v3.998c0 .17-.13.3-.3.3s-.3-.13-.3-.3zm-1.495-.15c0-.17.13-.3.3-.3s.3.13.3.3v4.336c0 .17-.13.3-.3.3s-.3-.13-.3-.3zm-1.495.15c0-.17.13-.3.3-.3s.3.13.3.3v3.998c0 .17-.13.3-.3.3s-.3-.13-.3-.3zm-1.495.598c0-.17.13-.3.3-.3s.3.13.3.3v2.692c0 .17-.13.3-.3.3s-.3-.13-.3-.3zm6.48 4.566c-.05.04-1.156.967-3.2.967s-3.14-.927-3.2-.967a.29.29 0 0 1-.03-.419.29.29 0 0 1 .419-.03c.02 0 1.007.817 2.8.817 1.814 0 2.79-.817 2.79-.827.13-.1.32-.1.42.03a.3.3 0 0 1-.02.429zm.1-1.874c0 .17-.13.3-.3.3s-.3-.13-.3-.3V2.243c0-.17.13-.3.3-.3s.3.13.3.3z" fill="#1f8ded"/></svg>`,
-      category: "marketing",
+      logo: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8.968 8.972"><path d="M7.853 0h-6.73C.496 0-.002.498-.002 1.117v6.73a1.12 1.12 0 0 0 1.126 1.126h6.73c.618 0 1.117-.498 1.117-1.117v-6.73A1.119 1.119 0 0 0 7.853 0zM5.68 1.645c0-.17.13-.3.3-.3s.3.13.3.3v3.998c0 .17-.13.3-.3.3s-.3-.13-.3-.3zm-1.495-.15c0-.17.13-.3.3-.3s.3.13.3.3v4.336c0 .17-.13.3-.3.3s-.3-.13-.3-.3zm-1.495.15c0-.17.13-.3.3-.3s.3.13.3.3v3.998c0 .17-.13.3-.3.3s-.3-.13-.3-.3zm-1.495.598c0-.17.13-.3.3-.3s.3.13.3.3v2.692c0 .17-.13.3-.3.3s-.3-.13-.3-.3zm6.48 4.566c-.05.04-1.156.967-3.2.967s-3.14-.927-3.2-.967a.29.29 0 0 1-.03-.419.29.29 0 0 1 .419-.03c.02 0 1.007.817 2.8.817 1.814 0 2.79-.817 2.79-.827.13-.1.32-.1.42.03a.3.3 0 0 1-.02.429zm.1-1.874c0 .17-.13.3-.3.3s-.3-.13-.3-.3V2.243c0-.17.13-.3.3-.3s.3.13.3.3z" fill="#1f8ded"/></svg>`,
+      category: "support",
       import: {
         name: "useScriptIntercom",
         from: resolve("./runtime/registry/intercom")
@@ -193,6 +193,19 @@ const registry = (resolve) => {
         from: resolve("./runtime/registry/google-maps")
       }
     },
+    // chat
+    {
+      label: "Crisp",
+      category: "support",
+      logo: {
+        light: `<svg height="30" width="35" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="a" height="138.7%" width="131.4%" x="-15.7%" y="-15.1%"><feMorphology in="SourceAlpha" operator="dilate" radius="1" result="shadowSpreadOuter1"/><feOffset dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0"/></filter><path id="b" d="M14.23 20.46l-9.65 1.1L3 5.12 30.07 2l1.58 16.46-9.37 1.07-3.5 5.72-4.55-4.8z"/></defs><g fill="none" fill-rule="evenodd"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="#1972f5" stroke="#1972f5" stroke-width="2" xlink:href="#b"/></g></svg>`,
+        dark: `<svg height="30" width="35" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="a" height="138.7%" width="131.4%" x="-15.7%" y="-15.1%"><feMorphology in="SourceAlpha" operator="dilate" radius="1" result="shadowSpreadOuter1"/><feOffset dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0"/></filter><path id="b" d="M14.23 20.46l-9.65 1.1L3 5.12 30.07 2l1.58 16.46-9.37 1.07-3.5 5.72-4.55-4.8z"/></defs><g fill="none" fill-rule="evenodd"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="#fff" stroke="#fff" stroke-width="2" xlink:href="#b"/></g></svg>`
+      },
+      import: {
+        name: "useScriptCrisp",
+        from: resolve("./runtime/registry/crisp")
+      }
+    },
     // other
     {
       label: "NPM",

package/dist/runtime/components/ScriptCarbonAds.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { withQuery } from 'ufo'
-import { onBeforeUnmount, onMounted, ref, useElementScriptTrigger } from '#imports'
+import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
+import { onBeforeUnmount, onMounted, ref } from '#imports'
 import type { ElementScriptTrigger } from '#nuxt-scripts'
 
 const props = defineProps<{
@@ -14,7 +15,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   error: [error: string | Event]
-  load: []
+  ready: [HTMLScriptElement]
 }>()
 
 const attrId = `_carbonads_js`
@@ -40,7 +41,7 @@ function loadCarbon() {
   }
   script.onload = () => {
     status.value = 'loaded'
-    emit('load')
+    emit('ready', script)
   }
   carbonadsEl.value.appendChild(script)
 }
@@ -50,7 +51,7 @@ onMounted(() => {
     loadCarbon()
   }
   else {
-    useElementScriptTrigger({ trigger: props.trigger, el: carbonadsEl })
+    useScriptTriggerElement({ trigger: props.trigger, el: carbonadsEl })
   }
 })
 

package/dist/runtime/components/ScriptCrisp.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
+import { useScriptCrisp } from '../registry/crisp'
+import { ref, onMounted, onBeforeUnmount, watch } from '#imports'
+import type { ElementScriptTrigger } from '#nuxt-scripts'
+
+const props = withDefaults(defineProps<{
+  /**
+   * Defines the trigger event to load the script.
+   */
+  trigger?: ElementScriptTrigger
+  id: string
+  runtimeConfig?: {
+    locale: string
+  }
+  tokenId?: string
+  cookieDomain?: string
+  cookieExpiry?: number
+}>(), {
+  trigger: 'click',
+})
+
+const emits = defineEmits<{
+  // our emit
+  ready: [e: ReturnType<typeof useScriptCrisp>]
+  error: []
+}>()
+
+const rootEl = ref(null)
+const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl })
+
+const isReady = ref(false)
+const crisp = useScriptCrisp({
+  id: props.id,
+  runtimeConfig: props.runtimeConfig,
+  tokenId: props.tokenId,
+  cookieDomain: props.cookieDomain,
+  cookieExpiry: props.cookieExpiry,
+  scriptOptions: {
+    trigger,
+  },
+})
+if (props.trigger === 'click')
+  crisp.do('chat:open')
+const { $script } = crisp
+
+defineExpose({
+  crisp,
+})
+
+let observer: MutationObserver
+onMounted(() => {
+  watch($script.status, (status) => {
+    if (status === 'loaded') {
+      observer = new MutationObserver(() => {
+        if (document.getElementById('crisp-chatbox')) {
+          isReady.value = true
+          emits('ready', crisp)
+          observer.disconnect()
+        }
+      })
+      observer.observe(document.body, { childList: true, subtree: true })
+    }
+    else if (status === 'error') {
+      emits('error')
+    }
+  })
+})
+onBeforeUnmount(() => {
+  observer?.disconnect()
+})
+</script>
+
+<template>
+  <div
+    ref="rootEl"
+    :style="{ display: isReady ? 'none' : 'block' }"
+  >
+    <slot :ready="isReady" />
+    <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
+    <slot v-else-if="$script.status.value === 'loading' || !isReady" name="loading" />
+    <slot v-else-if="$script.status.value === 'error'" name="error" />
+  </div>
+</template>

package/dist/runtime/components/ScriptGoogleAdsense.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { callOnce, onMounted, ref, useElementScriptTrigger, useScriptGoogleAdsense } from '#imports'
+import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
+import { useScriptGoogleAdsense } from '../registry/google-adsense'
+import { callOnce, onMounted, ref, watch } from '#imports'
 import type { ElementScriptTrigger } from '#nuxt-scripts'
 
 const props = withDefaults(defineProps<{
@@ -16,20 +18,36 @@ const props = withDefaults(defineProps<{
   dataFullWidthResponsive: true,
 })
 
+const emits = defineEmits<{
+  // our emit
+  ready: [e: ReturnType<typeof useScriptGoogleAdsense>]
+  error: []
+}>()
+
 const rootEl = ref(null)
-const trigger = useElementScriptTrigger({ trigger: props.trigger, el: rootEl })
+const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl })
 
-const { $script } = useScriptGoogleAdsense({
+const instance = useScriptGoogleAdsense({
   client: props.dataAdClient,
   scriptOptions: {
     trigger,
   },
 })
 
+const { $script } = instance
+
 onMounted(() => {
   callOnce(() => {
     (window.adsbygoogle = window.adsbygoogle || []).push({})
   })
+  watch(instance.$script.status, () => {
+    if (instance.$script.status.value === 'loaded') {
+      emits('ready', instance)
+    }
+    else if (instance.$script.status.value === 'error') {
+      emits('error')
+    }
+  })
 })
 </script>
 
@@ -45,6 +63,7 @@ onMounted(() => {
     v-bind="{ ...$attrs }"
   >
     <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
-    <slot v-if="$script.status.value === 'loading'" name="loading" />
+    <slot v-else-if="$script.status.value === 'loading'" name="loading" />
+    <slot v-else-if="$script.status.value === 'error'" name="error" />
   </ins>
 </template>

package/dist/runtime/components/ScriptGoogleMaps.vue

@@ -1,21 +1,15 @@
 <script lang="ts" setup>
 /// <reference types="google.maps" />
-import {
-  type HTMLAttributes,
-  type ImgHTMLAttributes,
-  type Ref,
-  type ReservedProps,
-  computed,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  watch,
-} from 'vue'
-import { type QueryObject, withQuery } from 'ufo'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import type { HTMLAttributes, ImgHTMLAttributes, Ref, ReservedProps } from 'vue'
+import { withQuery } from 'ufo'
+import type { QueryObject } from 'ufo'
 import { defu } from 'defu'
 import type { ElementScriptTrigger } from '../types'
 import { scriptRuntimeConfig } from '../utils'
-import { resolveComponent, useElementScriptTrigger, useHead, useScriptGoogleMaps } from '#imports'
+import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
+import { useScriptGoogleMaps } from '../registry/google-maps'
+import { resolveComponent, useHead } from '#imports'
 
 interface PlaceholderOptions {
   width?: string | number
@@ -91,6 +85,7 @@ const props = withDefaults(defineProps<{
 const emits = defineEmits<{
   // our emit
   ready: [e: Ref<google.maps.Map | undefined>]
+  error: []
 }>()
 
 const apiKey = props.apiKey || scriptRuntimeConfig('googleMaps')?.apiKey
@@ -106,7 +101,7 @@ const mapEl = ref<HTMLElement>()
 const { $script } = useScriptGoogleMaps({
   apiKey: props.apiKey,
   scriptOptions: {
-    trigger: useElementScriptTrigger({ trigger: props.trigger, el: rootEl }),
+    trigger: useScriptTriggerElement({ trigger: props.trigger, el: rootEl }),
   },
 })
 
@@ -142,6 +137,11 @@ onMounted(() => {
   watch(ready, (v) => {
     v && emits('ready', map)
   })
+  watch($script.status, () => {
+    if ($script.status.value === 'error') {
+      emits('error')
+    }
+  })
   // create the map
   $script.then(async (instance) => {
     const maps = await instance.maps as any as typeof google.maps // some weird type issue here
@@ -259,6 +259,7 @@ onBeforeUnmount(() => {
       <ScriptLoadingIndicator color="black" />
     </slot>
     <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
+    <slot v-else-if="$script.status.value === 'error'" name="error" />
     <slot />
   </div>
 </template>