mobx-utils - npm Package Compare versions

Comparing version 5.6.1 to 6.0.0-rc.1

CHANGELOG.md

@@ -0,1 +1,9 @@
+# 6.0.0
+
+* [BREAKING] Dropped previously deprecated `asyncAction`. Use `mobx.flow` instead.
+* [BREAKING] Dropped previously deprecated `actionAsync`. Use `mobx.flow` + `mobx.flowResult` instead.
+* [BREAKING] Dropped previously deprecated `whenAsync`. Use `mobx.when` instead.
+* [BREAKING] Dropped previously deprecated `whenWithTimeout`. Use `mobx.when` instead.
+* [BREAKING] Added support for MobX 6.0.0. Minimim required MobX version is 6.0.0.
+
 # 5.6.1
@@ -9,3 +17,3 @@
 * [#250](https://github.com/mobxjs/mobx-utils/pull/250) Fix [#249](https://github.com/mobxjs/mobx-utils/issues/249): lazyObservable: pending.set not wrapped in allowStateChanges.
-* [#251](https://github.com/mobxjs/mobx-utils/pull/251) Fix fromStream initialValue not typed correctly. 
+* [#251](https://github.com/mobxjs/mobx-utils/pull/251) Fix fromStream initialValue not typed correctly.
 
@@ -12,0 +20,0 @@ # 5.5.7

lib/array.d.ts

@@ -0,0 +0,0 @@ import { IObservableArray } from "mobx";

lib/array.js

@@ -8,3 +8,2 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
 };
-import { $mobx } from "mobx";
 /**
@@ -30,3 +29,3 @@ * Moves an item from one position to another, checking that the indexes given are within bounds.
     }
-    var oldItems = target[$mobx].values;
+    var oldItems = target.slice();
     var newItems;
@@ -58,3 +57,3 @@ if (fromIndex < toIndex) {
     }
-    var length = target[$mobx].values.length;
+    var length = target.length;
     if (index >= length) {
@@ -61,0 +60,0 @@ throw new Error("[mobx.array] Index out of bounds: " + index + " is not smaller than " + length);

lib/chunk-processor.d.ts

@@ -0,0 +0,0 @@ import { IDisposer } from "./utils";

lib/chunk-processor.js

@@ -0,0 +0,0 @@ import { isAction, autorun, action, isObservableArray, runInAction } from "mobx";

lib/computedFn.d.ts

@@ -0,0 +0,0 @@ import { IComputedValueOptions } from "mobx";

lib/computedFn.js

@@ -0,0 +0,0 @@ var __assign = (this && this.__assign) || function () {

lib/create-transformer.d.ts

@@ -0,0 +0,0 @@ import { IComputedValueOptions } from "mobx";

lib/create-transformer.js

@@ -0,0 +0,0 @@ var __assign = (this && this.__assign) || function () {

lib/create-view-model.d.ts

@@ -0,0 +0,0 @@ import { ObservableMap, IComputedValue } from "mobx";

lib/create-view-model.js

@@ -18,3 +18,3 @@ var __assign = (this && this.__assign) || function () {
 };
-import { action, observable, isObservableObject, isObservableArray, isObservableMap, isComputedProp, isComputed, computed, keys, _getAdministration, $mobx, } from "mobx";
+import { action, observable, isObservableObject, isObservableArray, isObservableMap, isComputedProp, isComputed, computed, keys, _getAdministration, $mobx, makeObservable, } from "mobx";
 import { invariant, getAllMethodsAndProperties } from "./utils";
@@ -31,2 +31,3 @@ var RESERVED_NAMES = ["model", "reset", "submit", "isDirty", "isPropertyDirty", "resetProperty"];
         };
+        makeObservable(this);
         invariant(isObservableObject(model), "createViewModel expects an observable object");
@@ -71,3 +72,3 @@ // use this helper as Object.getOwnPropertyNames doesn't return getters
         get: function () {
-            return this.localValues.toJS();
+            return new Map(this.localValues);
         },
@@ -74,0 +75,0 @@ enumerable: false,

lib/decorator-utils.d.ts

@@ -0,0 +0,0 @@ declare type BabelDescriptor = PropertyDescriptor & {

lib/decorator-utils.js

@@ -0,0 +0,0 @@ import { addHiddenProp } from "./utils";

lib/deepMap.d.ts

@@ -0,0 +0,0 @@ /**

lib/deepMap.js

@@ -0,0 +0,0 @@ /**

lib/deepObserve.d.ts

@@ -1,4 +0,4 @@
-import { IObjectDidChange, IArrayChange, IArraySplice, IMapDidChange } from "mobx";
+import { IObjectDidChange, IArrayDidChange, IMapDidChange } from "mobx";
 import { IDisposer } from "./utils";
-declare type IChange = IObjectDidChange | IArrayChange | IArraySplice | IMapDidChange;
+declare type IChange = IObjectDidChange | IArrayDidChange | IMapDidChange;
 /**
@@ -5,0 +5,0 @@ * Given an object, deeply observes the given object.

lib/deepObserve.js

@@ -0,0 +0,0 @@ import { observe, isObservableMap, isObservableObject, isObservableArray, values, entries, } from "mobx";

lib/expr.d.ts

@@ -0,0 +0,0 @@ /**

lib/expr.js

@@ -0,0 +0,0 @@ import { computed, _isComputingDerivation } from "mobx";

lib/from-promise.d.ts

@@ -127,6 +127,6 @@ export declare type PromiseState = "pending" | "fulfilled" | "rejected";
 export declare namespace fromPromise {
-    export const reject: (<T>(reason: any) => IRejectedPromise & IBasePromiseBasedObservable<T>) & import("mobx").IAction;
+    export const reject: <T>(reason: any) => IRejectedPromise & IBasePromiseBasedObservable<T>;
     function resolveBase<T>(value?: T): IFulfilledPromise<T | undefined> & IBasePromiseBasedObservable<T>;
     function resolveBase<T>(value: T): IFulfilledPromise<T> & IBasePromiseBasedObservable<T>;
-    export const resolve: typeof resolveBase & import("mobx").IAction;
+    export const resolve: typeof resolveBase;
     export {};
@@ -133,0 +133,0 @@ }

lib/from-promise.js

@@ -0,0 +0,0 @@ import { action, extendObservable } from "mobx";

lib/from-resource.d.ts

@@ -0,0 +0,0 @@ import { IDisposer } from "./utils";

lib/from-resource.js

@@ -0,0 +0,0 @@ import { createAtom, _allowStateChanges } from "mobx";

lib/keep-alive.d.ts

@@ -0,0 +0,0 @@ import { IComputedValue } from "mobx";

lib/keep-alive.js

@@ -1,2 +0,2 @@
-import { getAtom } from "mobx";
+import { getAtom, observe } from "mobx";
 /**
@@ -34,3 +34,3 @@ * MobX normally suspends any computed value that is not in use by any reaction,
         throw new Error("No computed provided, please provide an object created with `computed(() => expr)` or an object + property name");
-    return computed.observe(function () { });
+    return observe(computed, function () { });
 }

lib/lazy-observable.d.ts

@@ -0,0 +0,0 @@ export interface ILazyObservable<T> {

lib/lazy-observable.js

@@ -0,0 +0,0 @@ import { observable, action, _allowStateChanges } from "mobx";

lib/mobx-utils.d.ts

@@ -7,3 +7,2 @@ export * from "./from-promise";
 export * from "./create-view-model";
-export * from "./guarded-when";
 export * from "./keep-alive";
@@ -14,4 +13,2 @@ export * from "./queue-processor";
 export * from "./utils";
-export * from "./async-action";
-export * from "./when-async";
 export * from "./expr";
@@ -22,2 +19,1 @@ export * from "./create-transformer";
 export { computedFn } from "./computedFn";
-export { actionAsync, task } from "./action-async";

lib/mobx-utils.js

@@ -7,3 +7,2 @@ export * from "./from-promise";
 export * from "./create-view-model";
-export * from "./guarded-when";
 export * from "./keep-alive";
@@ -14,4 +13,2 @@ export * from "./queue-processor";
 export * from "./utils";
-export * from "./async-action";
-export * from "./when-async";
 export * from "./expr";
@@ -22,2 +19,1 @@ export * from "./create-transformer";
 export { computedFn } from "./computedFn";
-export { actionAsync, task } from "./action-async";

lib/now.d.ts

@@ -0,0 +0,0 @@ /**

lib/now.js

@@ -47,2 +47,3 @@ import { _isComputingDerivation } from "mobx";
     return fromResource(function (sink) {
+        sink(Date.now());
         subscriptionHandle = setInterval(function () { return sink(Date.now()); }, interval);
@@ -54,4 +55,4 @@ }, function () {
 function createAnimationFrameTicker() {
-    var subscriptionHandle;
     var frameBasedTicker = fromResource(function (sink) {
+        sink(Date.now());
         function scheduleTick() {
@@ -58,0 +59,0 @@ window.requestAnimationFrame(function () {

lib/observable-stream.d.ts

@@ -0,0 +0,0 @@ export interface IStreamObserver<T> {

lib/observable-stream.js

@@ -7,3 +7,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { computed, observable, action, runInAction } from "mobx";
+import { computed, observable, action, runInAction, observe, makeObservable } from "mobx";
 function observableSymbol() {
@@ -43,3 +43,3 @@ return (typeof Symbol === "function" && Symbol.observable) || "@@observable";
                     return {
-                        unsubscribe: computedValue.observe(function (_a) {
+                        unsubscribe: observe(computedValue, function (_a) {
                             var newValue = _a.newValue;
@@ -52,3 +52,3 @@ return observer(newValue);
                     return {
-                        unsubscribe: computedValue.observe(function (_a) {
+                        unsubscribe: observe(computedValue, function (_a) {
                             var newValue = _a.newValue;
@@ -72,2 +72,3 @@ return observer.next(newValue);
         var _this = this;
+        makeObservable(this);
         runInAction(function () {
@@ -74,0 +75,0 @@ _this.current = initialValue;

lib/ObservableGroupMap.d.ts

@@ -15,2 +15,5 @@ import { IObservableArray, ObservableMap } from "mobx";
  *
+ * NB: ObservableGroupMap relies on `Symbol`s. If you are targeting a platform which doesn't
+ * support these natively, you will need to provide a polyfill.
+ *
  * @param {array} base The array to sort into groups.
@@ -17,0 +20,0 @@ * @param {function} groupBy The function used for grouping.

lib/ObservableGroupMap.js

@@ -28,2 +28,5 @@ var __extends = (this && this.__extends) || (function () {
  *
+ * NB: ObservableGroupMap relies on `Symbol`s. If you are targeting a platform which doesn't
+ * support these natively, you will need to provide a polyfill.
+ *
  * @param {array} base The array to sort into groups.
@@ -53,5 +56,3 @@ * @param {function} groupBy The function used for grouping.
         _this._groupBy = groupBy;
-        _this._ogmInfoKey = ("function" == typeof Symbol
-            ? Symbol("ogmInfo" + name)
-            : "__ogmInfo" + name);
+        _this._ogmInfoKey = Symbol("ogmInfo" + name);
         _this._base = base;
@@ -111,3 +112,3 @@ for (var i = 0; i < base.length; i++) {
         if (undefined === result) {
-            result = observable([], { name: "GroupArray[" + this._keyToName(key) + "]" });
+            result = observable([], { name: "GroupArray[" + this._keyToName(key) + "]", deep: false });
             _super.prototype.set.call(this, key, result);
@@ -114,0 +115,0 @@ }

lib/queue-processor.d.ts

@@ -0,0 +0,0 @@ import { IDisposer } from "./utils";

lib/queue-processor.js

@@ -0,0 +0,0 @@ import { isAction, autorun, action, isObservableArray, runInAction } from "mobx";

lib/utils.d.ts

@@ -6,4 +6,3 @@ export declare type IDisposer = () => void;
 export declare function invariant(cond: boolean, message?: string): void;
-export declare function deprecated(msg: string): void;
 export declare function addHiddenProp(object: any, propName: string, value: any): void;
 export declare const getAllMethodsAndProperties: (x: any) => any;

lib/utils.js

@@ -11,9 +11,2 @@ export var NOOP = function () { };
 }
-var deprecatedMessages = [];
-export function deprecated(msg) {
-    if (deprecatedMessages.indexOf(msg) !== -1)
-        return;
-    deprecatedMessages.push(msg);
-    console.error("[mobx-utils] Deprecated: " + msg);
-}
 export function addHiddenProp(object, propName, value) {
@@ -20,0 +13,0 @@ Object.defineProperty(object, propName, {

package.json

 {
   "name": "mobx-utils",
-  "version": "5.6.1",
+  "version": "6.0.0-rc.1",
   "description": "Utility functions and common patterns for MobX",
@@ -45,3 +45,3 @@ "main": "mobx-utils.umd.js",
     "lodash.intersection": "*",
-    "mobx": "^5.15.4",
+    "mobx": "^6.0.0-rc.3",
     "prettier": "^2.0.5",
@@ -56,3 +56,3 @@ "rollup": "^2.10.8",
   "peerDependencies": {
-    "mobx": "^4.13.1 || ^5.13.1"
+    "mobx": "^6.0.0"
   },
@@ -59,0 +59,0 @@ "keywords": [

README.md

@@ -50,45 +50,33 @@ # MobX-utils
     -   [Examples](#examples-5)
--   [whenWithTimeout](#whenwithtimeout)
+-   [keepAlive](#keepalive)
     -   [Parameters](#parameters-7)
     -   [Examples](#examples-6)
--   [keepAlive](#keepalive)
+-   [keepAlive](#keepalive-1)
     -   [Parameters](#parameters-8)
     -   [Examples](#examples-7)
--   [keepAlive](#keepalive-1)
+-   [queueProcessor](#queueprocessor)
     -   [Parameters](#parameters-9)
     -   [Examples](#examples-8)
--   [queueProcessor](#queueprocessor)
+-   [chunkProcessor](#chunkprocessor)
     -   [Parameters](#parameters-10)
     -   [Examples](#examples-9)
--   [chunkProcessor](#chunkprocessor)
+-   [now](#now)
     -   [Parameters](#parameters-11)
     -   [Examples](#examples-10)
--   [now](#now)
+-   [expr](#expr)
     -   [Parameters](#parameters-12)
     -   [Examples](#examples-11)
--   [asyncAction](#asyncaction)
+-   [deepObserve](#deepobserve)
     -   [Parameters](#parameters-13)
     -   [Examples](#examples-12)
--   [whenAsync](#whenasync)
+-   [ObservableGroupMap](#observablegroupmap)
     -   [Parameters](#parameters-14)
     -   [Examples](#examples-13)
--   [expr](#expr)
-    -   [Parameters](#parameters-15)
-    -   [Examples](#examples-14)
--   [deepObserve](#deepobserve)
-    -   [Parameters](#parameters-16)
-    -   [Examples](#examples-15)
--   [ObservableGroupMap](#observablegroupmap)
-    -   [Parameters](#parameters-17)
-    -   [Examples](#examples-16)
     -   [dispose](#dispose)
 -   [ObservableMap](#observablemap)
 -   [computedFn](#computedfn)
-    -   [Parameters](#parameters-18)
-    -   [Examples](#examples-17)
+    -   [Parameters](#parameters-15)
+    -   [Examples](#examples-14)
 -   [DeepMapEntry](#deepmapentry)
 -   [DeepMap](#deepmap)
--   [actionAsync](#actionasync)
-    -   [Parameters](#parameters-19)
-    -   [Examples](#examples-18)
 
@@ -412,36 +400,2 @@ ## fromPromise
 
-## whenWithTimeout
-
-Like normal `when`, except that this `when` will automatically dispose if the condition isn't met within a certain amount of time.
-
-### Parameters
-
--   `expr`  
--   `action`  
--   `timeout` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** maximum amount when spends waiting before giving up (optional, default `10000`)
--   `onTimeout` **any** the ontimeout handler will be called if the condition wasn't met within the given time (optional, default `()=>{}`)
-
-### Examples
-
-```javascript
-test("expect store to load", t => {
-  const store = {
-    items: [],
-    loaded: false
-  }
-  fetchDataForStore((data) => {
-    store.items = data;
-    store.loaded = true;
-  })
-  whenWithTimeout(
-    () => store.loaded
-    () => t.end()
-    2000,
-    () => t.fail("store didn't load with 2 secs")
-  )
-})
-```
-
-Returns **IDisposer** disposer function that can be used to cancel the when prematurely. Neither action or onTimeout will be fired if disposed
-
 ## keepAlive
@@ -578,98 +532,2 @@
 
-## asyncAction
-
-_deprecated_ this functionality can now be found as `flow` in the mobx package. However, `flow` is not applicable as decorator, where `asyncAction` still is.
-
-`asyncAction` takes a generator function and automatically wraps all parts of the process in actions. See the examples below.
-`asyncAction` can be used both as decorator or to wrap functions.
-
--   It is important that `asyncAction should always be used with a generator function (recognizable as`function_`or`_name\` syntax)
--   Each yield statement should return a Promise. The generator function will continue as soon as the promise settles, with the settled value
--   When the generator function finishes, you can return a normal value. The `asyncAction` wrapped function will always produce a promise delivering that value.
-
-When using the mobx devTools, an asyncAction will emit `action` events with names like:
-
--   `"fetchUsers - runid: 6 - init"`
--   `"fetchUsers - runid: 6 - yield 0"`
--   `"fetchUsers - runid: 6 - yield 1"`
-
-The `runId` represents the generator instance. In other words, if `fetchUsers` is invoked multiple times concurrently, the events with the same `runid` belong together.
-The `yield` number indicates the progress of the generator. `init` indicates spawning (it won't do anything, but you can find the original arguments of the `asyncAction` here).
-`yield 0` ... `yield n` indicates the code block that is now being executed. `yield 0` is before the first `yield`, `yield 1` after the first one etc. Note that yield numbers are not determined lexically but by the runtime flow.
-
-`asyncActions` requires `Promise` and `generators` to be available on the target environment. Polyfill `Promise` if needed. Both TypeScript and Babel can compile generator functions down to ES5.
-
- N.B. due to a [babel limitation](https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy/issues/26), in Babel generatos cannot be combined with decorators. See also [#70](https://github.com/mobxjs/mobx-utils/issues/70)
-
-### Parameters
-
--   `arg1`  
--   `arg2`  
-
-### Examples
-
-```javascript
-import {asyncAction} from "mobx-utils"
-
-let users = []
-
-const fetchUsers = asyncAction("fetchUsers", function* (url) {
-  const start = Date.now()
-  const data = yield window.fetch(url)
-  users = yield data.json()
-  return start - Date.now()
-})
-
-fetchUsers("http://users.com").then(time => {
-  console.dir("Got users", users, "in ", time, "ms")
-})
-```
-
-```javascript
-import {asyncAction} from "mobx-utils"
-
-mobx.configure({ enforceActions: "observed" }) // don't allow state modifications outside actions
-
-class Store {
-	@observable githubProjects = []
-	@observable = "pending" // "pending" / "done" / "error"
-
-	@asyncAction
-	*fetchProjects() { // <- note the star, this a generator function!
-		this.githubProjects = []
-		this.state = "pending"
-		try {
-			const projects = yield fetchGithubProjectsSomehow() // yield instead of await
-			const filteredProjects = somePreprocessing(projects)
-			// the asynchronous blocks will automatically be wrapped actions
-			this.state = "done"
-			this.githubProjects = filteredProjects
-		} catch (error) {
-			this.state = "error"
-		}
-	}
-}
-```
-
-Returns **[Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)** 
-
-## whenAsync
-
-_deprecated_ whenAsync is deprecated, use mobx.when without effect instead.
-
-Like normal `when`, except that this `when` will return a promise that resolves when the expression becomes truthy
-
-### Parameters
-
--   `fn`  
--   `timeout` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** maximum amount of time to wait, before the promise rejects
-
-### Examples
-
-```javascript
-await whenAsync(() => !state.someBoolean)
-```
-
-Returns **any** Promise for when an observable eventually matches some condition. Rejects if timeout is provided and has expired
-
 ## expr
@@ -738,2 +596,5 @@
 
+NB: ObservableGroupMap relies on `Symbol`s. If you are targeting a platform which doesn't
+support these natively, you will need to provide a polyfill.
+
 ### Parameters
@@ -811,72 +672,1 @@
 ## DeepMap
-
-## actionAsync
-
-Alternative syntax for async actions, similar to `flow` but more compatible with
-Typescript typings. Not to be confused with `asyncAction`, which is deprecated.
-
-`actionAsync` can be used either as a decorator or as a function.
-It takes an async function that internally must use `await task(promise)` rather than
-the standard `await promise`.
-
-When using the mobx devTools, an asyncAction will emit `action` events with names like:
-
--   `"fetchUsers - runid 6 - step 0"`
--   `"fetchUsers - runid 6 - step 1"`
--   `"fetchUsers - runid 6 - step 2"`
-
-The `runId` represents the action instance. In other words, if `fetchUsers` is invoked
-multiple times concurrently, the events with the same `runid` belong together.
-The `step` number indicates the code block that is now being executed.
-
-### Parameters
-
--   `arg1`  
--   `arg2`  
--   `arg3`  
-
-### Examples
-
-```javascript
-import {actionAsync, task} from "mobx-utils"
-
-let users = []
-
-const fetchUsers = actionAsync("fetchUsers", async (url) => {
-  const start = Date.now()
-  // note the use of task when awaiting!
-  const data = await task(window.fetch(url))
-  users = await task(data.json())
-  return start - Date.now()
-})
-
-const time = await fetchUsers("http://users.com")
-console.log("Got users", users, "in ", time, "ms")
-```
-
-```javascript
-import {actionAsync, task} from "mobx-utils"
-
-mobx.configure({ enforceActions: "observed" }) // don't allow state modifications outside actions
-
-class Store {
-  @observable githubProjects = []
-  @observable = "pending" // "pending" / "done" / "error"
-
-  @actionAsync
-  async fetchProjects() {
-    this.githubProjects = []
-    this.state = "pending"
-    try {
-      // note the use of task when awaiting!
-      const projects = await task(fetchGithubProjectsSomehow())
-      const filteredProjects = somePreprocessing(projects)
-      // the asynchronous blocks will automatically be wrapped actions
-      this.state = "done"
-      this.githubProjects = filteredProjects
-    } catch (error) {
-       this.state = "error"
-    }
-  }
-}
-```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

3

decreased by-25%

Worsened metrics

Total package byte prevSize

249624

decreased by-25.26%

Number of package files

44

decreased by-15.38%

Lines of code

5094

decreased by-23.16%

Number of low quality alerts

2

increased by100%

Number of lines in readme file

668

decreased by-23.92%

No dependency changes