ssr-plugin-react 7.0.5 → 7.0.7

package/src/entry/react18-client-entry.tsx

@@ -1,78 +1,78 @@
-import type { hydrateRoot as HydrateRoot, createRoot as CreateRoot } from 'react-dom18/client'
-import type { LayoutProps } from 'ssr-types'
+import type { hydrateRoot as HydrateRoot, createRoot as CreateRoot } from "react-dom18/client";
+import type { LayoutProps } from "ssr-types";
 
 //@ts-ignore
-import { hydrateRoot, createRoot } from 'react-dom/client'
-import { createElement } from 'react'
-import { BrowserRouter, Route, Switch } from 'react-router-dom'
-import { preloadComponent, isMicro, setStoreContext, setStore } from 'ssr-common-utils'
-import { wrapComponent } from 'ssr-hoc-react'
-import { ssrCreateContext, Routes, createStore } from './create'
-import { AppContext } from './context'
-const { FeRoutes, layoutFetch, App } = Routes
+import { hydrateRoot, createRoot } from "react-dom/client";
+import { createElement } from "react";
+import { BrowserRouter, Route, Switch } from "react-router-dom";
+import { preloadComponent, isMicro, setStoreContext, setStore } from "ssr-common-utils";
+import { wrapComponent } from "ssr-hoc-react";
+import { ssrCreateContext, Routes, createStore } from "./create";
+import { AppContext } from "./context";
+const { FeRoutes, layoutFetch, App } = Routes;
 const clientRender = async (): Promise<void> => {
-	const IApp =
-		App ??
-		function (props: LayoutProps) {
-			return props.children!
-		}
-	const context = ssrCreateContext() as any
-	setStoreContext(context)
-	const store = createStore(window.__VALTIO_DATA__)
-	setStore(store ?? {})
-	const baseName = isMicro() ? window.clientPrefix : window.prefix
-	const routes = await preloadComponent(FeRoutes, baseName)
-	const container = document.querySelector(window.ssrDevInfo.rootId ?? '#app')!
-	const ele = createElement(
-		//@ts-ignore
-		BrowserRouter,
-		{
-			basename: baseName
-		},
-		createElement(AppContext, {
-			context,
-			children: createElement(
-				Switch,
-				null,
-				createElement(
-					IApp as any,
-					null,
-					createElement(
-						Switch,
-						null,
-						routes.map((item) => {
-							const { fetch, component, path } = item
-							component.fetch = fetch
-							component.layoutFetch = layoutFetch
-							const WrappedComponent = wrapComponent(component)
-							return createElement(Route, {
-								exact: true,
-								key: path,
-								path: path,
-								render: (props) =>
-									createElement(WrappedComponent, {
-										...props,
-										key: props.history.location.key
-									})
-							})
-						})
-					)
-				)
-			)
-		})
-	)
-	if (window.__USE_SSR__) {
-		;(hydrateRoot as typeof HydrateRoot)(container, ele)
-	} else {
-		const root = (createRoot as typeof CreateRoot)(container)
-		root.render(ele)
-	}
+  const IApp =
+    App ??
+    function (props: LayoutProps) {
+      return props.children!;
+    };
+  const context = ssrCreateContext() as any;
+  setStoreContext(context);
+  const store = createStore();
+  setStore(store ?? {});
+  const baseName = isMicro() ? window.clientPrefix : window.prefix;
+  const routes = await preloadComponent(FeRoutes, baseName);
+  const container = document.querySelector(window.ssrDevInfo.rootId ?? "#app")!;
+  const ele = createElement(
+    //@ts-ignore
+    BrowserRouter,
+    {
+      basename: baseName,
+    },
+    createElement(AppContext, {
+      context,
+      children: createElement(
+        Switch,
+        null,
+        createElement(
+          IApp as any,
+          null,
+          createElement(
+            Switch,
+            null,
+            routes.map((item) => {
+              const { fetch, component, path } = item;
+              component.fetch = fetch;
+              component.layoutFetch = layoutFetch;
+              const WrappedComponent = wrapComponent(component);
+              return createElement(Route, {
+                exact: true,
+                key: path,
+                path: path,
+                render: (props) =>
+                  createElement(WrappedComponent, {
+                    ...props,
+                    key: props.history.location.key,
+                  }),
+              });
+            }),
+          ),
+        ),
+      ),
+    }),
+  );
+  if (window.__USE_SSR__) {
+    (hydrateRoot as typeof HydrateRoot)(container, ele);
+  } else {
+    const root = (createRoot as typeof CreateRoot)(container);
+    root.render(ele);
+  }
 
-	if (!window.__USE_VITE__) {
-		;(module as any)?.hot?.accept?.()
-	}
-}
+  if (!window.__USE_VITE__) {
+    (module as any)?.hot?.accept?.();
+  }
+};
 
-clientRender()
+clientRender();
 
-export { clientRender }
+export { clientRender };

package/src/entry/server-entry.tsx

@@ -1,154 +1,205 @@
-import type { renderToPipeableStream } from 'react-dom18/server'
-import { PassThrough } from 'stream'
-import * as React from 'react'
-import { createElement } from 'react'
-import * as ReactDOMServer from 'react-dom/server'
-import { StaticRouter } from 'react-router-dom'
-import { findRoute, getManifest, logGreen, normalizePath, getAsyncCssChunk, getAsyncJsChunk, splitPageInfo, reactRefreshFragment, localStorageWrapper, checkRoute, useStore, isReact18, getClientEntry } from 'ssr-common-utils'
-import { ISSRContext, IConfig, ReactESMPreloadFeRouteItem, DynamicFC, StaticFC } from 'ssr-types'
-import { serialize } from 'ssr-serialize-javascript'
-import { AppContext } from './context'
-import { Routes, ssrCreateContext, createStore } from './create'
+import type { renderToPipeableStream } from "react-dom18/server";
+import { PassThrough } from "stream";
+import * as React from "react";
+import { createElement } from "react";
+import * as ReactDOMServer from "react-dom/server";
+import { StaticRouter } from "react-router-dom";
+import {
+  findRoute,
+  getManifest,
+  logGreen,
+  normalizePath,
+  getAsyncCssChunk,
+  getAsyncJsChunk,
+  splitPageInfo,
+  reactRefreshFragment,
+  localStorageWrapper,
+  checkRoute,
+  useStore,
+  isReact18,
+  getClientEntry,
+} from "ssr-common-utils";
+import { ISSRContext, IConfig, ReactESMPreloadFeRouteItem, DynamicFC, StaticFC } from "ssr-types";
+import { serialize } from "ssr-serialize-javascript";
+import { AppContext } from "./context";
+import { Routes, ssrCreateContext, createStore } from "./create";
 
-const { FeRoutes, layoutFetch, state, Layout } = Routes
+const { FeRoutes, layoutFetch, state, Layout } = Routes;
 
 type ReactDOMServerType = typeof ReactDOMServer & {
-	renderToPipeableStream: typeof renderToPipeableStream
-}
+  renderToPipeableStream: typeof renderToPipeableStream;
+};
 const serverRender = async (ctx: ISSRContext, config: IConfig) => {
-	const context = ssrCreateContext()
-	const { mode, parallelFetch, prefix, isVite, isDev, clientPrefix, onReady, onError, stream, rootId, hashRouter, streamHighWaterMark } = config
-	const rawPath = ctx.request.path ?? ctx.request.url
-	const path = normalizePath(rawPath, prefix)
-	const routeItem = findRoute<ReactESMPreloadFeRouteItem>(FeRoutes, path)
-	checkRoute({ routeItem, path })
-	const { fetch, webpackChunkName, component } = routeItem
+  const context = ssrCreateContext();
+  const {
+    mode,
+    parallelFetch,
+    prefix,
+    isVite,
+    isDev,
+    clientPrefix,
+    onReady,
+    onError,
+    stream,
+    rootId,
+    hashRouter,
+    streamHighWaterMark,
+  } = config;
+  const rawPath = ctx.request.path ?? ctx.request.url;
+  const path = normalizePath(rawPath, prefix);
+  const routeItem = findRoute<ReactESMPreloadFeRouteItem>(FeRoutes, path);
+  checkRoute({ routeItem, path });
+  const { fetch, webpackChunkName, component } = routeItem;
 
-	const fn = async () => {
-		const dynamicCssOrder = await getAsyncCssChunk(ctx, webpackChunkName, config)
-		const dynamicJsOrder = await getAsyncJsChunk(ctx, webpackChunkName, config)
-		const manifest = await getManifest(config)
-		const injectCss = (
-			isVite && isDev
-				? [
-						<script src="/@vite/client" type="module" key="vite-client" />,
-						<script
-							key="vite-react-refresh"
-							type="module"
-							dangerouslySetInnerHTML={{
-								__html: reactRefreshFragment
-							}}
-						/>
-					]
-				: dynamicCssOrder
-						.map((css) => manifest[css])
-						.filter(Boolean)
-						.map((css) => <link rel="stylesheet" key={css} href={css} />)
-		).concat(
-			isVite && isDev
-				? []
-				: dynamicJsOrder
-						.map((js) => manifest[js])
-						.filter(Boolean)
-						.map((js) => <link href={js} as="script" rel={isVite ? 'modulepreload' : 'preload'} key={js} />)
-		)
+  const fn = async () => {
+    const dynamicCssOrder = await getAsyncCssChunk(ctx, webpackChunkName, config);
+    const dynamicJsOrder = await getAsyncJsChunk(ctx, webpackChunkName, config);
+    const manifest = await getManifest(config);
+    const injectCss = (
+      isVite && isDev
+        ? [
+            <script src="/@vite/client" type="module" key="vite-client" />,
+            <script
+              key="vite-react-refresh"
+              type="module"
+              dangerouslySetInnerHTML={{
+                __html: reactRefreshFragment,
+              }}
+            />,
+          ]
+        : dynamicCssOrder
+            .map((css) => manifest[css])
+            .filter(Boolean)
+            .map((css) => <link rel="stylesheet" key={css} href={css} />)
+    ).concat(
+      isVite && isDev
+        ? []
+        : dynamicJsOrder
+            .map((js) => manifest[js])
+            .filter(Boolean)
+            .map((js) => (
+              <link href={js} as="script" rel={isVite ? "modulepreload" : "preload"} key={js} />
+            )),
+    );
 
-		const injectScript = [
-			...(isVite
-				? [
-						<script
-							key="viteWindowInit"
-							dangerouslySetInnerHTML={{
-								__html: 'window.__USE_VITE__=true'
-							}}
-						/>
-					]
-				: []),
-			...(isVite && isDev ? [<script type="module" src={`/node_modules/ssr-plugin-react/esm/entry/${getClientEntry()}.js`} key="vite-react-entry" />] : []),
-			...dynamicJsOrder
-				.map((js) => manifest[js])
-				.filter(Boolean)
-				.map((item) => <script key={item} src={item} type={isVite ? 'module' : 'text/javascript'} />)
-		]
-		const staticList = {
-			injectCss,
-			injectScript
-		}
+    const injectScript = [
+      ...(isVite
+        ? [
+            <script
+              key="viteWindowInit"
+              dangerouslySetInnerHTML={{
+                __html: "window.__USE_VITE__=true",
+              }}
+            />,
+          ]
+        : []),
+      ...(isVite && isDev
+        ? [
+            <script
+              type="module"
+              src={`/node_modules/ssr-plugin-react/esm/entry/${getClientEntry()}.js`}
+              key="vite-react-entry"
+            />,
+          ]
+        : []),
+      ...dynamicJsOrder
+        .map((js) => manifest[js])
+        .filter(Boolean)
+        .map((item) => (
+          <script key={item} src={item} type={isVite ? "module" : "text/javascript"} />
+        )),
+    ];
+    const staticList = {
+      injectCss,
+      injectScript,
+    };
 
-		const isCsr = !!(mode === 'csr' || ctx.request.query?.csr)
-		const Component = isCsr ? React.Fragment : component.name === 'dynamicComponent' ? (await (component as DynamicFC)()).default : (component as StaticFC)
+    const isCsr = !!(mode === "csr" || ctx.request.query?.csr);
+    const Component = isCsr
+      ? React.Fragment
+      : component.name === "dynamicComponent"
+        ? (await (component as DynamicFC)()).default
+        : (component as StaticFC);
 
-		if (isCsr) {
-			logGreen(`Current path ${path} use csr render mode`)
-		}
+    if (isCsr) {
+      logGreen(`Current path ${path} use csr render mode`);
+    }
 
-		let [layoutFetchData, fetchData] = [{}, {}]
+    let [layoutFetchData, fetchData] = [{}, {}];
 
-		if (!isCsr) {
-			const currentFetch = fetch ? (await fetch()).default : null
-			const lF = layoutFetch ? layoutFetch({ ctx }) : Promise.resolve({})
-			const CF = currentFetch ? currentFetch({ ctx }) : Promise.resolve({})
-			;[layoutFetchData, fetchData] = parallelFetch ? await Promise.all([lF, CF]) : [await lF, await CF]
-		}
+    if (!isCsr) {
+      const currentFetch = fetch ? (await fetch()).default : null;
+      const lF = layoutFetch ? layoutFetch({ ctx }) : Promise.resolve({});
+      const CF = currentFetch ? currentFetch({ ctx }) : Promise.resolve({});
+      [layoutFetchData, fetchData] = parallelFetch
+        ? await Promise.all([lF, CF])
+        : [await lF, await CF];
+    }
 
-		const combineData = isCsr ? null : Object.assign({}, state ?? {}, layoutFetchData ?? {}, fetchData ?? {})
-		const ssrDevInfo = { manifest: isDev ? manifest : '', rootId }
-		const innerHTML = splitPageInfo({
-			'window.__USE_SSR__': !isCsr,
-			'window.__INITIAL_DATA__': isCsr ? {} : serialize(combineData),
-			'window.__USE_VITE__': isVite,
-			'window.prefix': `"${prefix}"`,
-			'window.clientPrefix': `"${clientPrefix ?? ''}"`,
-			'window.ssrDevInfo': JSON.stringify(ssrDevInfo),
-			'window.hashRouter': Boolean(hashRouter),
-			'window.__VALTIO_DATA__': isCsr ? {} : serialize(useStore())
-		})
-		const injectState = <script dangerouslySetInnerHTML={{ __html: innerHTML }} />
-		// with jsx type error, use createElement here
-		const ele = createElement(
-			StaticRouter,
-			{
-				location: ctx.request.url,
-				basename: prefix === '/' ? undefined : prefix
-			},
-			createElement(AppContext, {
-				context: context as any,
-				initialState: combineData,
-				children: createElement(
-					Layout,
-					{
-						ctx: ctx,
-						config: config,
-						staticList: staticList,
-						injectState: injectState
-					},
-					createElement(Component, null)
-				)
-			})
-		)
-		// for ctx.body will loose asynclocalstorage context, consume stream in advance like vue2/3
-		if (isReact18()) {
-			return stream
-				? (ReactDOMServer as ReactDOMServerType)
-						.renderToPipeableStream(ele, {
-							onAllReady: onReady,
-							onError: onError as any
-						})
-						.pipe(new PassThrough({ highWaterMark: streamHighWaterMark }))
-				: ReactDOMServer.renderToString(ele)
-		} else {
-			return stream ? ReactDOMServer.renderToNodeStream(ele).pipe(new PassThrough({ highWaterMark: streamHighWaterMark })) : ReactDOMServer.renderToString(ele)
-		}
-	}
+    const combineData = isCsr
+      ? null
+      : Object.assign({}, state ?? {}, layoutFetchData ?? {}, fetchData ?? {});
+    const ssrDevInfo = { manifest: isDev ? manifest : "", rootId };
+    const innerHTML = splitPageInfo({
+      "window.__USE_SSR__": !isCsr,
+      "window.__INITIAL_DATA__": isCsr ? {} : serialize(combineData),
+      "window.__USE_VITE__": isVite,
+      "window.prefix": `"${prefix}"`,
+      "window.clientPrefix": `"${clientPrefix ?? ""}"`,
+      "window.ssrDevInfo": JSON.stringify(ssrDevInfo),
+      "window.hashRouter": Boolean(hashRouter),
+      "window.__VALTIO_DATA__": isCsr ? {} : serialize(useStore()),
+    });
+    const injectState = <script dangerouslySetInnerHTML={{ __html: innerHTML }} />;
+    // with jsx type error, use createElement here
+    const ele = createElement(
+      StaticRouter,
+      {
+        location: ctx.request.url,
+        basename: prefix === "/" ? undefined : prefix,
+      },
+      createElement(AppContext, {
+        context: context as any,
+        initialState: combineData,
+        children: createElement(
+          Layout,
+          {
+            ctx: ctx,
+            config: config,
+            staticList: staticList,
+            injectState: injectState,
+          },
+          createElement(Component, null),
+        ),
+      }),
+    );
+    // for ctx.body will loose asynclocalstorage context, consume stream in advance like vue2/3
+    if (isReact18()) {
+      return stream
+        ? (ReactDOMServer as ReactDOMServerType)
+            .renderToPipeableStream(ele, {
+              onAllReady: onReady,
+              onError: onError as any,
+            })
+            .pipe(new PassThrough({ highWaterMark: streamHighWaterMark }))
+        : ReactDOMServer.renderToString(ele);
+    } else {
+      return stream
+        ? ReactDOMServer.renderToNodeStream(ele).pipe(
+            new PassThrough({ highWaterMark: streamHighWaterMark }),
+          )
+        : ReactDOMServer.renderToString(ele);
+    }
+  };
 
-	return await localStorageWrapper.run(
-		{
-			context: context as any,
-			ctx,
-			store: createStore()
-		},
-		fn
-	)
-}
+  return await localStorageWrapper.run(
+    {
+      context: context as any,
+      ctx,
+      store: createStore(),
+    },
+    fn,
+  );
+};
 
-export { serverRender, Routes }
+export { serverRender, Routes };

package/src/index.ts

@@ -1,42 +1,42 @@
-import { resolve } from 'path'
-import { loadConfig, getCwd } from 'ssr-common-utils'
+import { resolve } from "path";
+import { loadConfig, getCwd } from "ssr-common-utils";
 
-const { tool } = loadConfig()
+const { tool } = loadConfig();
 
 export function clientPlugin() {
-	const cwd = getCwd()
-	const webpackPath = resolve(cwd, './node_modules/ssr-webpack')
-	const vitePath = resolve(cwd, './node_modules/ssr-vite')
-	const rspackPath = resolve(cwd, './node_modules/ssr-rspack')
-	return {
-		name: 'plugin-react',
-		start: async () => {
-			if (tool === 'vite') {
-				const { start } = await import(vitePath)
-				await start()
-			} else {
-				if (tool === 'rspack') {
-					const { start } = await import(rspackPath)
-					await start()
-					return
-				}
-				const { start } = await import(webpackPath)
-				await start()
-			}
-		},
-		build: async () => {
-			if (tool === 'vite') {
-				const { build } = await import(vitePath)
-				await build()
-			} else {
-				if (tool === 'rspack') {
-					const { build } = await import(rspackPath)
-					await build()
-					return
-				}
-				const { build } = await import(webpackPath)
-				await build()
-			}
-		}
-	}
+  const cwd = getCwd();
+  const webpackPath = resolve(cwd, "./node_modules/ssr-webpack");
+  const vitePath = resolve(cwd, "./node_modules/ssr-vite");
+  const rspackPath = resolve(cwd, "./node_modules/ssr-rspack");
+  return {
+    name: "plugin-react",
+    start: async () => {
+      if (tool === "vite") {
+        const { start } = await import(vitePath);
+        await start();
+      } else {
+        if (tool === "rspack") {
+          const { start } = await import(rspackPath);
+          await start();
+          return;
+        }
+        const { start } = await import(webpackPath);
+        await start();
+      }
+    },
+    build: async () => {
+      if (tool === "vite") {
+        const { build } = await import(vitePath);
+        await build();
+      } else {
+        if (tool === "rspack") {
+          const { build } = await import(rspackPath);
+          await build();
+          return;
+        }
+        const { build } = await import(webpackPath);
+        await build();
+      }
+    },
+  };
 }

package/tsconfig.cjs.json

@@ -3,7 +3,5 @@
   "compilerOptions": {
     "outDir": "./cjs"
   },
-  "include": [
-    "src"
-  ]
-}
+  "include": ["src"]
+}

package/tsconfig.esm.json

@@ -3,7 +3,5 @@
   "compilerOptions": {
     "outDir": "./esm"
   },
-  "include": [
-    "src"
-  ]
-}
+  "include": ["src"]
+}