@vnejs/build 0.0.33 → 0.0.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vnejs/build",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "description": "Build tools for @vnejs",
   "main": "src/index.js",
   "bin": {
@@ -15,28 +15,35 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
   "dependencies": {
     "commander": "13.1.0",
     "@bem-react/classname": "1.5.12",
     "lodash.merge": "4.6.2",
-    "webpack": "^5.88.1",
-    "html-webpack-plugin": "4.5.2",
-    "mini-css-extract-plugin": "1.1.1",
-    "regenerator-runtime": "0.13.7",
-    "style-loader": "2.0.0",
-    "css-loader": "5.0.0",
+    "webpack": "5.107.2",
+    "html-webpack-plugin": "5.6.7",
+    "core-js": "3.49.0",
+    "style-loader": "4.0.0",
+    "css-loader": "7.1.4",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@loadable/babel-plugin": "5.13.2",
-    "@loadable/webpack-plugin": "5.14.0",
-    "babel-loader": "8.1.0",
-    "babel-plugin-module-resolver": "4.0.0",
-    "babel-plugin-transform-react-remove-prop-types": "0.4.24",
+    "babel-loader": "10.1.1",
     "base64-inline-loader": "2.0.1",
-    "@babel/core": "7.12.3",
-    "@babel/plugin-proposal-class-properties": "7.12.1",
-    "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/preset-env": "7.12.1",
-    "@babel/preset-react": "7.12.1"
+    "@babel/core": "7.29.7",
+    "@babel/plugin-transform-class-properties": "7.29.7",
+    "@babel/preset-env": "7.29.7",
+    "@babel/preset-react": "7.29.7",
+    "@babel/preset-typescript": "7.29.7"
   }
 }

package/src/client/webpack.config.js

@@ -2,34 +2,76 @@ const fs = require("fs");
 const path = require("path");
 const webpack = require("webpack");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
+const buildRoot = path.join(__dirname, "../..");
+const entryDir = "entry";
 const isDev = process.env.NODE_ENV === "development";
 
-const getScriptLoader = (nodeModulesPath) => ({
+const vnejsPattern = `${path.sep}node_modules${path.sep}@vnejs${path.sep}`;
+
+const shouldBabelTranspile = (resourcePath) => {
+  if (resourcePath.includes(`${path.sep}node_modules${path.sep}`)) {
+    if (!resourcePath.includes(vnejsPattern)) return false;
+
+    return !/[\\/]dist[\\/]/.test(resourcePath);
+  }
+
+  return true;
+};
+
+const getScriptLoader = () => ({
   loader: `babel-loader`,
   options: {
-    plugins: [`@babel/plugin-syntax-dynamic-import`, `@babel/plugin-proposal-class-properties`, `@loadable/babel-plugin`],
+    root: buildRoot,
+    plugins: [`@babel/plugin-transform-class-properties`],
     presets: [
+      [`@babel/preset-typescript`, { allowDeclareFields: true }],
       [`@babel/preset-react`, { runtime: "automatic" }],
-      [`@babel/preset-env`, { useBuiltIns: "entry", corejs: "core-js@3", modules: "commonjs" }],
+      [`@babel/preset-env`, { bugfixes: true, corejs: 3, modules: "commonjs", useBuiltIns: `usage` }],
     ],
     cacheDirectory: true,
     caller: { target: "clientside", name: "babel-loader" },
   },
 });
 
-const getCssLoader = (nodeModulesPath) => [
-  // MiniCssExtractPlugin.loader,
-  { loader: `style-loader` },
-  { loader: `css-loader` },
-];
+const getCssLoader = () => [{ loader: `style-loader` }, { loader: `css-loader` }];
+
+const webpackChunkPattern = /^(index|vendors|uis|bundle)\.[a-f0-9]+\.js$/;
+
+const isWebpackOutput = (asset) => asset === "index.html" || webpackChunkPattern.test(asset) || asset.startsWith("assets/");
+
+const getVnejsScopedPackageNames = (rootPath, scopePrefix) => {
+  let dir = rootPath;
+
+  while (dir !== path.dirname(dir)) {
+    const scopedDir = path.join(dir, "node_modules", "@vnejs");
+
+    if (fs.existsSync(scopedDir)) {
+      return fs
+        .readdirSync(scopedDir)
+        .filter((name) => name.startsWith(scopePrefix))
+        .map((name) => `@vnejs/${name}`)
+        .filter((packageName) => {
+          try {
+            require.resolve(`${packageName}/package.json`, { paths: [rootPath] });
+            return true;
+          } catch {
+            return false;
+          }
+        })
+        .sort();
+    }
+
+    dir = path.dirname(dir);
+  }
+
+  return [];
+};
 
 module.exports = (rootPath, options) => {
   const distPath = path.join(rootPath, "dist");
   const gamePath = path.join(rootPath, "game");
-  const nodeModulesPath = path.join(rootPath, "node_modules");
-  const entry = [path.join(rootPath, "client", "index.js")];
+  const entry = [path.join(rootPath, entryDir, "index.js")];
 
   fs.readdirSync(gamePath).forEach((modDir) => {
     const scriptPath = path.join(gamePath, modDir, "scripts", "index.js");
@@ -39,41 +81,52 @@ module.exports = (rootPath, options) => {
 
   const resolvePackageDir = (name) => path.dirname(require.resolve(`${name}/package.json`, { paths: [rootPath] }));
 
+  const uisPackages = getVnejsScopedPackageNames(rootPath, "uis.");
+  const bundlePackages = getVnejsScopedPackageNames(rootPath, "bundles.");
+
+  const indexDependOn = ["vendors"];
+
+  uisPackages.length && indexDependOn.push("uis");
+  bundlePackages.length && indexDependOn.push("bundle");
+
+  const htmlChunks = [...indexDependOn, "index"];
+
+  const webpackEntry = { index: { import: entry, chunkLoading: false, dependOn: indexDependOn }, vendors: [`react`, `react-dom`, `@bem-react/classname`] };
+
+  uisPackages.length && (webpackEntry.uis = { import: uisPackages, dependOn: "vendors" });
+
+  if (bundlePackages.length) {
+    const bundleDependOn = ["vendors"];
+
+    uisPackages.length && bundleDependOn.push("uis");
+
+    webpackEntry.bundle = { import: bundlePackages, dependOn: bundleDependOn };
+  }
+
   return {
     watch: options.watch,
     mode: isDev ? "development" : "production",
     target: "web",
-    entry: {
-      index: { import: entry, chunkLoading: false, dependOn: "vendors" },
-      vendors: [`regenerator-runtime`, `react`, `react-dom`, `@bem-react/classname`],
-    },
+    entry: webpackEntry,
     optimization: { minimize: true },
     resolve: {
       extensions: [".js", ".jsx", ".ts", ".tsx", ".css"],
-      alias: {
-        react: resolvePackageDir("react"),
-        "react-dom": resolvePackageDir("react-dom"),
-      },
+      alias: { "react": resolvePackageDir("react"), "react-dom": resolvePackageDir("react-dom") },
+    },
+    output: {
+      path: distPath,
+      filename: "[name].[contenthash].js",
+      clean: { keep: (asset) => !isWebpackOutput(asset) },
     },
-    output: { path: distPath, filename: "[name].[hash].js" },
     plugins: [
-      new webpack.DefinePlugin({
-        "process.env.NODE_ENV": `"${isDev ? "development" : "production"}"`,
-      }),
-      new HtmlWebpackPlugin({
-        filename: "index.html",
-        template: path.join(rootPath, "client", "index.html"),
-        chunks: ["vendors", "index"],
-        chunksSortMode: "manual",
-      }),
-      new MiniCssExtractPlugin({ filename: "index.css" }),
+      new webpack.DefinePlugin({ "process.env.NODE_ENV": `"${isDev ? "development" : "production"}"` }),
+      new HtmlWebpackPlugin({ filename: "index.html", template: path.join(rootPath, entryDir, "index.html"), chunks: htmlChunks, chunksSortMode: "manual" }),
     ],
 
     module: {
       rules: [
-        { test: /\.m?(t|j)sx?$/, include: path.join(nodeModulesPath, "@vnejs"), use: getScriptLoader(nodeModulesPath) },
-        { test: /\.m?(t|j)sx?$/, exclude: /node_modules/, use: getScriptLoader(nodeModulesPath) },
-        { test: /\.css$/, use: getCssLoader(nodeModulesPath) },
+        { test: /\.m?(t|j)sx?$/, exclude: (resourcePath) => !shouldBabelTranspile(resourcePath), use: getScriptLoader() },
+        { test: /\.css$/, use: getCssLoader() },
         {
           test: /\.(ttf|eot|woff2?)$/,
           type: "asset/resource",

package/src/data/index.js

@@ -22,17 +22,19 @@ const buildDataFunc = (gameDir, distDir) => {
   fs.writeFileSync(path.join(distDir, "mods.json"), JSON.stringify(fs.readdirSync(gameDir)));
 };
 
-const recreateDist = (distDir) => {
-  fs.rmSync(distDir, { recursive: true, force: true });
-  fs.mkdirSync(distDir);
+const cleanJsonFiles = (distDir) => {
+  fs.mkdirSync(distDir, { recursive: true });
+
+  fs.readdirSync(distDir).forEach((file) => {
+    file.endsWith(".json") && fs.rmSync(path.join(distDir, file), { force: true });
+  });
 };
 
 module.exports = (rootDir) => (options) => {
   const gameDir = path.join(rootDir, "game");
   const distDir = path.join(rootDir, "dist");
 
-  recreateDist(distDir);
-
+  cleanJsonFiles(distDir);
   buildDataFunc(gameDir, distDir);
 
   options.watch && fs.watch(gameDir, { recursive: true }, (eventType, filename) => filename && buildDataFunc(gameDir, distDir));