mobx-keystone 0.65.0 → 0.67.0-alpha.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+- Big speedup in certain cases (when many mutations are done between getSnapshot calls) by delaying the inmmutable object creation to the point when getSnapshot is called.
+- Fixed typing issue related to generics with optional props.
+
+## 0.66.1
+
+- Fixed typing issue related to generics.
+
+## 0.66.0
+
+- Restored compatibility with mobx 4/5 and added CI tests to ensure it never gets broken again.
+- Added `@computedTree` decorator for reactively deriving an alternative view of an original tree that is attached as a property to the original tree to support tree traversal functions, contexts, references, etc. (see "Computed Trees" section in the docs).
+
 ## 0.65.0
 
 - Fixed a `Maximum call stack size exceeded` getting triggered when `onAttachedToRootStore` was defined and many nodes were added at once.

package/README.md

@@ -1,68 +1,68 @@
-# mobx-keystone
-
-_A MobX powered state management solution based on data trees with first-class support for TypeScript, snapshots, patches and much more_
-
-[![npm](https://img.shields.io/npm/v/mobx-keystone.svg?style=flat-square&logo=npm)](https://www.npmjs.com/package/mobx-keystone)
-![license](https://img.shields.io/npm/l/mobx-keystone.svg?style=flat-square)
-![types](https://img.shields.io/npm/types/mobx-keystone.svg?style=flat-square&logo=typescript)
-
-[![CI](https://img.shields.io/github/workflow/status/xaviergonz/mobx-keystone/CI?label=CI&logo=github&style=flat-square)](https://github.com/xaviergonz/mobx-keystone/actions/workflows/main.yml)
-[![codecov](https://codecov.io/gh/xaviergonz/mobx-keystone/branch/master/graph/badge.svg?token=6MLRFUBK8V)](https://codecov.io/gh/xaviergonz/mobx-keystone)
-[![Netlify Status](https://api.netlify.com/api/v1/badges/c5f60bcb-c1ff-4d04-ad14-1fc34ddbb429/deploy-status)](https://app.netlify.com/sites/mobx-keystone/deploys)
-
-> ### Full documentation can be found on the site:
->
-> ## [mobx-keystone.js.org](https://mobx-keystone.js.org)
-
-## Introduction
-
-`mobx-keystone` is a state container that combines the _simplicity and ease of mutable data_ with the _traceability of immutable data_ and the _reactiveness and performance of observable data_, all with a fully compatible TypeScript syntax.
-
-Simply put, it tries to combine the best features of both immutability (transactionality, traceability and composition) and mutability (discoverability, co-location and encapsulation) based approaches to state management; everything to provide the best developer experience possible.
-Unlike MobX itself, `mobx-keystone` is very opinionated about how data should be structured and updated.
-This makes it possible to solve many common problems out of the box.
-
-Central in `mobx-keystone` is the concept of a _living tree_. The tree consists of mutable, but strictly protected objects (models, arrays and plain objects).
-From this living tree, immutable, structurally shared snapshots are automatically generated.
-
-Another core design goal of `mobx-keystone` is to offer a great TypeScript syntax out of the box, be it for models (and other kinds of data such as plain objects and arrays) or for its generated snapshots.
-
-To see some code and get a glimpse of how it works check the [Todo List Example](https://mobx-keystone.js.org/examples/todo-list).
-
-Because state trees are living, mutable models, actions are straightforward to write; just modify local instance properties where appropriate. It is not necessary to produce a new state tree yourself, `mobx-keystone`'s snapshot functionality will derive one for you automatically.
-
-Although mutable sounds scary to some, fear not, actions have many interesting properties.
-By default trees can only be modified by using an action that belongs to the same subtree.
-Furthermore, actions are replayable and can be used to distribute changes.
-
-Moreover, because changes can be detected on a fine-grained level, JSON patches are supported out of the box.
-Simply subscribing to the patch stream of a tree is another way to sync diffs with, for example, back-end servers or other clients.
-
-Since `mobx-keystone` uses MobX behind the scenes, it integrates seamlessly with [`mobx`](https://mobx.js.org) and [`mobx-react`](https://github.com/mobxjs/mobx-react).
-Even cooler, because it supports snapshots, action middlewares and replayable actions out of the box, it is possible to replace a Redux store and reducer with a MobX data model.
-This makes it possible to connect the Redux devtools to `mobx-keystone`.
-
-Like React, `mobx-keystone` consists of composable components, called _models_, which capture small pieces of state. They are instantiated from props and after that manage and protect their own internal state (using actions). Moreover, when applying snapshots, tree nodes are reconciled as much as possible.
-
-## Requirements
-
-This library requires a more or less modern JavaScript environment to work, namely one with support for:
-
-- MobX 6, 5, or 4 (with its gotchas)
-- Proxies (when using MobX 5, or MobX 6 with the proxies setting enabled)
-- Symbols
-- WeakMap/WeakSet
-
-In other words, it should work on mostly anything except _it won't work in Internet Explorer_.
-
-If you are using TypeScript, then version >= 4.2.0 is recommended, though it _might_ work with older versions.
-
-## Installation
-
-> `npm install mobx-keystone`
-
-> `yarn add mobx-keystone`
-
-## Full documentation
-
-Full documentation can be found on [mobx-keystone.js.org](https://mobx-keystone.js.org)
+# mobx-keystone
+
+_A MobX powered state management solution based on data trees with first-class support for TypeScript, snapshots, patches and much more_
+
+[![npm](https://img.shields.io/npm/v/mobx-keystone.svg?style=flat-square&logo=npm)](https://www.npmjs.com/package/mobx-keystone)
+![license](https://img.shields.io/npm/l/mobx-keystone.svg?style=flat-square)
+![types](https://img.shields.io/npm/types/mobx-keystone.svg?style=flat-square&logo=typescript)
+
+[![CI](https://img.shields.io/github/workflow/status/xaviergonz/mobx-keystone/CI?label=CI&logo=github&style=flat-square)](https://github.com/xaviergonz/mobx-keystone/actions/workflows/main.yml)
+[![codecov](https://codecov.io/gh/xaviergonz/mobx-keystone/branch/master/graph/badge.svg?token=6MLRFUBK8V)](https://codecov.io/gh/xaviergonz/mobx-keystone)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/c5f60bcb-c1ff-4d04-ad14-1fc34ddbb429/deploy-status)](https://app.netlify.com/sites/mobx-keystone/deploys)
+
+> ### Full documentation can be found on the site:
+>
+> ## [mobx-keystone.js.org](https://mobx-keystone.js.org)
+
+## Introduction
+
+`mobx-keystone` is a state container that combines the _simplicity and ease of mutable data_ with the _traceability of immutable data_ and the _reactiveness and performance of observable data_, all with a fully compatible TypeScript syntax.
+
+Simply put, it tries to combine the best features of both immutability (transactionality, traceability and composition) and mutability (discoverability, co-location and encapsulation) based approaches to state management; everything to provide the best developer experience possible.
+Unlike MobX itself, `mobx-keystone` is very opinionated about how data should be structured and updated.
+This makes it possible to solve many common problems out of the box.
+
+Central in `mobx-keystone` is the concept of a _living tree_. The tree consists of mutable, but strictly protected objects (models, arrays and plain objects).
+From this living tree, immutable, structurally shared snapshots are automatically generated.
+
+Another core design goal of `mobx-keystone` is to offer a great TypeScript syntax out of the box, be it for models (and other kinds of data such as plain objects and arrays) or for its generated snapshots.
+
+To see some code and get a glimpse of how it works check the [Todo List Example](https://mobx-keystone.js.org/examples/todo-list).
+
+Because state trees are living, mutable models, actions are straightforward to write; just modify local instance properties where appropriate. It is not necessary to produce a new state tree yourself, `mobx-keystone`'s snapshot functionality will derive one for you automatically.
+
+Although mutable sounds scary to some, fear not, actions have many interesting properties.
+By default trees can only be modified by using an action that belongs to the same subtree.
+Furthermore, actions are replayable and can be used to distribute changes.
+
+Moreover, because changes can be detected on a fine-grained level, JSON patches are supported out of the box.
+Simply subscribing to the patch stream of a tree is another way to sync diffs with, for example, back-end servers or other clients.
+
+Since `mobx-keystone` uses MobX behind the scenes, it integrates seamlessly with [`mobx`](https://mobx.js.org) and [`mobx-react`](https://github.com/mobxjs/mobx-react).
+Even cooler, because it supports snapshots, action middlewares and replayable actions out of the box, it is possible to replace a Redux store and reducer with a MobX data model.
+This makes it possible to connect the Redux devtools to `mobx-keystone`.
+
+Like React, `mobx-keystone` consists of composable components, called _models_, which capture small pieces of state. They are instantiated from props and after that manage and protect their own internal state (using actions). Moreover, when applying snapshots, tree nodes are reconciled as much as possible.
+
+## Requirements
+
+This library requires a more or less modern JavaScript environment to work, namely one with support for:
+
+- MobX 6, 5, or 4 (with its gotchas)
+- Proxies (when using MobX 5, or MobX 6 with the proxies setting enabled)
+- Symbols
+- WeakMap/WeakSet
+
+In other words, it should work on mostly anything except _it won't work in Internet Explorer_.
+
+If you are using TypeScript, then version >= 4.2.0 is recommended, though it _might_ work with older versions.
+
+## Installation
+
+> `npm install mobx-keystone`
+
+> `yarn add mobx-keystone`
+
+## Full documentation
+
+Full documentation can be found on [mobx-keystone.js.org](https://mobx-keystone.js.org)

package/dist/action/modelFlow.d.ts

@@ -4,7 +4,7 @@
  * @param fn Function to check.
  * @returns
  */
-export declare function isModelFlow(fn: any): any;
+export declare function isModelFlow(fn: unknown): boolean;
 /**
  * Decorator that turns a function generator into a model flow.
  *

package/dist/action/pendingActions.d.ts

@@ -1,8 +1 @@
-/**
- * @ignore
- */
-export declare function enqueuePendingAction(action: () => void): void;
-/**
- * @ignore
- */
-export declare function tryRunPendingActions(): void;
+export {};

package/dist/action/wrapInAction.d.ts

@@ -1,22 +1 @@
-import type { O } from "ts-toolbelt";
-import type { AnyDataModel } from "../dataModel/BaseDataModel";
-import type { AnyModel } from "../model/BaseModel";
-import { ActionContext, ActionContextActionType } from "./context";
-/**
- * @ignore
- */
-export declare type WrapInActionOverrideContextFn = (ctx: O.Writable<ActionContext>, self: any) => void;
-/**
- * @ignore
- */
-export declare function wrapInAction<T extends Function>({ nameOrNameFn, fn, actionType, overrideContext, isFlowFinisher, }: {
-    nameOrNameFn: string | (() => string);
-    fn: T;
-    actionType: ActionContextActionType;
-    overrideContext?: WrapInActionOverrideContextFn;
-    isFlowFinisher?: boolean;
-}): T;
-/**
- * @ignore
- */
-export declare function wrapModelMethodInActionIfNeeded<M extends AnyModel | AnyDataModel>(model: M, propertyKey: keyof M, name: string): void;
+export {};

package/dist/actionMiddlewares/utils.d.ts

@@ -1,10 +1 @@
-import type { RootPath } from "../parent/path";
-import type { Path } from "../parent/pathTypes";
-/**
- * @ignore
- */
-export declare function rootPathToTargetPathIds(rootPath: RootPath<any>): (string | null)[];
-/**
- * @ignore
- */
-export declare function pathToTargetPathIds(root: any, path: Path): (string | null)[];
+export {};

package/dist/bench.d.ts

@@ -0,0 +1,9 @@
+declare const Todo1_base: import(".")._Model<unknown, {
+    id: import(".").ModelIdProp;
+}, never, never>;
+export declare class Todo1 extends Todo1_base {
+}
+declare const Todo2_base: import(".")._Model<unknown, {}, never, never>;
+export declare class Todo2 extends Todo2_base {
+}
+export {};

package/dist/computedTree/computedTree.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Returns if a given node is a computed tree node.
+ *
+ * @param node Node to check.
+ * @returns `true` if it is a computed tree node, `false` otherwise.
+ */
+export declare function isComputedTreeNode(node: object): boolean;
+/**
+ * Decorator for turning a computed property into a computed tree which supports tree traversal
+ * functions, contexts, references, etc.
+ *
+ * @param target Prototype of the class.
+ * @param propertyKey Name of the member.
+ * @param descriptor Property descriptor for the member.
+ */
+export declare function computedTree(target: any, propertyKey: string, descriptor: PropertyDescriptor): void;

package/dist/computedTree/index.d.ts

@@ -0,0 +1 @@
+export * from "./computedTree";

package/dist/dataModel/utils.d.ts

@@ -5,4 +5,4 @@ import type { AnyDataModel } from "./BaseDataModel";
  * @param model
  * @returns
  */
-export declare function isDataModel(model: any): model is AnyDataModel;
+export declare function isDataModel(model: unknown): model is AnyDataModel;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./action";
 export * from "./actionMiddlewares";
+export * from "./computedTree";
 export * from "./context";
 export * from "./dataModel";
 export * from "./frozen";