@nuxt/webpack-builder 3.0.0-rc.4 → 3.0.0-rc.7

package/dist/index.mjs

@@ -2,66 +2,74 @@ import pify from 'pify';
 import webpack from 'webpack';
 import webpackDevMiddleware from 'webpack-dev-middleware';
 import webpackHotMiddleware from 'webpack-hot-middleware';
-import { joinURL } from 'ufo';
+import { parseURL, joinURL } from 'ufo';
 import { useNuxt, logger, requireModule } from '@nuxt/kit';
+import { pathToFileURL } from 'node:url';
 import { createUnplugin } from 'unplugin';
-import escapeRE from 'escape-string-regexp';
+import { isAbsolute, relative, join, resolve, normalize, dirname } from 'pathe';
+import { walk } from 'estree-walker';
 import MagicString from 'magic-string';
-import { join, resolve, normalize, dirname, isAbsolute } from 'pathe';
+import { hash } from 'ohash';
 import { createFsFromVolume, Volume } from 'memfs';
 import VirtualModulesPlugin from 'webpack-virtual-modules';
 import querystring from 'node:querystring';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
-import { cloneDeep, defaults, merge, uniq } from 'lodash-es';
+import { cloneDeep, defaults as defaults$1, merge, uniq } from 'lodash-es';
 import TimeFixPlugin from 'time-fix-plugin';
 import WebpackBar from 'webpackbar';
 import FriendlyErrorsWebpackPlugin from '@nuxt/friendly-errors-webpack-plugin';
+import escapeRegExp from 'escape-string-regexp';
 import esbuildLoader from 'esbuild-loader';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
 import { createCommonJS } from 'mlly';
 import VueLoaderPlugin from 'vue-loader/dist/pluginWebpack5.js';
-import hash from 'hash-sum';
+import { normalizeWebpackManifest } from 'vue-bundle-renderer';
+import hash$1 from 'hash-sum';
 import fse from 'fs-extra';
 import ForkTSCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 
-const VITE_ASSET_RE = /^export default ["'](__VITE_ASSET.*)["']$/;
-const DynamicBasePlugin = createUnplugin(function(options = {}) {
+const keyedFunctions = [
+  "useState",
+  "useFetch",
+  "useAsyncData",
+  "useLazyAsyncData",
+  "useLazyFetch"
+];
+const KEYED_FUNCTIONS_RE = new RegExp(`(${keyedFunctions.join("|")})`);
+const composableKeysPlugin = createUnplugin((options = {}) => {
   return {
-    name: "nuxt:dynamic-base-path",
-    resolveId(id) {
-      if (id.startsWith("/__NUXT_BASE__")) {
-        return id.replace("/__NUXT_BASE__", "");
-      }
-      if (id === "#internal/nitro") {
-        return "#internal/nitro";
-      }
-      return null;
-    },
+    name: "nuxt:composable-keys",
     enforce: "post",
     transform(code, id) {
-      const s = new MagicString(code);
-      if (options.globalPublicPath && id.includes("paths.mjs") && code.includes("const appConfig = ")) {
-        s.append(`${options.globalPublicPath} = buildAssetsURL();
-`);
-      }
-      const assetId = code.match(VITE_ASSET_RE);
-      if (assetId) {
-        s.overwrite(0, code.length, [
-          "import { buildAssetsURL } from '#build/paths.mjs';",
-          `export default buildAssetsURL("${assetId[1]}".replace("/__NUXT_BASE__", ""));`
-        ].join("\n"));
+      const { pathname } = parseURL(decodeURIComponent(pathToFileURL(id).href));
+      if (!pathname.match(/\.(m?[jt]sx?|vue)/)) {
+        return;
       }
-      if (!id.includes("paths.mjs") && code.includes("NUXT_BASE") && !code.includes("import { publicAssetsURL as __publicAssetsURL }")) {
-        s.prepend("import { publicAssetsURL as __publicAssetsURL } from '#build/paths.mjs';\n");
+      if (!KEYED_FUNCTIONS_RE.test(code)) {
+        return;
       }
-      if (id === "vite/preload-helper") {
-        s.prepend("import { buildAssetsURL } from '#build/paths.mjs';\n");
-        s.replace(/const base = ['"]\/__NUXT_BASE__\/['"]/, "const base = buildAssetsURL()");
-      }
-      s.replace(/from *['"]\/__NUXT_BASE__(\/[^'"]*)['"]/g, 'from "$1"');
-      const delimiterRE = /(?<!(const base = |from *))((?<!\\)`([^`]*)\/__NUXT_BASE__\/([^`]*)(?<!\\)`|(?<!\\)'([^\n']*)\/__NUXT_BASE__\/([^\n']*)(?<!\\)'|(?<!\\)"([^\n"]*)\/__NUXT_BASE__\/([^\n"]*)(?<!\\)")/g;
-      s.replace(delimiterRE, (r) => "`" + r.replace(/\/__NUXT_BASE__\//g, "${__publicAssetsURL()}").slice(1, -1) + "`");
+      const { 0: script = code, index: codeIndex = 0 } = code.match(/(?<=<script[^>]*>)[\S\s.]*?(?=<\/script>)/) || [];
+      const s = new MagicString(code);
+      let count = 0;
+      const relativeID = isAbsolute(id) ? relative(options.rootDir, id) : id;
+      walk(this.parse(script, {
+        sourceType: "module",
+        ecmaVersion: "latest"
+      }), {
+        enter(node) {
+          if (node.type !== "CallExpression" || node.callee.type !== "Identifier") {
+            return;
+          }
+          if (keyedFunctions.includes(node.callee.name) && node.arguments.length < 4) {
+            const end = node.end;
+            s.appendLeft(
+              codeIndex + end - 1,
+              (node.arguments.length ? ", " : "") + "'$" + hash(`${relativeID}-${++count}`) + "'"
+            );
+          }
+        }
+      });
       if (s.hasChanged()) {
         return {
           code: s.toString(),
@@ -72,6 +80,30 @@ const DynamicBasePlugin = createUnplugin(function(options = {}) {
   };
 });
 
+const defaults = {
+  globalPublicPath: "__webpack_public_path__",
+  sourcemap: true
+};
+const DynamicBasePlugin = createUnplugin((options = {}) => {
+  options = { ...defaults, ...options };
+  return {
+    name: "nuxt:dynamic-base-path",
+    enforce: "post",
+    transform(code, id) {
+      if (!id.includes("paths.mjs") || !code.includes("const appConfig = ")) {
+        return;
+      }
+      const s = new MagicString(code);
+      s.append(`${options.globalPublicPath} = buildAssetsURL();
+`);
+      return {
+        code: s.toString(),
+        map: options.sourcemap && s.generateMap({ source: id, includeContent: true })
+      };
+    }
+  };
+});
+
 function createMFS() {
   const fs = createFsFromVolume(new Volume());
   const _fs = { ...fs };
@@ -145,7 +177,11 @@ function getWebpackConfig(ctx) {
   const loaders = [];
   const { extend } = options.build;
   if (typeof extend === "function") {
-    const extendedConfig = extend.call(builder, config, { loaders, ...ctx }) || config;
+    const extendedConfig = extend.call(
+      builder,
+      config,
+      { loaders, ...ctx }
+    ) || config;
     const pragma = /@|#/;
     const { devtool } = extendedConfig;
     if (typeof devtool === "string" && pragma.test(devtool)) {
@@ -158,34 +194,38 @@ function getWebpackConfig(ctx) {
 }
 
 function assets(ctx) {
-  ctx.config.module.rules.push({
-    test: /\.(png|jpe?g|gif|svg|webp)$/i,
-    use: [{
-      loader: "url-loader",
-      options: {
-        ...ctx.options.webpack.loaders.imgUrl,
-        name: fileName(ctx, "img")
-      }
-    }]
-  }, {
-    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
-    use: [{
-      loader: "url-loader",
-      options: {
-        ...ctx.options.webpack.loaders.fontUrl,
-        name: fileName(ctx, "font")
-      }
-    }]
-  }, {
-    test: /\.(webm|mp4|ogv)$/i,
-    use: [{
-      loader: "file-loader",
-      options: {
-        ...ctx.options.webpack.loaders.file,
-        name: fileName(ctx, "video")
-      }
-    }]
-  });
+  ctx.config.module.rules.push(
+    {
+      test: /\.(png|jpe?g|gif|svg|webp)$/i,
+      use: [{
+        loader: "url-loader",
+        options: {
+          ...ctx.options.webpack.loaders.imgUrl,
+          name: fileName(ctx, "img")
+        }
+      }]
+    },
+    {
+      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
+      use: [{
+        loader: "url-loader",
+        options: {
+          ...ctx.options.webpack.loaders.fontUrl,
+          name: fileName(ctx, "font")
+        }
+      }]
+    },
+    {
+      test: /\.(webm|mp4|ogv)$/i,
+      use: [{
+        loader: "file-loader",
+        options: {
+          ...ctx.options.webpack.loaders.file,
+          name: fileName(ctx, "video")
+        }
+      }]
+    }
+  );
 }
 
 class WarningIgnorePlugin {
@@ -237,11 +277,13 @@ function basePlugins(ctx) {
   config.plugins.push(new WarningIgnorePlugin(getWarningIgnoreFilter(ctx)));
   config.plugins.push(new webpack.DefinePlugin(getEnv(ctx)));
   if (ctx.isServer || ctx.isDev && !options.build.quiet && options.webpack.friendlyErrors) {
-    ctx.config.plugins.push(new FriendlyErrorsWebpackPlugin({
-      clearConsole: false,
-      reporter: "consola",
-      logLevel: "ERROR"
-    }));
+    ctx.config.plugins.push(
+      new FriendlyErrorsWebpackPlugin({
+        clearConsole: false,
+        reporter: "consola",
+        logLevel: "ERROR"
+      })
+    );
   }
   if (nuxt.options.webpack.profile) {
     const colors = {
@@ -309,14 +351,15 @@ function baseTranspile(ctx) {
   const { options } = ctx;
   const transpile = [
     /\.vue\.js/i,
-    /consola\/src/
+    /consola\/src/,
+    /vue-demi/
   ];
   for (let pattern of options.build.transpile) {
     if (typeof pattern === "function") {
       pattern = pattern(ctx);
     }
     if (typeof pattern === "string") {
-      transpile.push(new RegExp(escapeRE(normalize(pattern))));
+      transpile.push(new RegExp(escapeRegExp(normalize(pattern))));
     } else if (pattern instanceof RegExp) {
       transpile.push(pattern);
     }
@@ -332,7 +375,7 @@ function getCache(ctx) {
 function getOutput(ctx) {
   const { options } = ctx;
   return {
-    path: resolve(options.buildDir, "dist", ctx.isServer ? "server" : "client"),
+    path: resolve(options.buildDir, "dist", ctx.isServer ? "server" : joinURL("client", options.app.buildAssetsDir)),
     filename: fileName(ctx, "app"),
     chunkFilename: fileName(ctx, "chunk"),
     publicPath: joinURL(options.app.baseURL, options.app.buildAssetsDir)
@@ -374,31 +417,34 @@ function esbuild(ctx) {
   const { config } = ctx;
   const target = ctx.isServer ? "es2019" : "chrome85";
   config.optimization.minimizer.push(new esbuildLoader.ESBuildMinifyPlugin());
-  config.module.rules.push({
-    test: /\.m?[jt]s$/i,
-    loader: "esbuild-loader",
-    exclude: (file) => {
-      file = file.split("node_modules", 2)[1];
-      if (!file) {
-        return false;
+  config.module.rules.push(
+    {
+      test: /\.m?[jt]s$/i,
+      loader: "esbuild-loader",
+      exclude: (file) => {
+        file = file.split("node_modules", 2)[1];
+        if (!file) {
+          return false;
+        }
+        return !ctx.transpile.some((module) => module.test(file));
+      },
+      resolve: {
+        fullySpecified: false
+      },
+      options: {
+        loader: "ts",
+        target
       }
-      return !ctx.transpile.some((module) => module.test(file));
-    },
-    resolve: {
-      fullySpecified: false
     },
-    options: {
-      loader: "ts",
-      target
-    }
-  }, {
-    test: /\.m?[jt]sx$/,
-    loader: "esbuild-loader",
-    options: {
-      loader: "tsx",
-      target
+    {
+      test: /\.m?[jt]sx$/,
+      loader: "esbuild-loader",
+      options: {
+        loader: "tsx",
+        target
+      }
     }
-  });
+  );
 }
 
 function pug(ctx) {
@@ -489,7 +535,7 @@ const getPostcssConfig = (nuxt) => {
   let postcssOptions = cloneDeep(nuxt.options.postcss);
   if (isPureObject(postcssOptions)) {
     if (Array.isArray(postcssOptions.plugins)) {
-      defaults(postcssOptions, defaultConfig());
+      defaults$1(postcssOptions, defaultConfig());
     } else {
       postcssOptions = merge({}, defaultConfig(), postcssOptions);
       loadPlugins(postcssOptions);
@@ -604,7 +650,9 @@ const validate = (compiler) => {
     logger.warn('webpack config `target` should be "node".');
   }
   if (!compiler.options.externals) {
-    logger.info("It is recommended to externalize dependencies in the server build for better build performance.");
+    logger.info(
+      "It is recommended to externalize dependencies in the server build for better build performance."
+    );
   }
 };
 const isJSRegExp = /\.[cm]?js(\?[^.]+)?$/;
@@ -627,7 +675,7 @@ class VueSSRClientPlugin {
       const asyncFiles = allFiles.filter((file) => isJS(file) || isCSS(file)).filter((file) => !initialFiles.includes(file)).filter((file) => !isHotUpdate(file));
       const assetsMapping = {};
       stats.assets.filter(({ name }) => isJS(name)).filter(({ name }) => !isHotUpdate(name)).forEach(({ name, chunkNames }) => {
-        const componentHash = hash(chunkNames.join("|"));
+        const componentHash = hash$1(chunkNames.join("|"));
         if (!assetsMapping[componentHash]) {
           assetsMapping[componentHash] = [];
         }
@@ -664,10 +712,10 @@ class VueSSRClientPlugin {
             }
           }
           const files = Array.from(filesSet);
-          manifest.modules[hash(id)] = files;
+          manifest.modules[hash$1(id)] = files;
           if (Array.isArray(m.modules)) {
             for (const concatenatedModule of m.modules) {
-              const id2 = hash(concatenatedModule.identifier.replace(/\s\w+$/, ""));
+              const id2 = hash$1(concatenatedModule.identifier.replace(/\s\w+$/, ""));
               if (!manifest.modules[id2]) {
                 manifest.modules[id2] = files;
               }
@@ -680,7 +728,7 @@ class VueSSRClientPlugin {
           });
         }
       });
-      const src = JSON.stringify(manifest, null, 2);
+      const src = JSON.stringify(normalizeWebpackManifest(manifest), null, 2);
       await fse.mkdirp(dirname(this.options.filename));
       await fse.writeFile(this.options.filename, src);
       const mjsSrc = "export default " + src;
@@ -710,11 +758,15 @@ class VueSSRServerPlugin {
         }
         const entryAssets = entryInfo.assets.filter((asset) => isJS(asset.name));
         if (entryAssets.length > 1) {
-          throw new Error("Server-side bundle should have one single entry file. Avoid using CommonsChunkPlugin in the server config.");
+          throw new Error(
+            "Server-side bundle should have one single entry file. Avoid using CommonsChunkPlugin in the server config."
+          );
         }
         const [entry] = entryAssets;
         if (!entry || typeof entry.name !== "string") {
-          throw new Error(`Entry "${entryName}" not found. Did you specify the correct entry option?`);
+          throw new Error(
+            `Entry "${entryName}" not found. Did you specify the correct entry option?`
+          );
         }
         const bundle = {
           entry: entry.name,
@@ -834,7 +886,9 @@ function clientHMR(ctx) {
   };
   const hotMiddlewareClientOptionsStr = querystring.stringify(hotMiddlewareClientOptions);
   const app = config.entry.app;
-  app.unshift(`webpack-hot-middleware/client?${hotMiddlewareClientOptionsStr}`);
+  app.unshift(
+    `webpack-hot-middleware/client?${hotMiddlewareClientOptionsStr}`
+  );
   config.plugins.push(new webpack.HotModuleReplacementPlugin());
 }
 function clientOptimization(_ctx) {
@@ -967,8 +1021,11 @@ async function bundle(nuxt) {
   const mfs = nuxt.options.dev ? createMFS() : null;
   const compilers = webpackConfigs.map((config) => {
     config.plugins.push(DynamicBasePlugin.webpack({
+      sourcemap: nuxt.options.sourcemap
+    }));
+    config.plugins.push(composableKeysPlugin.webpack({
       sourcemap: nuxt.options.sourcemap,
-      globalPublicPath: "__webpack_public_path__"
+      rootDir: nuxt.options.rootDir
     }));
     const compiler = webpack(config);
     if (nuxt.options.dev) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/webpack-builder",
-  "version": "3.0.0-rc.4",
+  "version": "3.0.0-rc.7",
   "repository": "nuxt/framework",
   "license": "MIT",
   "type": "module",
@@ -16,45 +16,48 @@
     "prepack": "unbuild"
   },
   "dependencies": {
-    "@babel/core": "^7.18.5",
+    "@babel/core": "^7.18.10",
     "@nuxt/friendly-errors-webpack-plugin": "^2.5.2",
-    "@nuxt/kit": "^3.0.0-rc.4",
-    "autoprefixer": "^10.4.7",
+    "@nuxt/kit": "3.0.0-rc.7",
+    "autoprefixer": "^10.4.8",
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^4.0.0",
-    "cssnano": "^5.1.11",
+    "cssnano": "^5.1.12",
     "esbuild-loader": "^2.19.0",
     "escape-string-regexp": "^5.0.0",
+    "estree-walker": "^3.0.1",
     "file-loader": "^6.2.0",
-    "fork-ts-checker-webpack-plugin": "^7.2.11",
+    "fork-ts-checker-webpack-plugin": "^7.2.13",
     "fs-extra": "^10.1.0",
     "hash-sum": "^2.0.0",
     "lodash-es": "^4.17.21",
     "magic-string": "^0.26.2",
-    "memfs": "^3.4.4",
-    "mini-css-extract-plugin": "^2.6.0",
-    "mlly": "^0.5.2",
-    "pathe": "^0.3.0",
+    "memfs": "^3.4.7",
+    "mini-css-extract-plugin": "^2.6.1",
+    "mlly": "^0.5.10",
+    "ohash": "^0.1.5",
+    "pathe": "^0.3.4",
     "pify": "^6.0.0",
-    "postcss": "^8.4.14",
+    "postcss": "^8.4.16",
     "postcss-import": "^14.1.0",
-    "postcss-loader": "^7.0.0",
+    "postcss-loader": "^7.0.1",
     "postcss-url": "^10.1.3",
     "style-resources-loader": "^1.5.0",
     "time-fix-plugin": "^2.0.7",
-    "ufo": "^0.8.4",
-    "unplugin": "^0.7.0",
+    "ufo": "^0.8.5",
+    "unplugin": "^0.9.0",
     "url-loader": "^4.1.1",
+    "vue-bundle-renderer": "^0.4.1",
     "vue-loader": "^17.0.0",
-    "webpack": "^5.73.0",
+    "webpack": "^5.74.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-dev-middleware": "^5.3.3",
     "webpack-hot-middleware": "^2.25.1",
-    "webpack-virtual-modules": "^0.4.3",
+    "webpack-virtual-modules": "^0.4.4",
     "webpackbar": "^5.0.2"
   },
   "devDependencies": {
-    "@nuxt/schema": "^3.0.0-rc.4",
+    "@nuxt/schema": "3.0.0-rc.7",
     "@types/pify": "^5.0.1",
     "@types/webpack-bundle-analyzer": "^4.4.1",
     "@types/webpack-dev-middleware": "^5.0.2",