Merge pull request #109 from frandiox/extract-core

Extract core
frandiox · Oct 10, 2021 · b051c5e · b051c5e
2 parents 0706173 + a11c71f
commit b051c5e
Show file tree

Hide file tree

Showing 54 changed files with 2,779 additions and 350 deletions.
diff --git a/README.md b/README.md
@@ -44,12 +44,12 @@ Add Vite SSR plugin to your Vite config file (see [`vite.config.js`](./examples/
 // vite.config.js
 import vue from '@vitejs/plugin-vue'
 import viteSSR from 'vite-ssr/plugin.js'
-// import reactRefresh from '@vitejs/plugin-react-refresh'
+// import react from '@vitejs/plugin-react'
 
 export default {
   plugins: [
     viteSSR(),
-    vue(), // reactRefresh()
+    vue(), // react()
   ],
 }
 ```

diff --git a/examples/react-apollo/package.json b/examples/react-apollo/package.json
@@ -17,7 +17,7 @@
     "styled-components": "^5.3.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-react-refresh": "^1.1.0",
+    "@vitejs/plugin-react": "^1.0.2",
     "vite": "^2.5.0"
   }
-}
+}
diff --git a/examples/react-apollo/vite.config.js b/examples/react-apollo/vite.config.js
@@ -1,12 +1,12 @@
 const { defineConfig } = require('vite')
-const reactRefresh = require('@vitejs/plugin-react-refresh')
+const react = require('@vitejs/plugin-react')
 const viteSSR = require('vite-ssr/plugin')
 const api = require('../node-server/api')
 
 module.exports = defineConfig({
   plugins: [
     viteSSR(),
-    reactRefresh(),
+    react(),
     {
       // Mock API during development
       configureServer({ middlewares }) {

diff --git a/examples/react/package.json b/examples/react/package.json
@@ -14,7 +14,7 @@
     "react-router-dom": "^5.2.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-react-refresh": "^1.1.0",
+    "@vitejs/plugin-react": "^1.0.2",
     "vite": "^2.5.0"
   }
-}
+}
diff --git a/examples/react/vite.config.js b/examples/react/vite.config.js
@@ -1,9 +1,15 @@
 const { defineConfig } = require('vite')
-const reactRefresh = require('@vitejs/plugin-react-refresh')
+const react = require('@vitejs/plugin-react')
 const viteSSR = require('vite-ssr/plugin')
 const api = require('../node-server/api')
 
 module.exports = defineConfig({
+  server: {
+    fs: {
+      // The API logic is in outside of the project
+      strict: false,
+    },
+  },
   plugins: [
     viteSSR({
       features: {
@@ -13,7 +19,7 @@ module.exports = defineConfig({
         reactApolloRenderer: false,
       },
     }),
-    reactRefresh(),
+    react(),
     {
       // Mock API during development
       configureServer({ middlewares }) {

diff --git a/examples/vanilla/index.html b/examples/vanilla/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/entry-client.js"></script>
+  </body>
+</html>
diff --git a/examples/vanilla/package.json b/examples/vanilla/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "example",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "node ../../node_modules/vite-ssr/cli.js --port 1337 --force --ssr src/entry-server.js",
+    "dev:spa": "vite --port 1337 --force",
+    "build": "rm -rf dist && node ../../node_modules/vite-ssr/cli.js build",
+    "serve:node": "node ../node-server/index vue"
+  },
+  "dependencies": {
+    "vite": "^2.5.0"
+  }
+}
diff --git a/examples/vanilla/public/favicon.ico b/examples/vanilla/public/favicon.ico
diff --git a/examples/vanilla/public/robots.txt b/examples/vanilla/public/robots.txt
@@ -0,0 +1 @@
+User-agent: * Disallow: /
diff --git a/examples/vanilla/src/entry-client.js b/examples/vanilla/src/entry-client.js
@@ -0,0 +1,20 @@
+import './index.css'
+import viteSSR from 'vite-ssr/core/entry-client'
+
+export default viteSSR((context) => {
+  const { initialState } = context
+  console.log('Serialized state from server:', initialState)
+
+  // Hydrate page if necessary
+  const clockNode = document.querySelector('#clock')
+  if (clockNode) {
+    const { clock = {} } = initialState
+
+    setInterval(() => {
+      clockNode.innerHTML = new Date().toLocaleTimeString(
+        clock.locale,
+        clock.options
+      )
+    }, 200)
+  }
+})
diff --git a/examples/vanilla/src/entry-server.js b/examples/vanilla/src/entry-server.js
@@ -0,0 +1,76 @@
+import './index.css'
+import viteSSR from 'vite-ssr/core/entry-server'
+import { html } from './utils'
+
+// These are pages following a custom format:
+const pageModules = import.meta.globEager('./pages/**/*.js')
+
+// Simple server-only router (i.e. this is not an SPA!):
+const serverRouter = new Map()
+for (const [path, page] of Object.entries(pageModules)) {
+  serverRouter.set(path.replace('./pages', '').replace('.js', ''), page.default)
+}
+
+const SUPPORTED_TIME_LOCALES = {
+  en: 'en-US',
+  es: 'es-ES',
+  ja: 'ja-JP',
+}
+
+export default viteSSR(async (context) => {
+  const { initialState, url, redirect } = context
+
+  // Example of server redirection:
+  if (url.pathname === '/redirect-test') {
+    return redirect('/', 302)
+  }
+
+  // Example of routing:
+  const page = serverRouter.get(url.pathname)
+  if (page) {
+    return page(context)
+  }
+
+  // Default page:
+
+  // This could use url.pathname instead of querystring
+  const lang = (url.searchParams.get('lang') || '').toLowerCase()
+  const locale = SUPPORTED_TIME_LOCALES[lang] || SUPPORTED_TIME_LOCALES.en
+
+  const clock = {
+    locale,
+    options: { timeStyle: 'full' },
+  }
+
+  // This will be passed to the browser so it can use the same data
+  initialState.clock = clock
+
+  // This could change depending on context.url or anything else
+  const body = html`
+    <h1>This is my SSR rendered page using Vanilla JS!</h1>
+    <p>And this is a clock that is hydrated in the browser:</p>
+    <p>
+      <strong id="clock">
+        ${new Date().toLocaleTimeString(clock.locale, clock.options)}
+      </strong>
+    </p>
+    <p>
+      Try adding <a href="/?lang=es"><code>?lang=es</code></a> or
+      <a href="/?lang=ja"><code>?lang=ja</code></a> to the URL!
+    </p>
+
+    <footer>
+      <div>See also:</div>
+      <div>
+        <a href="/about">About Us</a> -
+        <a href="/hello/world">Hello World</a>
+      </div>
+    </footer>
+  `
+
+  return {
+    htmlAttrs: `lang="${locale}"`,
+    headTags: `<title>Vanilla SSR</title>`,
+    body,
+  }
+})
diff --git a/examples/vanilla/src/index.css b/examples/vanilla/src/index.css
@@ -0,0 +1,8 @@
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
diff --git a/examples/vanilla/src/pages/about.js b/examples/vanilla/src/pages/about.js
@@ -0,0 +1,11 @@
+import { html } from '../utils'
+
+export default function (context) {
+  return {
+    headTags: '<title>About</title>',
+    body: html`
+      <h1>About page</h1>
+      <p>Something cool here</p>
+    `,
+  }
+}
diff --git a/examples/vanilla/src/pages/hello/world.js b/examples/vanilla/src/pages/hello/world.js
@@ -0,0 +1,11 @@
+import { html } from '../../utils'
+
+export default function (context) {
+  return {
+    headTags: '<title>Hello World</title>',
+    body: html`
+      <h1>This is a nested page</h1>
+      <p>Hello world!</p>
+    `,
+  }
+}
diff --git a/examples/vanilla/src/utils.js b/examples/vanilla/src/utils.js
@@ -0,0 +1,3 @@
+// This is just a utility to highlight HTML in VSCode
+export const html = (s, ...args) =>
+  s.map((ss, i) => `${ss}${args[i] || ''}`).join('')
diff --git a/examples/vanilla/vite.config.js b/examples/vanilla/vite.config.js
@@ -0,0 +1,21 @@
+const { defineConfig } = require('vite')
+const viteSSR = require('vite-ssr/plugin')
+const api = require('../node-server/api')
+
+module.exports = defineConfig({
+  server: {
+    fs: {
+      // The API logic is in outside of the project
+      strict: false,
+    },
+  },
+  plugins: [
+    viteSSR(),
+    {
+      // Mock API during development
+      configureServer({ middlewares }) {
+        api.forEach(({ route, handler }) => middlewares.use(route, handler))
+      },
+    },
+  ],
+})