vite-react-ssg 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Riri
+
+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,132 @@
+# Vite React SSG
+
+Static-site generation for React on Vite.
+
+[![NPM version](https://img.shields.io/npm/v/vite-react-ssg?color=a1b858&label=)](https://www.npmjs.com/package/vite-react-ssg)
+
+## Install
+
+> **This library requires Node.js version >= 17**
+> or `Request` is available
+<pre>
+<b>npm i -D vite-react-ssg</b> <em>react-router-dom</em>
+</pre>
+
+```diff
+// package.json
+{
+  "scripts": {
+    "dev": "vite",
+-   "build": "vite build"
++   "build": "vite-react-ssg build"
+
+    // OR if you want to use another vite config file
++   "build": "vite-react-ssg build -c another-vite.config.ts"
+  }
+}
+```
+
+```ts
+// src/main.ts
+import { ViteReactSSG } from 'vite-react-ssg'
+import routes from './App.tsx'
+
+export const createApp = ViteReactSSG(
+  // react-router-dom data routes
+  { routes },
+  // function to have custom setups
+  ({ router, routes, isClient, initialState }) => {
+    // do something.
+  },
+)
+```
+
+## Critical CSS
+
+Vite SSG has built-in support for generating [Critical CSS](https://web.dev/extract-critical-css/) inlined in the HTML via the [`critters`](https://github.com/GoogleChromeLabs/critters) package.
+Install it with:
+
+```bash
+npm i -D critters
+```
+
+Critical CSS generation will automatically be enabled for you.
+
+To configure `critters`, pass [its options](https://github.com/GoogleChromeLabs/critters#usage) into `ssgOptions.crittersOptions` in `vite.config.ts`:
+
+```ts
+// vite.config.ts
+export default defineConfig({
+  ssgOptions: {
+    crittersOptions: {
+      // E.g., change the preload strategy
+      preload: 'media',
+      // Other options: https://github.com/GoogleChromeLabs/critters#usage
+    },
+  },
+})
+```
+
+## 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
+      })
+    },
+  },
+}
+```
+
+## Roadmap
+
+- [ ] SSR under dev
+- [ ] Preload assets
+- [ ] Initial State
+- [ ] Document head
+- [ ] More Client components, such as `<ClientOnly />`
+
+## License
+
+[MIT](./LICENSE) License © 2023 [Riri](https://github.com/Daydreamer-riri)

package/bin/vite-react-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,90 @@
+'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,84 @@
+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/index.cjs

@@ -0,0 +1,74 @@
+'use strict';
+
+const React = require('react');
+const client = require('react-dom/client');
+const reactHelmetAsync = require('react-helmet-async');
+const reactRouterDom = require('react-router-dom');
+const SiteMetadataDefaults = require('./shared/vite-react-ssg.4ca822c0.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+const React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+function documentReady(_passThrough) {
+  if (document.readyState === "loading") {
+    return new Promise((resolve) => {
+      document.addEventListener("DOMContentLoaded", () => resolve(_passThrough));
+    });
+  }
+  return Promise.resolve(_passThrough);
+}
+
+function ViteReactSSG(routerOptions, fn, options = {}) {
+  const {
+    transformState,
+    rootContainer = "#root"
+  } = options;
+  const isClient = typeof window !== "undefined";
+  async function createApp(client = false, routePath) {
+    const browserRouter = client ? reactRouterDom.createBrowserRouter(routerOptions.routes) : void 0;
+    const appRenderCallbacks = [];
+    const onSSRAppRendered = client ? () => {
+    } : (cb) => appRenderCallbacks.push(cb);
+    const triggerOnSSRAppRendered = () => {
+      return Promise.all(appRenderCallbacks.map((cb) => cb()));
+    };
+    const context = {
+      // app: App,
+      isClient,
+      routes: routerOptions.routes,
+      router: browserRouter,
+      routerOptions,
+      onSSRAppRendered,
+      triggerOnSSRAppRendered,
+      initialState: {},
+      transformState,
+      routePath
+    };
+    if (client) {
+      await documentReady();
+      context.initialState = transformState?.(window.__INITIAL_STATE__ || {}) || SiteMetadataDefaults.deserializeState(window.__INITIAL_STATE__);
+    }
+    await fn?.(context);
+    if (!client) {
+      context.routePath ?? "/";
+      context.initialState = {};
+    }
+    const initialState = context.initialState;
+    return {
+      ...context,
+      initialState
+    };
+  }
+  if (isClient) {
+    (async () => {
+      const container = typeof rootContainer === "string" ? document.querySelector(rootContainer) : rootContainer;
+      const { router } = await createApp(true);
+      client.hydrateRoot(container, /* @__PURE__ */ React__default.createElement(reactHelmetAsync.HelmetProvider, null, /* @__PURE__ */ React__default.createElement(SiteMetadataDefaults.SiteMetadataDefaults, null), /* @__PURE__ */ React__default.createElement(reactRouterDom.RouterProvider, { router })));
+    })();
+  }
+  return createApp;
+}
+
+exports.Head = SiteMetadataDefaults.Head;
+exports.ViteReactSSG = ViteReactSSG;

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import { R as RouterOptions, V as ViteReactSSGContext, a as ViteReactSSGClientOptions } from './types-fa5fe9c2.js';
+import { ReactNode } from 'react';
+import { HelmetProps } from 'react-helmet-async';
+import 'critters';
+import 'react-router-dom';
+
+type Props = HelmetProps & {
+    children: ReactNode;
+};
+declare function Head(props: Props): JSX.Element;
+
+declare function ViteReactSSG(routerOptions: RouterOptions, fn?: (context: ViteReactSSGContext<true>) => Promise<void> | void, options?: ViteReactSSGClientOptions): (client?: boolean, routePath?: string) => Promise<ViteReactSSGContext<true>>;
+
+export { Head, ViteReactSSG };

package/dist/index.mjs

@@ -0,0 +1,68 @@
+import React from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import { HelmetProvider } from 'react-helmet-async';
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import { S as SiteMetadataDefaults, d as deserializeState } from './shared/vite-react-ssg.9d005d5e.mjs';
+export { H as Head } from './shared/vite-react-ssg.9d005d5e.mjs';
+
+function documentReady(_passThrough) {
+  if (document.readyState === "loading") {
+    return new Promise((resolve) => {
+      document.addEventListener("DOMContentLoaded", () => resolve(_passThrough));
+    });
+  }
+  return Promise.resolve(_passThrough);
+}
+
+function ViteReactSSG(routerOptions, fn, options = {}) {
+  const {
+    transformState,
+    rootContainer = "#root"
+  } = options;
+  const isClient = typeof window !== "undefined";
+  async function createApp(client = false, routePath) {
+    const browserRouter = client ? createBrowserRouter(routerOptions.routes) : void 0;
+    const appRenderCallbacks = [];
+    const onSSRAppRendered = client ? () => {
+    } : (cb) => appRenderCallbacks.push(cb);
+    const triggerOnSSRAppRendered = () => {
+      return Promise.all(appRenderCallbacks.map((cb) => cb()));
+    };
+    const context = {
+      // app: App,
+      isClient,
+      routes: routerOptions.routes,
+      router: browserRouter,
+      routerOptions,
+      onSSRAppRendered,
+      triggerOnSSRAppRendered,
+      initialState: {},
+      transformState,
+      routePath
+    };
+    if (client) {
+      await documentReady();
+      context.initialState = transformState?.(window.__INITIAL_STATE__ || {}) || deserializeState(window.__INITIAL_STATE__);
+    }
+    await fn?.(context);
+    if (!client) {
+      context.routePath ?? "/";
+      context.initialState = {};
+    }
+    const initialState = context.initialState;
+    return {
+      ...context,
+      initialState
+    };
+  }
+  if (isClient) {
+    (async () => {
+      const container = typeof rootContainer === "string" ? document.querySelector(rootContainer) : rootContainer;
+      const { router } = await createApp(true);
+      hydrateRoot(container, /* @__PURE__ */ React.createElement(HelmetProvider, null, /* @__PURE__ */ React.createElement(SiteMetadataDefaults, null), /* @__PURE__ */ React.createElement(RouterProvider, { router })));
+    })();
+  }
+  return createApp;
+}
+
+export { ViteReactSSG };

package/dist/node/cli.cjs

@@ -0,0 +1,50 @@
+'use strict';
+
+const kolorist = require('kolorist');
+const yargs = require('yargs');
+const helpers = require('yargs/helpers');
+const build = require('../shared/vite-react-ssg.1128b41a.cjs');
+require('node:path');
+require('node:module');
+require('fs-extra');
+require('vite');
+require('jsdom');
+require('../shared/vite-react-ssg.4ca822c0.cjs');
+require('react');
+require('react-helmet-async');
+require('react-router-dom/server.js');
+require('node:stream');
+require('react-dom/server');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+const yargs__default = /*#__PURE__*/_interopDefaultCompat(yargs);
+
+yargs__default(helpers.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"
+  }),
+  async (args) => {
+    const { config: configFile = void 0, ...ssgOptions } = args;
+    await build.build(ssgOptions, { configFile });
+  }
+).fail((msg, err, yargs2) => {
+  console.error(`
+${kolorist.gray("[vite-ssg]")} ${kolorist.bold(kolorist.red("An internal error occurred."))}`);
+  console.error(`${kolorist.gray("[vite-ssg]")} ${kolorist.reset(`Please report an issue, if none already exists: ${kolorist.underline("https://github.com/antfu/vite-ssg/issues")}`)}`);
+  yargs2.exit(1, err);
+}).showHelpOnFail(false).help().argv;

package/dist/node/cli.d.ts

@@ -0,0 +1,2 @@
+
+export { }

package/dist/node/cli.mjs

@@ -0,0 +1,44 @@
+import { gray, bold, red, reset, underline } from 'kolorist';
+import yargs from 'yargs';
+import { hideBin } from 'yargs/helpers';
+import { b as build } from '../shared/vite-react-ssg.c2c344c3.mjs';
+import 'node:path';
+import 'node:module';
+import 'fs-extra';
+import 'vite';
+import 'jsdom';
+import '../shared/vite-react-ssg.9d005d5e.mjs';
+import 'react';
+import 'react-helmet-async';
+import 'react-router-dom/server.js';
+import 'node:stream';
+import 'react-dom/server';
+
+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"
+  }),
+  async (args) => {
+    const { config: configFile = void 0, ...ssgOptions } = args;
+    await build(ssgOptions, { configFile });
+  }
+).fail((msg, err, yargs2) => {
+  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;

package/dist/node.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+const build = require('./shared/vite-react-ssg.1128b41a.cjs');
+require('node:path');
+require('node:module');
+require('kolorist');
+require('fs-extra');
+require('vite');
+require('jsdom');
+require('./shared/vite-react-ssg.4ca822c0.cjs');
+require('react');
+require('react-helmet-async');
+require('react-router-dom/server.js');
+require('node:stream');
+require('react-dom/server');
+
+
+
+exports.build = build.build;

package/dist/node.d.ts

@@ -0,0 +1,9 @@
+import { InlineConfig } from 'vite';
+import { b as ViteReactSSGOptions } from './types-fa5fe9c2.js';
+import 'critters';
+import 'react';
+import 'react-router-dom';
+
+declare function build(ssgOptions?: Partial<ViteReactSSGOptions>, viteConfig?: InlineConfig): Promise<void>;
+
+export { build };

package/dist/node.mjs

@@ -0,0 +1,13 @@
+export { b as build } from './shared/vite-react-ssg.c2c344c3.mjs';
+import 'node:path';
+import 'node:module';
+import 'kolorist';
+import 'fs-extra';
+import 'vite';
+import 'jsdom';
+import './shared/vite-react-ssg.9d005d5e.mjs';
+import 'react';
+import 'react-helmet-async';
+import 'react-router-dom/server.js';
+import 'node:stream';
+import 'react-dom/server';