vite-ssg-optimized 0.24.2-optimized.5 → 0.24.2-optimized.50

package/README.md

@@ -1,4 +1,4 @@
-# Vite SSG
+# Vite SSG Optimized
 
 Static-site generation for Vue 3 on Vite.
 
@@ -6,6 +6,37 @@ Static-site generation for Vue 3 on Vite.
 
 > ℹ️ **Vite 2 is supported from `v0.2.x`, Vite 1's support is discontinued.**
 
+> ℹ️  This is a fork from vite-ssg
+
+## Optimizations
+
+* Replaced @unhead/dom by @unhead/ssr
+* Used a custom injectInHtml instead of jsdom with is faster
+* Added worker threads to avoid locking main event loop
+* Avoid grow the number of tasks in queue when we have many routes
+* Added teleport support, the original vite-ssg don't writes teleports to the final file causing SSR mismatches
+* Detect if is in isHydrationMode by quering [data-server-rendered] on client
+* Creates SSRApp or App accord with environment and hydration
+
+
+
+#### Thread Workers
+
+To configure `workerThreads`  `ssgOptions.numberOfWorkers` in `vite.config.ts`
+
+Each thread accept the `Math.ceil(concurrency / numberOfWorkers )` concurrent tasks at max.
+
+```ts
+ defineConfig({
+   ssgOptions: {
+      concurrency: 50,
+      numberOfWorkers: 5 // 5 is the default
+    }
+ })
+ ```
+ 
+
+
 ## Install
 
 > **This library requires Node.js version >= 14**

package/dist/client/single-page.cjs

@@ -17,7 +17,7 @@ function ViteSSG(App, fn, options = {}) {
     const app = client ? vue.createApp(App) : vue.createSSRApp(App);
     let head;
     if (useHead) {
-      head = client ? vue$1.createHead() : vue$1.createServerHead();
+      head = vue$1.createHead();
       app.use(head);
     }
     const appRenderCallbacks = [];

package/dist/client/single-page.d.cts

@@ -1,6 +1,6 @@
 import { Component } from 'vue';
-import { V as ViteSSGContext, a as ViteSSGClientOptions } from '../shared/vite-ssg-optimized.cf5cb4ee.cjs';
-export { R as RouterOptions, b as ViteSSGOptions } from '../shared/vite-ssg-optimized.cf5cb4ee.cjs';
+import { V as ViteSSGContext, a as ViteSSGClientOptions } from '../shared/vite-ssg-optimized.341e382e.cjs';
+export { R as RouterOptions, b as ViteSSGOptions } from '../shared/vite-ssg-optimized.341e382e.cjs';
 import '@unhead/vue';
 import 'beasties';
 import 'critters';

package/dist/client/single-page.d.mts

@@ -1,6 +1,6 @@
 import { Component } from 'vue';
-import { V as ViteSSGContext, a as ViteSSGClientOptions } from '../shared/vite-ssg-optimized.cf5cb4ee.mjs';
-export { R as RouterOptions, b as ViteSSGOptions } from '../shared/vite-ssg-optimized.cf5cb4ee.mjs';
+import { V as ViteSSGContext, a as ViteSSGClientOptions } from '../shared/vite-ssg-optimized.341e382e.mjs';
+export { R as RouterOptions, b as ViteSSGOptions } from '../shared/vite-ssg-optimized.341e382e.mjs';
 import '@unhead/vue';
 import 'beasties';
 import 'critters';

package/dist/client/single-page.d.ts

@@ -1,6 +1,6 @@
 import { Component } from 'vue';
-import { V as ViteSSGContext, a as ViteSSGClientOptions } from '../shared/vite-ssg-optimized.cf5cb4ee.js';
-export { R as RouterOptions, b as ViteSSGOptions } from '../shared/vite-ssg-optimized.cf5cb4ee.js';
+import { V as ViteSSGContext, a as ViteSSGClientOptions } from '../shared/vite-ssg-optimized.341e382e.js';
+export { R as RouterOptions, b as ViteSSGOptions } from '../shared/vite-ssg-optimized.341e382e.js';
 import '@unhead/vue';
 import 'beasties';
 import 'critters';

package/dist/client/single-page.mjs

@@ -1,4 +1,4 @@
-import { createHead, createServerHead } from '@unhead/vue';
+import { createHead } from '@unhead/vue';
 import { createApp, createSSRApp } from 'vue';
 import { C as ClientOnly, d as documentReady } from '../shared/vite-ssg-optimized.5912142e.mjs';
 import { d as deserializeState } from '../shared/vite-ssg-optimized.579feabb.mjs';
@@ -15,7 +15,7 @@ function ViteSSG(App, fn, options = {}) {
     const app = client ? createApp(App) : createSSRApp(App);
     let head;
     if (useHead) {
-      head = client ? createHead() : createServerHead();
+      head = createHead();
       app.use(head);
     }
     const appRenderCallbacks = [];

package/dist/index.cjs

@@ -14,12 +14,29 @@ function ViteSSG(App, routerOptions, fn, options = {}) {
     rootContainer = "#app"
   } = options;
   const isClient = typeof window !== "undefined";
+  async function detectHydrationMode() {
+    if (!isClient)
+      return false;
+    return new Promise((resolve) => {
+      let timeout = void 0;
+      const fnResolve = () => {
+        if (document.readyState !== "loading") {
+          document.removeEventListener("readystatechange", fnResolve);
+          clearTimeout(timeout);
+          resolve(document.querySelectorAll("[data-server-rendered]").length > 0);
+        }
+      };
+      timeout = setTimeout(fnResolve, 1e3);
+      document.addEventListener("readystatechange", fnResolve);
+      fnResolve();
+    });
+  }
   async function createApp(client = false, routePath) {
-    const isHydrationMode = isClient && document.querySelectorAll("[data-server-rendered]").length > 0;
-    const app = client && !isHydrationMode ? vue.createApp(App) : vue.createSSRApp(App);
+    const isHydrationMode = await detectHydrationMode();
+    const app = isHydrationMode ? vue.createSSRApp(App) : vue.createApp(App);
     let head;
     if (useHead) {
-      head = client ? vue$1.createHead() : vue$1.createServerHead();
+      head = vue$1.createHead();
       app.use(head);
     }
     const router = vueRouter.createRouter({

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import { Component } from 'vue';
-import { R as RouterOptions, V as ViteSSGContext, a as ViteSSGClientOptions } from './shared/vite-ssg-optimized.cf5cb4ee.cjs';
-export { b as ViteSSGOptions } from './shared/vite-ssg-optimized.cf5cb4ee.cjs';
+import { R as RouterOptions, V as ViteSSGContext, a as ViteSSGClientOptions } from './shared/vite-ssg-optimized.341e382e.cjs';
+export { b as ViteSSGOptions } from './shared/vite-ssg-optimized.341e382e.cjs';
 import '@unhead/vue';
 import 'beasties';
 import 'critters';

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import { Component } from 'vue';
-import { R as RouterOptions, V as ViteSSGContext, a as ViteSSGClientOptions } from './shared/vite-ssg-optimized.cf5cb4ee.mjs';
-export { b as ViteSSGOptions } from './shared/vite-ssg-optimized.cf5cb4ee.mjs';
+import { R as RouterOptions, V as ViteSSGContext, a as ViteSSGClientOptions } from './shared/vite-ssg-optimized.341e382e.mjs';
+export { b as ViteSSGOptions } from './shared/vite-ssg-optimized.341e382e.mjs';
 import '@unhead/vue';
 import 'beasties';
 import 'critters';

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { Component } from 'vue';
-import { R as RouterOptions, V as ViteSSGContext, a as ViteSSGClientOptions } from './shared/vite-ssg-optimized.cf5cb4ee.js';
-export { b as ViteSSGOptions } from './shared/vite-ssg-optimized.cf5cb4ee.js';
+import { R as RouterOptions, V as ViteSSGContext, a as ViteSSGClientOptions } from './shared/vite-ssg-optimized.341e382e.js';
+export { b as ViteSSGOptions } from './shared/vite-ssg-optimized.341e382e.js';
 import '@unhead/vue';
 import 'beasties';
 import 'critters';

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { createHead, createServerHead } from '@unhead/vue';
-import { createApp, createSSRApp } from 'vue';
+import { createHead } from '@unhead/vue';
+import { createSSRApp, createApp } from 'vue';
 import { createRouter, createWebHistory, createMemoryHistory } from 'vue-router';
 import { C as ClientOnly, d as documentReady } from './shared/vite-ssg-optimized.5912142e.mjs';
 import { d as deserializeState } from './shared/vite-ssg-optimized.579feabb.mjs';
@@ -12,12 +12,29 @@ function ViteSSG(App, routerOptions, fn, options = {}) {
     rootContainer = "#app"
   } = options;
   const isClient = typeof window !== "undefined";
+  async function detectHydrationMode() {
+    if (!isClient)
+      return false;
+    return new Promise((resolve) => {
+      let timeout = void 0;
+      const fnResolve = () => {
+        if (document.readyState !== "loading") {
+          document.removeEventListener("readystatechange", fnResolve);
+          clearTimeout(timeout);
+          resolve(document.querySelectorAll("[data-server-rendered]").length > 0);
+        }
+      };
+      timeout = setTimeout(fnResolve, 1e3);
+      document.addEventListener("readystatechange", fnResolve);
+      fnResolve();
+    });
+  }
   async function createApp$1(client = false, routePath) {
-    const isHydrationMode = isClient && document.querySelectorAll("[data-server-rendered]").length > 0;
-    const app = client && !isHydrationMode ? createApp(App) : createSSRApp(App);
+    const isHydrationMode = await detectHydrationMode();
+    const app = isHydrationMode ? createSSRApp(App) : createApp(App);
     let head;
     if (useHead) {
-      head = client ? createHead() : createServerHead();
+      head = createHead();
       app.use(head);
     }
     const router = createRouter({

package/dist/node/cli.cjs

@@ -4,7 +4,7 @@ const process = require('node:process');
 const kolorist = require('kolorist');
 const yargs = require('yargs');
 const helpers = require('yargs/helpers');
-const node = require('../shared/vite-ssg-optimized.46e3caf6.cjs');
+const node = require('../shared/vite-ssg-optimized.e58a8d97.cjs');
 require('node:module');
 require('node:path');
 require('@unhead/ssr');

package/dist/node/cli.mjs

@@ -2,7 +2,7 @@ import process from 'node:process';
 import { gray, bold, red, reset, underline } from 'kolorist';
 import yargs from 'yargs';
 import { hideBin } from 'yargs/helpers';
-import { b as build } from '../shared/vite-ssg-optimized.62fed880.mjs';
+import { b as build } from '../shared/vite-ssg-optimized.65f46348.mjs';
 import 'node:module';
 import 'node:path';
 import '@unhead/ssr';

package/dist/node.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const node = require('./shared/vite-ssg-optimized.46e3caf6.cjs');
+const node = require('./shared/vite-ssg-optimized.e58a8d97.cjs');
 require('node:module');
 require('node:path');
 require('node:process');

package/dist/node.d.cts

@@ -1,9 +1,14 @@
-export { b as build } from './shared/vite-ssg-optimized.12fd9d22.cjs';
-import 'vite';
-import './shared/vite-ssg-optimized.cf5cb4ee.cjs';
+import { InlineConfig } from 'vite';
+import { b as ViteSSGOptions } from './shared/vite-ssg-optimized.341e382e.cjs';
 import '@unhead/vue';
 import 'beasties';
 import 'critters';
 import 'vue';
 import 'vue-router';
 import 'html-minifier-terser';
+
+declare function build(ssgOptions?: Partial<ViteSSGOptions & {
+    'skip-build'?: boolean;
+}>, viteConfig?: InlineConfig): Promise<void>;
+
+export { build };

package/dist/node.d.mts

@@ -1,9 +1,14 @@
-export { b as build } from './shared/vite-ssg-optimized.892682c8.mjs';
-import 'vite';
-import './shared/vite-ssg-optimized.cf5cb4ee.mjs';
+import { InlineConfig } from 'vite';
+import { b as ViteSSGOptions } from './shared/vite-ssg-optimized.341e382e.mjs';
 import '@unhead/vue';
 import 'beasties';
 import 'critters';
 import 'vue';
 import 'vue-router';
 import 'html-minifier-terser';
+
+declare function build(ssgOptions?: Partial<ViteSSGOptions & {
+    'skip-build'?: boolean;
+}>, viteConfig?: InlineConfig): Promise<void>;
+
+export { build };

package/dist/node.d.ts

@@ -1,9 +1,14 @@
-export { b as build } from './shared/vite-ssg-optimized.950926bc.js';
-import 'vite';
-import './shared/vite-ssg-optimized.cf5cb4ee.js';
+import { InlineConfig } from 'vite';
+import { b as ViteSSGOptions } from './shared/vite-ssg-optimized.341e382e.js';
 import '@unhead/vue';
 import 'beasties';
 import 'critters';
 import 'vue';
 import 'vue-router';
 import 'html-minifier-terser';
+
+declare function build(ssgOptions?: Partial<ViteSSGOptions & {
+    'skip-build'?: boolean;
+}>, viteConfig?: InlineConfig): Promise<void>;
+
+export { build };

package/dist/node.mjs

@@ -1,4 +1,4 @@
-export { b as build } from './shared/vite-ssg-optimized.62fed880.mjs';
+export { b as build } from './shared/vite-ssg-optimized.65f46348.mjs';
 import 'node:module';
 import 'node:path';
 import 'node:process';

package/dist/shared/build.worker.cjs

@@ -2,7 +2,7 @@
 
 const node_module = require('node:module');
 const node_worker_threads = require('node:worker_threads');
-const node = require('./vite-ssg-optimized.46e3caf6.cjs');
+const node = require('./vite-ssg-optimized.e58a8d97.cjs');
 const kolorist = require('kolorist');
 const vite = require('vite');
 require('node:path');
@@ -13,9 +13,39 @@ require('./vite-ssg-optimized.bee8a5a9.cjs');
 require('html5parser');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+async function getBeastiesOrCritters(outDir, options = {}) {
+  try {
+    const BeastiesClass = (await import('beasties')).default;
+    return new BeastiesClass({
+      path: outDir,
+      logLevel: "warn",
+      external: true,
+      inlineFonts: true,
+      preloadFonts: true,
+      ...options
+    });
+  } catch {
+  }
+  try {
+    const CrittersClass = (await import('critters')).default;
+    console.warn("`critters` is deprecated. Please use `beasties` instead.");
+    return new CrittersClass({
+      path: outDir,
+      logLevel: "warn",
+      external: true,
+      inlineFonts: true,
+      preloadFonts: true,
+      ...options
+    });
+  } catch {
+    return void 0;
+  }
+}
+
 (async () => {
-  const fnLog = (level = "info", msg) => {
-    node_worker_threads.parentPort.postMessage({ type: "log", args: [msg], level });
+  const fnLog = (level = "info", ...msg) => {
+    const newMsg = msg.map(node.plainify);
+    node_worker_threads.parentPort.postMessage({ type: "log", args: newMsg, level });
   };
   globalThis.console = Object.assign(globalThis.console, {
     info: fnLog.bind(globalThis.console, "info"),
@@ -25,23 +55,53 @@ var _documentCurrentScript = typeof document !== 'undefined' ? document.currentS
     trace: fnLog.bind(globalThis.console, "trace"),
     debug: fnLog.bind(globalThis.console, "debug")
   });
-  const { serverEntry, out, beastiesOptions, viteConfig, mode, format, dirStyle, ...extraOpts } = node_worker_threads.workerData;
+  const noop = () => void 0;
+  const proccessInjections = {
+    clearLine: noop,
+    cursorTo: noop,
+    clearScreenDown: noop,
+    moveCursor: noop,
+    isTTY: false
+  };
+  Object.assign(process.stdout, proccessInjections);
+  Object.assign(process.stderr, proccessInjections);
+  const { format, out, dirStyle, viteConfig, mode, ...extraOpts } = node_worker_threads.workerData;
   const nodeEnv = process.env.NODE_ENV || "production";
   const config = await vite.resolveConfig(viteConfig, "build", mode, nodeEnv);
   const {
     onPageRendered,
     onBeforePageRender,
-    onDonePageRender
+    // onDonePageRender,
+    onFinished
   } = config.ssgOptions || {};
   const { renderToString } = await import('vue/server-renderer');
   const outDir = out.replace(process.cwd(), "").replace(/^\//g, "");
   const _require = node_module.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('shared/build.worker.cjs', document.baseURI).href)));
-  const beasties = beastiesOptions !== false ? await node.getBeastiesOrCritters(outDir, beastiesOptions) : void 0;
-  if (beasties)
-    console.log(`${kolorist.gray("[vite-ssg]")} ${kolorist.blue("Critical CSS generation enabled via `beasties`")}`);
-  const { createApp } = format === "esm" ? await import(serverEntry) : _require(serverEntry);
+  let createAppPromise = void 0;
+  let beastiesPromise = void 0;
+  function cancelablePromise(promise) {
+    let cancel = () => void 0;
+    const newPromise = new Promise((resolve, reject) => {
+      cancel = () => void reject(new Error("Cancelled"));
+      promise.then((result) => {
+        resolve(result);
+      });
+    });
+    return Object.assign(newPromise, { cancel });
+  }
   const execMap = {
     executeTaskFn: async (opts) => {
+      const { serverEntry } = opts;
+      createAppPromise ?? (createAppPromise = Promise.resolve(format === "esm" ? import(serverEntry) : _require(serverEntry)).then(({ createApp: createApp2 }) => createApp2));
+      const createApp = await createAppPromise;
+      const beastiesOptions = opts.beastiesOptions;
+      beastiesPromise ?? (beastiesPromise = Promise.resolve(beastiesOptions !== false ? getBeastiesOrCritters(outDir, beastiesOptions) : void 0).then((beasties2) => {
+        if (!beasties2)
+          return;
+        console.log(`${kolorist.gray("[vite-ssg]")} ${kolorist.blue("Critical CSS generation enabled via `beasties`")}`);
+        return beasties2;
+      }));
+      const beasties = await beastiesPromise;
       const newOpts = {
         ...extraOpts,
         out,
@@ -50,14 +110,34 @@ var _documentCurrentScript = typeof document !== 'undefined' ? document.currentS
         renderToString,
         onPageRendered,
         onBeforePageRender,
-        onDonePageRender,
+        // onDonePageRender: onDonePageRender,
         beasties,
         config: { logger: { info: (msg) => {
           node_worker_threads.parentPort.postMessage({ type: "log", args: [msg] });
         } } },
         ...opts
       };
-      return node.executeTaskFn(newOpts);
+      const resultPromise = cancelablePromise(node.executeTaskFn(newOpts));
+      const cancel = async () => {
+        resultPromise.cancel();
+      };
+      process.once("beforeExit", cancel);
+      process.once("SIGINT", cancel);
+      process.once("SIGTERM", cancel);
+      return resultPromise;
+    },
+    onFinished,
+    buildClient: async (...args) => {
+      let [_config, _viteConfig] = args;
+      _config = Object.assign({}, config, _config);
+      _viteConfig = Object.assign({}, viteConfig, _viteConfig);
+      return await node.buildClient(_config, _viteConfig);
+    },
+    buildServer: async (...args) => {
+      let [_config, _viteConfig, _opts] = args;
+      _config = Object.assign({}, config, _config);
+      _viteConfig = Object.assign({}, viteConfig, _viteConfig);
+      return await node.buildServer(_config, _viteConfig, _opts);
     }
   };
   node_worker_threads.parentPort?.on("message", async (message) => {
@@ -65,15 +145,16 @@ var _documentCurrentScript = typeof document !== 'undefined' ? document.currentS
     if (type in execMap) {
       node_worker_threads.parentPort.postMessage(`running ${type}`);
       try {
-        const result = await execMap[type](...args ?? []);
-        if (result.appCtx) {
-          Object.assign(result, {
-            appCtx: result.appCtx.router.push(result.route)
-          });
-        }
+        let result = await execMap[type](...args ?? []);
+        result = node.plainify(result);
         node_worker_threads.parentPort.postMessage({ type: "result", id, result });
       } catch (e) {
-        node_worker_threads.parentPort.postMessage({ type: "error", id, error: e.toString() });
+        const message2 = e.message || e.toString();
+        const stack = e.stack || "";
+        const error = { message: message2, stack };
+        process.stderr.write(`${kolorist.red("[vite-ssg-worker]")} ${message2} ${stack}
+`);
+        node_worker_threads.parentPort.postMessage({ type: "error", id, error });
       }
     }
   });

package/dist/shared/build.worker.d.cts

@@ -1,29 +1,19 @@
-import { M as Manifest } from './vite-ssg-optimized.12fd9d22.cjs';
-import { ViteSSGOptions } from 'vite-ssg';
-import { Options } from 'beasties';
-import { Options as Options$1 } from 'html-minifier-terser';
-import 'vite';
-import './vite-ssg-optimized.cf5cb4ee.cjs';
+import { b as ViteSSGOptions } from './vite-ssg-optimized.341e382e.cjs';
 import '@unhead/vue';
+import 'beasties';
 import 'critters';
 import 'vue';
 import 'vue-router';
+import 'html-minifier-terser';
 
 interface WorkerDataEntry {
-    serverEntry: string;
     workerId: number | string;
     format: 'esm' | 'cjs';
     out: string;
     dirStyle: ViteSSGOptions['dirStyle'];
-    beastiesOptions: Options | false;
     mode?: string;
-    ssrManifest: Manifest;
-    indexHTML: string;
-    rootContainerId: string;
-    formatting: ViteSSGOptions['formatting'];
-    minifyOptions: Options$1;
     viteConfig: {
-        configFile: string;
+        configFile?: string;
     };
 }
 

package/dist/shared/build.worker.d.mts

@@ -1,29 +1,19 @@
-import { M as Manifest } from './vite-ssg-optimized.892682c8.mjs';
-import { ViteSSGOptions } from 'vite-ssg';
-import { Options } from 'beasties';
-import { Options as Options$1 } from 'html-minifier-terser';
-import 'vite';
-import './vite-ssg-optimized.cf5cb4ee.mjs';
+import { b as ViteSSGOptions } from './vite-ssg-optimized.341e382e.mjs';
 import '@unhead/vue';
+import 'beasties';
 import 'critters';
 import 'vue';
 import 'vue-router';
+import 'html-minifier-terser';
 
 interface WorkerDataEntry {
-    serverEntry: string;
     workerId: number | string;
     format: 'esm' | 'cjs';
     out: string;
     dirStyle: ViteSSGOptions['dirStyle'];
-    beastiesOptions: Options | false;
     mode?: string;
-    ssrManifest: Manifest;
-    indexHTML: string;
-    rootContainerId: string;
-    formatting: ViteSSGOptions['formatting'];
-    minifyOptions: Options$1;
     viteConfig: {
-        configFile: string;
+        configFile?: string;
     };
 }
 

package/dist/shared/build.worker.d.ts

@@ -1,29 +1,19 @@
-import { M as Manifest } from './vite-ssg-optimized.950926bc.js';
-import { ViteSSGOptions } from 'vite-ssg';
-import { Options } from 'beasties';
-import { Options as Options$1 } from 'html-minifier-terser';
-import 'vite';
-import './vite-ssg-optimized.cf5cb4ee.js';
+import { b as ViteSSGOptions } from './vite-ssg-optimized.341e382e.js';
 import '@unhead/vue';
+import 'beasties';
 import 'critters';
 import 'vue';
 import 'vue-router';
+import 'html-minifier-terser';
 
 interface WorkerDataEntry {
-    serverEntry: string;
     workerId: number | string;
     format: 'esm' | 'cjs';
     out: string;
     dirStyle: ViteSSGOptions['dirStyle'];
-    beastiesOptions: Options | false;
     mode?: string;
-    ssrManifest: Manifest;
-    indexHTML: string;
-    rootContainerId: string;
-    formatting: ViteSSGOptions['formatting'];
-    minifyOptions: Options$1;
     viteConfig: {
-        configFile: string;
+        configFile?: string;
     };
 }