@vnejs/build 0.2.2 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vnejs/build",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Build tools for @vnejs",
   "main": "src/index.js",
   "bin": {

package/src/client/utils.js

@@ -124,6 +124,24 @@ const cleanClientOutput = (distPath, isClientOutput) => {
   });
 };
 
+const createDeferredEntryScript = (entryScript) => `    <script type="module">
+      const afterFirstPaint = (fn) => requestAnimationFrame(() => requestAnimationFrame(fn));
+      const boot = () => import(${JSON.stringify(entryScript)});
+
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", () => afterFirstPaint(boot), { once: true });
+      } else {
+        afterFirstPaint(boot);
+      }
+    </script>
+`;
+
+const injectDeferredEntry = (html, entryScript) => {
+  if (html.includes(entryScript)) return html;
+
+  return html.replace("</body>", `${createDeferredEntryScript(entryScript)}  </body>`);
+};
+
 module.exports = {
   entryDir,
   resolveEntryFile,
@@ -132,4 +150,6 @@ module.exports = {
   getGameModScripts,
   orderEntryImports,
   cleanClientOutput,
+  createDeferredEntryScript,
+  injectDeferredEntry,
 };

package/src/client/vite.config.js

@@ -10,20 +10,19 @@ const {
   getGameModScripts,
   orderEntryImports,
   cleanClientOutput,
+  injectDeferredEntry,
 } = require("./utils");
 
-const buildChunkPattern = /^(index|uis|bundle|web)\.[a-zA-Z0-9_-]+\.js$/;
+const buildChunkPattern = /^(index|entry|uis|bundle|web)\.[a-zA-Z0-9_-]+\.js$/;
 const legacyChunkPattern = /^vendors\.[a-zA-Z0-9_.-]+$/;
 
-const isClientOutput = (asset) =>
-  asset === "index.html" || buildChunkPattern.test(asset) || legacyChunkPattern.test(asset) || asset.startsWith("assets/");
+const isClientOutput = (asset) => asset === "index.html" || buildChunkPattern.test(asset) || legacyChunkPattern.test(asset) || asset.startsWith("assets/");
 
 const isBundleModule = (id) => /(@vnejs[/\\]bundles\.|[/\\]bundles[/\\])/.test(id);
 
 const isUisModule = (id) => /(@vnejs[/\\]uis\.|[/\\]uis[/\\])/.test(id);
 
-const resolveMode = (options) =>
-  options.mode ?? (process.env.NODE_ENV === "development" ? "development" : "production");
+const resolveMode = (options) => options.mode ?? (process.env.NODE_ENV === "development" ? "development" : "production");
 
 module.exports = (rootPath, options = {}) => {
   const mode = resolveMode(options);
@@ -75,9 +74,7 @@ module.exports = (rootPath, options = {}) => {
         transformIndexHtml: {
           order: "pre",
           handler(html) {
-            if (html.includes(entryScript)) return html;
-
-            return html.replace("</body>", `    <script type="module" src="${entryScript}"></script>\n  </body>`);
+            return injectDeferredEntry(html, entryScript);
           },
         },
       },
@@ -99,6 +96,9 @@ module.exports = (rootPath, options = {}) => {
       emptyOutDir: false,
       minify: !isDev,
       watch: options.watch ? {} : null,
+      modulePreload: {
+        resolveDependencies: (_filename, deps, { hostType }) => (hostType === "html" ? [] : deps),
+      },
       assetsInlineLimit: (filePath) => (/\.(jpe?g|png|gif|svg)$/i.test(filePath) ? Number.POSITIVE_INFINITY : 4096),
       rolldownOptions: {
         input: htmlFile,

package/src/data/utils.js

@@ -60,10 +60,13 @@ const parseLines = (lines, label) => {
 
         curKeys = curKeys.filter(({ indent } = {}) => indent < line.length - line.trim().length);
 
-        const args = curKeys.reduce((acc, { key }) => {
-          if (!acc[key]) acc[key] = {};
-          return acc[key];
-        }, realLines[realLines.length - 1].args);
+        const args = curKeys.reduce(
+          (acc, { key }) => {
+            if (!acc[key]) acc[key] = {};
+            return acc[key];
+          },
+          realLines[realLines.length - 1].args,
+        );
 
         args[key] = mapValue(value);
       } else {
@@ -169,14 +172,7 @@ const mergePlainObjects = (target, source) => {
   for (const [key, value] of Object.entries(source)) {
     const current = result[key];
 
-    if (
-      value !== null &&
-      typeof value === "object" &&
-      !Array.isArray(value) &&
-      current !== null &&
-      typeof current === "object" &&
-      !Array.isArray(current)
-    ) {
+    if (value !== null && typeof value === "object" && !Array.isArray(value) && current !== null && typeof current === "object" && !Array.isArray(current)) {
       result[key] = mergePlainObjects(current, value);
       continue;
     }