@vnejs/build 0.0.34 → 0.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vnejs/build",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "description": "Build tools for @vnejs",
   "main": "src/index.js",
   "bin": {
@@ -15,35 +15,13 @@
   "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",
+    "@vitejs/plugin-react": "^5.1.2",
+    "commander": "13.1.0",
     "lodash.merge": "4.6.2",
-    "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",
-    "babel-loader": "10.1.1",
-    "base64-inline-loader": "2.0.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"
+    "vite": "^7.0.4"
   }
 }

package/src/cli.js

@@ -26,6 +26,6 @@ program
   .command("client")
   .option("-w, --watch", "watch mode", false)
   .option("-q, --quiet", "no console mode", false)
-  .action(require("./client")(getRootDir()));
+  .action(async (options) => require("./client")(getRootDir())(options));
 
 program.parse();

package/src/client/index.js

@@ -1,9 +1,21 @@
-const webpack = require("webpack");
+const { build } = require("vite");
 
-module.exports = (rootDir) => (options) =>
-  webpack(require("./webpack.config")(rootDir, options), (err, stats) => {
-    if (err || stats.hasErrors()) {
-      stats.hasErrors() && console.error(stats.toJson().errors);
-      stats.hasWarnings() && console.warn(stats.toJson().warnings);
+const createConfig = require("./vite.config");
+
+module.exports = (rootDir) => async (options) => {
+  const config = createConfig(rootDir, options);
+
+  try {
+    const result = await build(config);
+
+    if (result && typeof result.close === "function") {
+      const closeWatcher = () => result.close();
+
+      process.on("SIGINT", closeWatcher);
+      process.on("SIGTERM", closeWatcher);
     }
-  });
+  } catch (error) {
+    console.error(error);
+    process.exit(1);
+  }
+};

package/src/client/utils.js

@@ -0,0 +1,120 @@
+const fs = require("fs");
+const path = require("path");
+
+const entryDir = "entry";
+
+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 [];
+};
+
+const getModOrder = (modDir, gamePath) => {
+  const indexJsonPath = path.join(gamePath, modDir, "index.json");
+
+  if (!fs.existsSync(indexJsonPath)) return 0;
+
+  try {
+    const { order } = JSON.parse(fs.readFileSync(indexJsonPath, "utf8"));
+
+    return typeof order === "number" && Number.isFinite(order) ? order : 0;
+  } catch {
+    return 0;
+  }
+};
+
+const getGameModIndexJsonFiles = (rootPath) => {
+  const gamePath = path.join(rootPath, "game");
+
+  if (!fs.existsSync(gamePath)) return [];
+
+  return fs
+    .readdirSync(gamePath)
+    .map((modDir) => path.join(gamePath, modDir, "index.json"))
+    .filter((file) => fs.existsSync(file));
+};
+
+const getGameModScripts = (rootPath) => {
+  const gamePath = path.join(rootPath, "game");
+
+  if (!fs.existsSync(gamePath)) return [];
+
+  return fs
+    .readdirSync(gamePath)
+    .filter((modDir) => fs.existsSync(path.join(gamePath, modDir, "scripts", "index.js")))
+    .sort((modA, modB) => {
+      const orderDiff = getModOrder(modB, gamePath) - getModOrder(modA, gamePath);
+
+      return orderDiff !== 0 ? orderDiff : modA.localeCompare(modB);
+    })
+    .map((modDir) => path.join(gamePath, modDir, "scripts", "index.js"));
+};
+
+const resolvePackageDir = (name, rootPath) => path.dirname(require.resolve(`${name}/package.json`, { paths: [rootPath] }));
+
+const importStatementPattern = /^[ \t]*import\s[\s\S]*?;[ \t]*(?:\n|$)/gm;
+
+const toImportStatements = (targets) => targets.map((target) => `import ${JSON.stringify(target)};`);
+
+// Порядок side-effect импортов важен: vendors → uis → bundle → entry/index.js → game/*/scripts → тело модуля.
+const orderEntryImports = (code, { vendorImports = [], leadingImports = [], trailingImports = [] } = {}) => {
+  const leading = toImportStatements([...vendorImports, ...leadingImports]);
+  const trailing = toImportStatements(trailingImports);
+  const matches = [...code.matchAll(importStatementPattern)];
+
+  if (!matches.length) {
+    return [...leading, ...trailing, code].filter(Boolean).join("\n");
+  }
+
+  const lastImport = matches.at(-1);
+  const splitAt = lastImport.index + lastImport[0].length;
+  const originalImports = code.slice(0, splitAt).trimEnd();
+  const body = code.slice(splitAt).trimStart();
+
+  return [...leading, originalImports, ...trailing, body].filter(Boolean).join("\n");
+};
+
+const cleanClientOutput = (distPath, isClientOutput) => {
+  if (!fs.existsSync(distPath)) return;
+
+  fs.readdirSync(distPath).forEach((file) => {
+    if (!isClientOutput(file)) return;
+
+    fs.rmSync(path.join(distPath, file), { force: true, recursive: true });
+  });
+};
+
+const vendorImports = ["react", "react-dom", "@bem-react/classname"];
+
+module.exports = {
+  entryDir,
+  vendorImports,
+  getVnejsScopedPackageNames,
+  getGameModIndexJsonFiles,
+  getGameModScripts,
+  resolvePackageDir,
+  orderEntryImports,
+  cleanClientOutput,
+};

package/src/client/vite.config.js

@@ -0,0 +1,130 @@
+const fs = require("fs");
+const path = require("path");
+const react = require("@vitejs/plugin-react").default;
+
+const {
+  entryDir,
+  vendorImports,
+  getVnejsScopedPackageNames,
+  getGameModIndexJsonFiles,
+  getGameModScripts,
+  resolvePackageDir,
+  orderEntryImports,
+  cleanClientOutput,
+} = require("./utils");
+
+const buildChunkPattern = /^(index|vendors|uis|bundle|web)\.[a-zA-Z0-9_-]+\.js$/;
+
+const isClientOutput = (asset) => asset === "index.html" || buildChunkPattern.test(asset) || asset.startsWith("assets/");
+
+const isVendorModule = (id) =>
+  /[/\\](react|react-dom)([/\\]|$)/.test(id) || id.includes("@bem-react/classname");
+
+const isBundleModule = (id) => /(@vnejs[/\\]bundles\.|[/\\]bundles[/\\])/.test(id);
+
+const isUisModule = (id) => /(@vnejs[/\\]uis\.|[/\\]uis[/\\])/.test(id);
+
+module.exports = (rootPath, options = {}) => {
+  const isDev = process.env.NODE_ENV === "development";
+  const entryRoot = path.join(rootPath, entryDir);
+  const distPath = path.join(rootPath, "dist");
+  const entryFile = path.join(entryRoot, "index.js");
+  const htmlFile = path.join(entryRoot, "index.html");
+
+  if (!fs.existsSync(entryFile)) {
+    throw new Error(`entry file not found: ${entryFile}`);
+  }
+
+  if (!fs.existsSync(htmlFile)) {
+    throw new Error(`html template not found: ${htmlFile}`);
+  }
+
+  const uisPackages = getVnejsScopedPackageNames(rootPath, "uis.");
+  const bundlePackages = getVnejsScopedPackageNames(rootPath, "bundles.");
+
+  const buildOrderedEntry = (code) =>
+    orderEntryImports(code, {
+      vendorImports,
+      leadingImports: [...uisPackages, ...bundlePackages],
+      trailingImports: getGameModScripts(rootPath),
+    });
+
+  return {
+    configFile: false,
+    root: entryRoot,
+    base: "./",
+    mode: isDev ? "development" : "production",
+    publicDir: false,
+    logLevel: options.quiet ? "warn" : "info",
+    define: {
+      "process.env.NODE_ENV": JSON.stringify(isDev ? "development" : "production"),
+    },
+    resolve: {
+      alias: {
+        react: resolvePackageDir("react", rootPath),
+        "react-dom": resolvePackageDir("react-dom", rootPath),
+      },
+      extensions: [".js", ".jsx", ".ts", ".tsx", ".css"],
+    },
+    plugins: [
+      react({ include: /\.(jsx|tsx|js|ts)$/ }),
+      {
+        name: "vnejs-build:order-entry",
+        transform(code, id) {
+          if (path.normalize(id) === path.normalize(entryFile)) {
+            return buildOrderedEntry(code);
+          }
+        },
+      },
+      {
+        name: "vnejs-build:html-entry",
+        transformIndexHtml: {
+          order: "pre",
+          handler(html) {
+            if (html.includes("./index.js")) return html;
+
+            return html.replace("</body>", '    <script type="module" src="./index.js"></script>\n  </body>');
+          },
+        },
+      },
+      {
+        name: "vnejs-build:clean-output",
+        buildStart() {
+          cleanClientOutput(distPath, isClientOutput);
+        },
+      },
+      options.watch && {
+        name: "vnejs-build:watch-mod-index",
+        buildStart() {
+          getGameModIndexJsonFiles(rootPath).forEach((file) => this.addWatchFile(file));
+        },
+      },
+    ].filter(Boolean),
+    build: {
+      outDir: path.relative(entryRoot, distPath) || "dist",
+      emptyOutDir: false,
+      minify: !isDev,
+      watch: options.watch ? {} : null,
+      assetsInlineLimit: (filePath) => (/\.(jpe?g|png|gif|svg)$/i.test(filePath) ? Number.POSITIVE_INFINITY : 4096),
+      rollupOptions: {
+        input: htmlFile,
+        output: {
+          entryFileNames: "[name].[hash].js",
+          chunkFileNames: "[name].[hash].js",
+          assetFileNames: (assetInfo) => {
+            const name = assetInfo.names?.[0] || assetInfo.name || "";
+
+            if (/\.(ttf|eot|woff2?)$/i.test(name)) return "assets/fonts/[name].[hash][extname]";
+
+            return "assets/[name].[hash][extname]";
+          },
+          manualChunks(id) {
+            if (isBundleModule(id)) return "bundle";
+            if (isUisModule(id)) return "uis";
+            if (isVendorModule(id)) return "vendors";
+          },
+        },
+      },
+    },
+  };
+};

package/src/data/index.js

@@ -2,7 +2,7 @@ const fs = require("fs");
 const path = require("path");
 const merge = require("lodash.merge");
 
-const { runBuildData } = require("./utils");
+const { runBuildData, buildModsJson } = require("./utils");
 
 const buildDataFunc = (gameDir, distDir) => {
   let result = {};
@@ -19,20 +19,22 @@ const buildDataFunc = (gameDir, distDir) => {
     fs.writeFileSync(path.join(distDir, `label.${label.replaceAll("/", "|")}.json`), JSON.stringify(result.label[label]));
   });
 
-  fs.writeFileSync(path.join(distDir, "mods.json"), JSON.stringify(fs.readdirSync(gameDir)));
+  fs.writeFileSync(path.join(distDir, "mods.json"), JSON.stringify(buildModsJson(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));

package/src/data/utils.js

@@ -151,4 +151,31 @@ const runBuildData = ({ modDir } = {}) => {
   return result;
 };
 
-module.exports = { runBuildData };
+const readModIndexJson = (modPath) => {
+  const indexJsonPath = path.join(modPath, "index.json");
+
+  if (!fs.existsSync(indexJsonPath)) return {};
+
+  try {
+    return JSON.parse(fs.readFileSync(indexJsonPath, "utf8"));
+  } catch {
+    return {};
+  }
+};
+
+const buildModsJson = (gameDir) =>
+  fs.readdirSync(gameDir).reduce((mods, modDir) => {
+    const modPath = path.join(gameDir, modDir);
+
+    if (!fs.statSync(modPath).isDirectory()) return mods;
+
+    mods[modDir] = {
+      ...readModIndexJson(modPath),
+      hasMediaDir: fs.existsSync(path.join(modPath, "media")),
+      hasPublicDir: fs.existsSync(path.join(modPath, "public")),
+    };
+
+    return mods;
+  }, {});
+
+module.exports = { runBuildData, buildModsJson };

package/src/client/webpack.config.js

@@ -1,131 +0,0 @@
-const fs = require("fs");
-const path = require("path");
-const webpack = require("webpack");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-
-const buildRoot = path.join(__dirname, "../..");
-const entryDir = "entry";
-const isDev = process.env.NODE_ENV === "development";
-
-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: {
-    root: buildRoot,
-    plugins: [`@babel/plugin-transform-class-properties`],
-    presets: [
-      [`@babel/preset-typescript`, { allowDeclareFields: true }],
-      [`@babel/preset-react`, { runtime: "automatic" }],
-      [`@babel/preset-env`, { bugfixes: true, corejs: 3, modules: "commonjs", useBuiltIns: `usage` }],
-    ],
-    cacheDirectory: true,
-    caller: { target: "clientside", name: "babel-loader" },
-  },
-});
-
-const getCssLoader = () => [{ loader: `style-loader` }, { loader: `css-loader` }];
-
-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 entry = [path.join(rootPath, entryDir, "index.js")];
-
-  fs.readdirSync(gamePath).forEach((modDir) => {
-    const scriptPath = path.join(gamePath, modDir, "scripts", "index.js");
-
-    fs.existsSync(scriptPath) && entry.push(scriptPath);
-  });
-
-  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: webpackEntry,
-    optimization: { minimize: true },
-    resolve: {
-      extensions: [".js", ".jsx", ".ts", ".tsx", ".css"],
-      alias: { "react": resolvePackageDir("react"), "react-dom": resolvePackageDir("react-dom") },
-    },
-    output: { path: distPath, filename: "[name].[contenthash].js" },
-    plugins: [
-      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?$/, exclude: (resourcePath) => !shouldBabelTranspile(resourcePath), use: getScriptLoader() },
-        { test: /\.css$/, use: getCssLoader() },
-        {
-          test: /\.(ttf|eot|woff2?)$/,
-          type: "asset/resource",
-          generator: { filename: "assets/fonts/[name].[contenthash][ext]" },
-        },
-        { test: /\.(jpe?g|png|gif|svg)$/, use: [{ loader: `base64-inline-loader` }] },
-      ],
-    },
-  };
-};