fix: valtio single instance error

packages/plugin-react/package.json

@@ -65,6 +65,7 @@
  "react-router-dom": "^5.1.2",
  "semver": "^7.3.8",
  "ssr-common-utils": "^6.0.0",
+ "ssr-deepclone": "^1.0.0",
  "ssr-hoc-react": "^6.2.7",
  "ssr-mini-css-extract-plugin": "^1.0.0",
  "ssr-serialize-javascript": "^6.0.0",

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

@@ -1,25 +1,23 @@
 import { createElement } from 'react'
 import * as ReactDOM from 'react-dom'
-import { proxy } from 'valtio'
 import 'react-router' // for vite prebundle list
 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 { AppContext } from './context'
 
-const { FeRoutes, layoutFetch, App, store } = Routes
+const { FeRoutes, layoutFetch, App } = Routes
 
 const clientRender = async (): Promise<void> => {
  const IApp = App ?? function (props: LayoutProps) {
  return props.children!
  }
  setStoreContext(Context)
- for (const key in store) {
- store[key] = proxy(window.__VALTIO_DATA__?.[key])
- }
+ const store = createStore(window.__VALTIO_DATA__)
  setStore(store ?? {})
  const baseName = isMicro() ? window.clientPrefix : window.prefix
  const routes = await preloadComponent(FeRoutes, baseName)

packages/plugin-react/src/entry/create-store.tsx

@@ -0,0 +1,13 @@
+import { proxy } from 'valtio'
+import { deepClone } from 'ssr-deepclone'
+import { Routes } from './create-router'
+
+const { store } = Routes
+
+export function createStore (initialData?: any) {
+ 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

@@ -8,8 +8,9 @@ import { ISSRContext, IConfig, ReactESMPreloadFeRouteItem, DynamicFC, StaticFC }
 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'
 
-const { FeRoutes, layoutFetch, state, Layout, store } = Routes
+const { FeRoutes, layoutFetch, state, Layout } = Routes
 
 const serverRender = async (ctx: ISSRContext, config: IConfig) => {
  const { mode, parallelFetch, prefix, isVite, isDev, clientPrefix, stream, rootId, hashRouter } = config
@@ -96,7 +97,7 @@ const serverRender = async (ctx: ISSRContext, config: IConfig) => {
  return await localStorageWrapper.run({
  context: Context,
  ctx,
- store
+ store: createStore()
  }, fn)
 }
 

packages/plugin-react18/package.json

@@ -66,6 +66,7 @@
  "react-router-dom": "^5.1.2",
  "semver": "^7.3.8",
  "ssr-common-utils": "^6.0.0",
+ "ssr-deepclone": "^1.0.0",
  "ssr-hoc-react18": "^6.2.7",
  "ssr-mini-css-extract-plugin": "^1.0.0",
  "ssr-serialize-javascript": "^6.0.0",

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

@@ -2,24 +2,22 @@ import { createElement } from 'react'
 import { createRoot, hydrateRoot } from 'react-dom/client'
 import 'react-router' // for vite prebundle list
 import { BrowserRouter, Route, Switch } from 'react-router-dom'
-import { proxy } from 'valtio'
 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 { AppContext } from './context'
 
-const { FeRoutes, layoutFetch, App, store } = Routes
+const { FeRoutes, layoutFetch, App } = Routes
 
 const clientRender = async (): Promise<void> => {
  const IApp = App ?? function (props: LayoutProps) {
  return props.children!
  }
  setStoreContext(Context)
- for (const key in store) {
- store[key] = proxy(window.__VALTIO_DATA__?.[key])
- }
+ const store = createStore(window.__VALTIO_DATA__)
  setStore(store ?? {})
  const baseName = isMicro() ? window.clientPrefix : window.prefix
  const routes = await preloadComponent(FeRoutes, baseName)

packages/plugin-react18/src/entry/create-store.tsx

@@ -0,0 +1,13 @@
+import { proxy } from 'valtio'
+import { deepClone } from 'ssr-deepclone'
+import { Routes } from './create-router'
+
+const { store } = Routes
+
+export function createStore (initialData?: any) {
+ const storeInstance = initialData ? store : deepClone(store)
+ for (const key in storeInstance) {
+ storeInstance[key] = initialData ? proxy(initialData[key]) : proxy(storeInstance[key])
+ }
+ return storeInstance
+}

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

@@ -8,8 +8,9 @@ import { ISSRContext, IConfig, ReactESMPreloadFeRouteItem, DynamicFC, StaticFC }
 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'
 
-const { FeRoutes, layoutFetch, state, Layout, store } = Routes
+const { FeRoutes, layoutFetch, state, Layout } = Routes
 
 const serverRender = async (ctx: ISSRContext, config: IConfig) => {
  const { mode, parallelFetch, prefix, isVite, isDev, clientPrefix, stream, onError, onReady, rootId, hashRouter } = config
@@ -94,7 +95,7 @@ const serverRender = async (ctx: ISSRContext, config: IConfig) => {
  return await localStorageWrapper.run({
  context: Context,
  ctx,
- store
+ store: createStore()
  }, fn)
 }