vite-react-ssg 0.0.1 → 0.0.3

package/LICENSE

@@ -1,21 +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.
+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

@@ -1,132 +1,239 @@
-# 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
-
+# 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 createRoot = ViteReactSSG(
+  // react-router-dom data routes
+  { routes },
+  // function to have custom setups
+  ({ router, routes, isClient, initialState }) => {
+    // do something.
+  },
+)
+```
+
+```tsx
+// src/App.tsx
+import React from 'react'
+import type { RouteRecord } from 'vite-react-ssg'
+import './App.css'
+
+const pages = import.meta.glob<any>('./pages/**/*.tsx')
+
+const children: RouteRecord[] = Object.entries(pages).map(([filepath, component]) => {
+  let path = filepath.split('/pages')[1]
+  path = path.split('.')[0].replace('index', '')
+  const entry = `src${filepath.slice(1)}`
+
+  if (path.endsWith('/')) {
+    return {
+      index: true,
+      Component: React.lazy(component),
+      entry,
+    }
+  }
+  return {
+    path,
+    Component: React.lazy(component),
+    // Used to obtain static resources through manifest
+    entry,
+  }
+})
+
+const Layout = React.lazy(() => import('./Layout'))
+export const routes: RouteRecord[] = [
+  {
+    path: '/',
+    element: <Layout />,
+    children,
+    // Used to obtain static resources through manifest
+    entry: 'src/Layout.tsx',
+  },
+]
+```
+
+## Document head
+
+You can use `<Head/>` to manage all of your changes to the document head. It takes plain HTML tags and outputs plain HTML tags. It is a wrapper around [React Helmet](https://github.com/nfl/react-helmet).
+
+```tsx
+import { Head } from 'vite-react-ssg'
+
+const MyHead = () => (
+  <Head>
+    <meta property="og:description" content="My custom description" />
+    <meta charSet="utf-8" />
+    <title>My Title</title>
+    <link rel="canonical" href="http://mysite.com/example" />
+  </Head>
+)
+```
+
+Nested or latter components will override duplicate usages:
+
+```tsx
+import { Head } from 'vite-react-ssg'
+
+const MyHead = () => (
+  <parent>
+    <Head>
+      <title>My Title</title>
+      <meta name="description" content="Helmet application" />
+    </Head>
+    <child>
+      <Head>
+        <title>Nested Title</title>
+        <meta name="description" content="Nested component" />
+      </Head>
+    </child>
+  </parent>
+)
+```
+
+Outputs:
+```html
+<head>
+  <title>Nested Title</title>
+  <meta name="description" content="Nested component" />
+</head>
+```
+
+### Reactive head
+
+```tsx
+import { useState } from 'react'
+import { Head } from 'vite-react-ssg'
+
+export default function MyHead() {
+  const [state, setState] = useState(false)
+
+  return (
+    <Head>
+      <meta charSet="UTF-8" />
+      <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+      <title>head test {state ? 'A' : 'B'}</title>
+      {/* You can also set the 'body' attributes here */}
+      <body className={`body-class-in-head-${state ? 'a' : 'b'}`} />
+    </Head>
+  )
+}
+```
+
+## 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
+
+- [x] Preload assets
+- [x] Document head
+- [ ] SSR under dev
+- [ ] Initial State
+- [ ] More Client components, such as `<ClientOnly />`
+
+## License
+
 [MIT](./LICENSE) License © 2023 [Riri](https://github.com/Daydreamer-riri)

package/bin/vite-react-ssg.js

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

package/dist/chunks/jsdomGlobal.cjs

@@ -6,85 +6,85 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 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
+/*
+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;