ssr-plugin-react 6.2.41 → 6.2.44

package/src/config/base.ts

@@ -138,6 +138,7 @@ const getBaseConfig = (chain: WebpackChain, isServer: boolean) => {
     color: isServer ? '#f173ac' : '#45b97c'
   }))
   chain.plugin('ssrDefine').use(webpack.DefinePlugin, [{
+    ...process.env,
     __isBrowser__: !isServer,
     ...(isServer ? define?.server : define?.client),
     ...define?.base

package/src/entry/client-entry.tsx

@@ -1,9 +1,11 @@
-import * as React from 'react'
+import { createElement } from 'react'
 import * as ReactDOM from 'react-dom'
 import { BrowserRouter, Route, Switch } from 'react-router-dom'
 import { preloadComponent, isMicro } from 'ssr-client-utils'
+import { setStoreContext } from 'ssr-common-utils'
 import { wrapComponent } from 'ssr-hoc-react'
 import { LayoutProps, ReactRoutesType } from 'ssr-types-react'
+import { STORE_CONTEXT as Context } from '_build/create-context'
 import { Routes } from './create-router'
 import { AppContext } from './context'
 
@@ -13,32 +15,31 @@ const clientRender = async (): Promise<void> => {
   const IApp = App ?? function (props: LayoutProps) {
     return props.children!
   }
+  setStoreContext(Context)
   // 客户端渲染||hydrate
   const baseName = isMicro() ? window.clientPrefix : window.prefix
   const routes = await preloadComponent(FeRoutes, baseName)
   ReactDOM[window.__USE_SSR__ ? 'hydrate' : 'render'](
-    <BrowserRouter basename={baseName}>
-      <AppContext>
-        <Switch>
-          <IApp>
-            <Switch>
-              {
-                // 使用高阶组件wrapComponent使得csr首次进入页面以及csr/ssr切换路由时调用getInitialProps
-                routes.map(item => {
-                  const { fetch, component, path } = item
-                  component.fetch = fetch
-                  component.layoutFetch = layoutFetch
-                  const WrappedComponent = wrapComponent(component)
-                  return (
-                    <Route exact={true} key={path} path={path} render={() => <WrappedComponent key={location.pathname}/>}/>
-                  )
-                })
-              }
-            </Switch>
-          </IApp>
-        </Switch>
-      </AppContext>
-    </BrowserRouter>
+    createElement(BrowserRouter, {
+      basename: baseName
+    }, createElement(AppContext as any, {
+      children: createElement(Switch, null,
+        createElement(IApp as any, null, createElement(Switch, null, // 使用高阶组件wrapComponent使得csr首次进入页面以及csr/ssr切换路由时调用getInitialProps
+          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: () => createElement(WrappedComponent, {
+                key: location.pathname
+              })
+            })
+          }))))
+    }))
     , document.getElementById('app'))
 
 }

package/src/entry/context.tsx

@@ -1,9 +1,6 @@
-import * as React from 'react'
-import { useReducer } from 'react'
+import { useReducer, createElement } from 'react'
 import { IProps, Action, IWindow, ReactRoutesType } from 'ssr-types-react'
-
-// @ts-expect-error
-import { STORE_CONTEXT } from '_build/create-context'
+import { STORE_CONTEXT as Context } from '_build/create-context'
 import { Routes } from './create-router'
 
 const { reducer, state } = Routes as ReactRoutesType
@@ -34,9 +31,10 @@ function combineReducer (state: any, action: any) {
 }
 export function AppContext (props: IProps) {
   const [state, dispatch] = useReducer(combineReducer, initialState)
-  return (
-    <STORE_CONTEXT.Provider value={{ state, dispatch }}>
-      {props.children}
-    </STORE_CONTEXT.Provider>
-  )
+  return createElement(Context.Provider, {
+    value: {
+      state,
+      dispatch
+    }
+  }, props.children)
 }

package/src/entry/create-context.ts

@@ -1,17 +1,15 @@
-// @ts-nocheck
-// The file is provisional，don't depend on it
+// The file is provisional，don't modify it
 
-import React, { Context } from 'react'
+import { Context, createContext } from 'react'
 import { IContext } from 'ssr-types-react'
-
 let STORE_CONTEXT: Context<IContext>
 if (__isBrowser__) {
-  STORE_CONTEXT = window.STORE_CONTEXT || React.createContext<IContext>({
+  STORE_CONTEXT = window.STORE_CONTEXT || createContext<IContext>({
     state: {}
   })
   window.STORE_CONTEXT = STORE_CONTEXT
 } else {
-  STORE_CONTEXT = React.createContext<IContext>({
+  STORE_CONTEXT = createContext<IContext>({
     state: {}
   })
 }

package/src/entry/server-entry.tsx

@@ -1,18 +1,20 @@
 import * as React from 'react'
+import { createElement } from 'react'
 import { StaticRouter } from 'react-router-dom'
 import { findRoute, getManifest, logGreen, normalizePath, getAsyncCssChunk, getAsyncJsChunk, reactRefreshFragment } from 'ssr-server-utils'
 import { ISSRContext, IConfig, ReactRoutesType, ReactESMPreloadFeRouteItem, DynamicFC, StaticFC } from 'ssr-types-react'
+import { setStoreContext } from 'ssr-common-utils'
 import { serialize } from 'ssr-serialize-javascript'
-// @ts-expect-error
 import { STORE_CONTEXT as Context } from '_build/create-context'
 import { Routes } from './create-router'
 
 const { FeRoutes, layoutFetch, state, Layout } = Routes as ReactRoutesType
 
-const serverRender = async (ctx: ISSRContext, config: IConfig): Promise<React.ReactElement> => {
+const serverRender = async (ctx: ISSRContext, config: IConfig) => {
   const { mode, parallelFetch, prefix, isVite, isDev, clientPrefix } = config
   const path = normalizePath(ctx.request.path, prefix)
   const routeItem = findRoute<ReactESMPreloadFeRouteItem>(FeRoutes, path)
+  setStoreContext(Context)
 
   if (!routeItem) {
     throw new Error(`
@@ -23,7 +25,7 @@ const serverRender = async (ctx: ISSRContext, config: IConfig): Promise<React.Re
 
   const { fetch, webpackChunkName, component } = routeItem
   const dynamicCssOrder = await getAsyncCssChunk(ctx, webpackChunkName, config)
-  const dynamicJsOrder = await getAsyncJsChunk(ctx, config)
+  const dynamicJsOrder = await getAsyncJsChunk(ctx, webpackChunkName, config)
   const manifest = await getManifest(config)
 
   const injectCss = ((isVite && isDev) ? [
@@ -58,7 +60,6 @@ const serverRender = async (ctx: ISSRContext, config: IConfig): Promise<React.Re
   let fetchData = {}
   if (!isCsr) {
     const currentFetch = fetch ? (await fetch()).default : null
-
     // csr 下不需要服务端获取数据
     if (parallelFetch) {
       [layoutFetchData, fetchData] = await Promise.all([
@@ -71,18 +72,23 @@ const serverRender = async (ctx: ISSRContext, config: IConfig): Promise<React.Re
     }
   }
   const combineData = isCsr ? null : Object.assign(state ?? {}, layoutFetchData ?? {}, fetchData ?? {})
-  const injectState = isCsr ? <script dangerouslySetInnerHTML={{ __html: `window.prefix="${prefix}"` }} /> : <script dangerouslySetInnerHTML={{
+  const injectState = isCsr ? <script dangerouslySetInnerHTML={{ __html: `window.prefix="${prefix}";${clientPrefix ? `window.clientPrefix="${clientPrefix}";` : ''}` }} /> : <script dangerouslySetInnerHTML={{
     __html: `window.__USE_SSR__=true; window.__INITIAL_DATA__ =${serialize(combineData)}; window.prefix="${prefix}";${clientPrefix ? `window.clientPrefix="${clientPrefix}";` : ''}`
   }} />
-  return (
-    <StaticRouter location={ctx.request.url} basename={prefix === '/' ? undefined : prefix}>
-      <Context.Provider value={{ state: combineData }}>
-        <Layout ctx={ctx} config={config} staticList={staticList} injectState={injectState}>
-          <Component />
-        </Layout>
-      </Context.Provider>
-    </StaticRouter>
-  )
+  // with jsx type error, use createElement here
+  return createElement(StaticRouter, {
+    location: ctx.request.url,
+    basename: prefix === '/' ? undefined : prefix
+  }, createElement(Context.Provider, {
+    value: {
+      state: combineData
+    }
+  }, createElement(Layout, {
+    ctx: ctx,
+    config: config,
+    staticList: staticList,
+    injectState: injectState
+  }, createElement(Component, null))))
 }
 
 export {