feat: store initialStates

examples/with-store/package.json

@@ -14,6 +14,7 @@
   "devDependencies": {
     "@ice/plugin-store": "workspace:*",
     "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0"
+    "@types/react-dom": "^18.0.0",
+    "tslib": "^2.4.0"
   }
 }

examples/with-store/src/app.tsx

@@ -1,3 +1,23 @@
 import { defineAppConfig } from 'ice';
+import { defineStoreConfig } from '@ice/plugin-store/esm/types';
+
+export const store = defineStoreConfig(async (appData) => {
+  // fetch Data
+  return {
+    initialStates: {
+      ...appData,
+    },
+  };
+});
+
+export const getAppData: GetAppData = () => {
+  return new Promise((resolve) => {
+    resolve({
+      user: {
+        name: 'icejs',
+      },
+    });
+  });
+};
 
 export default defineAppConfig({});

examples/with-store/src/models/user.ts

@@ -2,6 +2,6 @@ import { createModel } from 'ice';
 
 export default createModel({
   state: {
-    name: 'ICE 3',
+    name: '',
   },
 });

packages/plugin-store/README.md

@@ -0,0 +1,19 @@
+# @ice/plugin-store
+
+A plugin of state management base on Redux and React Redux used in framework `ICE`.
+
+## Usage
+
+```ts
+import { defineConfig } from '@ice/app';
+import store from '@ice/plugin-store';
+export default defineConfig({
+  plugins: [
+    store(),
+  ],
+});
+```
+
+## Options
+
+- disableResetPageState: 默认值是 `false`。开启后，切换页面再次进入原页面后不会重新初始化页面状态

packages/plugin-store/package.json

@@ -19,6 +19,16 @@
       "types": "./esm/api.d.ts",
       "import": "./esm/api.js",
       "default": "./esm/api.js"
+    },
+    "./types": {
+      "types": "./esm/types.d.ts",
+      "import": "./esm/types.js",
+      "default": "./esm/types.js"
+    },
+    "./esm/types": {
+      "types": "./esm/types.d.ts",
+      "import": "./esm/types.js",
+      "default": "./esm/types.js"
     }
   },
   "main": "./esm/index.js",
@@ -28,12 +38,14 @@
     "!esm/**/*.map"
   ],
   "dependencies": {
-    "@ice/store": "^2.0.1",
+    "@ice/store": "^2.0.3",
     "fast-glob": "^3.2.11",
     "micromatch": "^4.0.5"
   },
   "devDependencies": {
     "@ice/types": "^1.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/micromatch": "^4.0.2",

packages/plugin-store/src/_store.ts

@@ -1,3 +1,6 @@
+/**
+ * This file which is imported by the runtime.tsx, is to avoid TS error.
+ */
 import type { IcestoreDispatch, IcestoreRootState } from '@ice/store';
 import { createStore } from '@ice/store';
 

packages/plugin-store/src/runtime.tsx

@@ -1,15 +1,19 @@
 import * as React from 'react';
 import type { RuntimePlugin, AppProvider, RouteWrapper } from '@ice/types';
 import { PAGE_STORE_INITIAL_STATES, PAGE_STORE_PROVIDER } from './constants.js';
+import type { StoreConfig } from './types.js';
 import appStore from '$store';
 
-const runtime: RuntimePlugin = async ({ addWrapper, addProvider, useAppContext }) => {
+const runtime: RuntimePlugin = async ({ appContext, addWrapper, addProvider, useAppContext }) => {
+  const { appExport, appData } = appContext;
+  const storeConfig: StoreConfig = (typeof appExport.store === 'function'
+    ? (await appExport.store(appData)) : appExport.store) || {};
+  const { initialStates } = storeConfig;
   if (appStore && Object.prototype.hasOwnProperty.call(appStore, 'Provider')) {
     // Add app store Provider
     const StoreProvider: AppProvider = ({ children }) => {
       return (
-        // TODO: support initialStates: https://github.com/ice-lab/ice-next/issues/395#issuecomment-1210552931
-        <appStore.Provider>
+        <appStore.Provider initialStates={initialStates}>
           {children}
         </appStore.Provider>
       );

packages/plugin-store/src/types.ts

@@ -0,0 +1,13 @@
+export interface StoreConfig {
+  initialStates: Record<string, any>;
+}
+
+type Store = ((data?: any) => Promise<StoreConfig>) | StoreConfig;
+
+function defineStoreConfig(fn: Store) {
+  return fn;
+}
+
+export {
+  defineStoreConfig,
+};

tests/integration/with-store.test.ts

@@ -15,7 +15,7 @@ describe(`build ${example}`, () => {
     page = res.page;
     browser = res.browser;
     await page.waitForFunction('document.getElementsByTagName(\'button\').length > 0');
-    expect(await page.$$text('#username')).toStrictEqual(['name: ICE 3']);
+    expect(await page.$$text('#username')).toStrictEqual(['name: icejs']);
     expect(await page.$$text('#count')).toStrictEqual(['0']);
   }, 120000);