extra-react-store 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 BlackGlory <woshenmedoubuzhidao@blackglory.me>
+
+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,88 @@
+# extra-react-store
+## Install
+```sh
+npm install --save extra-react-store
+# or
+yarn add extra-react-store
+```
+
+## Usage
+```tsx
+import { useMemo } from 'react'
+import { createStoreContext, Store, useSelector, useUpdater } from 'extra-react-store'
+
+interface IState {
+  count: number
+}
+
+const context = createStoreContext<IState>()
+
+function App() {
+  const store = useMemo<Store<IState>>(() => new Store({ count: 0 }), [])
+
+  return (
+    <context.Provider value={store}>
+      <Viewer />
+      <Controller />
+    </context.Provider>
+  )
+}
+
+function Viewer() {
+  const count = useSelector(context, state => state.count)
+
+  return (
+    <span>{count}</span>
+  )
+}
+
+function Controller() {
+  const update = useUpdater<IState>(context)
+
+  return (
+    <button onClick={() => update(increment)}>Increment</button>
+  )
+}
+
+function increment(state: IState): void {
+  state.count++
+}
+```
+
+## API
+```ts
+type StoreContext<State> = React.Context<IStore<State>>
+
+interface IStore<State> {
+  getState(): State
+  setState(newState: State): void
+  subscribe(fn: (state: State) => void): () => void
+}
+```
+
+### Store
+```ts
+class Store<State> implements IStore<State> {
+  constructor(initialState: State)
+}
+```
+
+### createStoreContext
+```ts
+function createStoreContext<State>(): StoreContext<State>
+```
+
+### useSelector
+```ts
+function useSelector<State, Value>(
+  context: StoreContext<State>
+, selector: (state: State) => Value
+): Value
+```
+
+### useUpdater
+```ts
+import { Updater } from 'use-immer'
+
+function useUpdater<State>(context: StoreContext<State>): Updater<State>
+```

package/lib/create-store-context.d.ts

@@ -0,0 +1,2 @@
+import { StoreContext } from './types.js';
+export declare function createStoreContext<State>(): StoreContext<State>;

package/lib/create-store-context.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+export function createStoreContext() {
+    const context = createContext({});
+    return context;
+}
+//# sourceMappingURL=create-store-context.js.map

package/lib/create-store-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-store-context.js","sourceRoot":"","sources":["../src/create-store-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAGrC,MAAM,UAAU,kBAAkB;IAChC,MAAM,OAAO,GAAG,aAAa,CAAgB,EAAmB,CAAC,CAAA;IACjE,OAAO,OAAO,CAAA;AAChB,CAAC"}

package/lib/index.d.ts

@@ -0,0 +1,5 @@
+export * from './types.js';
+export * from './store.js';
+export * from './create-store-context.js';
+export * from './use-selector.js';
+export * from './use-updater.js';

package/lib/index.js

@@ -0,0 +1,6 @@
+export * from './types.js';
+export * from './store.js';
+export * from './create-store-context.js';
+export * from './use-selector.js';
+export * from './use-updater.js';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,2BAA2B,CAAA;AACzC,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA"}

package/lib/store.d.ts

@@ -0,0 +1,9 @@
+import { IStore } from './types.js';
+export declare class Store<State> implements IStore<State> {
+    private state;
+    private emitter;
+    constructor(initialState: State);
+    getState(): State;
+    setState(newState: State): void;
+    subscribe(fn: (state: State) => void): () => void;
+}

package/lib/store.js

@@ -0,0 +1,18 @@
+import { Emitter } from '@blackglory/structures';
+export class Store {
+    constructor(initialState) {
+        this.emitter = new Emitter();
+        this.state = initialState;
+    }
+    getState() {
+        return this.state;
+    }
+    setState(newState) {
+        this.state = newState;
+        this.emitter.emit('stateChanged', newState);
+    }
+    subscribe(fn) {
+        return this.emitter.on('stateChanged', fn);
+    }
+}
+//# sourceMappingURL=store.js.map

package/lib/store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.js","sourceRoot":"","sources":["../src/store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAGhD,MAAM,OAAO,KAAK;IAIhB,YAAY,YAAmB;QAFvB,YAAO,GAAG,IAAI,OAAO,EAAoC,CAAA;QAG/D,IAAI,CAAC,KAAK,GAAG,YAAY,CAAA;IAC3B,CAAC;IAED,QAAQ;QACN,OAAO,IAAI,CAAC,KAAK,CAAA;IACnB,CAAC;IAED,QAAQ,CAAC,QAAe;QACtB,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAA;QACrB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAA;IAC7C,CAAC;IAED,SAAS,CAAC,EAA0B;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,cAAc,EAAE,EAAE,CAAC,CAAA;IAC5C,CAAC;CACF"}

package/lib/types.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export type StoreContext<State> = React.Context<IStore<State>>;
+export interface IStore<State> {
+    getState(): State;
+    setState(newState: State): void;
+    subscribe(fn: (state: State) => void): () => void;
+}

package/lib/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/lib/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/lib/use-selector.d.ts

@@ -0,0 +1,2 @@
+import { StoreContext } from './types.js';
+export declare function useSelector<State, Value>(context: StoreContext<State>, selector: (state: State) => Value): Value;

package/lib/use-selector.js

@@ -0,0 +1,13 @@
+import { useState, useContext, useEffect } from 'react';
+export function useSelector(context, selector) {
+    const store = useContext(context);
+    const [value, setValue] = useState(() => selector(store.getState()));
+    useEffect(() => {
+        return store.subscribe(state => {
+            const newValue = selector(state);
+            setValue(newValue);
+        });
+    }, [store, value]);
+    return value;
+}
+//# sourceMappingURL=use-selector.js.map

package/lib/use-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-selector.js","sourceRoot":"","sources":["../src/use-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGvD,MAAM,UAAU,WAAW,CACzB,OAA4B,EAC5B,QAAiC;IAEjC,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,CAAA;IACjC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAA;IAEpE,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE;YAC7B,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;YAGhC,QAAQ,CAAC,QAAQ,CAAC,CAAA;QACpB,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAA;IAElB,OAAO,KAAK,CAAA;AACd,CAAC"}

package/lib/use-updater.d.ts

@@ -0,0 +1,3 @@
+import { Updater } from 'use-immer';
+import { StoreContext } from './types.js';
+export declare function useUpdater<State>(context: StoreContext<State>): Updater<State>;

package/lib/use-updater.js

@@ -0,0 +1,22 @@
+import { useCallback, useContext } from 'react';
+import { produce } from 'immer';
+import { go, isFunction } from '@blackglory/prelude';
+export function useUpdater(context) {
+    const store = useContext(context);
+    const updater = useCallback(newStateOrFn => {
+        const state = go(() => {
+            if (isFunction(newStateOrFn)) {
+                const fn = newStateOrFn;
+                const newState = produce(store.getState(), fn);
+                return newState;
+            }
+            else {
+                const newState = newStateOrFn;
+                return newState;
+            }
+        });
+        store.setState(state);
+    }, [store]);
+    return updater;
+}
+//# sourceMappingURL=use-updater.js.map

package/lib/use-updater.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-updater.js","sourceRoot":"","sources":["../src/use-updater.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAGpD,MAAM,UAAU,UAAU,CAAQ,OAA4B;IAC5D,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,CAAA;IAEjC,MAAM,OAAO,GAAmB,WAAW,CAAC,YAAY,CAAC,EAAE;QACzD,MAAM,KAAK,GAAG,EAAE,CAAC,GAAG,EAAE;YACpB,IAAI,UAAU,CAAC,YAAY,CAAC,EAAE;gBAC5B,MAAM,EAAE,GAAG,YAAY,CAAA;gBACvB,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAA;gBAC9C,OAAO,QAAQ,CAAA;aAChB;iBAAM;gBACL,MAAM,QAAQ,GAAG,YAAY,CAAA;gBAC7B,OAAO,QAAQ,CAAA;aAChB;QACH,CAAC,CAAC,CAAA;QACF,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IACvB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,OAAO,CAAA;AAChB,CAAC"}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "extra-react-store",
+  "version": "0.1.0",
+  "description": "",
+  "keywords": [],
+  "files": [
+    "lib",
+    "src"
+  ],
+  "type": "module",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "sideEffects": false,
+  "engines": {
+    "node": ">=16"
+  },
+  "repository": "git@github.com:BlackGlory/extra-react-store.git",
+  "author": "BlackGlory <woshenmedoubuzhidao@blackglory.me>",
+  "license": "MIT",
+  "scripts": {
+    "prepare": "ts-patch install -s",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx --quiet src __tests__",
+    "test": "vitest --run",
+    "prepublishOnly": "run-s prepare clean build",
+    "clean": "rimraf lib",
+    "build": "tsc --project tsconfig.build.json --outDir lib",
+    "release": "standard-version"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "run-s prepare lint build test",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.6.5",
+    "@commitlint/config-conventional": "^17.6.5",
+    "@testing-library/react": "^14.0.0",
+    "@types/react": "^18.2.11",
+    "@typescript-eslint/eslint-plugin": "^5.59.9",
+    "@typescript-eslint/parser": "^5.59.9",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^8.42.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "extra-react-hooks": "^0.6.3",
+    "husky": "4",
+    "immer": "^10.0.2",
+    "jsdom": "^22.1.0",
+    "npm-run-all": "^4.1.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^4.3.0",
+    "standard-version": "^9.3.2",
+    "ts-patch": "^2.1.0",
+    "tslib": "^2.5.3",
+    "typescript": "4.9.5",
+    "typescript-transform-paths": "^3.4.6",
+    "vite": "^4.4.3",
+    "vite-tsconfig-paths": "^4.2.0",
+    "vitest": "^0.33.0"
+  },
+  "dependencies": {
+    "@blackglory/prelude": "^0.3.3",
+    "@blackglory/structures": "^0.13.4",
+    "use-immer": "^0.9.0"
+  },
+  "peerDependencies": {
+    "immer": "^10.0.2",
+    "react": "^18"
+  }
+}

package/src/create-store-context.ts

@@ -0,0 +1,7 @@
+import { createContext } from 'react'
+import { IStore, StoreContext } from './types.js'
+
+export function createStoreContext<State>(): StoreContext<State> {
+  const context = createContext<IStore<State>>({} as IStore<State>)
+  return context
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './types.js'
+export * from './store.js'
+export * from './create-store-context.js'
+export * from './use-selector.js'
+export * from './use-updater.js'

package/src/store.ts

@@ -0,0 +1,24 @@
+import { Emitter } from '@blackglory/structures'
+import { IStore } from './types.js'
+
+export class Store<State> implements IStore<State> {
+  private state: State
+  private emitter = new Emitter<{ stateChanged: [state: State] }>()
+
+  constructor(initialState: State) {
+    this.state = initialState
+  }
+
+  getState(): State {
+    return this.state
+  }
+
+  setState(newState: State): void {
+    this.state = newState
+    this.emitter.emit('stateChanged', newState)
+  }
+
+  subscribe(fn: (state: State) => void): () => void {
+    return this.emitter.on('stateChanged', fn)
+  }
+}

package/src/types.ts

@@ -0,0 +1,7 @@
+export type StoreContext<State> = React.Context<IStore<State>>
+
+export interface IStore<State> {
+  getState(): State
+  setState(newState: State): void
+  subscribe(fn: (state: State) => void): () => void
+}

package/src/use-selector.ts

@@ -0,0 +1,21 @@
+import { useState, useContext, useEffect } from 'react'
+import { StoreContext } from './types.js'
+
+export function useSelector<State, Value>(
+  context: StoreContext<State>
+, selector: (state: State) => Value
+): Value {
+  const store = useContext(context)
+  const [value, setValue] = useState(() => selector(store.getState()))
+
+  useEffect(() => {
+    return store.subscribe(state => {
+      const newValue = selector(state)
+
+      // 若新旧状态引用相等, 不会发生重新渲染.
+      setValue(newValue)
+    })
+  }, [store, value])
+
+  return value
+}

package/src/use-updater.ts

@@ -0,0 +1,25 @@
+import { useCallback, useContext } from 'react'
+import { Updater } from 'use-immer'
+import { produce } from 'immer'
+import { go, isFunction } from '@blackglory/prelude'
+import { StoreContext } from './types.js'
+
+export function useUpdater<State>(context: StoreContext<State>): Updater<State> {
+  const store = useContext(context)
+
+  const updater: Updater<State> = useCallback(newStateOrFn => {
+    const state = go(() => {
+      if (isFunction(newStateOrFn)) {
+        const fn = newStateOrFn
+        const newState = produce(store.getState(), fn)
+        return newState
+      } else {
+        const newState = newStateOrFn
+        return newState
+      }
+    })
+    store.setState(state)
+  }, [store])
+
+  return updater
+}