vite-ssg-optimized 0.24.2-optimized.8 → 0.28.0-optimized.1

package/README.md

@@ -1,11 +1,44 @@
-# Vite SSG
+# Vite SSG Optimized
 
 Static-site generation for Vue 3 on Vite.
 
 [![NPM version](https://img.shields.io/npm/v/vite-ssg?color=a1b858)](https://www.npmjs.com/package/vite-ssg)
 
+> ℹ️ **ESM-only from `v27.0.0` (CJS generation format also dropped).**
+>
 > ℹ️ **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**
@@ -46,6 +79,17 @@ export const createApp = ViteSSG(
 )
 ```
 
+### How to allow Rollup tree-shake your client code
+
+In order to allow Rollup tree-shake your client code at build time, you need to wrap your code using `import.meta.env.SSR`, that's, checking if the build is for the server: Rollup will remove the server code from the client build.
+```ts
+if (import.meta.env.SSR) {
+  // your server code will be removed in the client build
+}
+else {
+  // your client code will be removed in the server build
+}
+```
 ### Single Page SSG
 
 For SSG of an index page only (i.e. without `vue-router`); import `vite-ssg/single-page` instead, and only install `@unhead/vue` (`npm i -D vite-ssg @unhead/vue`).
@@ -74,7 +118,7 @@ The `ClientOnly` component is registered globally when the app is created.
 
 ## Document head
 
-We ship [`@unhead/vue`](https://unhead.harlanzw.com/integrations/vue/setup) to manage the document-head out of the box. You can use it directly in your pages/components.
+We ship [`@unhead/vue v2`](https://unhead.unjs.io/docs/vue/head/guides/get-started/overview) to manage the document-head out of the box. You can use it directly in your pages/components.
 For example:
 
 ```html
@@ -99,7 +143,7 @@ useHead({
 
 That's all! No configuration is needed. Vite SSG will automatically handle the server-side rendering and merging.
 
-See [`@unhead/vue`'s docs](https://unhead.unjs.io/setup/vue/installation) for more usage information about `useHead`.
+See [`@unhead/vue v2`'s docs](https://unhead.unjs.io/docs/vue/head/api/composables/use-head) for more usage information about `useHead`.
 
 ## Critical CSS
 
@@ -307,14 +351,14 @@ const { app, router, initialState, isClient, onSSRAppRendered } = ctx
 const pinia = createPinia()
 app.use(pinia)
 
-if (isClient) {
-  pinia.state.value = (initialState.pinia) || {}
-}
-else {
+if (import.meta.env.SSR) {
   onSSRAppRendered(() => {
     initialState.pinia = pinia.state.value
   })
 }
+else {
+  pinia.state.value = (initialState.pinia) || {}
+}
 ```
 
 ## Configuration

package/dist/chunks/jsdomGlobal.mjs

@@ -1,85 +1,30 @@
 import JSDOM from 'jsdom';
 
-/*
-MIT License
-
-Copyright for portions of global-jsdom are held by Rico Sta. Cruz, 2016 as part of
-jsdom-global. All other copyright for global-jsdom are held by jonathan schatz, 2017.
-
-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.
-*/
-
-
 const defaultHtml = '<!doctype html><html><head><meta charset="utf-8"></head><body></body></html>';
-
-// define this here so that we only ever dynamically populate KEYS once.
-
 const KEYS = [];
-
 function jsdomGlobal(html = defaultHtml, options = {}) {
-  // Idempotency
-  if (global.navigator
-    && global.navigator.userAgent
-    && global.navigator.userAgent.includes('Node.js')
-    && global.document
-    && typeof global.document.destroy === 'function') {
-    return global.document.destroy
+  if (global.navigator && global.navigator.userAgent && global.navigator.userAgent.includes("Node.js") && global.document && typeof global.document.destroy === "function") {
+    return global.document.destroy;
   }
-
-  // set a default url if we don't get one - otherwise things explode when we copy localstorage keys
-  if (!('url' in options))
-    Object.assign(options, { url: 'http://localhost:3000' });
-
-  // enable pretendToBeVisual by default since react needs
-  // window.requestAnimationFrame, see https://github.com/jsdom/jsdom#pretending-to-be-a-visual-browser
-  if (!('pretendToBeVisual' in options))
+  if (!("url" in options))
+    Object.assign(options, { url: "http://localhost:3000" });
+  if (!("pretendToBeVisual" in options))
     Object.assign(options, { pretendToBeVisual: true });
-
   const jsdom = new JSDOM.JSDOM(html, options);
   const { window } = jsdom;
   const { document } = window;
-
-  // generate our list of keys by enumerating document.window - this list may vary
-  // based on the jsdom version. filter out internal methods as well as anything
-  // that node already defines
-
   if (KEYS.length === 0) {
-    KEYS.push(...Object.getOwnPropertyNames(window).filter(k => !k.startsWith('_')).filter(k => !(k in global)));
-    // going to add our jsdom instance, see below
-    KEYS.push('$jsdom');
+    KEYS.push(...Object.getOwnPropertyNames(window).filter((k) => !k.startsWith("_")).filter((k) => !(k in global)));
+    KEYS.push("$jsdom");
   }
-
-  KEYS.forEach(key => global[key] = window[key]);
-
-  // setup document / window / window.console
+  KEYS.forEach((key) => global[key] = window[key]);
   global.document = document;
   global.window = window;
   window.console = global.console;
-
-  // add access to our jsdom instance
   global.$jsdom = jsdom;
-
-  const cleanup = () => KEYS.forEach(key => delete global[key]);
-
+  const cleanup = () => KEYS.forEach((key) => delete global[key]);
   document.destroy = cleanup;
-
-  return cleanup
+  return cleanup;
 }
 
 export { jsdomGlobal };

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

@@ -1,12 +1,11 @@
 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.C_FfKIMS.mjs';
+export { R as RouterOptions, b as ViteSSGOptions } from '../shared/vite-ssg-optimized.C_FfKIMS.mjs';
 import '@unhead/vue';
 import 'beasties';
-import 'critters';
 import 'vue-router';
 import 'html-minifier-terser';
 
-declare function ViteSSG(App: Component, fn?: (context: ViteSSGContext<false>) => Promise<void> | void, options?: ViteSSGClientOptions): (client?: boolean) => Promise<ViteSSGContext<false>>;
+declare function ViteSSG(App: Component, fn?: (context: ViteSSGContext<false>) => Promise<void> | void, options?: ViteSSGClientOptions): () => Promise<ViteSSGContext<false>>;
 
 export { ViteSSG, ViteSSGClientOptions, ViteSSGContext };

package/dist/client/single-page.mjs

@@ -1,33 +1,44 @@
-import { createHead, createServerHead } 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';
+import { createHead as createHead$1 } from '@unhead/vue/client';
+import { createHead } from '@unhead/vue/server';
+import { createSSRApp, createApp } from 'vue';
+import { C as ClientOnly, d as documentReady } from '../shared/vite-ssg-optimized.ETIvV-80.mjs';
+import { d as deserializeState } from '../shared/vite-ssg-optimized.C6pK7rvr.mjs';
 
-function ViteSSG(App, fn, options = {}) {
+function ViteSSG(App, fn, options) {
   const {
     transformState,
     registerComponents = true,
     useHead = true,
     rootContainer = "#app"
-  } = options;
-  const isClient = typeof window !== "undefined";
-  async function createApp$1(client = false) {
-    const app = client ? createApp(App) : createSSRApp(App);
+  } = options ?? {};
+  async function createApp$1() {
+    const isClient = !import.meta.env.SSR;
+    const isHydrationMode = options?.hydration || isClient && document.querySelectorAll("[data-server-rendered]").length > 0;
+    const app = import.meta.env.SSR || isHydrationMode ? createSSRApp(App) : createApp(App);
     let head;
     if (useHead) {
-      head = client ? createHead() : createServerHead();
-      app.use(head);
+      app.use(head = import.meta.env.SSR ? createHead() : createHead$1());
     }
     const appRenderCallbacks = [];
-    const onSSRAppRendered = client ? () => {
-    } : (cb) => appRenderCallbacks.push(cb);
+    const onSSRAppRendered = import.meta.env.SSR ? (cb) => appRenderCallbacks.push(cb) : () => {
+    };
     const triggerOnSSRAppRendered = () => {
       return Promise.all(appRenderCallbacks.map((cb) => cb()));
     };
-    const context = { app, head, isClient, router: void 0, routes: void 0, initialState: {}, onSSRAppRendered, triggerOnSSRAppRendered, transformState };
+    const context = {
+      app,
+      head,
+      isClient: !import.meta.env.SSR,
+      router: void 0,
+      routes: void 0,
+      initialState: {},
+      onSSRAppRendered,
+      triggerOnSSRAppRendered,
+      transformState
+    };
     if (registerComponents)
       app.component("ClientOnly", ClientOnly);
-    if (client) {
+    if (!import.meta.env.SSR) {
       await documentReady();
       context.initialState = transformState?.(window.__INITIAL_STATE__ || {}) || deserializeState(window.__INITIAL_STATE__);
     }
@@ -38,9 +49,9 @@ function ViteSSG(App, fn, options = {}) {
       initialState
     };
   }
-  if (isClient) {
+  if (!import.meta.env.SSR) {
     (async () => {
-      const { app } = await createApp$1(true);
+      const { app } = await createApp$1();
       app.mount(rootContainer, true);
     })();
   }

package/dist/index.d.mts

@@ -1,12 +1,11 @@
 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.C_FfKIMS.mjs';
+export { b as ViteSSGOptions } from './shared/vite-ssg-optimized.C_FfKIMS.mjs';
 import '@unhead/vue';
 import 'beasties';
-import 'critters';
 import 'vue-router';
 import 'html-minifier-terser';
 
-declare function ViteSSG(App: Component, routerOptions: RouterOptions, fn?: (context: ViteSSGContext<true>) => Promise<void> | void, options?: ViteSSGClientOptions): (client?: boolean, routePath?: string) => Promise<ViteSSGContext<true>>;
+declare function ViteSSG(App: Component, routerOptions: RouterOptions, fn?: (context: ViteSSGContext<true>) => Promise<void> | void, options?: ViteSSGClientOptions): (routePath?: string) => Promise<ViteSSGContext<true>>;
 
 export { RouterOptions, ViteSSG, ViteSSGClientOptions, ViteSSGContext };

package/dist/index.mjs

@@ -1,42 +1,42 @@
-import { createHead, createServerHead } from '@unhead/vue';
+import { createHead as createHead$1 } from '@unhead/vue/client';
+import { createHead } from '@unhead/vue/server';
 import { createApp, createSSRApp } 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';
+import { createRouter, createMemoryHistory, createWebHistory } from 'vue-router';
+import { C as ClientOnly, d as documentReady } from './shared/vite-ssg-optimized.ETIvV-80.mjs';
+import { d as deserializeState } from './shared/vite-ssg-optimized.C6pK7rvr.mjs';
 
-function ViteSSG(App, routerOptions, fn, options = {}) {
+function ViteSSG(App, routerOptions, fn, options) {
   const {
     transformState,
     registerComponents = true,
     useHead = true,
     rootContainer = "#app"
-  } = options;
-  const isClient = typeof window !== "undefined";
-  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);
+  } = options ?? {};
+  async function createApp$1(routePath) {
+    const isClient = !import.meta.env.SSR;
+    const isHydrationMode = options?.hydration || isClient && document.querySelectorAll("[data-server-rendered]").length > 0;
+    const app = import.meta.env.SSR || isHydrationMode ? createApp(App) : createSSRApp(App);
     let head;
     if (useHead) {
-      head = client ? createHead() : createServerHead();
-      app.use(head);
+      app.use(head = import.meta.env.SSR ? createHead() : createHead$1());
     }
     const router = createRouter({
-      history: client ? createWebHistory(routerOptions.base) : createMemoryHistory(routerOptions.base),
+      history: import.meta.env.SSR ? createMemoryHistory(routerOptions.base) : createWebHistory(routerOptions.base),
       ...routerOptions
     });
     const { routes } = routerOptions;
     if (registerComponents)
       app.component("ClientOnly", ClientOnly);
     const appRenderCallbacks = [];
-    const onSSRAppRendered = client ? () => {
-    } : (cb) => appRenderCallbacks.push(cb);
+    const onSSRAppRendered = import.meta.env.SSR ? (cb) => appRenderCallbacks.push(cb) : () => {
+    };
     const triggerOnSSRAppRendered = () => {
       return Promise.all(appRenderCallbacks.map((cb) => cb()));
     };
     const context = {
       app,
       head,
-      isClient,
+      isClient: !import.meta.env.SSR,
       router,
       routes,
       onSSRAppRendered,
@@ -45,7 +45,7 @@ function ViteSSG(App, routerOptions, fn, options = {}) {
       transformState,
       routePath
     };
-    if (client) {
+    if (!import.meta.env.SSR) {
       await documentReady();
       context.initialState = transformState?.(window.__INITIAL_STATE__ || {}) || deserializeState(window.__INITIAL_STATE__);
     }
@@ -61,7 +61,7 @@ function ViteSSG(App, routerOptions, fn, options = {}) {
       }
       next();
     });
-    if (!client) {
+    if (import.meta.env.SSR) {
       const route = context.routePath ?? "/";
       router.push(route);
       await router.isReady();
@@ -73,9 +73,9 @@ function ViteSSG(App, routerOptions, fn, options = {}) {
       initialState
     };
   }
-  if (isClient) {
+  if (!import.meta.env.SSR) {
     (async () => {
-      const { app, router } = await createApp$1(true);
+      const { app, router } = await createApp$1();
       await router.isReady();
       app.mount(rootContainer, true);
     })();

package/dist/node/cli.mjs

@@ -1,45 +1,32 @@
 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.3819f58f.mjs';
-import 'node:module';
-import 'node:path';
+import { gray, bold, red } from 'ansis';
+import { cac } from 'cac';
+import { b as build } from '../shared/vite-ssg-optimized.BfxECNw7.mjs';
 import '@unhead/ssr';
-import 'fs-extra';
-import 'vite';
-import '../shared/vite-ssg-optimized.579feabb.mjs';
 import 'html5parser';
 import 'node:worker_threads';
+import 'node:fs';
+import 'node:fs/promises';
+import 'node:path';
+import 'node:url';
+import 'vite';
+import '../shared/vite-ssg-optimized.C6pK7rvr.mjs';
 
-yargs(hideBin(process.argv)).scriptName("vite-ssg").usage("$0 [args]").command(
-  "build",
-  "Build SSG",
-  (args) => args.option("script", {
-    choices: ["sync", "async", "defer", "async defer"],
-    describe: "Rewrites script loading timing"
-  }).option("mock", {
-    type: "boolean",
-    describe: "Mock browser globals (window, document, etc.) for SSG"
-  }).option("config", {
-    alias: "c",
-    type: "string",
-    describe: "The vite config file to use"
-  }).option("base", {
-    alias: "b",
-    type: "string",
-    describe: "The base path to render"
-  }).option("skip-build", {
-    type: "boolean",
-    describe: "Skip build if already have build in ssg-out dir"
-  }),
-  async (args) => {
-    const { config: configFile = void 0, ...ssgOptions } = args;
-    await build(ssgOptions, { configFile });
+const cli = cac("vite-ssg");
+cli.command("build", "Build SSG").option("--script <script>", "Rewrites script loading timing").option("--mock", "Mock browser globals (window, document, etc.) for SSG").option("--mode <mode>", "Specify the mode the Vite process is running in").option("--config, -c <config>", "The vite config file to use").option("--base, -b <base>", "The base path to render").option("--skip-build", "Skip build if already have build in ssg-out dir").action(async (args) => {
+  const { config: configFile = void 0, ...ssgOptions } = args;
+  if (args.script && !["sync", "async", "defer", "async defer"].includes(args.script)) {
+    console.error(`
+${gray("[vite-ssg]")} ${bold(red("Invalid script option."))}`);
+    process.exit(1);
   }
-).fail((msg, err, yargs2) => {
+  await build(ssgOptions, { configFile });
+});
+cli.on("command:*", () => {
   console.error(`
-${gray("[vite-ssg]")} ${bold(red("An internal error occurred."))}`);
-  console.error(`${gray("[vite-ssg]")} ${reset(`Please report an issue, if none already exists: ${underline("https://github.com/antfu/vite-ssg/issues")}`)}`);
-  yargs2.exit(1, err);
-}).showHelpOnFail(false).help().argv;
+${gray("[vite-ssg]")} ${bold(red("Invalid command."))}`);
+  cli.outputHelp();
+  process.exit(1);
+});
+cli.help();
+cli.parse(process.argv);

package/dist/node.d.mts

@@ -1,9 +1,13 @@
-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.C_FfKIMS.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.mjs

@@ -1,11 +1,12 @@
-export { b as build } from './shared/vite-ssg-optimized.3819f58f.mjs';
-import 'node:module';
-import 'node:path';
-import 'node:process';
+export { b as build } from './shared/vite-ssg-optimized.BfxECNw7.mjs';
 import '@unhead/ssr';
-import 'fs-extra';
-import 'kolorist';
-import 'vite';
-import './shared/vite-ssg-optimized.579feabb.mjs';
 import 'html5parser';
 import 'node:worker_threads';
+import 'ansis';
+import 'node:fs';
+import 'node:fs/promises';
+import 'node:path';
+import 'node:process';
+import 'node:url';
+import 'vite';
+import './shared/vite-ssg-optimized.C6pK7rvr.mjs';

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

@@ -1,27 +1,15 @@
-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.C_FfKIMS.mjs';
 import '@unhead/vue';
-import 'critters';
+import 'beasties';
 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;
     };