@appigram/react-code-split-ssr 1.2.0-beta.7 → 1.2.3

package/README.md

@@ -3,7 +3,7 @@ React code splitting with server side rendering
 
 ## How it works
 
-- Based on React Router 4
+- Based on React Router 6
 - Server side: Load all components synchronously, then render to string.
 - Client side: Load the initial component before rendering, render the entire screen synchronously, then load the rest of routes asynchronously.
 
@@ -26,9 +26,6 @@ export const routes = [
   { exact: true, path: '/posts', component: Posts },
 ]
 
-export const redirects = [
-  { from: '/test', to: '/posts' }
-]
 ```
 Client:
 ```js
@@ -105,6 +102,9 @@ A function that returns a `Promise` object which can be resolved to React Router
 - redirects  {objects}[] - An array of `<Redirect>` props object
 - notFoundComp {Component} - A React component for 404 Not Found, only accepts `() => <Bundle/>`
 
+## v1.2.0
+- [x] Remove redirects, Fix React-Router v6 specific rendering
+
 ## v1.1.0
 - [x] Upgrade to React-Router v6
 

package/lib/generate-routes.js

@@ -7,11 +7,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { matchPath, Route, Routes } from "react-router-dom";
 const generateRoutes = (options = {
     pathname: "/",
-    routes: []
+    routes: [],
 }) => __awaiter(void 0, void 0, void 0, function* () {
     if (!Array.isArray(options.routes) || options.routes.length === 0) {
         throw new Error("options.routes must be an non-empty array");
@@ -23,14 +23,12 @@ const generateRoutes = (options = {
     const renderElement = (path, bundle) => {
         if (!preloadedComp)
             return bundle;
-        const isSSR = (preload && preload.path === path) || (!preload && !path);
-        return isSSR ? preloadedComp.default : bundle;
+        const isRouteMatched = (preload && preload.path === path) || (!preload && !path);
+        const Element = isRouteMatched ? preloadedComp.default : bundle;
+        return isRouteMatched ? _jsx(Element, {}, void 0) : Element;
     };
-    const routes = options.routes.map((props, i) => {
-        const element = renderElement(props.path, props.element);
-        return (_jsx(Route, Object.assign({}, props, { element: element }), i));
-    });
-    routes.push(_jsx(Route, { element: renderElement(null, options.notFoundComp) }, options.routes.length));
-    return (_jsx(Routes, { children: routes }, void 0));
+    return (_jsxs(Routes, { children: [options.routes.map((props, i) => {
+                return (_jsx(Route, { path: props.path, element: renderElement(props.path, props.element) }, i));
+            }), _jsx(Route, { path: '*', element: renderElement(null, options.notFoundComp) }, void 0)] }, void 0));
 });
 export default generateRoutes;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@appigram/react-code-split-ssr",
-	"version": "1.2.0-beta.7",
+	"version": "1.2.3",
 	"description": "React code splitting with SSR",
 	"main": "./lib/index.js",
 	"scripts": {
@@ -22,15 +22,15 @@
 	"author": "Eugene Sysmanov",
 	"license": "MIT",
 	"devDependencies": {
-		"@types/react": "^17.0.34",
+		"@types/react": "^17.0.37",
 		"@types/react-router-dom": "^5.3.2",
 		"tslint": "^6.1.3",
 		"tslint-react": "^5.0.0",
-		"typescript": "^4.4.4"
+		"typescript": "^4.5.4"
 	},
 	"dependencies": {
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
-		"react-router-dom": "^6.0.2"
+		"react-router-dom": "^6.1.1"
 	}
 }

package/src/generate-routes.tsx

@@ -1,40 +1,36 @@
-import { ReactElement, JSXElementConstructor } from 'react'
+import { ReactElement } from "react";
 import { matchPath, Route, Routes } from "react-router-dom";
-// import Bundle from './bundle'
-
-export type IElement = ReactElement<any, string | JSXElementConstructor<any>>
 
 export interface IJSXModule {
-	default: IElement;
+	default: React.FC | React.ComponentClass;
 }
 
 export interface ISSRRoute {
 	caseSensitive?: boolean;
-  children?: React.ReactNode;
-  element?: () => React.FunctionComponentElement<{ mod: Promise<IJSXModule> }>;
-  index?: boolean;
-  path?: string;
+	children?: React.ReactNode;
+	element?: any; // () => React.FunctionComponentElement<{ mod: Promise<IJSXModule> }>;
+	index?: boolean;
+	path?: string;
 }
 
 export interface IOptions {
 	pathname: string;
 	routes: ISSRRoute[];
-	notFoundComp?: () => React.FunctionComponentElement<{ mod: Promise<IJSXModule> }>;
+	notFoundComp?: any; // () => React.FunctionComponentElement<{ mod: Promise<IJSXModule> }>;
 }
 
 const generateRoutes = async (
 	options: IOptions = {
 		pathname: "/",
-		routes: []
+		routes: [],
 	}
-): Promise<IElement> => {
+) => {
 	if (!Array.isArray(options.routes) || options.routes.length === 0) {
 		throw new Error("options.routes must be an non-empty array");
 	}
 
 	const preload = options.routes.find(
-		(route) =>
-			!!matchPath(route.path, options.pathname)
+		(route) => !!matchPath(route.path, options.pathname)
 	);
 
 	const preloadedComp: any =
@@ -42,25 +38,25 @@ const generateRoutes = async (
 			? await options.notFoundComp().props.mod
 			: await preload.element().props.mod;
 
-	const renderElement = (path: string, bundle: React.FC) => {
+	const renderElement = (path: string, bundle: ReactElement) => {
 		if (!preloadedComp) return bundle;
-		const isSSR = (preload && preload.path === path) || (!preload && !path);
-		return isSSR ? preloadedComp.default : bundle;
+		const isRouteMatched = (preload && preload.path === path) || (!preload && !path);
+		const Element = isRouteMatched ? preloadedComp.default : bundle;
+		return isRouteMatched ? <Element /> : Element
 	};
 
-	const routes = options.routes.map((props, i) => {
-		const element = renderElement(props.path, props.element)
-		return (
-			<Route
-				key={i}
-				{...props}
-				element={element}
-			/>
-	)})
-	routes.push(<Route key={options.routes.length} element={renderElement(null, options.notFoundComp)} />)
 	return (
 		<Routes>
-			{routes}
+			{options.routes.map((props, i) => {
+				return (
+					<Route
+						key={i}
+						path={props.path}
+						element={renderElement(props.path, props.element)}
+					/>
+				);
+			})}
+			<Route path='*' element={renderElement(null, options.notFoundComp)} />
 		</Routes>
 	);
 };