[new packages] - @reffect/strict @reffect/undoable + [new version] - …

…@reffect/react 1.1.3 (#9)

* [new package] @reffect/undoable (#7)

* feat: initial commit for reffect-undoable package, add simplest implementation undo redo

* feat: create simple undo redo store extension package

* chore: change build config (output plugins)

* chore: remove build files

* chore: add gitignore for reffect/undoable

* chore: lock file update

* feat: rewrite undoable to reffect store with couple effects (undo, redo)

* chore: up size limits for reffect undoable package; chore: change keywords for undoable

* docs: update readme for monorepo (add Install section); docs: add readme for undoable package

* [new package] @reffect/strict (#8)

* feat: add the "strict" package; fix(@reffect/react): problems with unmounted react hooks

* bump: @reffect/react to 1.1.3

* docs: update README for strict

* chore: set initial version for strict package

* docs: update README , CHANGELOG

* docs: fix badge in new packages READMEs

CHANGELOG.md

@@ -2,4 +2,6 @@ Changelogs:
 [**@reffect/core**](./packages/core/CHANGELOG.md)  
 [**@reffect/localstore**](./packages/localstore/CHANGELOG.md)  
 [**@reffect/logger**](./packages/logger/CHANGELOG.md)  
-[**@reffect/react**](./packages/react/CHANGELOG.md)
+[**@reffect/react**](./packages/react/CHANGELOG.md)  
+[**@reffect/undoable**](./packages/undoable/CHANGELOG.md)  
+[**@reffect/strict**](./packages/strict/CHANGELOG.md)

README.md

@@ -19,6 +19,26 @@ Reffect — is a declarative and reactive multi-store state manager for JavaScri
   [![npm](https://img.shields.io/npm/v/@reffect/logger?style=flat-square&color=blue)](https://www.npmjs.com/package/@reffect/logger) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@reffect/logger?style=flat-square&color=blue)](https://bundlephobia.com/result?p=@reffect/logger)
 - [`@reffect/localstore`](https://github.com/acacode/reffect/tree/master/packages/localstore) - store middleware to synchronize store with local storage key  
   [![npm](https://img.shields.io/npm/v/@reffect/localstore?style=flat-square&color=blue)](https://www.npmjs.com/package/@reffect/localstore) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@reffect/localstore?style=flat-square&color=blue)](https://bundlephobia.com/result?p=@reffect/localstore)
+- [`@reffect/undoable`](https://github.com/acacode/reffect/tree/master/packages/undoable) - store extension which provides undo/redo effects and store history  
+  [![npm](https://img.shields.io/npm/v/@reffect/undoable?style=flat-square&color=blue)](https://www.npmjs.com/package/@reffect/undoable) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@reffect/undoable?style=flat-square&color=blue)](https://bundlephobia.com/result?p=@reffect/undoable)
+- [`@reffect/strict`](https://github.com/acacode/reffect/tree/master/packages/strict) - store middleware for making store updates more strict  
+  [![npm](https://img.shields.io/npm/v/@reffect/strict?style=flat-square&color=blue)](https://www.npmjs.com/package/@reffect/strict) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@reffect/strict?style=flat-square&color=blue)](https://bundlephobia.com/result?p=@reffect/strict)
+
+## Install
+
+Before at all you need to install main package:
+
+```bash
+$ npm i -S @reffect/core
+# or using yarn
+$ yarn install @reffect/core
+```
+
+If project is using [React](https://github.com/facebook/react) you need to install [@reffect/react](https://github.com/acacode/reffect/tree/master/packages/react) (pack of React hooks which simplify usage with React application)
+
+```bash
+$ npm i -S @reffect/react
+```
 
 ## Examples
 

build/utils/createBuildConfig.js

@@ -32,25 +32,28 @@ const createBuildConfig = ({
       output: {
         file: outputPathToFile,
         format: outputFormat,
-        sourcemap,
+        sourcemap: sourcemap,
+        plugins: [
+          defaultPlugins &&
+            terser({
+              sourcemap: sourcemap,
+              compress: {
+                pure_getters: true,
+                unsafe: true,
+                unsafe_comps: true,
+                warnings: false,
+                arguments: true,
+                unsafe_Function: true,
+                module: true,
+                passes: 30
+              }
+            })
+        ].filter(Boolean),
         ...commonOutput
       },
       external: id => externalDeps.includes(id),
       context: projectPath,
       plugins: [
-        defaultPlugins &&
-          terser({
-            compress: {
-              pure_getters: true,
-              unsafe: true,
-              unsafe_comps: true,
-              warnings: false,
-              arguments: true,
-              unsafe_Function: true,
-              module: true,
-              passes: 15
-            }
-          }),
         defaultPlugins &&
           typescript({
             allowJs: false,
@@ -64,7 +67,9 @@ const createBuildConfig = ({
             noImplicitReturns: true,
             noImplicitThis: true,
             noUnusedLocals: true,
-            sourceMap: false,
+            inlineSourceMap: true,
+            inlineSources: true,
+            sourceMap: true,
             strictNullChecks: true,
             suppressImplicitAnyIndexErrors: true,
             exclude: ["node_modules", "**/*.spec.ts", "**/*.test.ts"]

packages/react/.size-limit.json

@@ -2,16 +2,16 @@
   {
     "path": "reffect-react.es.js",
     "webpack": false,
-    "limit": "300 B"
+    "limit": "335 B"
   },
   {
     "path": "reffect-react.cjs.js",
     "webpack": false,
-    "limit": "350 B"
+    "limit": "355 B"
   },
   {
     "path": "reffect-react.umd.js",
     "webpack": false,
-    "limit": "450 B"
+    "limit": "455 B"
   }
 ]

packages/react/CHANGELOG.md

@@ -1,3 +1,9 @@
+# 1.1.3
+
+### Fix:
+
+1. update hooks states only if hook is mounted
+
 # 1.1.2
 
 ### Minor:

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reffect/react",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "React bindings for Reffect",
   "scripts": {
     "build": "node ../../build/build.js",

packages/react/src/useEffectState.ts

@@ -5,7 +5,14 @@ import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
 export const useEffectState = <Effect extends EffectManagingType>(effect: Effect) => {
   const [state, setState] = useState<EffectState>(null);
 
-  useIsomorphicLayoutEffect(() => manage(effect).subscribe(state => setState(state)), []);
+  useIsomorphicLayoutEffect(() => {
+    let isMount = true;
+    const unsubscribe = manage(effect).subscribe(state => isMount && setState(state));
+    return () => {
+      isMount = false;
+      unsubscribe();
+    };
+  }, []);
 
   return {
     pending: state === "pending",

packages/react/src/useStore.ts

@@ -7,7 +7,14 @@ const reducer = (state: any, newState: any) => ({ ...newState });
 export const useStore = <Store extends StoreType>(store: Store): Store => {
   const [state, setState] = useReducer(reducer, store);
 
-  useIsomorphicLayoutEffect(() => manage(store).subscribe(() => setState(store)), []);
+  useIsomorphicLayoutEffect(() => {
+    let isMount = true;
+    const unsubscribe = manage(store).subscribe(() => isMount && setState(store));
+    return () => {
+      isMount = false;
+      unsubscribe();
+    };
+  }, []);
 
   return state;
 };

packages/strict/.gitignore

@@ -0,0 +1,4 @@
+reffect-strict.*.js
+reffect-strict.d.ts
+reffect-strict.*.js.map
+package-lock.json

packages/strict/.size-limit.json

@@ -0,0 +1,17 @@
+[
+  {
+    "path": "reffect-strict.es.js",
+    "webpack": false,
+    "limit": "310 B"
+  },
+  {
+    "path": "reffect-strict.cjs.js",
+    "webpack": false,
+    "limit": "340 B"
+  },
+  {
+    "path": "reffect-strict.umd.js",
+    "webpack": false,
+    "limit": "450 B"
+  }
+]

packages/strict/CHANGELOG.md

@@ -0,0 +1,3 @@
+# 0.0.1
+
+Created project

packages/strict/README.md

@@ -0,0 +1,29 @@
+<div align="center">
+
+[![reffect logo](https://raw.githubusercontent.com/acacode/reffect/master/assets/reffect.png)](https://github.com/acacode/reffect)  
+[![npm](https://img.shields.io/npm/v/@reffect/strict?style=flat-square&color=blue)](https://www.npmjs.com/package/@reffect/strict)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@reffect/strict?style=flat-square&color=blue)](https://bundlephobia.com/result?p=@reffect/strict)
+[![license](https://img.shields.io/github/license/acacode/reffect?style=flat-square&color=blue)](https://github.com/acacode/reffect)
+
+<div align="left">
+
+Reffect — is a declarative and reactive multi-store state manager for JavaScript/TypeScript applications inspired by [Reatom](https://github.com/artalar/reatom) and [Effector](https://github.com/zerobias/effector)
+
+# @reffect/strict
+
+Store middleware for [`Reffect`](https://github.com/acacode/reffect)
+
+## How to use
+
+```ts
+import { store, effect } from "@reffect/core";
+import { strictUpdate } from "@reffect/logger";
+
+const projectsStore = store({ projects: [] }, "projects", [strictUpdate]);
+
+const setProjects = effect(projectsStore, "projects");
+// ...
+
+setProjects(["foo", "bar"]); // state of projectsStore will update to { projects: ["foo", "bar"] }
+setProjects(["foo", "bar"]); // state of projectsStore won't update because new state and current are equals
+```

packages/strict/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@reffect/strict",
+  "version": "0.0.1",
+  "description": "strict update store middleware for Reffect",
+  "scripts": {
+    "build": "node ../../build/build.js",
+    "size": "size-limit"
+  },
+  "author": "acacode",
+  "license": "MIT",
+  "readme": "README.md",
+  "private": false,
+  "sideEffects": false,
+  "main": "reffect-strict.cjs.js",
+  "typings": "reffect-strict.d.ts",
+  "umd:main": "reffect-strict.umd.js",
+  "jsnext:main": "reffect-strict.es.js",
+  "module": "reffect-strict.es.js",
+  "peerDependencies": { "@reffect/core": "^1.5.0" },
+  "devDependencies": {
+    "@reffect/core": "^1.5.0",
+    "@size-limit/preset-small-lib": "^4.2.1",
+    "size-limit": "^4.2.1"
+  },
+  "files": [
+    "LICENSE",
+    "reffect-strict.d.ts",
+    "reffect-strict.cjs.js",
+    "reffect-strict.cjs.js.map",
+    "reffect-strict.es.js",
+    "reffect-strict.es.js.map",
+    "reffect-strict.umd.js",
+    "reffect-strict.umd.js.map"
+  ],
+  "keywords": [
+    "redux",
+    "effector",
+    "mobx",
+    "state",
+    "store",
+    "flux",
+    "reactive",
+    "state-manager",
+    "state manager",
+    "reffect"
+  ],
+  "gitHead": "a724ce9d6d802cf83fec609ad4664172a4694471"
+}

packages/strict/src/index.ts

@@ -0,0 +1,29 @@
+import { StoreType, manage } from "@reffect/core";
+
+const equals = (obj1: object, obj2: object): obj1 is typeof obj2 => {
+  if (obj1 === obj2) return true;
+  if (!(obj1 instanceof Object) || !(obj2 instanceof Object)) return false;
+  if (obj1.constructor !== obj2.constructor) return false;
+
+  for (const property in obj1) {
+    if (obj1.hasOwnProperty(property) && (!obj2.hasOwnProperty(property) || !equals(obj1[property], obj2[property])))
+      return false;
+  }
+
+  for (const property in obj2) {
+    if (obj2.hasOwnProperty(property) && !obj1.hasOwnProperty(property)) return false;
+  }
+  return true;
+};
+
+export const strictUpdate = <Store extends StoreType>(store: Store, copy: (obj: object) => object) => {
+  const storeManager = manage(store);
+  const originalPartialUpdate = storeManager.partialUpdate;
+
+  storeManager.partialUpdate = (storeUpdate: Partial<Store>) =>
+    storeUpdate &&
+    !equals(store, copy({ ...storeManager.state, ...storeUpdate })) &&
+    originalPartialUpdate(storeUpdate);
+
+  return store;
+};

packages/undoable/.gitignore

@@ -0,0 +1,4 @@
+reffect-undoable.*.js
+reffect-undoable.d.ts
+reffect-undoable.*.js.map
+package-lock.json

packages/undoable/.size-limit.json

@@ -0,0 +1,17 @@
+[
+  {
+    "path": "reffect-undoable.es.js",
+    "webpack": false,
+    "limit": "410 B"
+  },
+  {
+    "path": "reffect-undoable.cjs.js",
+    "webpack": false,
+    "limit": "450 B"
+  },
+  {
+    "path": "reffect-undoable.umd.js",
+    "webpack": false,
+    "limit": "550 B"
+  }
+]