@nuxt/webpack-builder 3.0.0-rc.2 → 3.0.0-rc.5

package/dist/index.mjs

@@ -2,12 +2,15 @@ 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 { createUnplugin } from 'unplugin';
-import 'escape-string-regexp';
+import escapeRE from 'escape-string-regexp';
 import MagicString from 'magic-string';
-import { join, resolve, dirname, isAbsolute } from 'pathe';
+import { pathToFileURL } from 'node:url';
+import { isAbsolute, relative, join, resolve, normalize, dirname } from 'pathe';
+import { walk } from 'estree-walker';
+import { hash } from 'ohash';
 import { createFsFromVolume, Volume } from 'memfs';
 import VirtualModulesPlugin from 'webpack-virtual-modules';
 import querystring from 'node:querystring';
@@ -21,7 +24,7 @@ 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 hash$1 from 'hash-sum';
 import fse from 'fs-extra';
 import ForkTSCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 
@@ -56,11 +59,11 @@ const DynamicBasePlugin = createUnplugin(function(options = {}) {
         s.prepend("import { publicAssetsURL as __publicAssetsURL } from '#build/paths.mjs';\n");
       }
       if (id === "vite/preload-helper") {
-        s.prepend("import { buildAssetsDir } from '#build/paths.mjs';\n");
-        s.replace(/const base = ['"]\/__NUXT_BASE__\/['"]/, "const base = buildAssetsDir()");
+        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;
+      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) + "`");
       if (s.hasChanged()) {
         return {
@@ -72,6 +75,53 @@ 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:composable-keys",
+    enforce: "post",
+    transform(code, id) {
+      const { pathname } = parseURL(decodeURIComponent(pathToFileURL(id).href));
+      if (!pathname.match(/\.(m?[jt]sx?|vue)/)) {
+        return;
+      }
+      if (!KEYED_FUNCTIONS_RE.test(code)) {
+        return;
+      }
+      const { 0: script = code, index: codeIndex = 0 } = code.match(/(?<=<script[^>]*>)[\S\s.]*?(?=<\/script>)/) || [];
+      const s = new MagicString(code);
+      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}-${codeIndex + end}`) + "'");
+          }
+        }
+      });
+      if (s.hasChanged()) {
+        return {
+          code: s.toString(),
+          map: options.sourcemap && s.generateMap({ source: id, includeContent: true })
+        };
+      }
+    }
+  };
+});
+
 function createMFS() {
   const fs = createFsFromVolume(new Volume());
   const _fs = { ...fs };
@@ -204,7 +254,8 @@ function base(ctx) {
     baseAlias,
     baseConfig,
     basePlugins,
-    baseResolve
+    baseResolve,
+    baseTranspile
   ]);
 }
 function baseConfig(ctx) {
@@ -304,6 +355,25 @@ function baseResolve(ctx) {
     ...config.resolveLoader
   };
 }
+function baseTranspile(ctx) {
+  const { options } = ctx;
+  const transpile = [
+    /\.vue\.js/i,
+    /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))));
+    } else if (pattern instanceof RegExp) {
+      transpile.push(pattern);
+    }
+  }
+  ctx.transpile = [...transpile, ...ctx.transpile];
+}
 function getCache(ctx) {
   const { options } = ctx;
   if (!options.dev) {
@@ -458,7 +528,7 @@ const getPostcssConfig = (nuxt) => {
   if (!nuxt.options.webpack.postcss || !nuxt.options.postcss) {
     return false;
   }
-  const configFile = nuxt.options.postcss?.config;
+  const configFile = nuxt.options.postcss.config;
   if (configFile) {
     return {
       postcssOptions: {
@@ -505,7 +575,7 @@ function extractCSS(ctx) {
     config.plugins.push(new MiniCssExtractPlugin({
       filename: fileName(ctx, "css"),
       chunkFilename: fileName(ctx, "css"),
-      ...options.webpack.extractCSS
+      ...options.webpack.extractCSS === true ? {} : options.webpack.extractCSS
     }));
   }
 }
@@ -562,10 +632,6 @@ function createCssLoadersRule(ctx, cssLoaderOptions) {
     ];
   }
   return [
-    {
-      loader: "vue-style-loader",
-      options: options.webpack.loaders.vueStyle
-    },
     cssLoader
   ];
 }
@@ -612,7 +678,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] = [];
         }
@@ -649,10 +715,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;
               }
@@ -942,7 +1008,7 @@ function serverPlugins(ctx) {
 }
 
 async function bundle(nuxt) {
-  await registerVirtualModules();
+  registerVirtualModules();
   const webpackConfigs = [client, ...nuxt.options.ssr ? [server] : []].map((preset) => {
     const ctx = createWebpackConfigContext(nuxt);
     applyPresets(ctx, preset);
@@ -955,6 +1021,10 @@ async function bundle(nuxt) {
       sourcemap: nuxt.options.sourcemap,
       globalPublicPath: "__webpack_public_path__"
     }));
+    config.plugins.push(composableKeysPlugin.webpack({
+      sourcemap: nuxt.options.sourcemap,
+      rootDir: nuxt.options.rootDir
+    }));
     const compiler = webpack(config);
     if (nuxt.options.dev) {
       compiler.outputFileSystem = mfs;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/webpack-builder",
-  "version": "3.0.0-rc.2",
+  "version": "3.0.0-rc.5",
   "repository": "nuxt/framework",
   "license": "MIT",
   "type": "module",
@@ -16,56 +16,57 @@
     "prepack": "unbuild"
   },
   "dependencies": {
-    "@babel/core": "^7.17.10",
+    "@babel/core": "^7.18.6",
     "@nuxt/friendly-errors-webpack-plugin": "^2.5.2",
-    "@nuxt/kit": "^3.0.0-rc.2",
+    "@nuxt/kit": "^3.0.0-rc.5",
     "autoprefixer": "^10.4.7",
     "css-loader": "^6.7.1",
-    "css-minimizer-webpack-plugin": "^3.4.1",
-    "cssnano": "^5.1.7",
-    "esbuild-loader": "^2.18.0",
+    "css-minimizer-webpack-plugin": "^4.0.0",
+    "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.12",
     "fs-extra": "^10.1.0",
     "hash-sum": "^2.0.0",
     "lodash-es": "^4.17.21",
-    "magic-string": "^0.26.1",
-    "memfs": "^3.4.1",
-    "mini-css-extract-plugin": "^2.6.0",
-    "mlly": "^0.5.2",
-    "pathe": "^0.2.0",
-    "pify": "^5.0.0",
-    "postcss": "^8.4.13",
+    "magic-string": "^0.26.2",
+    "memfs": "^3.4.7",
+    "mini-css-extract-plugin": "^2.6.1",
+    "mlly": "^0.5.4",
+    "ohash": "^0.1.0",
+    "pathe": "^0.3.2",
+    "pify": "^6.0.0",
+    "postcss": "^8.4.14",
     "postcss-import": "^14.1.0",
-    "postcss-loader": "^6.2.1",
+    "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.3",
-    "unplugin": "^0.6.2",
+    "ufo": "^0.8.5",
+    "unplugin": "^0.7.2",
     "url-loader": "^4.1.1",
     "vue-loader": "^17.0.0",
-    "vue-style-loader": "^4.1.3",
-    "webpack": "^5.72.0",
+    "webpack": "^5.73.0",
     "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-dev-middleware": "^5.3.1",
+    "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.2",
+    "@nuxt/schema": "^3.0.0-rc.5",
     "@types/pify": "^5.0.1",
     "@types/webpack-bundle-analyzer": "^4.4.1",
     "@types/webpack-dev-middleware": "^5.0.2",
     "@types/webpack-hot-middleware": "^2.25.6",
     "@types/webpack-virtual-modules": "^0",
     "unbuild": "latest",
-    "vue": "3.2.33"
+    "vue": "3.2.37"
   },
   "peerDependencies": {
-    "vue": "3.2.33"
+    "vue": "^3.2.37"
   },
   "engines": {
     "node": "^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0"