start working on #104

CHANGELOG.md

@@ -21,7 +21,7 @@
         -   `url-loader` -> _2.0.0_
     -   minor
         -   `mini-css-extract-plugin` -> _0.7.0_
-        -   `react-hot-loader` -> _4.9.0_
+        -   `react-hot-loader` -> _4.11.0_
         -   `webpack` -> _4.33.0_
         -   `webpack-dev-server` -> _3.7.1_
     -   patch

packages/koot-webpack/factory-config/common.js

@@ -67,7 +67,8 @@ const factory = async ({
 const plugins = async (
     env,
     stage,
-    defines = {} /*, remainingKootBuildConfig = {}*/
+    defines = {},
+    remainingKootBuildConfig = {}
 ) => {
     const _defaultDefines = {};
     Object.keys(defaultDefines).forEach(key => {
@@ -107,6 +108,7 @@ const plugins = async (
         // }
     }
 
+    // 打入环境变量
     const envsToDefine = [
         'KOOT_VERSION',
         'KOOT_PROJECT_NAME',
@@ -132,6 +134,12 @@ const plugins = async (
     if (process.env.KOOT_CLIENT_BUNDLE_SUBFOLDER) {
         envsToDefine.push('KOOT_CLIENT_BUNDLE_SUBFOLDER');
     }
+    if (typeof remainingKootBuildConfig.sessionStore !== 'object') {
+        process.env.KOOT_SESSION_STORE = JSON.stringify(
+            remainingKootBuildConfig.sessionStore
+        );
+        envsToDefine.push('KOOT_SESSION_STORE');
+    }
 
     JSON.parse(process.env.KOOT_CUSTOM_ENV_KEYS).forEach(key => {
         if (typeof process.env[key] !== 'undefined') envsToDefine.push(key);

packages/koot/React/client-session-store.js

@@ -0,0 +1,74 @@
+import { store as Store } from '../';
+
+const sessionStorageKey = '__KOOT_SESSION_STORE__';
+const configSessionStore = JSON.parse(process.env.KOOT_SESSION_STORE);
+
+/** @type {String[]} 这些项目不予同步 */
+const itemsBlacklist = ['localeId', 'realtimeLocation', 'routing', 'server'];
+
+/** @type {Boolean} 当前是否可以/允许使用 sessionStore */
+const able = (() => {
+    if (__SERVER__) return false;
+    if (!window.sessionStorage) return false;
+    if (!configSessionStore) return false;
+
+    if (configSessionStore === true) return true;
+    if (configSessionStore === 'all') return true;
+
+    return Boolean(
+        typeof configSessionStore === 'object' &&
+            !Array.isArray(configSessionStore)
+    );
+})();
+
+/**
+ * 保存当前 state 到 sessionStorage
+ * @void
+ */
+export const save = () => {
+    if (!able) return;
+
+    /** @type {Object} 排除掉黑名单内的项目后的 state 对象 */
+    const state = itemsBlacklist.reduce((state, item) => {
+        const { [item]: _, ...rest } = state;
+        return rest;
+    }, Store.getState());
+
+    sessionStorage.setItem(
+        sessionStorageKey,
+        configSessionStore === true || configSessionStore === 'all'
+            ? JSON.stringify(state)
+            : (state => {
+                  const result = {};
+                  console.log({ configSessionStore, state, result });
+                  return JSON.stringify(result);
+              })(state)
+    );
+
+    return;
+};
+
+/**
+ * 向 window.onunload 添加事件：保存 state
+ * @void
+ */
+export const addEventHandlerOnPageUnload = () => {
+    if (!able) return;
+    window.addEventListener('unload', save);
+    return;
+};
+
+/**
+ * 从 sessionStorage 中读取 state
+ * @returns {Object} 存储的 state
+ */
+export const load = () => {
+    if (!able) return {};
+
+    if (configSessionStore === true || configSessionStore === 'all')
+        return JSON.parse(sessionStorage.getItem(sessionStorageKey) || '{}');
+
+    const result = {};
+
+    return result;
+};

packages/koot/React/redux.js

@@ -18,6 +18,7 @@ import {
 import isI18nEnabled from '../i18n/is-enabled';
 // import history from "__KOOT_CLIENT_REQUIRE_HISTORY__"
 import history from './history';
+import { load as loadSessionStore } from './client-session-store';
 // const getHistory = () => {
 //     if (__SPA__) {
 //         return require('react-router/lib/hashHistory')
@@ -59,7 +60,10 @@ if (isI18nEnabled()) {
  * @type {Object}
  */
 export const initialState = (() => {
-    if (__CLIENT__) return window.__REDUX_STATE__;
+    if (__CLIENT__) {
+        console.log('sessionStore', loadSessionStore());
+        return window.__REDUX_STATE__;
+    }
     if (__SERVER__) return {};
 })();