chore: 添加 react-ssr-enhanced 包 & 完善 ci (#11)

.github/workflows/ci.yml

@@ -59,3 +59,4 @@ jobs:
 
     - run: npm install @jsdevtools/npm-publish -g
     - run: npm-publish --token="${{ secrets.NPM_TOKEN }}" ./core/package.json
+    - run: npm-publish --token="${{ secrets.NPM_TOKEN }}" ./packages/react-ssr-enhanced/package.json

.gitignore

@@ -6,7 +6,7 @@ dist
 .cache
 .vscode
 yarn.lock
-
+package-lock.json
 *.bak
 *.tem
 *.temp

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kkt/ssr",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "",
   "license": "MIT",
   "main": "lib/index.js",

core/src/index.ts

@@ -64,11 +64,13 @@ const data = {
   nolog: false,
   out: "",
   publicFolder: "",
-  isWeb: false
+  isWeb: false,
+  isEnvDevelopment: false,
 }
 
 process.on("exit", (code) => {
-  if (data.nolog || code === 1) {
+  // 开发模式下不需要进行复制
+  if (data.nolog || code === 1 || data.isEnvDevelopment) {
     return;
   }
   if (!data.isWeb) {
@@ -143,7 +145,8 @@ process.on("exit", (code) => {
     const target = isWeb ? argvs.target : argvs.target ? ['node14', argvs.target] : 'node14';
     fs.ensureDirSync(outDir);
 
-    const isEnvDevelopment = scriptName === "watch"
+    const isEnvDevelopment = data.isEnvDevelopment = scriptName === "watch"
+
 
     overridePaths(undefined, { ...oPaths });
     argvs.overridesWebpack = (conf, env, options) => {
@@ -153,10 +156,13 @@ process.on("exit", (code) => {
         // server  端 css 代码可以可以 isomorphic-style-loader 进行打包 或者 直接分离出
         // 处理 module rules 和 plugin 里面的 原始 css loader，是使用  isomorphic-style-loader 还是直接分离做判断
         conf = filterPluginsServer(conf, fileName, argvs.minify);
+        // 代码分割问题
+        conf.plugins.push(new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }))
       } else {
         // 去除 index.html 模板
         conf = filterPluginsClient(conf, argvs.minify);
       }
+
       conf.entry = inputFile;
       if (argvs.sourceMap) {
         conf.devtool = typeof argvs.sourceMap === 'boolean' ? 'source-map' : argvs.sourceMap;

core/src/plugins/utils/paths.ts

@@ -0,0 +1,24 @@
+import path from "path";
+import fs from "fs";
+import getPublicUrlOrPath from "react-dev-utils/getPublicUrlOrPath";
+
+// Make sure any symlinks in the project folder are resolved:
+// https://github.com/facebook/create-react-app/issues/637
+const appDirectory = fs.realpathSync(process.cwd());
+const resolveApp = (relativePath: string) => path.resolve(appDirectory, relativePath);
+
+// We use `PUBLIC_URL` environment variable or "homepage" field to infer
+// "public path" at which the app is served.
+// webpack needs to know it to put the right <script> hrefs into HTML even in
+// single-page apps that may serve index.html for nested URLs like /todos/42.
+// We can't use a relative path in HTML because we don't want to load something
+// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
+const publicUrlOrPath = getPublicUrlOrPath(
+  process.env.NODE_ENV === 'development',
+  require(resolveApp('package.json')).homepage,
+  process.env.PUBLIC_URL
+);
+
+export default {
+  publicUrlOrPath
+}

core/src/plugins/utils/plugins.ts

@@ -1,5 +1,9 @@
 import webpack from 'webpack';
 import { WebpackConfiguration, MiniCssExtractPlugin } from 'kkt';
+import { WebpackManifestPlugin } from "webpack-manifest-plugin"
+import path from 'path';
+import paths from "./paths"
+
 const SimpleProgressWebpackPlugin = require('@kkt/simple-progress-webpack-plugin');
 
 export const getWebpackRunPlugins = (plugins: WebpackConfiguration['plugins']) => {
@@ -67,4 +71,44 @@ export const getRemoveHtmlTemp = (plugins: WebpackConfiguration['plugins']) => {
     }
   });
   return newPlugins;
-}
+}
+
+
+// 重新 设置 asset-manifest.json 内容，适配老版的服务渲染问题 
+export const restWebpackManifestPlugin = (conf: WebpackConfiguration) => {
+  conf.plugins.push(new WebpackManifestPlugin({
+    fileName: 'asset-manifest.json',
+    publicPath: paths.publicUrlOrPath,
+    generate: (seed, files, entrypoints) => {
+      const routhPaths: Record<string, { css?: string, js?: string }> = {}
+      const manifestFiles = files.reduce((manifest, file) => {
+        manifest[file.name] = file.path;
+        if (!file.name.endsWith('.map')) {
+          const routePath = `${file.name}`.replace(/.(css|js)$/, "")
+          if (!routhPaths[routePath]) {
+            routhPaths[routePath] = {}
+          }
+          const extname = path.extname(file.name).replace(".", "") as "css" | "js";	 //获取文件的后缀名
+          routhPaths[routePath][extname] = file.path;
+        }
+        return manifest;
+      }, seed);
+      const client: Record<string, string> = { css: null, js: null }
+      const entrypointFiles = entrypoints.main.filter(
+        fileName => !fileName.endsWith('.map')
+      );
+      entrypointFiles.forEach((filename) => {
+        const extname = path.extname(filename).replace(".", "") as "css" | "js";	 //获取文件的后缀名
+        client[extname] = filename
+      })
+      return {
+        ...routhPaths,
+        files: manifestFiles,
+        entrypoints: entrypointFiles,
+        client,
+      };
+    },
+  }))
+  return conf
+}
+

core/src/utils.ts

@@ -7,22 +7,16 @@ export const filterPluginsServer = (
   conf: WebpackConfiguration,
   cssFilename: string,
   mini: boolean = false,
-  isomorphic: boolean = false,
 ) => {
   // plugin 处理 ts ，ForkTsCheckerWebpackPlugin  MiniCssExtractPlugin
   conf.plugins = conf.plugins
     .map((plugin) => {
       if (/(MiniCssExtractPlugin)/.test(plugin.constructor.name)) {
-        if (!isomorphic) {
-          return new MiniCssExtractPlugin({
-            // Options similar to the same options in webpackOptions.output
-            // both options are optional
-            filename: `${cssFilename}.css`,
-          });
-        } else {
-          // [isomorphic-style-loader](https://www.npmjs.com/package/isomorphic-style-loader) 进行转换
-          return null;
-        }
+        return new MiniCssExtractPlugin({
+          // Options similar to the same options in webpackOptions.output
+          // both options are optional
+          filename: `${cssFilename}.css`,
+        });
       }
       if (/(ForkTsCheckerWebpackPlugin|DefinePlugin|IgnorePlugin|ESLintPlugin)/.test(plugin.constructor.name)) {
         return plugin;

example/basic-plugins/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@examples/basic-plugins",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "",
   "private": true,
   "scripts": {
@@ -15,7 +15,7 @@
     "react-dom": "17.0.2"
   },
   "devDependencies": {
-    "@kkt/ssr": "3.0.0",
+    "@kkt/ssr": "3.0.1",
     "kkt": "7.1.5"
   },
   "browserslist": {

example/basic-routes-rematch-new/.gitignore

@@ -0,0 +1,19 @@
+node_modules
+npm-debug.log*
+package-lock.json
+coverage
+dist
+.DS_Store
+.cache
+.vscode
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+*.bak
+*.tem
+*.temp
+#.swp
+*.*~
+~*.*

example/basic-routes-rematch-new/README.md

@@ -0,0 +1,29 @@
+Basic Example
+---
+
+The [react](https://github.com/facebook/react) base application.
+
+## Development
+
+Runs the project in development mode.  
+
+```bash
+npm run start
+```
+
+Runs Node Server
+
+```bash
+npm run server
+```
+
+## production
+
+Builds the app for production to the build folder.
+
+```bash
+npm run build
+```
+
+The build is minified and the filenames include the hashes.
+Your app is ready to be deployed!

example/basic-routes-rematch-new/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@examples/basic-routes-rematch-new",
+  "version": "3.0.1",
+  "description": "",
+  "private": true,
+  "scripts": {
+    "server": "node dist/server.js",
+    "nodemon": "nodemon dist/server.js",
+    "build": "npm run build:server && npm run build:web",
+    "build:server": "kkt-ssr build",
+    "build:web": "kkt-ssr build --target web",
+    "start": "npm run start:server & npm run start:web",
+    "start:server": "kkt-ssr watch",
+    "start:web": "kkt-ssr watch --target web"
+  },
+  "keywords": [],
+  "dependencies": {
+    "@rematch/core": "2.2.0",
+    "@rematch/loading": "2.1.2",
+    "express": "4.16.4",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-redux": "7.2.6",
+    "react-router": "^6.2.1",
+    "react-router-dom": "^6.2.1",
+    "serialize-javascript": "6.0.0"
+  },
+  "devDependencies": {
+    "@kkt/ssr": "3.0.1",
+    "kkt": "7.1.5"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

example/basic-routes-rematch-new/public/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>KKT</title>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>

example/basic-routes-rematch-new/public/robots.txt

@@ -0,0 +1 @@
+User-agent: *

example/basic-routes-rematch-new/src/client.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './routes';
+
+ReactDOM.hydrate(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
+
+if (module.hot) {
+  module.hot.accept();
+}

example/basic-routes-rematch-new/src/index.js

@@ -0,0 +1,19 @@
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './routes';
+import { BrowserRouter } from "react-router-dom";
+import store from "./models"
+import { Provider } from 'react-redux';
+
+ReactDOM.hydrate(
+  <Provider store={store} >
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </Provider>
+  , document.getElementById('root'));
+
+if (module.hot) {
+  module.hot.accept();
+}

example/basic-routes-rematch-new/src/models/demo.js

@@ -0,0 +1,13 @@
+import { createModel } from "@rematch/core"
+
+export default createModel()({
+  name: "demo",
+  state: {
+    title: "demo 标题"
+  },
+  effects: () => ({
+    async very(_, { demo }) {
+      console.log("打印 demo", demo.title)
+    }
+  })
+})

example/basic-routes-rematch-new/src/models/index.js

@@ -0,0 +1,13 @@
+import { init } from "@rematch/core"
+import loading from "@rematch/loading"
+import login from "./login"
+import demo from "./demo"
+const models = { demo, login }
+
+const store = init({
+  models,
+  plugins: [loading()]
+})
+
+
+export default store;

example/basic-routes-rematch-new/src/models/login.js

@@ -0,0 +1,21 @@
+import { createModel } from "@rematch/core"
+
+export default createModel()({
+  name: "login",
+  state: {
+    title: "login 标题"
+  },
+  effects: () => ({
+    async very(_, { login }) {
+      console.log("打印 login", login.title)
+    }
+  }),
+  reducers: {
+    update(state, { payload }) {
+      return {
+        ...state,
+        ...payload
+      }
+    }
+  }
+})

example/basic-routes-rematch-new/src/routes/About/index.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { useSelector } from 'react-redux'
+
+const About = () => {
+  const title = useSelector(({ demo }) => demo.title)
+
+  return <div>About {title}</div>
+}
+export default About;