@dtwo/webpack-builder 3.0.0-rc.13

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 - Dtwo 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/README.md

@@ -0,0 +1,3 @@
+# Dtwo Webpack Builder
+
+> The [Webpack](https://webpack.js.org) bundler for Dtwo 3

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { Dtwo } from '@dtwo/schema';
+
+declare function bundle(dtwo: Dtwo): Promise<unknown[] | undefined>;
+
+export { bundle };

package/dist/index.mjs

@@ -0,0 +1,1139 @@
+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, parseQuery, joinURL } from 'ufo';
+import { useDtwo, logger, requireModule } from '@dtwo/kit';
+import { pathToFileURL } from 'node:url';
+import { createUnplugin } from '@dtwo/unplugin';
+import { isAbsolute, relative, join, resolve, normalize, dirname } from 'pathe';
+import { walk } from 'estree-walker';
+import MagicString from 'magic-string';
+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, uniq, defaults as defaults$1, merge } from 'lodash-es';
+import TimeFixPlugin from 'time-fix-plugin';
+import WebpackBar from 'webpackbar';
+import FriendlyErrorsWebpackPlugin from '@d2js/friendly-errors-webpack-plugin';
+import escapeRegExp from 'escape-string-regexp';
+import esbuildLoader from 'esbuild-loader';
+import KduLoaderPlugin from 'kdu-loader/dist/pluginWebpack5.js';
+import { normalizeWebpackManifest } from 'kdu-bundle-renderer';
+import hash$1 from 'hash-sum';
+import fse from 'fs-extra';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+import { createCommonJS } from 'mlly';
+import ForkTSCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+
+const keyedFunctions = [
+  "useState",
+  "useFetch",
+  "useAsyncData",
+  "useLazyAsyncData",
+  "useLazyFetch"
+];
+const KEYED_FUNCTIONS_RE = new RegExp(`(${keyedFunctions.join("|")})`);
+const stringTypes = ["Literal", "TemplateLiteral"];
+const composableKeysPlugin = createUnplugin((options) => {
+  return {
+    name: "dtwo:composable-keys",
+    enforce: "post",
+    transformInclude(id) {
+      const { pathname, search } = parseURL(decodeURIComponent(pathToFileURL(id).href));
+      return !pathname.match(/node_modules\/dtwo3?\//) && pathname.match(/\.(m?[jt]sx?|kdu)/) && parseQuery(search).type !== "style" && !parseQuery(search).macro;
+    },
+    transform(code, id) {
+      if (!KEYED_FUNCTIONS_RE.test(code)) {
+        return;
+      }
+      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;
+      walk(this.parse(script, {
+        sourceType: "module",
+        ecmaVersion: "latest"
+      }), {
+        enter(_node) {
+          if (_node.type !== "CallExpression" || _node.callee.type !== "Identifier") {
+            return;
+          }
+          const node = _node;
+          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()) {
+        return {
+          code: s.toString(),
+          map: options.sourcemap ? s.generateMap({ source: id, includeContent: true }) : void 0
+        };
+      }
+    }
+  };
+});
+
+const defaults = {
+  globalPublicPath: "__webpack_public_path__",
+  sourcemap: true
+};
+const DynamicBasePlugin = createUnplugin((options = {}) => {
+  options = { ...defaults, ...options };
+  return {
+    name: "dtwo: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 }) : void 0
+      };
+    }
+  };
+});
+
+function createMFS() {
+  const fs = createFsFromVolume(new Volume());
+  const _fs = { ...fs };
+  _fs.join = join;
+  _fs.exists = (p) => Promise.resolve(_fs.existsSync(p));
+  _fs.readFile = pify(_fs.readFile);
+  return _fs;
+}
+
+function registerVirtualModules() {
+  const dtwo = useDtwo();
+  const virtualModules = new VirtualModulesPlugin(dtwo.vfs);
+  const writeFiles = () => {
+    for (const filePath in dtwo.vfs) {
+      virtualModules.writeModule(filePath, dtwo.vfs[filePath]);
+    }
+  };
+  dtwo.hook("webpack:compile", ({ compiler }) => {
+    if (compiler.name === "server") {
+      writeFiles();
+    }
+  });
+  dtwo.hook("app:templatesGenerated", writeFiles);
+  dtwo.hook("webpack:config", (configs) => configs.forEach((config) => {
+    config.plugins.push(virtualModules);
+  }));
+}
+
+function createWebpackConfigContext(dtwo) {
+  return {
+    dtwo,
+    options: dtwo.options,
+    config: {},
+    name: "base",
+    isDev: dtwo.options.dev,
+    isServer: false,
+    isClient: false,
+    alias: {},
+    transpile: []
+  };
+}
+function applyPresets(ctx, presets) {
+  if (!Array.isArray(presets)) {
+    presets = [presets];
+  }
+  for (const preset of presets) {
+    if (Array.isArray(preset)) {
+      preset[0](ctx, preset[1]);
+    } else {
+      preset(ctx);
+    }
+  }
+}
+function fileName(ctx, key) {
+  const { options } = ctx;
+  let fileName2 = options.webpack.filenames[key];
+  if (typeof fileName2 === "function") {
+    fileName2 = fileName2(ctx);
+  }
+  if (typeof fileName2 === "string" && options.dev) {
+    const hash = /\[(chunkhash|contenthash|hash)(?::(\d+))?]/.exec(fileName2);
+    if (hash) {
+      logger.warn(`Notice: Please do not use ${hash[1]} in dev mode to prevent memory leak`);
+    }
+  }
+  return fileName2;
+}
+function getWebpackConfig(ctx) {
+  const { options, config } = ctx;
+  const builder = {};
+  const loaders = [];
+  const { extend } = options.build;
+  if (typeof extend === "function") {
+    const extendedConfig = extend.call(
+      builder,
+      config,
+      { loaders, ...ctx }
+    ) || config;
+    const pragma = /@|#/;
+    const { devtool } = extendedConfig;
+    if (typeof devtool === "string" && pragma.test(devtool)) {
+      extendedConfig.devtool = devtool.replace(pragma, "");
+      logger.warn(`devtool has been normalized to ${extendedConfig.devtool} as webpack documented value`);
+    }
+    return extendedConfig;
+  }
+  return cloneDeep(config);
+}
+
+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")
+        }
+      }]
+    }
+  );
+}
+
+class WarningIgnorePlugin {
+  constructor(filter) {
+    this.filter = filter;
+  }
+  apply(compiler) {
+    compiler.hooks.done.tap("warnfix-plugin", (stats) => {
+      stats.compilation.warnings = stats.compilation.warnings.filter(this.filter);
+    });
+  }
+}
+
+function base(ctx) {
+  applyPresets(ctx, [
+    baseAlias,
+    baseConfig,
+    basePlugins,
+    baseResolve,
+    baseTranspile
+  ]);
+}
+function baseConfig(ctx) {
+  const { options } = ctx;
+  ctx.config = {
+    name: ctx.name,
+    entry: { app: [resolve(options.appDir, options.experimental.asyncEntry ? "entry.async" : "entry")] },
+    module: { rules: [] },
+    plugins: [],
+    externals: [],
+    optimization: {
+      ...options.webpack.optimization,
+      minimizer: []
+    },
+    experiments: {},
+    mode: ctx.isDev ? "development" : "production",
+    cache: getCache(ctx),
+    output: getOutput(ctx),
+    stats: "none",
+    ...ctx.config
+  };
+}
+function basePlugins(ctx) {
+  const { config, options, dtwo } = ctx;
+  config.plugins = config.plugins || [];
+  if (options.dev) {
+    config.plugins.push(new TimeFixPlugin());
+  }
+  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.webpack.friendlyErrors) {
+    config.plugins.push(
+      new FriendlyErrorsWebpackPlugin({
+        clearConsole: false,
+        reporter: "consola",
+        logLevel: "ERROR"
+      })
+    );
+  }
+  if (dtwo.options.webpack.profile) {
+    const colors = {
+      client: "green",
+      server: "orange",
+      modern: "blue"
+    };
+    config.plugins.push(new WebpackBar({
+      name: ctx.name,
+      color: colors[ctx.name],
+      reporters: ["stats"],
+      stats: !ctx.isDev,
+      reporter: {
+        change: (_, { shortPath }) => {
+          if (!ctx.isServer) {
+            dtwo.callHook("webpack:change", shortPath);
+          }
+        },
+        done: ({ state }) => {
+          if (state.hasErrors) {
+            dtwo.callHook("webpack:error");
+          } else {
+            logger.success(`${state.name} ${state.message}`);
+          }
+        },
+        allDone: () => {
+          dtwo.callHook("webpack:done");
+        },
+        progress({ statesArray }) {
+          dtwo.callHook("webpack:progress", statesArray);
+        }
+      }
+    }));
+  }
+}
+function baseAlias(ctx) {
+  const { options } = ctx;
+  ctx.alias = {
+    "#app": options.appDir,
+    "#build/plugins": resolve(options.buildDir, "plugins", ctx.isClient ? "client" : "server"),
+    "#build": options.buildDir,
+    ...options.alias,
+    ...ctx.alias
+  };
+  if (ctx.isClient) {
+    ctx.alias["#internal/hole"] = resolve(ctx.dtwo.options.buildDir, "hole.client.mjs");
+  }
+}
+function baseResolve(ctx) {
+  const { options, config } = ctx;
+  const webpackModulesDir = ["node_modules"].concat(options.modulesDir);
+  config.resolve = {
+    extensions: [".wasm", ".mjs", ".js", ".ts", ".json", ".kdu", ".jsx", ".tsx"],
+    alias: ctx.alias,
+    modules: webpackModulesDir,
+    fullySpecified: false,
+    ...config.resolve
+  };
+  config.resolveLoader = {
+    modules: webpackModulesDir,
+    ...config.resolveLoader
+  };
+}
+function baseTranspile(ctx) {
+  const { options } = ctx;
+  const transpile = [
+    /\.kdu\.js/i,
+    /consola\/src/,
+    /kdu-demi/
+  ];
+  for (let pattern of options.build.transpile) {
+    if (typeof pattern === "function") {
+      pattern = pattern(ctx);
+    }
+    if (typeof pattern === "string") {
+      transpile.push(new RegExp(escapeRegExp(normalize(pattern))));
+    } else if (pattern instanceof RegExp) {
+      transpile.push(pattern);
+    }
+  }
+  ctx.transpile = [...transpile, ...ctx.transpile];
+}
+function getCache(ctx) {
+  const { options } = ctx;
+  if (!options.dev) {
+    return false;
+  }
+}
+function getOutput(ctx) {
+  const { options } = ctx;
+  return {
+    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)
+  };
+}
+function getWarningIgnoreFilter(ctx) {
+  const { options } = ctx;
+  const filters = [
+    (warn) => warn.name === "ModuleDependencyWarning" && warn.message.includes("export 'default'") && warn.message.includes("dtwo_plugin_"),
+    ...options.webpack.warningIgnoreFilters || []
+  ];
+  return (warn) => !filters.some((ignoreFilter) => ignoreFilter(warn));
+}
+function getEnv(ctx) {
+  const { options } = ctx;
+  const _env = {
+    "process.env.NODE_ENV": JSON.stringify(ctx.config.mode),
+    "process.mode": JSON.stringify(ctx.config.mode),
+    "process.dev": options.dev,
+    "process.env.KDU_ENV": JSON.stringify(ctx.name),
+    "process.browser": ctx.isClient,
+    "process.client": ctx.isClient,
+    "process.server": ctx.isServer
+  };
+  if (options.webpack.aggressiveCodeRemoval) {
+    _env["typeof process"] = JSON.stringify(ctx.isServer ? "object" : "undefined");
+    _env["typeof window"] = _env["typeof document"] = JSON.stringify(!ctx.isServer ? "object" : "undefined");
+  }
+  return _env;
+}
+
+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;
+        }
+        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
+      }
+    }
+  );
+}
+
+const validate = (compiler) => {
+  if (compiler.options.target !== "node") {
+    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."
+    );
+  }
+};
+const isJSRegExp = /\.[cm]?js(\?[^.]+)?$/;
+const isJS = (file) => isJSRegExp.test(file);
+const extractQueryPartJS = (file) => isJSRegExp.exec(file)?.[1];
+const isCSS = (file) => /\.css(\?[^.]+)?$/.test(file);
+const isHotUpdate = (file) => file.includes("hot-update");
+
+class KduSSRClientPlugin {
+  constructor(options) {
+    this.options = Object.assign({
+      filename: null
+    }, options);
+  }
+  apply(compiler) {
+    compiler.hooks.afterEmit.tap("KduSSRClientPlugin", async (compilation) => {
+      const stats = compilation.getStats().toJson();
+      const allFiles = uniq(stats.assets.map((a) => a.name)).filter((file) => !isHotUpdate(file));
+      const initialFiles = uniq(Object.keys(stats.entrypoints).map((name) => stats.entrypoints[name].assets).reduce((files, entryAssets) => files.concat(entryAssets.map((entryAsset) => entryAsset.name)), []).filter((file) => isJS(file) || isCSS(file))).filter((file) => !isHotUpdate(file));
+      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$1(chunkNames.join("|"));
+        if (!assetsMapping[componentHash]) {
+          assetsMapping[componentHash] = [];
+        }
+        assetsMapping[componentHash].push(name);
+      });
+      const webpackManifest = {
+        publicPath: stats.publicPath,
+        all: allFiles,
+        initial: initialFiles,
+        async: asyncFiles,
+        modules: {},
+        assetsMapping
+      };
+      const { entrypoints = {}, namedChunkGroups = {} } = stats;
+      const assetModules = stats.modules.filter((m) => m.assets.length);
+      const fileToIndex = (file) => webpackManifest.all.indexOf(file);
+      stats.modules.forEach((m) => {
+        if (m.chunks.length === 1) {
+          const [cid] = m.chunks;
+          const chunk = stats.chunks.find((c) => c.id === cid);
+          if (!chunk || !chunk.files) {
+            return;
+          }
+          const id = m.identifier.replace(/\s\w+$/, "");
+          const filesSet = new Set(chunk.files.map(fileToIndex).filter((i) => i !== -1));
+          for (const chunkName of chunk.names) {
+            if (!entrypoints[chunkName]) {
+              const chunkGroup = namedChunkGroups[chunkName];
+              if (chunkGroup) {
+                for (const asset of chunkGroup.assets) {
+                  filesSet.add(fileToIndex(asset.name));
+                }
+              }
+            }
+          }
+          const files = Array.from(filesSet);
+          webpackManifest.modules[hash$1(id)] = files;
+          if (Array.isArray(m.modules)) {
+            for (const concatenatedModule of m.modules) {
+              const id2 = hash$1(concatenatedModule.identifier.replace(/\s\w+$/, ""));
+              if (!webpackManifest.modules[id2]) {
+                webpackManifest.modules[id2] = files;
+              }
+            }
+          }
+          assetModules.forEach((m2) => {
+            if (m2.chunks.includes(cid)) {
+              files.push.apply(files, m2.assets.map(fileToIndex));
+            }
+          });
+        }
+      });
+      const manifest = normalizeWebpackManifest(webpackManifest);
+      await this.options.dtwo.callHook("build:manifest", manifest);
+      const src = JSON.stringify(manifest, null, 2);
+      await fse.mkdirp(dirname(this.options.filename));
+      await fse.writeFile(this.options.filename, src);
+      const mjsSrc = "export default " + src;
+      await fse.writeFile(this.options.filename.replace(".json", ".mjs"), mjsSrc);
+    });
+  }
+}
+
+class KduSSRServerPlugin {
+  constructor(options = {}) {
+    this.options = Object.assign({
+      filename: null
+    }, options);
+  }
+  apply(compiler) {
+    validate(compiler);
+    compiler.hooks.make.tap("KduSSRServerPlugin", (compilation) => {
+      compilation.hooks.processAssets.tapAsync({
+        name: "KduSSRServerPlugin",
+        stage: webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL
+      }, (assets, cb) => {
+        const stats = compilation.getStats().toJson();
+        const [entryName] = Object.keys(stats.entrypoints);
+        const entryInfo = stats.entrypoints[entryName];
+        if (!entryInfo) {
+          return cb();
+        }
+        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."
+          );
+        }
+        const [entry] = entryAssets;
+        if (!entry || typeof entry.name !== "string") {
+          throw new Error(
+            `Entry "${entryName}" not found. Did you specify the correct entry option?`
+          );
+        }
+        const bundle = {
+          entry: entry.name,
+          files: {},
+          maps: {}
+        };
+        stats.assets.forEach((asset) => {
+          if (isJS(asset.name)) {
+            const queryPart = extractQueryPartJS(asset.name);
+            if (queryPart !== void 0) {
+              bundle.files[asset.name] = asset.name.replace(queryPart, "");
+            } else {
+              bundle.files[asset.name] = asset.name;
+            }
+          } else if (asset.name.match(/\.js\.map$/)) {
+            bundle.maps[asset.name.replace(/\.map$/, "")] = asset.name;
+          } else {
+            delete assets[asset.name];
+          }
+        });
+        const src = JSON.stringify(bundle, null, 2);
+        assets[this.options.filename] = {
+          source: () => src,
+          size: () => src.length
+        };
+        const mjsSrc = "export default " + src;
+        assets[this.options.filename.replace(".json", ".mjs")] = {
+          source: () => mjsSrc,
+          map: () => null,
+          size: () => mjsSrc.length
+        };
+        cb();
+      });
+    });
+  }
+}
+
+function kdu(ctx) {
+  const { options, config } = ctx;
+  config.plugins.push(new (KduLoaderPlugin.default || KduLoaderPlugin)());
+  config.module.rules.push({
+    test: /\.kdu$/i,
+    loader: "kdu-loader",
+    options: {
+      reactivityTransform: ctx.dtwo.options.experimental.reactivityTransform,
+      ...options.webpack.loaders.kdu
+    }
+  });
+  if (ctx.isClient) {
+    config.plugins.push(new KduSSRClientPlugin({
+      filename: resolve(options.buildDir, "dist/server", `${ctx.name}.manifest.json`),
+      dtwo: ctx.dtwo
+    }));
+  } else {
+    config.plugins.push(new KduSSRServerPlugin({
+      filename: `${ctx.name}.manifest.json`
+    }));
+  }
+  config.plugins.push(new webpack.DefinePlugin({
+    __KDU_OPTIONS_API__: "true",
+    __KDU_PROD_DEVTOOLS__: "false"
+  }));
+}
+
+function pug(ctx) {
+  ctx.config.module.rules.push({
+    test: /\.pug$/i,
+    oneOf: [
+      {
+        resourceQuery: /^\?kdu/i,
+        use: [{
+          loader: "pug-plain-loader",
+          options: ctx.options.webpack.loaders.pugPlain
+        }]
+      },
+      {
+        use: [
+          "raw-loader",
+          {
+            loader: "pug-plain-loader",
+            options: ctx.options.webpack.loaders.pugPlain
+          }
+        ]
+      }
+    ]
+  });
+}
+
+const isPureObject = (obj) => obj !== null && !Array.isArray(obj) && typeof obj === "object";
+const orderPresets = {
+  cssnanoLast(names) {
+    const nanoIndex = names.indexOf("cssnano");
+    if (nanoIndex !== names.length - 1) {
+      names.push(names.splice(nanoIndex, 1)[0]);
+    }
+    return names;
+  },
+  autoprefixerLast(names) {
+    const nanoIndex = names.indexOf("autoprefixer");
+    if (nanoIndex !== names.length - 1) {
+      names.push(names.splice(nanoIndex, 1)[0]);
+    }
+    return names;
+  },
+  autoprefixerAndCssnanoLast(names) {
+    return orderPresets.cssnanoLast(orderPresets.autoprefixerLast(names));
+  }
+};
+const getPostcssConfig = (dtwo) => {
+  function defaultConfig() {
+    return {
+      sourceMap: dtwo.options.webpack.cssSourceMap,
+      plugins: dtwo.options.postcss.plugins,
+      order: "autoprefixerAndCssnanoLast"
+    };
+  }
+  function sortPlugins({ plugins, order }) {
+    const names = Object.keys(plugins);
+    if (typeof order === "string") {
+      order = orderPresets[order];
+    }
+    return typeof order === "function" ? order(names, orderPresets) : order || names;
+  }
+  function loadPlugins(config) {
+    if (!isPureObject(config.plugins)) {
+      return;
+    }
+    const cjs = createCommonJS(import.meta.url);
+    config.plugins = sortPlugins(config).map((pluginName) => {
+      const pluginFn = requireModule(pluginName, { paths: [cjs.__dirname] });
+      const pluginOptions = config.plugins[pluginName];
+      if (!pluginOptions || typeof pluginFn !== "function") {
+        return null;
+      }
+      return pluginFn(pluginOptions);
+    }).filter(Boolean);
+  }
+  if (!dtwo.options.webpack.postcss || !dtwo.options.postcss) {
+    return false;
+  }
+  const configFile = dtwo.options.postcss.config;
+  if (configFile) {
+    return {
+      postcssOptions: {
+        config: configFile
+      },
+      sourceMap: dtwo.options.webpack.cssSourceMap
+    };
+  }
+  let postcssOptions = cloneDeep(dtwo.options.postcss);
+  if (isPureObject(postcssOptions)) {
+    if (Array.isArray(postcssOptions.plugins)) {
+      defaults$1(postcssOptions, defaultConfig());
+    } else {
+      postcssOptions = merge({}, defaultConfig(), postcssOptions);
+      loadPlugins(postcssOptions);
+    }
+    delete dtwo.options.webpack.postcss.order;
+    return {
+      sourceMap: dtwo.options.webpack.cssSourceMap,
+      ...dtwo.options.webpack.postcss,
+      postcssOptions
+    };
+  }
+};
+
+function style(ctx) {
+  applyPresets(ctx, [
+    loaders,
+    extractCSS,
+    minimizer
+  ]);
+}
+function minimizer(ctx) {
+  const { options, config } = ctx;
+  if (options.webpack.optimizeCSS && Array.isArray(config.optimization.minimizer)) {
+    config.optimization.minimizer.push(new CssMinimizerPlugin({
+      ...options.webpack.optimizeCSS
+    }));
+  }
+}
+function extractCSS(ctx) {
+  const { options, config } = ctx;
+  if (options.webpack.extractCSS) {
+    config.plugins.push(new MiniCssExtractPlugin({
+      filename: fileName(ctx, "css"),
+      chunkFilename: fileName(ctx, "css"),
+      ...options.webpack.extractCSS === true ? {} : options.webpack.extractCSS
+    }));
+  }
+}
+function loaders(ctx) {
+  const { config, options } = ctx;
+  config.module.rules.push(createdStyleRule("css", /\.css$/i, null, ctx));
+  config.module.rules.push(createdStyleRule("postcss", /\.p(ost)?css$/i, null, ctx));
+  const lessLoader = { loader: "less-loader", options: options.webpack.loaders.less };
+  config.module.rules.push(createdStyleRule("less", /\.less$/i, lessLoader, ctx));
+  const sassLoader = { loader: "sass-loader", options: options.webpack.loaders.sass };
+  config.module.rules.push(createdStyleRule("sass", /\.sass$/i, sassLoader, ctx));
+  const scssLoader = { loader: "sass-loader", options: options.webpack.loaders.scss };
+  config.module.rules.push(createdStyleRule("scss", /\.scss$/i, scssLoader, ctx));
+  const stylusLoader = { loader: "stylus-loader", options: options.webpack.loaders.stylus };
+  config.module.rules.push(createdStyleRule("stylus", /\.styl(us)?$/i, stylusLoader, ctx));
+}
+function createdStyleRule(lang, test, processorLoader, ctx) {
+  const { options } = ctx;
+  const styleLoaders = [
+    createPostcssLoadersRule(ctx),
+    processorLoader
+  ].filter(Boolean);
+  options.webpack.loaders.css.importLoaders = options.webpack.loaders.cssModules.importLoaders = styleLoaders.length;
+  const cssLoaders = createCssLoadersRule(ctx, options.webpack.loaders.css);
+  const cssModuleLoaders = createCssLoadersRule(ctx, options.webpack.loaders.cssModules);
+  return {
+    test,
+    oneOf: [
+      {
+        resourceQuery: /module/,
+        use: cssModuleLoaders.concat(styleLoaders)
+      },
+      {
+        use: cssLoaders.concat(styleLoaders)
+      }
+    ]
+  };
+}
+function createCssLoadersRule(ctx, cssLoaderOptions) {
+  const { options } = ctx;
+  const cssLoader = { loader: "css-loader", options: cssLoaderOptions };
+  if (options.webpack.extractCSS) {
+    if (ctx.isServer) {
+      if (cssLoader.options.modules) {
+        cssLoader.options.modules.exportOnlyLocals = cssLoader.options.modules.exportOnlyLocals ?? true;
+      }
+      return [cssLoader];
+    }
+    return [
+      {
+        loader: MiniCssExtractPlugin.loader
+      },
+      cssLoader
+    ];
+  }
+  return [
+    cssLoader
+  ];
+}
+function createPostcssLoadersRule(ctx) {
+  const { options, dtwo } = ctx;
+  if (!options.postcss) {
+    return;
+  }
+  const config = getPostcssConfig(dtwo);
+  if (!config) {
+    return;
+  }
+  return {
+    loader: "postcss-loader",
+    options: config
+  };
+}
+
+function dtwo(ctx) {
+  applyPresets(ctx, [
+    base,
+    assets,
+    esbuild,
+    kdu,
+    pug,
+    style
+  ]);
+}
+
+function client(ctx) {
+  ctx.name = "client";
+  ctx.isClient = true;
+  applyPresets(ctx, [
+    dtwo,
+    clientPlugins,
+    clientOptimization,
+    clientDevtool,
+    clientPerformance,
+    clientHMR
+  ]);
+}
+function clientDevtool(ctx) {
+  if (!ctx.dtwo.options.sourcemap.client) {
+    ctx.config.devtool = false;
+    return;
+  }
+  if (!ctx.isDev) {
+    ctx.config.devtool = "source-map";
+    return;
+  }
+  ctx.config.devtool = "eval-cheap-module-source-map";
+}
+function clientPerformance(ctx) {
+  ctx.config.performance = {
+    maxEntrypointSize: 1e3 * 1024,
+    hints: ctx.isDev ? false : "warning",
+    ...ctx.config.performance
+  };
+}
+function clientHMR(ctx) {
+  const { options, config } = ctx;
+  if (!ctx.isDev) {
+    return;
+  }
+  const clientOptions = options.webpack.hotMiddleware?.client || {};
+  const hotMiddlewareClientOptions = {
+    reload: true,
+    timeout: 3e4,
+    path: joinURL(options.app.baseURL, "__webpack_hmr", ctx.name),
+    ...clientOptions,
+    ansiColors: JSON.stringify(clientOptions.ansiColors || {}),
+    overlayStyles: JSON.stringify(clientOptions.overlayStyles || {}),
+    name: ctx.name
+  };
+  const hotMiddlewareClientOptionsStr = querystring.stringify(hotMiddlewareClientOptions);
+  const app = config.entry.app;
+  app.unshift(
+    `webpack-hot-middleware/client?${hotMiddlewareClientOptionsStr}`
+  );
+  config.plugins = config.plugins || [];
+  config.plugins.push(new webpack.HotModuleReplacementPlugin());
+}
+function clientOptimization(_ctx) {
+}
+function clientPlugins(ctx) {
+  const { options, config } = ctx;
+  if (!ctx.isDev && ctx.name === "client" && options.webpack.analyze) {
+    const statsDir = resolve(options.buildDir, "stats");
+    config.plugins.push(new BundleAnalyzerPlugin({
+      analyzerMode: "static",
+      defaultSizes: "gzip",
+      generateStatsFile: true,
+      openAnalyzer: true,
+      reportFilename: resolve(statsDir, `${ctx.name}.html`),
+      statsFilename: resolve(statsDir, `${ctx.name}.json`),
+      ...options.webpack.analyze === true ? {} : options.webpack.analyze
+    }));
+  }
+}
+
+function node(ctx) {
+  const { config } = ctx;
+  config.target = "node";
+  config.node = false;
+  config.experiments.outputModule = true;
+  config.output = {
+    ...config.output,
+    chunkFilename: "[name].mjs",
+    chunkFormat: "module",
+    chunkLoading: "import",
+    module: true,
+    environment: {
+      module: true,
+      arrowFunction: true,
+      bigIntLiteral: true,
+      const: true,
+      destructuring: true,
+      dynamicImport: true,
+      forOf: true
+    },
+    library: {
+      type: "module"
+    }
+  };
+  config.performance = {
+    ...config.performance,
+    hints: false,
+    maxEntrypointSize: Infinity,
+    maxAssetSize: Infinity
+  };
+}
+
+const assetPattern = /\.(css|s[ca]ss|png|jpe?g|gif|svg|woff2?|eot|ttf|otf|webp|webm|mp4|ogv)(\?.*)?$/i;
+function server(ctx) {
+  ctx.name = "server";
+  ctx.isServer = true;
+  applyPresets(ctx, [
+    dtwo,
+    node,
+    serverStandalone,
+    serverPreset,
+    serverPlugins
+  ]);
+  return getWebpackConfig(ctx);
+}
+function serverPreset(ctx) {
+  const { config } = ctx;
+  config.output.filename = "server.mjs";
+  config.devtool = ctx.dtwo.options.sourcemap.server ? ctx.isDev ? "cheap-module-source-map" : "source-map" : false;
+  config.optimization = {
+    splitChunks: false,
+    minimize: false
+  };
+}
+function serverStandalone(ctx) {
+  const inline = [
+    "src/",
+    "#app",
+    "dtwo",
+    "dtwo3",
+    "!",
+    "-!",
+    "~",
+    "@/",
+    "#",
+    ...ctx.options.build.transpile
+  ];
+  const external = ["#internal/hole"];
+  if (!Array.isArray(ctx.config.externals)) {
+    return;
+  }
+  ctx.config.externals.push(({ request }, cb) => {
+    if (!request) {
+      return cb(void 0, false);
+    }
+    if (external.includes(request)) {
+      return cb(void 0, true);
+    }
+    if (request[0] === "." || isAbsolute(request) || inline.find((prefix) => typeof prefix === "string" && request.startsWith(prefix)) || assetPattern.test(request)) {
+      return cb(void 0, false);
+    }
+    return cb(void 0, true);
+  });
+}
+function serverPlugins(ctx) {
+  const { config, options } = ctx;
+  config.plugins = config.plugins || [];
+  if (options.webpack.serverURLPolyfill) {
+    config.plugins.push(new webpack.ProvidePlugin({
+      URL: [options.webpack.serverURLPolyfill, "URL"],
+      URLSearchParams: [options.webpack.serverURLPolyfill, "URLSearchParams"]
+    }));
+  }
+  if (ctx.dtwo.options.typescript.typeCheck === true || ctx.dtwo.options.typescript.typeCheck === "build" && !ctx.dtwo.options.dev) {
+    config.plugins.push(new ForkTSCheckerWebpackPlugin({ logger }));
+  }
+}
+
+async function bundle(dtwo) {
+  registerVirtualModules();
+  const webpackConfigs = [client, ...dtwo.options.ssr ? [server] : []].map((preset) => {
+    const ctx = createWebpackConfigContext(dtwo);
+    applyPresets(ctx, preset);
+    return getWebpackConfig(ctx);
+  });
+  await dtwo.callHook("webpack:config", webpackConfigs);
+  const mfs = dtwo.options.dev ? createMFS() : null;
+  const compilers = webpackConfigs.map((config) => {
+    config.plugins.push(DynamicBasePlugin.webpack({
+      sourcemap: dtwo.options.sourcemap[config.name]
+    }));
+    config.plugins.push(composableKeysPlugin.webpack({
+      sourcemap: dtwo.options.sourcemap[config.name],
+      rootDir: dtwo.options.rootDir
+    }));
+    const compiler = webpack(config);
+    if (dtwo.options.dev) {
+      compiler.outputFileSystem = mfs;
+    }
+    return compiler;
+  });
+  dtwo.hook("close", async () => {
+    for (const compiler of compilers) {
+      await new Promise((resolve) => compiler.close(resolve));
+    }
+  });
+  if (dtwo.options.dev) {
+    return Promise.all(compilers.map((c) => compile(c)));
+  }
+  for (const c of compilers) {
+    await compile(c);
+  }
+}
+async function createDevMiddleware(compiler) {
+  const dtwo = useDtwo();
+  logger.debug("Creating webpack middleware...");
+  const devMiddleware = webpackDevMiddleware(compiler, {
+    publicPath: joinURL(dtwo.options.app.baseURL, dtwo.options.app.buildAssetsDir),
+    outputFileSystem: compiler.outputFileSystem,
+    stats: "none",
+    ...dtwo.options.webpack.devMiddleware
+  });
+  dtwo.hook("close", () => pify(devMiddleware.close.bind(devMiddleware))());
+  const { client: _client, ...hotMiddlewareOptions } = dtwo.options.webpack.hotMiddleware || {};
+  const hotMiddleware = webpackHotMiddleware(compiler, {
+    log: false,
+    heartbeat: 1e4,
+    path: joinURL(dtwo.options.app.baseURL, "__webpack_hmr", compiler.options.name),
+    ...hotMiddlewareOptions
+  });
+  const devHandler = fromNodeMiddleware(devMiddleware);
+  const hotHandler = fromNodeMiddleware(hotMiddleware);
+  await dtwo.callHook("server:devHandler", defineEventHandler(async (event) => {
+    await devHandler(event);
+    await hotHandler(event);
+  }));
+  return devMiddleware;
+}
+async function compile(compiler) {
+  const dtwo = useDtwo();
+  const { name } = compiler.options;
+  await dtwo.callHook("webpack:compile", { name, compiler });
+  compiler.hooks.done.tap("load-resources", async (stats2) => {
+    await dtwo.callHook("webpack:compiled", { name, compiler, stats: stats2 });
+  });
+  if (dtwo.options.dev) {
+    const compilersWatching = [];
+    dtwo.hook("close", async () => {
+      await Promise.all(compilersWatching.map((watching) => pify(watching.close.bind(watching))()));
+    });
+    if (name === "client") {
+      return new Promise((resolve, reject) => {
+        compiler.hooks.done.tap("dtwo-dev", () => {
+          resolve(null);
+        });
+        compiler.hooks.failed.tap("dtwo-errorlog", (err) => {
+          reject(err);
+        });
+        createDevMiddleware(compiler).then((devMiddleware) => {
+          compilersWatching.push(devMiddleware.context.watching);
+        });
+      });
+    }
+    return new Promise((resolve, reject) => {
+      const watching = compiler.watch(dtwo.options.watchers.webpack, (err) => {
+        if (err) {
+          return reject(err);
+        }
+        resolve(null);
+      });
+      compilersWatching.push(watching);
+    });
+  }
+  const stats = await new Promise((resolve, reject) => compiler.run((err, stats2) => err ? reject(err) : resolve(stats2)));
+  if (stats.hasErrors()) {
+    const error = new Error("Dtwo build error");
+    error.stack = stats.toString("errors-only");
+    throw error;
+  }
+}
+
+export { bundle };

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@dtwo/webpack-builder",
+  "version": "3.0.0-rc.13",
+  "repository": "d2js/framework",
+  "license": "MIT",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./dist/*": "./dist/*"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@babel/core": "^7.20.2",
+    "@d2js/friendly-errors-webpack-plugin": "^2.5.2",
+    "@dtwo/kit": "3.0.0-rc.13",
+    "@dtwo/unplugin": "^1.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",
+    "fork-ts-checker-webpack-plugin": "^7.2.13",
+    "fs-extra": "^10.1.0",
+    "hash-sum": "^2.0.0",
+    "kdu-bundle-renderer": "^1.0.0",
+    "kdu-loader": "^17.0.0",
+    "lodash-es": "^4.17.21",
+    "magic-string": "^0.26.7",
+    "memfs": "^3.4.11",
+    "mini-css-extract-plugin": "^2.6.1",
+    "mlly": "^1.0.0",
+    "ohash": "^1.0.0",
+    "pathe": "^1.0.0",
+    "pify": "^6.1.0",
+    "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": "^1.0.0",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.75.0",
+    "webpack-bundle-analyzer": "^4.7.0",
+    "webpack-dev-middleware": "^5.3.3",
+    "webpack-hot-middleware": "^2.25.3",
+    "webpack-virtual-modules": "^0.4.6",
+    "webpackbar": "^5.0.2"
+  },
+  "devDependencies": {
+    "@dtwo/schema": "3.0.0-rc.13",
+    "@types/lodash-es": "^4.17.6",
+    "@types/pify": "^5.0.1",
+    "@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",
+    "kdu": "3.2.45",
+    "unbuild": "latest"
+  },
+  "peerDependencies": {
+    "kdu": "^3.2.45"
+  },
+  "engines": {
+    "node": "^14.16.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "scripts": {}
+}