@nuxt/scripts 0.1.12 → 0.3.0

package/dist/module.mjs

@@ -1,9 +1,12 @@
-import { useNuxt, useLogger, addDevServerHandler, createResolver, addTemplate, tryUseNuxt, logger as logger$1, defineNuxtModule, addImportsDir, addImports, addPlugin, addBuildPlugin, hasNuxtModule } from '@nuxt/kit';
+import { useNuxt, useLogger, addDevServerHandler, createResolver, addTemplate, tryUseNuxt, logger as logger$1, defineNuxtModule, addImportsDir, addComponentsDir, addImports, addPluginTemplate, addBuildPlugin, hasNuxtModule } from '@nuxt/kit';
 import { resolvePackageJSON, readPackageJSON } from 'pkg-types';
-import { parseURL, parseQuery, joinURL, hasProtocol, withQuery, withBase } from 'ufo';
+import { lt } from 'semver';
+import { resolvePath } from 'mlly';
+import { join, relative } from 'pathe';
 import { existsSync } from 'node:fs';
 import { pathToFileURL } from 'node:url';
 import { createUnplugin } from 'unplugin';
+import { parseURL, parseQuery, joinURL, hasProtocol } from 'ufo';
 import MagicString from 'magic-string';
 import { walk } from 'estree-walker';
 import fsp from 'node:fs/promises';
@@ -11,11 +14,11 @@ import { lazyEventHandler, eventHandler, createError } from 'h3';
 import { fetch } from 'ofetch';
 import { colors } from 'consola/utils';
 import { defu } from 'defu';
-import { join, relative } from 'pathe';
 import { hash } from 'ohash';
 import { createStorage } from 'unstorage';
 import fsDriver from 'unstorage/drivers/fs-lite';
 import { isCI, provider } from 'std-env';
+import { registry } from './registry.mjs';
 
 const DEVTOOLS_UI_ROUTE = "/__nuxt-scripts";
 const DEVTOOLS_UI_LOCAL_PORT = 3030;
@@ -81,34 +84,29 @@ function NuxtScriptAssetBundlerTransformer(options) {
         const s = new MagicString(code);
         walk(ast, {
           enter(_node) {
-            if (_node.type === "CallExpression" && _node.callee.type === "Identifier" && _node.callee?.name.startsWith("useScript")) {
+            const calleeName = _node.callee?.name;
+            const isValidCallee = calleeName === "useScript" || calleeName?.startsWith("useScript") && /^[A-Z]$/.test(calleeName?.charAt(9));
+            if (_node.type === "CallExpression" && _node.callee.type === "Identifier" && isValidCallee) {
               const fnName = _node.callee?.name;
               const node = _node;
-              let scriptKey;
               let scriptSrcNode;
               let src;
               if (fnName === "useScript") {
                 if (node.arguments[0].type === "Literal") {
                   scriptSrcNode = node.arguments[0];
-                  scriptKey = scriptSrcNode.value;
                 } else if (node.arguments[0].type === "ObjectExpression") {
                   const srcProperty = node.arguments[0].properties.find(
                     (p) => p.key?.name === "src" || p.key?.value === "src"
                   );
-                  const keyProperty = node.arguments[0].properties.find(
-                    (p) => p.key?.name === "key" || p.key?.value === "key"
-                  );
-                  scriptKey = keyProperty?.value?.value || srcProperty?.value;
                   scriptSrcNode = srcProperty?.value;
                 }
               } else {
-                const registryNode = options.registry?.find((i) => i.name === fnName);
+                const registryNode = options.scripts?.find((i) => i.import.name === fnName);
                 if (!registryNode) {
-                  console.warn(`[Nuxt Scripts] Integration ${fnName} not found in registry. Used in ${id}.`);
                   return;
                 }
-                options.moduleDetected(registryNode.module);
-                if (!registryNode.transform && !registryNode.src)
+                options.moduleDetected?.(registryNode.module);
+                if (!registryNode.scriptBundling && !registryNode.src)
                   return;
                 const optionsNode = node.arguments[0];
                 if (optionsNode?.type === "ObjectExpression") {
@@ -123,11 +121,10 @@ function NuxtScriptAssetBundlerTransformer(options) {
                   if (srcProperty?.value?.value) {
                     scriptSrcNode = srcProperty.value;
                   } else {
-                    src = registryNode.src || registryNode.transform?.(fnArg0);
+                    src = registryNode.scriptBundling && registryNode.scriptBundling(fnArg0);
                     if (src === false)
                       return;
                   }
-                  scriptKey = registryNode.key;
                 }
               }
               if (scriptSrcNode || src) {
@@ -135,29 +132,43 @@ function NuxtScriptAssetBundlerTransformer(options) {
                 if (src) {
                   let canBundle = options.defaultBundle;
                   if (node.arguments[1]?.type === "ObjectExpression") {
-                    const assetStrategyProperty = node.arguments[1]?.properties.find(
-                      (p) => p.key?.name === "assetStrategy" || p.key?.value === "assetStrategy"
+                    const bundleProperty = node.arguments[1]?.properties.find(
+                      (p) => p.key?.name === "bundle" || p.key?.value === "bundle"
                     );
-                    if (assetStrategyProperty) {
-                      if (assetStrategyProperty?.value?.value !== "bundle") {
+                    if (bundleProperty) {
+                      if (String(bundleProperty?.value?.value) !== "true") {
                         canBundle = false;
                         return;
                       }
                       if (node.arguments[1]?.properties.length === 1)
                         s.remove(node.arguments[1].start, node.arguments[1].end);
                       else
-                        s.remove(assetStrategyProperty.start, assetStrategyProperty.end);
+                        s.remove(bundleProperty.start, bundleProperty.end);
                       canBundle = true;
                     }
                   }
-                  canBundle = canBundle || options.overrides?.[scriptKey]?.assetStrategy === "bundle";
                   if (canBundle) {
                     const newSrc = options.resolveScript(src);
                     if (scriptSrcNode) {
                       s.overwrite(scriptSrcNode.start, scriptSrcNode.end, `'${newSrc}'`);
                     } else {
-                      const lastProperty = node.arguments[0].properties[node.arguments[0].properties.length - 1];
-                      s.appendRight(lastProperty.end, `, src: '${newSrc}'`);
+                      const scriptInputProperty = node.arguments[0].properties.find(
+                        (p) => p.key?.name === "scriptInput" || p.key?.value === "scriptInput"
+                      );
+                      if (scriptInputProperty) {
+                        const scriptInput = scriptInputProperty.value;
+                        if (scriptInput.type === "ObjectExpression") {
+                          const srcProperty = scriptInput.properties.find(
+                            (p) => p.key?.name === "src" || p.key?.value === "src"
+                          );
+                          if (srcProperty)
+                            s.overwrite(srcProperty.value.start, srcProperty.value.end, `'${newSrc}'`);
+                          else
+                            s.appendRight(scriptInput.end, `, src: '${newSrc}'`);
+                        }
+                      } else {
+                        s.appendRight(node.arguments[0].start + 1, ` scriptInput: { src: '${newSrc}' }, `);
+                      }
                     }
                   }
                 }
@@ -257,7 +268,8 @@ function setupPublicAssetStrategy(options = {}) {
           let size = 0;
           res = await fetch(url).then((r) => {
             encoding = r.headers.get("content-encoding");
-            size = Number(r.headers.get("content-length") / 1024);
+            const contentLength = r.headers.get("content-length");
+            size = contentLength ? Number(contentLength) / 1024 : 0;
             return r.arrayBuffer();
           }).then((r) => Buffer.from(r));
           logger.log(colors.gray(`  \u251C\u2500 ${url} \u2192 ${joinURL(assetsBaseURL, filename)} (${size.toFixed(2)} kB ${encoding})`));
@@ -335,14 +347,12 @@ const module = defineNuxtModule({
     name: "@nuxt/scripts",
     configKey: "scripts",
     compatibility: {
-      nuxt: "^3.11.1",
+      nuxt: ">=3",
       bridge: false
     }
   },
   defaults: {
     defaultScriptOptions: {
-      assetStrategy: "bundle",
-      // Not supported on all scripts, only if the src is static, runtime fallback?
       trigger: "onNuxtReady"
     },
     enabled: true,
@@ -351,6 +361,11 @@ const module = defineNuxtModule({
   async setup(config, nuxt) {
     const { resolve } = createResolver(import.meta.url);
     const { version, name } = await readPackageJSON(resolve("../package.json"));
+    const { version: unheadVersion } = await readPackageJSON(join(await resolvePath("@unhead/vue"), "package.json"));
+    if (!unheadVersion || lt(unheadVersion, "1.8.0")) {
+      logger.warn("@nuxt/scripts requires @unhead/vue >= 1.8.0, please upgrade to use the module.");
+      return;
+    }
     if (!config.enabled) {
       logger.debug("The module is disabled, skipping setup.");
       return;
@@ -361,101 +376,20 @@ const module = defineNuxtModule({
     addImportsDir([
       resolve("./runtime/composables")
     ]);
+    addComponentsDir({
+      path: resolve("./runtime/components")
+    });
+    const scripts = registry(resolve);
     nuxt.hooks.hook("modules:done", async () => {
-      let registry = [
-        {
-          name: "useScriptCloudflareWebAnalytics",
-          key: "cloudflareWebAnalytics",
-          from: resolve("./runtime/registry/cloudflare-web-analytics"),
-          src: "https://static.cloudflareinsights.com/beacon.min.js"
-        },
-        {
-          name: "useScriptConfetti",
-          key: "confetti",
-          from: resolve("./runtime/registry/confetti"),
-          src: "https://unpkg.com/js-confetti@latest/dist/js-confetti.browser.js"
-        },
-        {
-          name: "useScriptFacebookPixel",
-          key: "facebookPixel",
-          from: resolve("./runtime/registry/facebook-pixel"),
-          src: "https://connect.facebook.net/en_US/fbevents.js"
-        },
-        {
-          name: "useScriptFathomAnalytics",
-          key: "fathomAnalytics",
-          from: resolve("./runtime/registry/fathom-analytics"),
-          src: false
-          // can not be bundled, breaks script
-        },
-        {
-          name: "useScriptHotjar",
-          from: resolve("./runtime/registry/hotjar"),
-          key: "hotjar",
-          transform(options) {
-            return withQuery(`https://static.hotjar.com/c/hotjar-${options?.id || ""}.js`, {
-              sv: options?.sv || "6"
-            });
-          }
-        },
-        {
-          name: "useScriptIntercom",
-          from: resolve("./runtime/registry/intercom"),
-          key: "intercom",
-          transform(options) {
-            return joinURL(`https://widget.intercom.io/widget`, options?.app_id || "");
-          }
-        },
-        {
-          name: "useScriptSegment",
-          from: resolve("./runtime/registry/segment"),
-          key: "segment",
-          transform(options) {
-            return joinURL("https://cdn.segment.com/analytics.js/v1", options?.writeKey || "", "analytics.min.js");
-          }
-        },
-        {
-          name: "useScriptNpm",
-          // key is based on package name
-          from: resolve("./runtime/registry/npm"),
-          transform(options) {
-            return withBase(options?.file || "", `https://unpkg.com/${options?.packageName || ""}@${options?.version || "latest"}`);
-          }
-        },
-        // cloudflare turnstile
-        {
-          name: "useScriptCloudflareTurnstile",
-          key: "cloudflareTurnstile",
-          from: resolve("./runtime/registry/cloudflare-turnstile"),
-          module: "nuxt-turnstile"
-        },
-        // third-party-capital
-        {
-          name: "useScriptGoogleAnalytics",
-          key: "googleAnalytics",
-          from: resolve("./runtime/registry/google-analytics"),
-          module: "@nuxt/third-party-capital"
-        },
-        {
-          name: "useScriptGoogleTagManager",
-          key: "googleTagManager",
-          from: resolve("./runtime/registry/google-tag-manager"),
-          module: "@nuxt/third-party-capital"
-        },
-        {
-          name: "useScriptGoogleMaps",
-          key: "googleMaps",
-          from: resolve("./runtime/registry/google-tag-manager"),
-          module: "@nuxt/third-party-capital"
-        }
-      ];
-      registry = registry.map((i) => {
-        i.priority = -1;
-        i.module = i.module || "@nuxt/scripts";
-        return i;
-      });
-      addImports(registry);
-      await nuxt.hooks.callHook("scripts:registry", registry);
+      const registryScripts = [...scripts];
+      await nuxt.hooks.callHook("scripts:registry", registryScripts);
+      addImports(registryScripts.map((i) => {
+        return {
+          priority: -1,
+          ...i.import
+        };
+      }));
+      const newScripts = registryScripts.filter((i) => !scripts.some((r) => r.import.name === i.import.name));
       extendTypes(name, async ({ typesPath }) => {
         return `
 declare module '#app' {
@@ -466,26 +400,26 @@ declare module '#app' {
 declare module '#nuxt-scripts' {
     type NuxtUseScriptOptions = Omit<import('${typesPath}').NuxtUseScriptOptions, 'use' | 'beforeInit'>
     interface ScriptRegistry {
-${registry.filter((i) => i.key && i.module !== "@nuxt/scripts").map((i) => {
-          const ucFirstKey = i.key.substring(0, 1).toUpperCase() + i.key.substring(1);
-          return `        ${i.key}?: import('${i.from}').${ucFirstKey}Input | [import('${i.from}').${ucFirstKey}Input, NuxtUseScriptOptions]`;
+${newScripts.map((i) => {
+          const key = i.import.name.replace("useScript", "");
+          const keyLcFirst = key.substring(0, 1).toLowerCase() + key.substring(1);
+          return `        ${keyLcFirst}?: import('${i.import.from}').${key}Input | [import('${i.import.from}').${key}Input, NuxtUseScriptOptions]`;
         }).join("\n")}
     }
 }
 `;
       });
-      if (config.globals?.length || Object.keys(config.register || {}).length) {
-        const template = addTemplate({
+      if (config.globals?.length || Object.keys(config.registry || {}).length) {
+        addPluginTemplate({
           filename: `modules/${name.replace("/", "-")}.mjs`,
-          write: true,
           getContents() {
             const imports = ["useScript", "defineNuxtPlugin"];
             const inits = [];
-            for (const [k, c] of Object.entries(config.register || {})) {
-              const importDefinition = registry.find((i) => i.name === `useScript${k.substring(0, 1).toUpperCase() + k.substring(1)}`);
+            for (const [k, c] of Object.entries(config.registry || {})) {
+              const importDefinition = registryScripts.find((i) => i.import.name === `useScript${k.substring(0, 1).toUpperCase() + k.substring(1)}`);
               if (importDefinition) {
-                imports.unshift(importDefinition.name);
-                inits.push(`${importDefinition.name}(${JSON.stringify(c)});`);
+                imports.unshift(importDefinition.import.name);
+                inits.push(`${importDefinition.import.name}(${JSON.stringify(c === true ? {} : c)});`);
               }
             }
             return `import { ${imports.join(", ")} } from '#imports'
@@ -498,16 +432,13 @@ ${(config.globals || []).map((g) => !Array.isArray(g) ? `    useScript("${g.toSt
 })`;
           }
         });
-        addPlugin({
-          src: template.dst
-        });
       }
       const scriptMap = /* @__PURE__ */ new Map();
       const { normalizeScriptData } = setupPublicAssetStrategy(config.assets);
       const moduleInstallPromises = /* @__PURE__ */ new Map();
       addBuildPlugin(NuxtScriptAssetBundlerTransformer({
-        registry,
-        defaultBundle: config.defaultScriptOptions?.assetStrategy === "bundle",
+        scripts,
+        defaultBundle: config.defaultScriptOptions?.bundle,
         moduleDetected(module) {
           if (nuxt.options.dev && module !== "@nuxt/scripts" && !moduleInstallPromises.has(module) && !hasNuxtModule(module))
             moduleInstallPromises.set(module, () => installNuxtModule(module));

package/dist/registry.d.mts

@@ -0,0 +1,13 @@
+import { SegmentInput } from './runtime/registry/segment.ts';
+import { PlausibleAnalyticsInput } from './runtime/registry/plausible-analytics.ts';
+import { GoogleAnalyticsInput } from './runtime/registry/google-analytics.ts';
+import { RegistryScripts } from '#nuxt-scripts';
+
+declare function GoogleAnalyticsScriptResolver(options?: GoogleAnalyticsInput): string;
+declare function PlausibleAnalyticsScriptResolver(options: PlausibleAnalyticsInput): string;
+declare function CloudflareWebAnalyticsScriptResolver(): string;
+declare function SegmentScriptResolver(options: SegmentInput): string;
+declare function FacebookPixelScriptResolver(): string;
+declare const registry: (resolve?: (s: string) => string) => RegistryScripts;
+
+export { CloudflareWebAnalyticsScriptResolver, FacebookPixelScriptResolver, GoogleAnalyticsScriptResolver, PlausibleAnalyticsScriptResolver, SegmentScriptResolver, registry };

package/dist/registry.d.ts

@@ -0,0 +1,13 @@
+import { SegmentInput } from './runtime/registry/segment.ts';
+import { PlausibleAnalyticsInput } from './runtime/registry/plausible-analytics.ts';
+import { GoogleAnalyticsInput } from './runtime/registry/google-analytics.ts';
+import { RegistryScripts } from '#nuxt-scripts';
+
+declare function GoogleAnalyticsScriptResolver(options?: GoogleAnalyticsInput): string;
+declare function PlausibleAnalyticsScriptResolver(options: PlausibleAnalyticsInput): string;
+declare function CloudflareWebAnalyticsScriptResolver(): string;
+declare function SegmentScriptResolver(options: SegmentInput): string;
+declare function FacebookPixelScriptResolver(): string;
+declare const registry: (resolve?: (s: string) => string) => RegistryScripts;
+
+export { CloudflareWebAnalyticsScriptResolver, FacebookPixelScriptResolver, GoogleAnalyticsScriptResolver, PlausibleAnalyticsScriptResolver, SegmentScriptResolver, registry };