@nuxt/webpack-builder 3.0.0-rc.9 → 3.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 - Nuxt Project
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.mjs

@@ -1,8 +1,9 @@
 import pify from 'pify';
 import webpack from 'webpack';
+import { fromNodeMiddleware, defineEventHandler } from 'h3';
 import webpackDevMiddleware from 'webpack-dev-middleware';
 import webpackHotMiddleware from 'webpack-hot-middleware';
-import { parseURL, joinURL } from 'ufo';
+import { parseURL, parseQuery, joinURL } from 'ufo';
 import { useNuxt, logger, requireModule } from '@nuxt/kit';
 import { pathToFileURL } from 'node:url';
 import { createUnplugin } from 'unplugin';
@@ -37,19 +38,20 @@ const keyedFunctions = [
   "useLazyFetch"
 ];
 const KEYED_FUNCTIONS_RE = new RegExp(`(${keyedFunctions.join("|")})`);
+const stringTypes = ["Literal", "TemplateLiteral"];
 const composableKeysPlugin = createUnplugin((options) => {
   return {
     name: "nuxt:composable-keys",
     enforce: "post",
+    transformInclude(id) {
+      const { pathname, search } = parseURL(decodeURIComponent(pathToFileURL(id).href));
+      return !pathname.match(/node_modules\/nuxt3?\//) && pathname.match(/\.(m?[jt]sx?|vue)/) && parseQuery(search).type !== "style" && !parseQuery(search).macro;
+    },
     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 { 0: script = code, index: codeIndex = 0 } = code.match(/(?<=<script[^>]*>)[\S\s.]*?(?=<\/script>)/) || { index: 0, 0: code };
       const s = new MagicString(code);
       let count = 0;
       const relativeID = isAbsolute(id) ? relative(options.rootDir, id) : id;
@@ -62,13 +64,34 @@ const composableKeysPlugin = createUnplugin((options) => {
             return;
           }
           const node = _node;
-          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}`) + "'"
-            );
+          const name = "name" in node.callee && node.callee.name;
+          if (!name || !keyedFunctions.includes(name) || node.arguments.length >= 4) {
+            return;
           }
+          switch (name) {
+            case "useState":
+              if (node.arguments.length >= 2 || stringTypes.includes(node.arguments[0]?.type)) {
+                return;
+              }
+              break;
+            case "useFetch":
+            case "useLazyFetch":
+              if (node.arguments.length >= 3 || stringTypes.includes(node.arguments[1]?.type)) {
+                return;
+              }
+              break;
+            case "useAsyncData":
+            case "useLazyAsyncData":
+              if (node.arguments.length >= 3 || stringTypes.includes(node.arguments[0]?.type) || stringTypes.includes(node.arguments[node.arguments.length - 1]?.type)) {
+                return;
+              }
+              break;
+          }
+          const endsWithComma = code.slice(codeIndex + node.start, codeIndex + node.end - 1).trim().endsWith(",");
+          s.appendLeft(
+            codeIndex + node.end - 1,
+            (node.arguments.length && !endsWithComma ? ", " : "") + "'$" + hash(`${relativeID}-${++count}`) + "'"
+          );
         }
       });
       if (s.hasChanged()) {
@@ -95,7 +118,8 @@ const DynamicBasePlugin = createUnplugin((options = {}) => {
         return;
       }
       const s = new MagicString(code);
-      s.append(`${options.globalPublicPath} = buildAssetsURL();
+      s.append(`
+${options.globalPublicPath} = buildAssetsURL();
 `);
       return {
         code: s.toString(),
@@ -122,7 +146,7 @@ function registerVirtualModules() {
       virtualModules.writeModule(filePath, nuxt.vfs[filePath]);
     }
   };
-  nuxt.hook("build:compile", ({ compiler }) => {
+  nuxt.hook("webpack:compile", ({ compiler }) => {
     if (compiler.name === "server") {
       writeFiles();
     }
@@ -278,7 +302,7 @@ function basePlugins(ctx) {
   config.plugins.push(...options.webpack.plugins || []);
   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) {
+  if (ctx.isServer || ctx.isDev && options.webpack.friendlyErrors) {
     config.plugins.push(
       new FriendlyErrorsWebpackPlugin({
         clearConsole: false,
@@ -301,21 +325,21 @@ function basePlugins(ctx) {
       reporter: {
         change: (_, { shortPath }) => {
           if (!ctx.isServer) {
-            nuxt.callHook("bundler:change", shortPath);
+            nuxt.callHook("webpack:change", shortPath);
           }
         },
         done: ({ state }) => {
           if (state.hasErrors) {
-            nuxt.callHook("bundler:error");
+            nuxt.callHook("webpack:error");
           } else {
             logger.success(`${state.name} ${state.message}`);
           }
         },
         allDone: () => {
-          nuxt.callHook("bundler:done");
+          nuxt.callHook("webpack:done");
         },
         progress({ statesArray }) {
-          nuxt.callHook("bundler:progress", statesArray);
+          nuxt.callHook("webpack:progress", statesArray);
         }
       }
     }));
@@ -397,8 +421,6 @@ function getEnv(ctx) {
     "process.env.NODE_ENV": JSON.stringify(ctx.config.mode),
     "process.mode": JSON.stringify(ctx.config.mode),
     "process.dev": options.dev,
-    "process.static": options.target === "static",
-    "process.target": JSON.stringify(options.target),
     "process.env.VUE_ENV": JSON.stringify(ctx.name),
     "process.browser": ctx.isClient,
     "process.client": ctx.isClient,
@@ -408,10 +430,6 @@ function getEnv(ctx) {
     _env["typeof process"] = JSON.stringify(ctx.isServer ? "object" : "undefined");
     _env["typeof window"] = _env["typeof document"] = JSON.stringify(!ctx.isServer ? "object" : "undefined");
   }
-  Object.entries(options.env).forEach(([key, value]) => {
-    const isNative = ["boolean", "number"].includes(typeof value);
-    _env["process.env." + key] = isNative ? value : JSON.stringify(value);
-  });
   return _env;
 }
 
@@ -859,13 +877,15 @@ function client(ctx) {
   ]);
 }
 function clientDevtool(ctx) {
-  if (!ctx.isDev) {
+  if (!ctx.nuxt.options.sourcemap.client) {
     ctx.config.devtool = false;
     return;
   }
-  const scriptPolicy = getCspScriptPolicy(ctx);
-  const noUnsafeEval = scriptPolicy && !scriptPolicy.includes("'unsafe-eval'");
-  ctx.config.devtool = noUnsafeEval ? "cheap-module-source-map" : "eval-cheap-module-source-map";
+  if (!ctx.isDev) {
+    ctx.config.devtool = "source-map";
+    return;
+  }
+  ctx.config.devtool = "eval-cheap-module-source-map";
 }
 function clientPerformance(ctx) {
   ctx.config.performance = {
@@ -907,20 +927,13 @@ function clientPlugins(ctx) {
       analyzerMode: "static",
       defaultSizes: "gzip",
       generateStatsFile: true,
-      openAnalyzer: !options.build.quiet,
+      openAnalyzer: true,
       reportFilename: resolve(statsDir, `${ctx.name}.html`),
       statsFilename: resolve(statsDir, `${ctx.name}.json`),
       ...options.webpack.analyze === true ? {} : options.webpack.analyze
     }));
   }
 }
-function getCspScriptPolicy(ctx) {
-  const { csp } = ctx.options.render;
-  if (typeof csp === "object") {
-    const { policies = {} } = csp;
-    return policies["script-src"] || policies["default-src"] || [];
-  }
-}
 
 function node(ctx) {
   const { config } = ctx;
@@ -970,7 +983,7 @@ function server(ctx) {
 function serverPreset(ctx) {
   const { config } = ctx;
   config.output.filename = "server.mjs";
-  config.devtool = "cheap-module-source-map";
+  config.devtool = ctx.nuxt.options.sourcemap.server ? ctx.isDev ? "cheap-module-source-map" : "source-map" : false;
   config.optimization = {
     splitChunks: false,
     minimize: false
@@ -1031,10 +1044,10 @@ 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
+      sourcemap: nuxt.options.sourcemap[config.name]
     }));
     config.plugins.push(composableKeysPlugin.webpack({
-      sourcemap: nuxt.options.sourcemap,
+      sourcemap: nuxt.options.sourcemap[config.name],
       rootDir: nuxt.options.rootDir
     }));
     const compiler = webpack(config);
@@ -1058,37 +1071,34 @@ async function bundle(nuxt) {
 async function createDevMiddleware(compiler) {
   const nuxt = useNuxt();
   logger.debug("Creating webpack middleware...");
-  const devMiddleware = pify(webpackDevMiddleware(compiler, {
+  const devMiddleware = webpackDevMiddleware(compiler, {
     publicPath: joinURL(nuxt.options.app.baseURL, nuxt.options.app.buildAssetsDir),
     outputFileSystem: compiler.outputFileSystem,
     stats: "none",
     ...nuxt.options.webpack.devMiddleware
-  }));
+  });
   nuxt.hook("close", () => pify(devMiddleware.close.bind(devMiddleware))());
   const { client: _client, ...hotMiddlewareOptions } = nuxt.options.webpack.hotMiddleware || {};
-  const hotMiddleware = pify(webpackHotMiddleware(compiler, {
+  const hotMiddleware = webpackHotMiddleware(compiler, {
     log: false,
     heartbeat: 1e4,
     path: joinURL(nuxt.options.app.baseURL, "__webpack_hmr", compiler.options.name),
     ...hotMiddlewareOptions
-  }));
-  await nuxt.callHook("webpack:devMiddleware", devMiddleware);
-  await nuxt.callHook("webpack:hotMiddleware", hotMiddleware);
-  await nuxt.callHook("server:devMiddleware", async (req, res, next) => {
-    for (const mw of [devMiddleware, hotMiddleware]) {
-      await mw?.(req, res, next);
-    }
-    next();
   });
+  const devHandler = fromNodeMiddleware(devMiddleware);
+  const hotHandler = fromNodeMiddleware(hotMiddleware);
+  await nuxt.callHook("server:devHandler", defineEventHandler(async (event) => {
+    await devHandler(event);
+    await hotHandler(event);
+  }));
   return devMiddleware;
 }
 async function compile(compiler) {
   const nuxt = useNuxt();
   const { name } = compiler.options;
-  await nuxt.callHook("build:compile", { name, compiler });
+  await nuxt.callHook("webpack:compile", { name, compiler });
   compiler.hooks.done.tap("load-resources", async (stats2) => {
-    await nuxt.callHook("build:compiled", { name, compiler, stats: stats2 });
-    await nuxt.callHook("build:resources", compiler.outputFileSystem);
+    await nuxt.callHook("webpack:compiled", { name, compiler, stats: stats2 });
   });
   if (nuxt.options.dev) {
     const compilersWatching = [];
@@ -1121,12 +1131,9 @@ async function compile(compiler) {
   const stats = await new Promise((resolve, reject) => compiler.run((err, stats2) => err ? reject(err) : resolve(stats2)));
   if (stats.hasErrors()) {
     const error = new Error("Nuxt build error");
-    if (nuxt.options.build.quiet === true) {
-      error.stack = stats.toString("errors-only");
-    }
+    error.stack = stats.toString("errors-only");
     throw error;
   }
-  await nuxt.callHook("build:resources");
 }
 
 export { bundle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/webpack-builder",
-  "version": "3.0.0-rc.9",
+  "version": "3.0.0",
   "repository": "nuxt/framework",
   "license": "MIT",
   "type": "module",
@@ -12,18 +12,15 @@
   "files": [
     "dist"
   ],
-  "scripts": {
-    "prepack": "unbuild"
-  },
   "dependencies": {
-    "@babel/core": "^7.18.13",
+    "@babel/core": "^7.20.2",
     "@nuxt/friendly-errors-webpack-plugin": "^2.5.2",
-    "@nuxt/kit": "3.0.0-rc.9",
-    "autoprefixer": "^10.4.8",
-    "css-loader": "^6.7.1",
-    "css-minimizer-webpack-plugin": "^4.0.0",
-    "cssnano": "^5.1.13",
-    "esbuild-loader": "^2.19.0",
+    "@nuxt/kit": "3.0.0",
+    "autoprefixer": "^10.4.13",
+    "css-loader": "^6.7.2",
+    "css-minimizer-webpack-plugin": "^4.2.2",
+    "cssnano": "^5.1.14",
+    "esbuild-loader": "^2.20.0",
     "escape-string-regexp": "^5.0.0",
     "estree-walker": "^3.0.1",
     "file-loader": "^6.2.0",
@@ -31,46 +28,47 @@
     "fs-extra": "^10.1.0",
     "hash-sum": "^2.0.0",
     "lodash-es": "^4.17.21",
-    "magic-string": "^0.26.3",
-    "memfs": "^3.4.7",
+    "magic-string": "^0.26.7",
+    "memfs": "^3.4.11",
     "mini-css-extract-plugin": "^2.6.1",
-    "mlly": "^0.5.14",
-    "ohash": "^0.1.5",
-    "pathe": "^0.3.5",
+    "mlly": "^1.0.0",
+    "ohash": "^1.0.0",
+    "pathe": "^1.0.0",
     "pify": "^6.1.0",
-    "postcss": "^8.4.16",
+    "postcss": "^8.4.19",
     "postcss-import": "^15.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.5",
-    "unplugin": "^0.9.2",
+    "ufo": "^1.0.0",
+    "unplugin": "^1.0.0",
     "url-loader": "^4.1.1",
-    "vue-bundle-renderer": "^0.4.2",
-    "vue-loader": "^17.0.0",
-    "webpack": "^5.74.0",
-    "webpack-bundle-analyzer": "^4.6.1",
+    "vue-bundle-renderer": "^1.0.0",
+    "vue-loader": "^17.0.1",
+    "webpack": "^5.75.0",
+    "webpack-bundle-analyzer": "^4.7.0",
     "webpack-dev-middleware": "^5.3.3",
-    "webpack-hot-middleware": "^2.25.2",
-    "webpack-virtual-modules": "^0.4.4",
+    "webpack-hot-middleware": "^2.25.3",
+    "webpack-virtual-modules": "^0.4.6",
     "webpackbar": "^5.0.2"
   },
   "devDependencies": {
-    "@nuxt/schema": "3.0.0-rc.9",
+    "@nuxt/schema": "3.0.0",
     "@types/lodash-es": "^4.17.6",
     "@types/pify": "^5.0.1",
-    "@types/webpack-bundle-analyzer": "^4.4.2",
+    "@types/webpack-bundle-analyzer": "^4.6.0",
     "@types/webpack-dev-middleware": "^5.0.2",
     "@types/webpack-hot-middleware": "^2.25.6",
     "@types/webpack-virtual-modules": "^0",
     "unbuild": "latest",
-    "vue": "3.2.38"
+    "vue": "3.2.45"
   },
   "peerDependencies": {
-    "vue": "^3.2.38"
+    "vue": "^3.2.45"
   },
   "engines": {
-    "node": "^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0"
-  }
-}
+    "node": "^14.16.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "scripts": {}
+}