@pixel-starry/hook-store 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Bytedance Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,90 @@
+# HookStore
+HookStore 是一个轻量级的 React 状态管理 hooks 库，支持精细化更新。
+
+## store 定义
+现在我们来编写一个计数器 store
+
+```typescript
+import { BaseStore } from '@pixel-starry/hook-store';
+
+class CountStore extends BaseStore {
+  count = 0;
+  count2 = 0;
+
+  add(num: number) {
+    this.setState({ count: num });
+  }
+
+  reset() {
+    this.setState({ count: 0 });
+  }
+
+  times(num: number) {
+    this.setState({ count: this.count * num  });
+  }
+}
+
+```
+
+## 使用 store
+
+```typescript
+import { StoreProvider, useStore } from '@pixel-starry/hook-store';
+const Child = () => {
+  const store = useStore(CountStore);
+  return (
+    <div>
+      <div>{store.count}</div>
+      <button onClick={() => store.add(1)}>加1</button>
+      <button onClick={() => store.times(2)}>乘2</button>
+      <button onClick={() => store.reset()}>复位</button>
+    </div>
+  );
+};
+
+const Root = () => {
+  return (
+    <StoreProvider store={CountStore}>
+      <Child />
+    </StoreProvider>
+  );
+};
+
+```
+
+## API
+
+* BaseStore
+
+store的基类，提供了 setState 来更新数据
+
+* StoreProvider
+
+Context Provider 组件，需要把当前的 store 传递给 Provider 组件
+
+* withStore
+
+StoreProvider 另一种用法， 用法 withStore(Child, CountStore);
+
+```
+const Root = withStore(Child, CountStore);
+```
+
+* useStore
+
+获取 store 实例，第一个参数是 BaseStore，第二个参数是更新依赖项。
+
+如：
+
+```js
+// 调用 setState 组件就会更新
+const store = useStore(CountStore);
+
+// 调用 setState 组件不会更新
+const store = useStore(CountStore, []);
+
+
+// 调用 setState 后， count值变化组件会更新，否则不会更新
+const store = useStore(CountStore, ['count']);
+
+```

package/dist/deepGet.d.ts

@@ -0,0 +1 @@
+export default function deepGet(obj: any, path: string[] | string): any;

package/dist/index.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+
+type InstanceType<T> = T extends abstract new (...args: any) => infer R ? R : never;
+declare class BaseStore {
+    _update?: () => void;
+    static _current?: BaseStore;
+    static _isBaseStore: boolean;
+    static clear(): void;
+    StoreContext: React.Context<{
+        store: BaseStore;
+        fns: Set<() => void>;
+    }>;
+    setState<K extends keyof this>(state?: {
+        [k in K]: this[k];
+    }): void;
+}
+/**
+ *
+ * @param store 数据源，不追踪其变化，在首次初始化就需要赋值
+ *
+ * @example
+ *
+ * <StoreProvider store={UserStore}></StoreProvider>
+ *
+ * 或者
+ *
+ * const userStore = new UserStore();
+ *
+ * <StoreProvider store={userStore}></StoreProvider>
+ *
+ * @returns
+ */
+declare function StoreProvider<T extends BaseStore | Function>({ store, children, }: {
+    store: T | (() => T);
+    children: React.ReactNode;
+}): React.JSX.Element;
+/**
+ *
+ * @param baseStore 数据源，不追踪其变化，在首次初始化就需要赋值
+ * @example
+ *
+ * useStore(UserStore)
+ *
+ * 或者
+ *
+ * useStore(() => new UserStore())
+ *
+ * 或者
+ *
+ * const userStore = new UserStore();
+ *
+ * useStore(userStore)
+ *
+ * @returns
+ */
+declare function useStore<T extends BaseStore | Function>(baseStore: T | (() => T), deps?: Array<string | string[]>): Exclude<T, Function> | InstanceType<T>;
+type ClassItSelf<T> = new () => T;
+declare function withStore<P, S extends ClassItSelf<BaseStore> | BaseStore | Function>(Cpt: React.FC<P>, store: S): (props: P) => React.JSX.Element;
+
+export { BaseStore, InstanceType, StoreProvider, useStore, withStore };

package/dist/index.js

@@ -0,0 +1,227 @@
+import React, { useState, useContext, useRef, useLayoutEffect } from 'react';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+/**
+ * inlined Object.is polyfill to avoid requiring consumers ship their own
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+ */
+function is(x, y) {
+    // SameValue algorithm
+    if (x === y) { // Steps 1-5, 7-10
+        // Steps 6.b-6.e: +0 != -0
+        // Added the nonzero y check to make Flow happy, but it is redundant
+        return x !== 0 || y !== 0 || 1 / x === 1 / y;
+    }
+    else {
+        // Step 6.a: NaN == NaN
+        return x !== x && y !== y;
+    }
+}
+/**
+ * Performs equality by iterating through keys on an object and returning false
+ * when any key has values which are not strictly equal between the arguments.
+ * Returns true when the values of all keys are strictly equal.
+ */
+function shallowEqual(objA, objB) {
+    if (is(objA, objB)) {
+        return true;
+    }
+    if (typeof objA !== 'object' || objA === null ||
+        typeof objB !== 'object' || objB === null) {
+        return false;
+    }
+    var keysA = Object.keys(objA);
+    var keysB = Object.keys(objB);
+    if (keysA.length !== keysB.length) {
+        return false;
+    }
+    // Test for A's keys different from B.
+    for (var i = 0; i < keysA.length; i++) {
+        if (!hasOwnProperty.call(objB, keysA[i]) ||
+            !is(objA[keysA[i]], objB[keysA[i]])) {
+            return false;
+        }
+    }
+    return true;
+}
+
+function deepGet(obj, path) {
+    if (obj == null) {
+        return void 0;
+    }
+    if (typeof path === "string") {
+        return obj[path];
+    }
+    var length = path.length;
+    for (var i = 0; i < length; i++) {
+        if (obj == null)
+            return void 0;
+        obj = obj[path[i]];
+    }
+    return length ? obj : void 0;
+}
+
+var BaseStore = /** @class */ (function () {
+    function BaseStore() {
+        this.StoreContext = React.createContext({
+            store: this,
+            fns: new Set(),
+        });
+    }
+    // 清空的时机不好确认，目前需要手动清空
+    BaseStore.clear = function () {
+        this._current = undefined;
+    };
+    BaseStore.prototype.setState = function (state) {
+        var _a;
+        if (state) {
+            Object.assign(this, state);
+        }
+        (_a = this._update) === null || _a === void 0 ? void 0 : _a.call(this);
+    };
+    BaseStore._isBaseStore = true;
+    return BaseStore;
+}());
+/**
+ *
+ * @param store 数据源，不追踪其变化，在首次初始化就需要赋值
+ *
+ * @example
+ *
+ * <StoreProvider store={UserStore}></StoreProvider>
+ *
+ * 或者
+ *
+ * const userStore = new UserStore();
+ *
+ * <StoreProvider store={userStore}></StoreProvider>
+ *
+ * @returns
+ */
+function StoreProvider(_a) {
+    var store = _a.store, children = _a.children;
+    // store 只会在初始化时执行一次，后面新生成的store是无效的
+    var finalStore = useState(function () {
+        var _store;
+        if (store instanceof BaseStore) {
+            _store = store;
+        }
+        else if (store._isBaseStore) {
+            _store = new store();
+            _store.constructor._current = _store;
+        }
+        else {
+            _store = store();
+        }
+        return _store;
+    })[0];
+    var value = useState(function () { return ({
+        store: finalStore,
+        fns: new Set(),
+    }); })[0];
+    var StoreContext = finalStore.StoreContext;
+    finalStore._update = function () {
+        value.fns.forEach(function (fn) { return fn(); });
+    };
+    return (React.createElement(StoreContext.Provider, { value: value }, children));
+}
+/**
+ *
+ * @param baseStore 数据源，不追踪其变化，在首次初始化就需要赋值
+ * @example
+ *
+ * useStore(UserStore)
+ *
+ * 或者
+ *
+ * useStore(() => new UserStore())
+ *
+ * 或者
+ *
+ * const userStore = new UserStore();
+ *
+ * useStore(userStore)
+ *
+ * @returns
+ */
+function useStore(baseStore, deps) {
+    // store 只会在初始化时执行一次，后面新生成的store是无效的
+    var tmpStore = useState(function () {
+        var _a;
+        var _store;
+        if (baseStore instanceof BaseStore) {
+            _store = baseStore;
+        }
+        else if (baseStore._isBaseStore) {
+            var BS = baseStore;
+            _store = (_a = BS._current) !== null && _a !== void 0 ? _a : new BS();
+        }
+        else {
+            _store = baseStore();
+        }
+        return _store;
+    })[0];
+    var _a = useContext(tmpStore.StoreContext), store = _a.store, fns = _a.fns;
+    var getDepVals = function () { return deps === null || deps === void 0 ? void 0 : deps.map(function (key) { return deepGet(store, key); }); };
+    var ref = useRef();
+    var _b = useState(getDepVals), state = _b[0], dispatch = _b[1];
+    ref.current = state;
+    useLayoutEffect(function () {
+        var fn = function () {
+            if (deps) {
+                var newVal = getDepVals();
+                var old = ref.current;
+                if (!shallowEqual(newVal, old)) {
+                    dispatch(newVal);
+                }
+            }
+            else {
+                dispatch([]);
+            }
+        };
+        fns.add(fn);
+        return function () {
+            fns.delete(fn);
+        };
+    }, deps !== null && deps !== void 0 ? deps : []);
+    return store;
+}
+function withStore(Cpt, store) {
+    return function (props) {
+        return (React.createElement(StoreProvider, { store: store },
+            React.createElement(Cpt, __assign({}, props))));
+    };
+}
+
+export { BaseStore, StoreProvider, useStore, withStore };

package/dist/shallowEqual.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Performs equality by iterating through keys on an object and returning false
+ * when any key has values which are not strictly equal between the arguments.
+ * Returns true when the values of all keys are strictly equal.
+ */
+export declare function shallowEqual(objA: any, objB: any): boolean;

package/dist/store.d.ts

@@ -0,0 +1,58 @@
+import React from "react";
+export type InstanceType<T> = T extends abstract new (...args: any) => infer R ? R : never;
+export declare class BaseStore {
+    _update?: () => void;
+    static _current?: BaseStore;
+    static _isBaseStore: boolean;
+    static clear(): void;
+    StoreContext: React.Context<{
+        store: BaseStore;
+        fns: Set<() => void>;
+    }>;
+    setState<K extends keyof this>(state?: {
+        [k in K]: this[k];
+    }): void;
+}
+/**
+ *
+ * @param store 数据源，不追踪其变化，在首次初始化就需要赋值
+ *
+ * @example
+ *
+ * <StoreProvider store={UserStore}></StoreProvider>
+ *
+ * 或者
+ *
+ * const userStore = new UserStore();
+ *
+ * <StoreProvider store={userStore}></StoreProvider>
+ *
+ * @returns
+ */
+export declare function StoreProvider<T extends BaseStore | Function>({ store, children, }: {
+    store: T | (() => T);
+    children: React.ReactNode;
+}): React.JSX.Element;
+/**
+ *
+ * @param baseStore 数据源，不追踪其变化，在首次初始化就需要赋值
+ * @example
+ *
+ * useStore(UserStore)
+ *
+ * 或者
+ *
+ * useStore(() => new UserStore())
+ *
+ * 或者
+ *
+ * const userStore = new UserStore();
+ *
+ * useStore(userStore)
+ *
+ * @returns
+ */
+export declare function useStore<T extends BaseStore | Function>(baseStore: T | (() => T), deps?: Array<string | string[]>): Exclude<T, Function> | InstanceType<T>;
+type ClassItSelf<T> = new () => T;
+export declare function withStore<P, S extends ClassItSelf<BaseStore> | BaseStore | Function>(Cpt: React.FC<P>, store: S): (props: P) => React.JSX.Element;
+export {};

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@pixel-starry/hook-store",
+  "version": "1.0.0",
+  "description": "A light data management tool for react framework.",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "scripts": {
+    "dev": "cd example && yarn dev",
+    "build": "rollup --config"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Pixel-Starry/hook-store.git"
+  },
+  "license": "MIT",
+  "author": "wanglei8381",
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^8.3.0",
+    "rollup-plugin-dts": "^4.1.0",
+    "@types/react": "^17.0.39",
+    "react": "^17.0.2",
+    "rollup": "^2.67.3",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.5"
+  },
+  "dependencies": {
+  },
+   "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  }
+}

package/src/deepGet.ts

@@ -0,0 +1,16 @@
+export default function deepGet(obj: any, path: string[] | string) {
+  if (obj == null) {
+    return void 0;
+  }
+
+  if (typeof path === "string") {
+    return obj[path];
+  }
+
+  let length = path.length;
+  for (let i = 0; i < length; i++) {
+    if (obj == null) return void 0;
+    obj = obj[path[i]];
+  }
+  return length ? obj : void 0;
+}

package/src/index.tsx

@@ -0,0 +1 @@
+export * from './store';

package/src/shallowEqual.ts

@@ -0,0 +1,52 @@
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+
+/**
+ * inlined Object.is polyfill to avoid requiring consumers ship their own
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+ */
+function is(x: any, y: any): boolean {
+  // SameValue algorithm
+  if (x === y) { // Steps 1-5, 7-10
+    // Steps 6.b-6.e: +0 != -0
+    // Added the nonzero y check to make Flow happy, but it is redundant
+    return x !== 0 || y !== 0 || 1 / x === 1 / y;
+  } else {
+    // Step 6.a: NaN == NaN
+    return x !== x && y !== y;
+  }
+}
+
+/**
+ * Performs equality by iterating through keys on an object and returning false
+ * when any key has values which are not strictly equal between the arguments.
+ * Returns true when the values of all keys are strictly equal.
+ */
+export function shallowEqual(objA: any, objB: any): boolean {
+  if (is(objA, objB)) {
+    return true;
+  }
+
+  if (typeof objA !== 'object' || objA === null ||
+      typeof objB !== 'object' || objB === null) {
+    return false;
+  }
+
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+
+  // Test for A's keys different from B.
+  for (let i = 0; i < keysA.length; i++) {
+    if (
+      !hasOwnProperty.call(objB, keysA[i]) ||
+      !is(objA[keysA[i]], objB[keysA[i]])
+    ) {
+      return false;
+    }
+  }
+
+  return true;
+}

package/src/store.tsx

@@ -0,0 +1,169 @@
+import React, { useContext, useLayoutEffect, useRef, useState } from "react";
+import { shallowEqual } from "./shallowEqual";
+import deepGet from "./deepGet";
+
+export type InstanceType<T> = T extends abstract new (...args: any) => infer R
+  ? R
+  : never;
+
+export class BaseStore {
+  _update?: () => void;
+
+  static _current?: BaseStore;
+
+  static _isBaseStore = true;
+
+  // 清空的时机不好确认，目前需要手动清空
+  static clear() {
+    this._current = undefined;
+  }
+
+  StoreContext = React.createContext({
+    store: this as BaseStore,
+    fns: new Set<() => void>(),
+  });
+
+  setState<K extends keyof this>(state?: { [k in K]: this[k] }) {
+    if (state) {
+      Object.assign(this, state);
+    }
+    this._update?.();
+  }
+}
+
+type BaseStoreCls = typeof BaseStore;
+
+/**
+ *
+ * @param store 数据源，不追踪其变化，在首次初始化就需要赋值
+ *
+ * @example
+ *
+ * <StoreProvider store={UserStore}></StoreProvider>
+ *
+ * 或者
+ *
+ * const userStore = new UserStore();
+ *
+ * <StoreProvider store={userStore}></StoreProvider>
+ *
+ * @returns
+ */
+export function StoreProvider<T extends BaseStore | Function>({
+  store,
+  children,
+}: {
+  store: T | (() => T);
+  children: React.ReactNode;
+}) {
+  // store 只会在初始化时执行一次，后面新生成的store是无效的
+  const [finalStore] = useState<BaseStore>(() => {
+    let _store: BaseStore;
+    if (store instanceof BaseStore) {
+      _store = store;
+    } else if ((store as any)._isBaseStore) {
+      _store = new (store as any)();
+      (_store.constructor as BaseStoreCls)._current = _store;
+    } else {
+      _store = store();
+    }
+
+    return _store;
+  });
+
+  const [value] = useState(() => ({
+    store: finalStore,
+    fns: new Set<() => void>(),
+  }));
+
+  const { StoreContext } = finalStore;
+
+  finalStore._update = () => {
+    value.fns.forEach((fn) => fn());
+  };
+
+  return (
+    <StoreContext.Provider value={value}>{children}</StoreContext.Provider>
+  );
+}
+
+/**
+ *
+ * @param baseStore 数据源，不追踪其变化，在首次初始化就需要赋值
+ * @example
+ *
+ * useStore(UserStore)
+ *
+ * 或者
+ *
+ * useStore(() => new UserStore())
+ *
+ * 或者
+ *
+ * const userStore = new UserStore();
+ *
+ * useStore(userStore)
+ *
+ * @returns
+ */
+export function useStore<T extends BaseStore | Function>(
+  baseStore: T | (() => T),
+  deps?: Array<string | string[]>
+) {
+  // store 只会在初始化时执行一次，后面新生成的store是无效的
+  const [tmpStore] = useState(() => {
+    let _store: BaseStore;
+    if (baseStore instanceof BaseStore) {
+      _store = baseStore;
+    } else if ((baseStore as any)._isBaseStore) {
+      const BS = baseStore as BaseStoreCls;
+      _store = BS._current ?? new BS();
+    } else {
+      _store = baseStore();
+    }
+    return _store;
+  });
+
+  const { store, fns } = useContext(tmpStore.StoreContext);
+
+  const getDepVals = () => deps?.map((key) => deepGet(store, key));
+
+  const ref = useRef<any>();
+  const [state, dispatch] = useState(getDepVals);
+  ref.current = state;
+
+  useLayoutEffect(() => {
+    const fn = () => {
+      if (deps) {
+        const newVal = getDepVals();
+        const old = ref.current;
+        if (!shallowEqual(newVal, old)) {
+          dispatch(newVal);
+        }
+      } else {
+        dispatch([]);
+      }
+    };
+    fns.add(fn);
+    return () => {
+      fns.delete(fn);
+    };
+  }, deps ?? []);
+
+  return store as Exclude<T, Function> | InstanceType<T>;
+}
+
+type ClassItSelf<T> = new () => T;
+
+export function withStore<
+  P,
+  S extends ClassItSelf<BaseStore> | BaseStore | Function
+>(Cpt: React.FC<P>, store: S) {
+  return (props: P) => {
+    return (
+      <StoreProvider store={store}>
+        <Cpt {...(props as any)} />
+      </StoreProvider>
+    );
+  };
+}