vite-ssg-optimized 0.24.2-optimized.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Anthony Fu<https://github.com/antfu>
+
+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.

package/README.md

@@ -0,0 +1,436 @@
+# Vite SSG
+
+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)
+
+> ℹ️ **Vite 2 is supported from `v0.2.x`, Vite 1's support is discontinued.**
+
+## Install
+
+> **This library requires Node.js version >= 14**
+
+<pre>
+<b>npm i -D vite-ssg</b> <em>vue-router @unhead/vue</em>
+</pre>
+
+```diff
+// package.json
+{
+  "scripts": {
+    "dev": "vite",
+-   "build": "vite build"
++   "build": "vite-ssg build"
+
+    // OR if you want to use another vite config file
++   "build": "vite-ssg build -c another-vite.config.ts"
+  }
+}
+```
+
+```ts
+// src/main.ts
+import { ViteSSG } from 'vite-ssg'
+import App from './App.vue'
+
+// `export const createApp` is required instead of the original `createApp(App).mount('#app')`
+export const createApp = ViteSSG(
+  // the root component
+  App,
+  // vue-router options
+  { routes },
+  // function to have custom setups
+  ({ app, router, routes, isClient, initialState }) => {
+    // install plugins etc.
+  },
+)
+```
+
+### 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`).
+
+```ts
+// src/main.ts
+import { ViteSSG } from 'vite-ssg/single-page'
+import App from './App.vue'
+
+// `export const createApp` is required instead of the original `createApp(App).mount('#app')`
+export const createApp = ViteSSG(App)
+```
+
+### `<ClientOnly/>`
+
+The `ClientOnly` component is registered globally when the app is created.
+
+```html
+<client-only>
+  <your-client-side-components />
+  <template #placeholder>
+    <your-placeholder-components />
+  </template>
+</client-only>
+```
+
+## 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.
+For example:
+
+```html
+<template>
+  <button @click="count++">Click</button>
+</template>
+
+<script setup>
+import { useHead } from '@unhead/vue'
+
+useHead({
+  title: 'Website Title',
+  meta: [
+    {
+      name: 'description',
+      content: 'Website description',
+    },
+  ],
+})
+</script>
+```
+
+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`.
+
+## Critical CSS
+
+Vite SSG has built-in support for generating [Critical CSS](https://web.dev/extract-critical-css/) inlined in the HTML via the [`beasties`](https://github.com/danielroe/beasties) package.
+Install it with:
+
+```bash
+npm i -D beasties
+```
+
+Critical CSS generation will automatically be enabled for you.
+
+To configure `beasties`, pass [its options](https://github.com/danielroe/beasties#usage) into `ssgOptions.beastiesOptions` in `vite.config.ts`:
+
+```ts
+// vite.config.ts
+export default defineConfig({
+  ssgOptions: {
+    beastiesOptions: {
+      // E.g., change the preload strategy
+      preload: 'media',
+      // Other options: https://github.com/danielroe/beasties#usage
+    },
+  },
+})
+```
+
+## Initial State
+
+The initial state comprises data that is serialized with your server-side generated HTML and is hydrated in
+the browser when accessed. This data can be data fetched from a CDN, an API, etc, and is typically needed
+as soon as the application starts or is accessed for the first time.
+
+The main advantage of setting the application's initial state is that the statically generated pages do not
+need to refetch the data as it is fetched and serialized into the page's HTML at build time.
+
+The initial state is a plain JavaScript object that can be set during SSR. I.e. when statically generating
+the pages like this:
+
+```ts
+// src/main.ts
+
+// ...
+
+export const createApp = ViteSSG(
+  App,
+  { routes },
+  ({ app, router, routes, isClient, initialState }) => {
+    // ...
+
+    if (import.meta.env.SSR) {
+      // Set initial state during server side
+      initialState.data = { cats: 2, dogs: 3 }
+    }
+    else {
+      // Restore or read the initial state on the client side in the browser
+      console.log(initialState.data) // => { cats: 2, dogs: 3 }
+    }
+
+    // ...
+  },
+)
+```
+
+Typically, you will use this with an application store, such as
+[Vuex](https://vuex.vuejs.org/) or [Pinia](https://pinia.esm.dev/).
+See below for examples:
+
+<details><summary>When using Pinia</summary>
+
+Following [Pinia's guide](https://pinia.esm.dev/ssr), you will to adapt your `main.{ts,js}` file to look
+like this:
+
+```ts
+import { createPinia } from 'pinia'
+import routes from 'virtual:generated-pages'
+// main.ts
+import { ViteSSG } from 'vite-ssg'
+
+import App from './App.vue'
+// use any store you configured that you need data from on start-up
+import { useRootStore } from './store/root'
+
+export const createApp = ViteSSG(
+  App,
+  { routes },
+  ({ app, router, initialState }) => {
+    const pinia = createPinia()
+    app.use(pinia)
+
+    if (import.meta.env.SSR)
+      initialState.pinia = pinia.state.value
+    else
+      pinia.state.value = initialState.pinia || {}
+
+    router.beforeEach((to, from, next) => {
+      const store = useRootStore(pinia)
+      if (!store.ready)
+        // perform the (user-implemented) store action to fill the store's state
+        store.initialize()
+      next()
+    })
+  },
+)
+```
+</details>
+
+<details><summary>When using Vuex</summary>
+<p>
+
+```ts
+import routes from 'virtual:generated-pages'
+// main.ts
+import { ViteSSG } from 'vite-ssg'
+import { createStore } from 'vuex'
+import App from './App.vue'
+
+// Normally, you should definitely put this in a separate file
+// in order to be able to use it everywhere
+const store = createStore({
+  // ...
+})
+
+export const createApp = ViteSSG(
+  App,
+  { routes },
+  ({ app, router, initialState }) => {
+    app.use(store)
+
+    if (import.meta.env.SSR)
+      initialState.store = store.state
+    else
+      store.replaceState(initialState.store)
+
+    router.beforeEach((to, from, next) => {
+      // perform the (user-implemented) store action to fill the store's state
+      if (!store.getters.ready)
+        store.dispatch('initialize')
+
+      next()
+    })
+  },
+)
+```
+</p></details>
+
+For an example on how to use a store with an initial state in a single page app,
+see [the single page example](./examples/single-page/src/main.ts).
+
+### State Serialization
+
+By default, the state is deserialized and serialized by using `JSON.stringify` and `JSON.parse` respectively.
+If this approach works for you, you should definitely stick to it as it yields far better performance.
+
+You may use the `transformState` option in the `ViteSSGClientOptions` options object as shown below.
+A valid approach besides `JSON.stringify` and `JSON.parse` is
+[`@nuxt/devalue`](https://github.com/nuxt-contrib/devalue) (which is used by Nuxt.js):
+
+```ts
+import devalue from '@nuxt/devalue'
+import { ViteSSG } from 'vite-ssg'
+
+// ...
+import App from './App.vue'
+
+export const createApp = ViteSSG(
+  App,
+  { routes },
+  ({ app, router, initialState }) => {
+    // ...
+  },
+  {
+    transformState(state) {
+      return import.meta.env.SSR ? devalue(state) : state
+    },
+  },
+)
+```
+
+**A minor remark when using `@nuxt/devalue`:** In case, you are getting an error because of a `require`
+within the package `@nuxt/devalue`, you have to add the following piece of config to your Vite config:
+
+```ts
+// vite.config.ts
+// ...
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@nuxt/devalue': '@nuxt/devalue/dist/devalue.js',
+    },
+  },
+  // ...
+})
+```
+
+### Async Components
+
+Some applications may make use of Vue features that cause components to render asynchronously (e.g. [`suspense`](https://v3.vuejs.org/guide/migration/suspense.html)). When these features are used in ways that can influence `initialState`, the `onSSRAppRendered` may be used in order to ensure that all async operations are complete during the initial application render.
+For example:
+
+```ts
+const { app, router, initialState, isClient, onSSRAppRendered } = ctx
+
+const pinia = createPinia()
+app.use(pinia)
+
+if (isClient) {
+  pinia.state.value = (initialState.pinia) || {}
+}
+else {
+  onSSRAppRendered(() => {
+    initialState.pinia = pinia.state.value
+  })
+}
+```
+
+## Configuration
+
+You can pass options to Vite SSG in the `ssgOptions` field of your `vite.config.js`
+
+```js
+// vite.config.js
+
+export default {
+  plugins: [],
+  ssgOptions: {
+    script: 'async',
+  },
+}
+```
+
+See [src/types.ts](./src/types.ts). for more options available.
+
+### Custom Routes to Render
+
+You can use the `includedRoutes` hook to include or exclude route paths to render, or even provide some completely custom ones.
+
+```js
+// vite.config.js
+
+export default {
+  plugins: [],
+  ssgOptions: {
+    includedRoutes(paths, routes) {
+      // exclude all the route paths that contains 'foo'
+      return paths.filter(i => !i.includes('foo'))
+    },
+  },
+}
+```
+```js
+// vite.config.js
+
+export default {
+  plugins: [],
+  ssgOptions: {
+    includedRoutes(paths, routes) {
+      // use original route records
+      return routes.flatMap((route) => {
+        return route.name === 'Blog'
+          ? myBlogSlugs.map(slug => `/blog/${slug}`)
+          : route.path
+      })
+    },
+  },
+}
+```
+
+Alternatively, you may export the `includedRoutes` hook from your server entry file. This will be necessary if fetching your routes requires the use of environment variables managed by Vite.
+
+```ts
+// main.ts
+
+import { ViteSSG } from 'vite-ssg'
+import App from './App.vue'
+
+export const createApp = ViteSSG(
+  App,
+  { routes },
+  ({ app, router, initialState }) => {
+    // ...
+  },
+)
+export async function includedRoutes(paths, routes) {
+  // Sensitive key is managed by Vite - this would not be available inside
+  // vite.config.js as it runs before the environment has been populated.
+  const apiClient = new MyApiClient(import.meta.env.MY_API_KEY)
+
+  return Promise.all(
+    routes.flatMap(async (route) => {
+      return route.name === 'Blog'
+        ? (await apiClient.fetchBlogSlugs()).map(slug => `/blog/${slug}`)
+        : route.path
+    }),
+  )
+}
+```
+
+## Comparison
+
+### Use [Vitepress](https://github.com/vuejs/vitepress) when you want:
+
+- Zero config, out of the box SSG
+- A single-purpose documentation site
+- Lightweight ([No double payload](https://twitter.com/youyuxi/status/1274834280091389955))
+
+### Use Vite SSG when you want:
+
+- More control on the build process and tooling
+- The flexible plugin system
+- Multi-purpose application with some SSG to improve SEO and loading speed
+
+Cons:
+
+- Double payload
+
+## Example
+
+See [Vitesse](https://github.com/antfu/vitesse).
+
+## Thanks to the prior work
+
+- [vitepress](https://github.com/vuejs/vitepress/tree/master/src/node/build)
+- [vue3-vite-ssr-example](https://github.com/tbgse/vue3-vite-ssr-example)
+- [vite-ssr](https://github.com/frandiox/vite-ssr)
+
+## Contribution
+
+Please refer to https://github.com/antfu/contribute.
+
+## License
+
+MIT License © 2020-PRESENT [Anthony Fu](https://github.com/antfu)

package/bin/vite-ssg.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+'use strict'
+import('../dist/node/cli.mjs')

package/dist/chunks/jsdomGlobal.cjs

@@ -0,0 +1,91 @@
+'use strict';
+
+const JSDOM = require('jsdom');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+const JSDOM__default = /*#__PURE__*/_interopDefaultCompat(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
+  }
+
+  // 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))
+    Object.assign(options, { pretendToBeVisual: true });
+
+  const jsdom = new JSDOM__default.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.forEach(key => global[key] = window[key]);
+
+  // setup document / window / window.console
+  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]);
+
+  document.destroy = cleanup;
+
+  return cleanup
+}
+
+exports.jsdomGlobal = jsdomGlobal;

package/dist/chunks/jsdomGlobal.mjs

@@ -0,0 +1,85 @@
+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
+  }
+
+  // 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))
+    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.forEach(key => global[key] = window[key]);
+
+  // setup document / window / window.console
+  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]);
+
+  document.destroy = cleanup;
+
+  return cleanup
+}
+
+export { jsdomGlobal };

package/dist/client/single-page.cjs

@@ -0,0 +1,52 @@
+'use strict';
+
+const vue$1 = require('@unhead/vue');
+const vue = require('vue');
+const ClientOnly = require('../shared/vite-ssg-optimized.0250a125.cjs');
+const state = require('../shared/vite-ssg-optimized.bee8a5a9.cjs');
+
+function ViteSSG(App, fn, options = {}) {
+  const {
+    transformState,
+    registerComponents = true,
+    useHead = true,
+    rootContainer = "#app"
+  } = options;
+  const isClient = typeof window !== "undefined";
+  async function createApp(client = false) {
+    const app = client ? vue.createApp(App) : vue.createSSRApp(App);
+    let head;
+    if (useHead) {
+      head = client ? vue$1.createHead() : vue$1.createServerHead();
+      app.use(head);
+    }
+    const appRenderCallbacks = [];
+    const onSSRAppRendered = client ? () => {
+    } : (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 };
+    if (registerComponents)
+      app.component("ClientOnly", ClientOnly.ClientOnly);
+    if (client) {
+      await ClientOnly.documentReady();
+      context.initialState = transformState?.(window.__INITIAL_STATE__ || {}) || state.deserializeState(window.__INITIAL_STATE__);
+    }
+    await fn?.(context);
+    const initialState = context.initialState;
+    return {
+      ...context,
+      initialState
+    };
+  }
+  if (isClient) {
+    (async () => {
+      const { app } = await createApp(true);
+      app.mount(rootContainer, true);
+    })();
+  }
+  return createApp;
+}
+
+exports.ViteSSG = ViteSSG;

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

@@ -0,0 +1,12 @@
+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 '@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>>;
+
+export { ViteSSG, ViteSSGClientOptions, ViteSSGContext };