feat: SSR in mode vite ssr (#5045)

* feat: vite ssr * chore: fix unexpected remove * fix: ts type * feat: ssr build in vite mode * chore: optimize code * fix: optimize code * fix: ssr in dev * chore: version and changelog * feat: support redirect url * fix: vite ssr * chore: optimize code * chore: optimize code * chore: update lock file * fix: noExternal with miniapp-history * feat: support ssg * feat: isServer * chore: comment * chore: rename plugin * chore: comment * fix: import env file * chore: changelog * chore: ts lint * fix: env path
alibaba · Jan 11, 2022 · 723a8b7 · 723a8b7
1 parent 7f4faad
commit 723a8b7
Show file tree

Hide file tree

Showing 55 changed files with 728 additions and 107 deletions.
diff --git a/examples/basic-ssr/src/models/user.ts b/examples/basic-ssr/src/models/user.ts
@@ -24,4 +24,4 @@ export default {
       });
     },
   }),
-};
+};
diff --git a/examples/basic-ssr/src/store.ts b/examples/basic-ssr/src/store.ts
@@ -1,4 +1,4 @@
 import { createStore } from 'ice';
 import user from './models/user';
 
-export default createStore({ user });
+export default createStore({ user });
diff --git a/examples/basic-vite-ssr/build.json b/examples/basic-vite-ssr/build.json
@@ -0,0 +1,4 @@
+{
+  "ssr": true,
+  "vite": true
+}
diff --git a/examples/basic-vite-ssr/package.json b/examples/basic-vite-ssr/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "basic-vite-ssr",
+  "version": "0.0.1",
+  "scripts": {
+    "start": "../../packages/icejs/bin/ice-cli.js start",
+    "build": "../../packages/icejs/bin/ice-cli.js build"
+  },
+  "dependencies": {
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0"
+  },
+  "license": "MIT"
+}
diff --git a/examples/basic-vite-ssr/public/index.html b/examples/basic-vite-ssr/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="ice-container"></div>
+  </body>
+</html>
diff --git a/examples/basic-vite-ssr/src/Layout/index.tsx b/examples/basic-vite-ssr/src/Layout/index.tsx
@@ -0,0 +1,8 @@
+export default ({ children }) => {
+  return (
+    <div>
+      Layout
+      {children}
+    </div>
+  );
+};
diff --git a/examples/basic-vite-ssr/src/app.tsx b/examples/basic-vite-ssr/src/app.tsx
@@ -0,0 +1,13 @@
+import { runApp, IAppConfig } from 'ice';
+
+const appConfig: IAppConfig = {
+  app: {
+    rootId: 'ice-container',
+    errorBoundary: true,
+  },
+  router: {
+    type: 'browser',
+  },
+};
+
+runApp(appConfig);
diff --git a/examples/basic-vite-ssr/src/global.scss b/examples/basic-vite-ssr/src/global.scss
@@ -0,0 +1,11 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
diff --git a/examples/basic-vite-ssr/src/pages/Dashboard/Page1/index.tsx b/examples/basic-vite-ssr/src/pages/Dashboard/Page1/index.tsx
@@ -0,0 +1,5 @@
+export default () => {
+  return (
+    <div>Page1</div>
+  );
+};
diff --git a/examples/basic-vite-ssr/src/pages/Dashboard/Page2/index.tsx b/examples/basic-vite-ssr/src/pages/Dashboard/Page2/index.tsx
@@ -0,0 +1,5 @@
+export default () => {
+  return (
+    <div>Page2</div>
+  );
+};
diff --git a/examples/basic-vite-ssr/src/pages/Dashboard/index.tsx b/examples/basic-vite-ssr/src/pages/Dashboard/index.tsx
@@ -0,0 +1,8 @@
+export default ({ children }) => {
+  return (
+    <div>
+      这是 Dashboard
+      {children}
+    </div>
+  );
+};
diff --git a/examples/basic-vite-ssr/src/pages/Home/index.css b/examples/basic-vite-ssr/src/pages/Home/index.css
@@ -0,0 +1,75 @@
+:root {
+  --primay: black;
+  --bg-primay: white;
+
+  --link: #2a0b0b;
+}
+
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+p {
+  margin: 20px 0px;
+}
+
+.header {
+  font-size: 3rem;
+}
+
+.body {
+  margin: 20px 0 10px;
+  font-size: 0.9rem;
+}
+
+button {
+  outline: none;
+  border: none;
+  border-radius: 8px;
+  padding: 10px 35px;
+
+  background: #845ec2;
+  color: white;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+
+  background: var(--bg-primay);
+  color: var(--primay);
+}
+
+.App-link {
+  color: #61dafb;
+  color: var(--link);
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+button {
+  font-size: calc(10px + 2vmin);
+}
diff --git a/examples/basic-vite-ssr/src/pages/Home/index.tsx b/examples/basic-vite-ssr/src/pages/Home/index.tsx
@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import './index.css';
+
+function App() {
+  const [count, setCount] = useState<number>(0);
+
+  return (
+    <div className="App">
+      <header className="App-header">
+        <div className="body">
+          <button type="button" onClick={() => setCount((e) => e + 1)}>
+            🪂 Click me : {count}
+          </button>
+
+          <p> Don&apos;t forget to install <a href="https://appworks.site/">AppWorks</a> in Your Vscode.</p>
+          <p>
+            <a
+              className="App-link"
+              href="https://reactjs.org"
+              target="_blank"
+              rel="noopener noreferrer">
+              Learn React
+            </a>
+            {' | '}
+            <a
+              className="App-link"
+              href="https://vitejs.dev/guide/features.html"
+              target="_blank"
+              rel="noopener noreferrer">
+              Vite Docs
+            </a>
+          </p>
+        </div>
+      </header>
+    </div>
+  );
+}
+
+export default App;
diff --git a/examples/basic-vite-ssr/src/routes.ts b/examples/basic-vite-ssr/src/routes.ts
@@ -0,0 +1,39 @@
+import { IRouterConfig } from 'ice';
+import DashboardLayout from '@/pages/Dashboard';
+import Dashboard1 from '@/pages/Dashboard/Page1';
+import Dashboard2 from '@/pages/Dashboard/Page2';
+import Home from '@/pages/Home';
+import Layout from '@/Layout';
+
+const routes: IRouterConfig[] = [
+  {
+    path: '/',
+    component: Home,
+    exact: true
+  },
+  {
+    path: '/',
+    component: Layout,
+    children: [
+      {
+        path: '/dashboard',
+        component: DashboardLayout,
+        children: [
+          {
+            path: '/a',
+            component: Dashboard1,
+            exact: true
+          },
+          {
+            path: '/b',
+            component: Dashboard2,
+            exact: true
+          }
+        ]
+      },
+    ]
+  },
+
+];
+
+export default routes;
diff --git a/examples/basic-vite-ssr/src/typings.d.ts b/examples/basic-vite-ssr/src/typings.d.ts
@@ -0,0 +1,4 @@
+declare module '*.module.scss' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
diff --git a/examples/basic-vite-ssr/tsconfig.json b/examples/basic-vite-ssr/tsconfig.json
@@ -0,0 +1,38 @@
+{
+  "compileOnSave": false,
+  "buildOnSave": false,
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "build",
+    "module": "esnext",
+    "target": "es6",
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "rootDir": "./",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": false,
+    "importHelpers": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true,
+    "types": ["node", "jest", "vite/client"],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "ice": [
+        ".ice/index.ts"
+      ]
+    }
+  }
+}
diff --git a/examples/basic-vite/tsconfig.json b/examples/basic-vite/tsconfig.json
@@ -32,12 +32,6 @@
       ],
       "ice": [
         ".ice/index.ts"
-      ],
-      "ice/*": [
-        ".ice/pages/*"
-      ],
-      "$store": [
-        "src/store1.ts"
       ]
     }
   }

diff --git a/packages/build-app-templates/CHANGELOG.md b/packages/build-app-templates/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.1.1
+
+- [feat] support server check by `isServer` imported from `@ice/runtime`
+
 ## 1.1.0
 
 - [chore] use `enableRouter` replace `buildConfig.router`

diff --git a/packages/build-app-templates/package.json b/packages/build-app-templates/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@builder/app-templates",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "App templates for ice.js and rax-app",
   "author": "ice-admin@alibaba-inc.com",
   "homepage": "",
@@ -10,7 +10,7 @@
     "lib": "lib"
   },
   "dependencies": {
-    "create-app-shared": "^1.2.0"
+    "create-app-shared": "^1.2.2"
   },
   "files": [
     "lib",

diff --git a/packages/build-app-templates/src/templates/react/runApp.ts.ejs b/packages/build-app-templates/src/templates/react/runApp.ts.ejs
@@ -10,6 +10,7 @@ import {
 <% } %>
 } from 'create-app-shared';
 import reactAppRenderer, { RenderAppConfig } from 'react-app-renderer';
+import { isServer } from '@ice/runtime';
 
 <% if (globalStyle) {%>
   // eslint-disable-next-line
@@ -52,7 +53,7 @@ export function runApp(appConfig?: IAppConfig) {
   // set History before GID
   initHistory && initHistory(appConfig as any);
   <% } %>
-  if (process.env.__IS_SERVER__) return;
+  if (isServer) return;
   reactAppRenderer({
     appConfig: appConfig as RenderAppConfig,
     buildConfig,

diff --git a/packages/create-app-shared/CHANGELOG.md b/packages/create-app-shared/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.2.2
+
+- [feat] support server check by `isServer` imported from `@ice/runtime`
+
 ## 1.2.1
 
 - [fix] miniapp exports field

diff --git a/packages/create-app-shared/package.json b/packages/create-app-shared/package.json
@@ -1,14 +1,15 @@
 {
   "name": "create-app-shared",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "",
   "author": "ice-admin@alibaba-inc.com",
   "homepage": "https://github.com/alibaba/ice#readme",
   "license": "MIT",
   "main": "lib/index.js",
   "dependencies": {
+    "@ice/runtime": "^0.1.1",
     "history": "^4.9.0",
-    "miniapp-history": "^0.1.0",
+    "miniapp-history": "^0.1.6",
     "query-string": "^6.13.1",
     "universal-env": "^3.0.0"
   },
@@ -49,4 +50,4 @@
     "@types/rax": "^1.0.6",
     "react": "^17.0.2"
   }
-}
+}