fix(@kkt/react-ssr-enhanced):修复路由配置中element为dom标签是获取不到 获取预加载数据的方法 (#24)

.github/workflows/ci.yml

@@ -18,11 +18,11 @@ jobs:
       with:
         node-version: 14
 
-    - run: npm install
-    - run: npm run hoist
-    # - run: yarn
-    # - run: yarn run build
-    - run: npm run build
+    # - run: npm install
+    # - run: npm run hoist
+    - run: yarn
+    - run: yarn run build
+    # - run: npm run build
 
     - run: mkdir -p build
 

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kkt/ssr",
-  "version": "3.1.4",
+  "version": "3.1.5",
   "description": "",
   "license": "MIT",
   "main": "lib/index.js",
@@ -26,17 +26,17 @@
     "@types/webpack-node-externals": "^2.5.3"
   },
   "dependencies": {
-    "razzle-start-server-webpack-plugin": "^4.2.16",
-    "nodemon-webpack-plugin": "^4.7.1",
     "@babel/core": "^7.17.8",
     "@babel/runtime": "^7.17.8",
     "css-loader": "^6.7.1",
     "kkt": "^7.1.5",
     "mini-css-extract-plugin": "2.6.0",
     "mocker-api": "^2.9.5",
+    "nodemon-webpack-plugin": "^4.7.1",
+    "razzle-start-server-webpack-plugin": "^4.2.16",
     "react-scripts": "^5.0.0",
     "webpack-manifest-plugin": "^5.0.0",
     "webpack-node-externals": "^3.0.0",
     "webpackbar": "^5.0.2"
   }
-}
+}

core/src/script/utils/index.ts

@@ -67,16 +67,20 @@ const getWebpackConfig = (newConfig: webpack.Configuration, type: "server" | "cl
   }
 
   newConfig = restWebpackManifestPlugin(newConfig, overrides.paths, type, isCreateAsset, httpPath)
+
   if (!isWebpackDevServer) {
     newConfig = clearHtmlTemp(newConfig)
   }
+
   newConfig.module.exprContextCritical = false;
   newConfig.plugins.push(
     new webpack.DefinePlugin({
       OUTPUT_PUBLIC_PATH: JSON.stringify(overrides.output_path),
       HOST: JSON.stringify(HOST),
       PORT: JSON.stringify(PORT),
       Dev_Server: JSON.stringify(isWebpackDevServer),
+      "process.env.PORT": JSON.stringify(PORT || 3000),
+      "process.env.HOST": JSON.stringify(HOST || "localhost")
     }),
   )
 

example/basic-plugins/package.json

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

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

@@ -1,6 +1,6 @@
 {
   "name": "@examples/basic-routes-rematch-new",
-  "version": "3.1.4",
+  "version": "3.1.5",
   "description": "",
   "private": true,
   "scripts": {
@@ -21,7 +21,7 @@
     "serialize-javascript": "6.0.0"
   },
   "devDependencies": {
-    "@kkt/ssr": "3.1.4",
+    "@kkt/ssr": "3.1.5",
     "kkt": "~7.1.5"
   },
   "browserslist": {

example/basic-routes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@examples/basic-routes",
-  "version": "3.1.4",
+  "version": "3.1.5",
   "description": "",
   "private": true,
   "scripts": {
@@ -17,7 +17,7 @@
     "react-router-dom": "^6.2.2"
   },
   "devDependencies": {
-    "@kkt/ssr": "3.1.4",
+    "@kkt/ssr": "3.1.5",
     "kkt": "~7.1.5"
   },
   "browserslist": {

example/basic/package.json

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

example/react-router-rematch-old/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@examples/basic-routes-rematch-old",
-  "version": "3.1.4",
+  "version": "3.1.5",
   "description": "",
   "private": true,
   "scripts": {
@@ -15,7 +15,7 @@
   "author": "Kenny Wong <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "@kkt/react-ssr-enhanced": "3.1.4",
+    "@kkt/react-ssr-enhanced": "3.1.5",
     "@rematch/core": "2.2.0",
     "axios": "0.26.0",
     "cookie-parser": "1.4.3",
@@ -31,12 +31,11 @@
     "redux": "4.1.2"
   },
   "devDependencies": {
-    "@kkt/plugin-less": "3.1.4",
-    "@kkt/ssr": "3.1.4",
+    "@kkt/plugin-less": "3.1.5",
+    "@kkt/ssr": "3.1.5",
     "assert": "2.0.0",
     "browserify-zlib": "0.2.0",
     "buffer": "6.0.3",
-    "crypto": "1.0.1",
     "crypto-browserify": "3.12.0",
     "https-browserify": "1.0.0",
     "kkt": "~7.1.5",

example/react-router-rematch-old/src/client.js

@@ -16,7 +16,8 @@ const routes = getRouterData();
     // Warning: render(): Calling ReactDOM.render() to hydrate server-rendered markup will stop working in React v17.
     // Replace the ReactDOM.render() call with ReactDOM.hydrate() if you want React to attach to the server HTML.
     // const renderMethod = module.hot ? ReactDOM.render : ReactDOM.hydrate; // eslint-disable-line
-    const renderMethod = !!module.hot ? ReactDOM.render : ReactDOM.hydrate; // eslint-disable-line
+    // const renderMethod = !!module.hot ? ReactDOM.render : ReactDOM.hydrate; // eslint-disable-line
+    const renderMethod = ReactDOM.hydrate; // eslint-disable-line
     // The server renders an error and is mounted on the Window object.
     // The object exists only on the client side.
     window._history = history;

example/react-router-rematch-old/src/routes/repos/detail/index.js

@@ -3,24 +3,21 @@ import { Helmet } from 'react-helmet';
 import Container from '../../../components/Container';
 import './index.css';
 
-export default class Details extends React.Component {
-  // eslint-disable-next-line
-  static async getInitialProps({ req, res, history, location, match, ...ctx }) {
-    return { whatever: `This params id: ${match.params.id}. ` };
-  }
-  render() {
-    const { match } = this.props;
-    return (
-      <Container title={`Repos Details`}>
-        <Helmet titleTemplate="%s - kkt">
-          <title>Repos Details</title>
-        </Helmet>
-        <div className="blue">
-          {this.props.whatever}
-          Repos 2 Details
-          {/* <span>{match.params.id}</span> */}
-        </div>
-      </Container>
-    );
-  }
+const Details = (props) => {
+  return (
+    <Container title={`Repos Details`}>
+      <Helmet titleTemplate="%s - kkt">
+        <title>Repos Details</title>
+      </Helmet>
+      <div className="blue">
+        {props.whatever}
+        Repos 2 Details
+        {/* <span>{match.params.id}</span> */}
+      </div>
+    </Container>
+  );
 }
+Details.getInitialProps = ({ req, res, history, location, match, ...ctx }) => {
+  return { whatever: `This params id: ${match.params.id}. ` };
+}
+export default Details 

example/react-router-rematch-old/src/server.js

@@ -6,7 +6,8 @@ const logs = console.log; // eslint-disable-line
 const server = http.createServer(app);
 let currentApp = app;
 
-const PORT = process.env.PORT || 3000;
+const PORT = parseInt(process.env.PORT || 3000);
+
 server.listen(PORT + 1, (error) => {
   if (error) {
     logs(error);

example/react-router-rematch-old/src/serverIndex.js

@@ -19,10 +19,10 @@ if (FS.existsSync(assetPath)) {
 const appDirectory = FS.realpathSync(process.cwd());
 const resolveApp = (relativePath) => Path.resolve(appDirectory, relativePath);
 
-const isDev = process.env.NODE_ENV === "development"
+const isDev = process.env.NODE_ENV === "development" && Dev_Server
 
 // const target = `http://${process.env.HOST}:${process.env.PORT}`
-const target = `http://${process.env.HOST}:${process.env.PORT}`
+const target = `http://${process.env.HOST || "localhost"}:${process.env.PORT || 3000}`
 
 const routes = getRouterData();
 const server = express();
@@ -37,9 +37,6 @@ server.use('/api', proxy({
   changeOrigin: true,
 }));
 server.get('/*', async (req, res) => {
-  if (req.url === "/favicon.ico/") {
-    return;
-  }
   try {
     const store = await createStore();
     const html = await render({

lerna.json

@@ -6,5 +6,19 @@
     "packages/react-ssr-enhanced",
     "packages/kkt-plugin-less"
   ],
-  "version": "3.1.4"
+  "version": "3.1.5",
+  "command": {
+    "create": {
+      "license": "MIT"
+    },
+    "bootstrap": {
+      "yarnClientArgs": [
+        "--no-yarn-lock",
+        "--no-package-lock"
+      ],
+      "forceLocal": true
+    }
+  },
+  "npmClient": "yarn",
+  "useWorkspaces": true
 }

package.json

@@ -54,5 +54,15 @@
 		"lint-staged": "12.3.4",
 		"prettier": "2.5.1",
 		"tsbb": "~3.7.2"
+	},
+	"workspaces": {
+		"packages": [
+			"example/*",
+			"core/",
+			"packages/create-kkt-ssr",
+			"packages/react-ssr-enhanced",
+			"packages/kkt-plugin-less"
+		],
+		"nohoist": []
 	}
 }

packages/create-kkt-ssr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-kkt-ssr",
-  "version": "3.1.4",
+  "version": "3.1.5",
   "description": "CLI tool to bootstrap KKT applications with no configuration",
   "main": "lib/index.js",
   "bin": {

packages/kkt-plugin-less/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kkt/plugin-less",
-  "version": "3.1.4",
+  "version": "3.1.5",
   "description": "Support less.",
   "main": "lib/index.js",
   "module": "esm/index.js",

packages/react-ssr-enhanced/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kkt/react-ssr-enhanced",
-  "version": "3.1.4",
+  "version": "3.1.5",
   "description": "KKT react server side rendering enhancement tool.",
   "main": "lib/index.js",
   "module": "esm/index.js",
@@ -50,4 +50,4 @@
     "redux": "4.1.2",
     "tsbb": "~3.7.2"
   }
-}
+}

packages/react-ssr-enhanced/src/RoutersController.tsx

@@ -34,7 +34,7 @@ const ChildRoutes = (props: ControllerProps) => {
       if (routeItem.element) {
         if (React.isValidElement(routeItem.element)) {
           routeItem.element = React.cloneElement(routeItem.element, { ...props })
-        } else if (!React.isValidElement(routeItem.element) && routeItem.element && typeof routeItem.element.getInitialProps === "function") {
+        } else if (!React.isValidElement(routeItem.element) && routeItem.element) {
           routeItem.element = React.createElement(routeItem.element as any, { ...props })
         }
       }
@@ -59,7 +59,6 @@ class Controller extends React.PureComponent<ControllerProps, { data: any }> {
   UNSAFE_componentWillReceiveProps(nextProps: Readonly<ControllerProps>, nextContext: any): void {
     // eslint-disable-next-line
     const navigated = nextProps.location !== this.props.location;
-    console.log(3221223)
     if (navigated) {
       window.scrollTo(0, 0);
       // save the location so we can render the old screen

packages/react-ssr-enhanced/src/loadInitialProps.ts

@@ -9,10 +9,13 @@ export const loadInitialProps = async (routes: RouteNewObject[], pathname: strin
     const match = matchPath(route.path as string, pathname);
     const component = route.element;
     if (route.path && match && component) {
+      // console.log(component)
       if (component.getInitialProps && typeof component.getInitialProps === "function") {
         // @ts-ignore
         const resule = component.load ? component.load().then(() => component.getInitialProps({ match, ...ctx })) : component.getInitialProps({ match, ...ctx })
         promises.push(resule);
+      } else if (route.load && typeof route.load === "function") {
+        promises.push(route.load({ match, ...ctx }));
       }
     }
     return !!match;