fix: optimize react scene use context code

@types/context/index.d.ts

@@ -1,24 +1,11 @@
-declare module '_build/create-context' {
-  import type { Context, Dispatch } from 'react'
-  interface IContext<T = any> {
-    state?: T
-    dispatch?: Dispatch<Action>
-  }
-  interface Action {
-    type: string
-    payload: object
-  }
-  const STORE_CONTEXT: Context<IContext>
-}
 
 declare module 'ssr-deepclone' {
   const deepClone: (obj: any) => any
 }
 
 declare module '_build/ssr-declare-routes' { }
 declare module '_build/ssr-manual-routes' { }
-declare module '_build/staticConfig' {}
+declare module '_build/staticConfig' { }
 declare module 'koa2-connect' {
   export default (params: any): any => { }
 }
-

packages/cli/src/cli.ts

@@ -21,7 +21,7 @@ const spinner = {
 }
 
 const startOrBuild = async (argv: Argv, type: 'start' | 'build') => {
-  const { copyReactContext, judgeFramework, judgeServerFramework, logGreen } = await import('ssr-common-utils')
+  const { judgeFramework, judgeServerFramework, logGreen } = await import('ssr-common-utils')
   const framework = judgeFramework()
   const serverFramework = judgeServerFramework()
   if (argv.ssg) {
@@ -30,9 +30,6 @@ const startOrBuild = async (argv: Argv, type: 'start' | 'build') => {
   if (!argv.api) {
     const { clientPlugin } = await import(framework)
     const client: IPlugin['clientPlugin'] = clientPlugin()
-    if (client?.name === 'plugin-react') {
-      await copyReactContext()
-    }
     await client?.[type]?.(argv)
   }
   if (!argv.web) {

packages/hoc-react/package.json

@@ -15,7 +15,6 @@
   "sideEffects": false,
   "scripts": {
     "build": "concurrently \"tsc -p ./tsconfig.cjs.json \" \" tsc -p ./tsconfig.esm.json\"",
-
     "watch": "concurrently \"tsc -w -p ./tsconfig.cjs.json \" \"tsc -w -p ./tsconfig.esm.json \""
   },
   "repository": {
@@ -39,7 +38,8 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.0",
     "react-router": "^5.2.1",
-    "react-router-dom": "^5.1.2"
+    "react-router-dom": "^5.1.2",
+    "ssr-common-utils": "^6.0.0"
   },
   "devDependencies": {
     "@types/react": "^17.0.0",

packages/hoc-react/src/wrapComponent.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
 import 'react-router'
-import { useContext, useEffect, useState } from 'react'
+import { useContext, useEffect, useState, createElement } from 'react'
 import { withRouter, RouteComponentProps } from 'react-router-dom'
 import { DynamicFC, StaticFC, Action, ReactESMFetch, ReactFetch } from 'ssr-types'
-import { STORE_CONTEXT } from '_build/create-context'
+import { useStoreContext } from 'ssr-common-utils'
 
 let hasRender = false
 
@@ -30,10 +30,10 @@ const fetchAndDispatch = async ({ fetch, layoutFetch }: fetchType, dispatch: Rea
     payload: combineData
   })
 }
-function wrapComponent (WrappedComponent: DynamicFC|StaticFC) {
-  return withRouter((props) => {
+function wrapComponent(WrappedComponent: DynamicFC | StaticFC) {
+  return withRouter((props: any) => {
     const [ready, setReady] = useState(WrappedComponent.name !== 'dynamicComponent')
-    const { state, dispatch } = useContext(STORE_CONTEXT)
+    const { state, dispatch } = useContext(useStoreContext() as any)
 
     useEffect(() => {
       didMount()
@@ -55,7 +55,7 @@ function wrapComponent (WrappedComponent: DynamicFC|StaticFC) {
       hasRender = true
     }
     return (
-      ready ? <WrappedComponent {...props}></WrappedComponent> : null
+      ready ? createElement(WrappedComponent, { ...props }) : null
     )
   })
 }

packages/hoc-react18/package.json

@@ -15,7 +15,6 @@
   "sideEffects": false,
   "scripts": {
     "build": "concurrently \"tsc -p ./tsconfig.cjs.json \" \" tsc -p ./tsconfig.esm.json\"",
-
     "watch": "concurrently \"tsc -w -p ./tsconfig.cjs.json \" \"tsc -w -p ./tsconfig.esm.json \""
   },
   "repository": {
@@ -39,7 +38,8 @@
     "react": "^18.0.1",
     "react-dom": "^18.0.0",
     "react-router": "^5.2.1",
-    "react-router-dom": "^5.1.2"
+    "react-router-dom": "^5.1.2",
+    "ssr-common-utils": "^6.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

packages/hoc-react18/src/wrapComponent.tsx

@@ -3,7 +3,7 @@ import 'react-router'
 import { createElement, useContext, useEffect, useState } from 'react'
 import { withRouter, RouteComponentProps } from 'react-router-dom'
 import { DynamicFC, StaticFC, Action, ReactESMFetch, ReactFetch } from 'ssr-types'
-import { STORE_CONTEXT } from '_build/create-context'
+import { useStoreContext } from 'ssr-common-utils'
 
 let hasRender = false
 
@@ -30,10 +30,10 @@ const fetchAndDispatch = async ({ fetch, layoutFetch }: fetchType, dispatch: Rea
     payload: combineData
   })
 }
-function wrapComponent (WrappedComponent: DynamicFC|StaticFC) {
+function wrapComponent(WrappedComponent: DynamicFC | StaticFC) {
   return withRouter((props: any) => {
     const [ready, setReady] = useState(WrappedComponent.name !== 'dynamicComponent')
-    const { state, dispatch } = useContext(STORE_CONTEXT as any)
+    const { state, dispatch } = useContext(useStoreContext() as any)
 
     useEffect(() => {
       didMount()

packages/plugin-react/src/entry/client-entry.tsx

@@ -5,26 +5,24 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom'
 import { preloadComponent, isMicro, setStoreContext, setStore } from 'ssr-common-utils'
 import { wrapComponent } from 'ssr-hoc-react'
 import { LayoutProps } from 'ssr-types'
-import { STORE_CONTEXT as Context } from '_build/create-context'
-import { Routes } from './create-router'
-import { createStore } from './create-store'
+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) {
+  const IApp = App ?? function(props: LayoutProps) {
     return props.children!
   }
-  setStoreContext(Context)
+  setStoreContext(ssrCreateContext() as any)
   const store = createStore(window.__VALTIO_DATA__)
   setStore(store ?? {})
   const baseName = isMicro() ? window.clientPrefix : window.prefix
   const routes = await preloadComponent(FeRoutes, baseName)
   ReactDOM[window.__USE_SSR__ ? 'hydrate' : 'render'](
     createElement(BrowserRouter, {
       basename: baseName
-    }, createElement(AppContext as any, {
+    }, createElement(AppContext, {
       children: createElement(Switch, null,
         createElement(IApp as any, null, createElement(Switch, null,
           routes.map(item => {

packages/plugin-react/src/entry/context.tsx

@@ -1,19 +1,17 @@
 import { useReducer, createElement } from 'react'
 import { IProps, Action, IWindow, ReactRoutesType } from 'ssr-types'
-import { STORE_CONTEXT as Context } from '_build/create-context'
-import { Routes } from './create-router'
+import { ssrCreateContext, Routes } from './create'
 
 const { reducer, state } = Routes as ReactRoutesType
 
 const userState = state ?? {}
-const userReducer = reducer ?? function () {}
+const userReducer = reducer ?? function() { }
 
 const isDev = process.env.NODE_ENV !== 'production'
 
-// 客户端的 context  只需要创建一次，在页面整个生命周期内共享
 declare const window: IWindow
 
-function defaultReducer (state: any, action: Action) {
+function defaultReducer(state: any, action: Action) {
   switch (action.type) {
     case 'updateContext':
       if (isDev) {
@@ -24,17 +22,19 @@ function defaultReducer (state: any, action: Action) {
   }
 }
 
-const initialState = Object.assign({}, userState ?? {}, window.__INITIAL_DATA__)
 
-function combineReducer (state: any, action: any) {
+function combineReducer(state: any, action: any) {
   return defaultReducer(state, action) || userReducer(state, action)
 }
-export function AppContext (props: IProps) {
+
+export function AppContext(props: IProps) {
+  const initialState = Object.assign({}, userState ?? {}, __isBrowser__ ? window?.__INITIAL_DATA__ : props.initialState)
+  const Context = ssrCreateContext()
   const [state, dispatch] = useReducer(combineReducer, initialState)
   return createElement(Context.Provider, {
     value: {
       state,
       dispatch
     }
-  }, props.children)
+  }, props.children as any)
 }

packages/plugin-react/src/entry/create.ts

@@ -0,0 +1,37 @@
+import { createContext } from 'react'
+import type { Context } from 'react'
+import type { IContext } from 'ssr-types'
+import { proxy } from 'valtio'
+import { deepClone } from 'ssr-deepclone'
+import { combineRoutes } from 'ssr-common-utils'
+import * as declareRoutes from '_build/ssr-declare-routes'
+import * as ManualRoutes from '_build/ssr-manual-routes'
+import { ReactRoutesType } from 'ssr-types'
+
+export const Routes = combineRoutes(declareRoutes, ManualRoutes) as ReactRoutesType
+
+export const ssrCreateContext = () => {
+  let STORE_CONTEXT: Context<IContext>
+
+  if (__isBrowser__) {
+    STORE_CONTEXT = window.STORE_CONTEXT || createContext<IContext>({
+      state: {}
+    })
+    window.STORE_CONTEXT = STORE_CONTEXT
+    return STORE_CONTEXT
+  } else {
+    STORE_CONTEXT = createContext<IContext>({
+      state: {}
+    })
+  }
+  return STORE_CONTEXT
+}
+
+export function createStore (initialData?: any) {
+  const { store } = Routes
+  const storeInstance = initialData ? store : deepClone(store)
+  for (const key in storeInstance) {
+    storeInstance[key] = initialData ? proxy(initialData[key]) : proxy(storeInstance[key])
+  }
+  return storeInstance
+}

packages/plugin-react/src/entry/server-entry.tsx

@@ -6,13 +6,13 @@ import { renderToString, renderToNodeStream } from 'react-dom/server'
 import { findRoute, getManifest, logGreen, normalizePath, getAsyncCssChunk, getAsyncJsChunk, splitPageInfo, reactRefreshFragment, localStorageWrapper, checkRoute, useStore } from 'ssr-common-utils'
 import { ISSRContext, IConfig, ReactESMPreloadFeRouteItem, DynamicFC, StaticFC } from 'ssr-types'
 import { serialize } from 'ssr-serialize-javascript'
-import { STORE_CONTEXT as Context } from '_build/create-context'
-import { Routes } from './create-router'
-import { createStore } from './create-store'
+import { AppContext } from './context'
+import { Routes, ssrCreateContext, createStore } from './create'
 
 const { FeRoutes, layoutFetch, state, Layout } = Routes
 
 const serverRender = async (ctx: ISSRContext, config: IConfig) => {
+  const context = ssrCreateContext()
   const { mode, parallelFetch, prefix, isVite, isDev, clientPrefix, stream, rootId, hashRouter } = config
   const rawPath = ctx.request.path ?? ctx.request.url
   const path = normalizePath(rawPath, prefix)
@@ -80,22 +80,21 @@ const serverRender = async (ctx: ISSRContext, config: IConfig) => {
     const ele = 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))))
+    }, createElement(AppContext, {
+      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
     return stream ? renderToNodeStream(ele).pipe(new PassThrough()) : renderToString(ele)
   }
 
   return await localStorageWrapper.run({
-    context: Context,
+    context: context as any,
     ctx,
     store: createStore()
   }, fn)

packages/plugin-react18/src/entry/client-entry.tsx

@@ -5,18 +5,16 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom'
 import { preloadComponent, isMicro, setStoreContext, setStore } from 'ssr-common-utils'
 import { wrapComponent } from 'ssr-hoc-react18'
 import { LayoutProps } from 'ssr-types'
-import { STORE_CONTEXT as Context } from '_build/create-context'
-import { Routes } from './create-router'
-import { createStore } from './create-store'
+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) {
+  const IApp = App ?? function(props: LayoutProps) {
     return props.children!
   }
-  setStoreContext(Context)
+  setStoreContext(ssrCreateContext() as any)
   const store = createStore(window.__VALTIO_DATA__)
   setStore(store ?? {})
   const baseName = isMicro() ? window.clientPrefix : window.prefix