@appigram/react-code-split-ssr 1.3.8 → 2.0.0

package/lib/bundle.js

@@ -1,26 +1,15 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 const Bundle = ({ mod, loading }) => {
     const [state, setState] = useState({ mod: null });
     useEffect(() => {
-        (function () {
-            return __awaiter(this, void 0, void 0, function* () {
-                const Mod = yield mod;
-                setState({ mod: Mod.default });
-            });
+        (async function () {
+            const Mod = await mod;
+            setState({ mod: Mod.default });
         })();
     }, []);
     const Mod = state.mod;
     const Loading = loading || (() => _jsx("div", {}));
-    return state.mod ? _jsx(Mod, {}) : _jsx(Loading, {});
+    return Mod ? _jsx(Mod, {}) : _jsx(Loading, {});
 };
 export default Bundle;

package/lib/generate-routes.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 export interface IJSXModule {
     default: React.FC | React.ComponentClass;
 }

package/lib/generate-routes.js

@@ -1,37 +1,25 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from "react";
 import { matchPath, Route, Routes } from "react-router";
-const generateRoutes = (...args_1) => __awaiter(void 0, [...args_1], void 0, function* (options = {
+const generateRoutes = async (options = {
     pathname: "/",
     routes: [],
-}) {
+}) => {
     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));
+    const preload = options.routes.find((route) => !!route.path && !!matchPath(route.path, options.pathname));
     const preloadedElement = preload === undefined ? options.notFoundComp : preload.element;
-    // fallback to previous version
-    const preloadedComp = typeof preloadedElement === 'function' ?
-        yield preloadedElement().props.mod
-        :
-            yield preloadedElement.props.mod;
+    const preloadedComp = typeof preloadedElement === 'function'
+        ? await preloadedElement().props.mod
+        : await preloadedElement?.props?.mod ?? null;
     const renderElement = (path, bundle) => {
         if (!preloadedComp)
             return bundle;
         const isRouteMatched = (preload && preload.path === path) || (!preload && !path);
-        const Element = isRouteMatched ? preloadedComp.default : bundle;
-        return isRouteMatched ? _jsx(Element, {}) : Element;
+        const Element = isRouteMatched ? preloadedComp.default : null;
+        return isRouteMatched && Element ? _jsx(Element, {}) : bundle;
     };
-    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) }, 'nf')] }));
-});
+    return (_jsxs(Routes, { children: [options.routes.map((props, i) => (_jsx(Route, { path: props.path, element: renderElement(props.path ?? null, props.element) }, i))), _jsx(Route, { path: '*', element: renderElement(null, options.notFoundComp) }, 'nf')] }));
+};
 export default generateRoutes;

package/lib/index.d.ts

@@ -1,3 +1,3 @@
-import Bundle from './bundle';
-import generateRoutes from './generate-routes';
+import Bundle from './bundle.js';
+import generateRoutes from './generate-routes.js';
 export { Bundle, generateRoutes };

package/lib/index.js

@@ -1,3 +1,3 @@
-import Bundle from './bundle';
-import generateRoutes from './generate-routes';
+import Bundle from './bundle.js';
+import generateRoutes from './generate-routes.js';
 export { Bundle, generateRoutes };

package/lib/src/bundle.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface IProps {
+    mod: Promise<any>;
+    loading?: React.FC;
+}
+declare const Bundle: ({ mod, loading }: IProps) => import("react/jsx-runtime").JSX.Element;
+export default Bundle;

package/lib/src/bundle.js

@@ -0,0 +1,50 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const Bundle = ({ mod, loading }) => {
+    const [state, setState] = (0, react_1.useState)({ mod: null });
+    (0, react_1.useEffect)(() => {
+        (async function () {
+            const Mod = await mod;
+            setState({ mod: Mod.default });
+        })();
+    }, []);
+    const Mod = state.mod;
+    const Loading = loading || (() => (0, jsx_runtime_1.jsx)("div", {}));
+    return state.mod ? (0, jsx_runtime_1.jsx)(Mod, {}) : (0, jsx_runtime_1.jsx)(Loading, {});
+};
+exports.default = Bundle;

package/lib/src/generate-routes.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+export interface IJSXModule {
+    default: React.FC | React.ComponentClass;
+}
+export interface ISSRRoute {
+    caseSensitive?: boolean;
+    children?: React.ReactNode;
+    element?: any;
+    index?: boolean;
+    path?: string;
+}
+export interface IOptions {
+    pathname: string;
+    routes: ISSRRoute[];
+    notFoundComp?: any;
+}
+declare const generateRoutes: (options?: IOptions) => Promise<import("react/jsx-runtime").JSX.Element>;
+export default generateRoutes;

package/lib/src/generate-routes.js

@@ -0,0 +1,64 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_router_1 = require("react-router");
+const generateRoutes = async (options = {
+    pathname: "/",
+    routes: [],
+}) => {
+    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) => !!(0, react_router_1.matchPath)(route.path, options.pathname));
+    const preloadedElement = preload === undefined ? options.notFoundComp : preload.element;
+    // fallback to previous version
+    const preloadedComp = typeof preloadedElement === 'function' ?
+        await preloadedElement().props.mod
+        :
+            await preloadedElement.props.mod;
+    const renderElement = (path, bundle) => {
+        if (!preloadedComp)
+            return bundle;
+        const isRouteMatched = (preload && preload.path === path) || (!preload && !path);
+        const Element = isRouteMatched ? preloadedComp.default : bundle;
+        return isRouteMatched ? (0, jsx_runtime_1.jsx)(Element, {}) : Element;
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_router_1.Routes, { children: [options.routes.map((props, i) => {
+                return ((0, jsx_runtime_1.jsx)(react_router_1.Route, { path: props.path, element: renderElement(props.path, props.element) }, i));
+            }), (0, jsx_runtime_1.jsx)(react_router_1.Route, { path: '*', element: renderElement(null, options.notFoundComp) }, 'nf')] }));
+};
+exports.default = generateRoutes;

package/lib/src/index.d.ts

@@ -0,0 +1,3 @@
+import Bundle from './bundle';
+import generateRoutes from './generate-routes';
+export { Bundle, generateRoutes };

package/lib/src/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateRoutes = exports.Bundle = void 0;
+const bundle_1 = __importDefault(require("./bundle"));
+exports.Bundle = bundle_1.default;
+const generate_routes_1 = __importDefault(require("./generate-routes"));
+exports.generateRoutes = generate_routes_1.default;

package/package.json

@@ -1,7 +1,8 @@
 {
 	"name": "@appigram/react-code-split-ssr",
-	"version": "1.3.8",
+	"version": "2.0.0",
 	"description": "React code splitting with SSR",
+	"type": "module",
 	"main": "./lib/index.js",
 	"scripts": {
 		"build": "tsc",
@@ -29,8 +30,8 @@
 		"typescript": "6.0.3"
 	},
 	"dependencies": {
-		"react": "19.2.5",
-		"react-dom": "19.2.5",
-		"react-router": "7.14.2"
+		"react": "19.2.6",
+		"react-dom": "19.2.6",
+		"react-router": "7.15.0"
 	}
 }

package/src/bundle.tsx

@@ -5,8 +5,12 @@ export interface IProps {
   loading?: React.FC;
 }
 
+type BundleState = {
+  mod: React.FC | React.ComponentClass | null;
+};
+
 const Bundle = ({ mod, loading }: IProps) => {
-  const [state, setState] = useState({ mod: null });
+  const [state, setState] = useState<BundleState>({ mod: null });
 
   useEffect(() => {
     (async function () {
@@ -17,7 +21,8 @@ const Bundle = ({ mod, loading }: IProps) => {
 
   const Mod = state.mod;
   const Loading = loading || (() => <div />);
-  return state.mod ? <Mod /> : <Loading />;
+
+  return Mod ? <Mod /> : <Loading />;
 };
 
-export default Bundle;
+export default Bundle;

package/src/generate-routes.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from "react";
+import { type ReactElement } from "react";
 import { matchPath, Route, Routes } from "react-router";
 
 export interface IJSXModule {
@@ -8,7 +8,7 @@ export interface IJSXModule {
 export interface ISSRRoute {
 	caseSensitive?: boolean;
 	children?: React.ReactNode;
-	element?: any; // () => React.FunctionComponentElement<{ mod: Promise<IJSXModule> }>;
+	element?: any;
 	index?: boolean;
 	path?: string;
 }
@@ -16,7 +16,7 @@ export interface ISSRRoute {
 export interface IOptions {
 	pathname: string;
 	routes: ISSRRoute[];
-	notFoundComp?: any; // () => React.FunctionComponentElement<{ mod: Promise<IJSXModule> }>;
+	notFoundComp?: any;
 }
 
 const generateRoutes = async (
@@ -30,38 +30,34 @@ const generateRoutes = async (
 	}
 
 	const preload = options.routes.find(
-		(route) => !!matchPath(route.path, options.pathname)
+		(route): route is ISSRRoute & { path: string; } => !!route.path && !!matchPath(route.path, options.pathname)
 	);
 
 	const preloadedElement = preload === undefined ? options.notFoundComp : preload.element;
 
-	// fallback to previous version
-	const preloadedComp: any = typeof preloadedElement === 'function' ?
-		await preloadedElement().props.mod
-		:
-		await preloadedElement.props.mod;
+	const preloadedComp: IJSXModule | null = typeof preloadedElement === 'function'
+		? await preloadedElement().props.mod
+		: await preloadedElement?.props?.mod ?? null;
 
-	const renderElement = (path: string, bundle: ReactElement) => {
+	const renderElement = (path: string | null, bundle: ReactElement) => {
 		if (!preloadedComp) return bundle;
 		const isRouteMatched = (preload && preload.path === path) || (!preload && !path);
-		const Element = isRouteMatched ? preloadedComp.default : bundle;
-		return isRouteMatched ? <Element /> : Element;
+		const Element = isRouteMatched ? preloadedComp.default : null;
+		return isRouteMatched && Element ? <Element /> : bundle;
 	};
 
 	return (
 		<Routes>
-			{options.routes.map((props, i) => {
-				return (
-					<Route
-						key={i}
-						path={props.path}
-						element={renderElement(props.path, props.element)}
-					/>
-				);
-			})}
+			{options.routes.map((props, i) => (
+				<Route
+					key={i}
+					path={props.path}
+					element={renderElement(props.path ?? null, props.element)}
+				/>
+			))}
 			<Route key='nf' path='*' element={renderElement(null, options.notFoundComp)} />
 		</Routes>
 	);
 };
 
-export default generateRoutes;
+export default generateRoutes;

package/src/index.ts

@@ -1,4 +1,4 @@
-import Bundle from './bundle';
-import generateRoutes from './generate-routes';
+import Bundle from './bundle.js';
+import generateRoutes from './generate-routes.js';
 
-export { Bundle, generateRoutes };
+export { Bundle, generateRoutes };

package/tsconfig.json

@@ -1,20 +1,19 @@
 {
 	"compilerOptions": {
 		"outDir": "lib",
-		"target": "ES6" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
-		"module": "esnext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
-		"lib": [
-			"esnext",
-			"dom"
-		] /* Specify library files to be included in the compilation. */,
-		"allowJs": true /* Allow javascript files to be compiled. */,
-		"jsx": "react-jsx" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
-		"noImplicitAny": false /* Raise error on expressions and declarations with an implied 'any' type. */,
-		"moduleResolution": "node",
-		"allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
-		"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+		"rootDir": "src",
+		"target": "ES2022",
+		"module": "NodeNext",
+		"moduleResolution": "NodeNext",
+		"lib": ["ES2022", "dom"],
+		"allowJs": true,
+		"jsx": "react-jsx",
+		"noImplicitAny": false,
+		"allowSyntheticDefaultImports": true,
+		"esModuleInterop": true,
 		"skipLibCheck": true,
-		"declaration": true
+		"declaration": true,
+		"verbatimModuleSyntax": true
 	},
 	"include": ["src/**/*"],
 	"exclude": ["node_modules", "build", "scripts", "webpack", "jest"]