@legendapp/state 0.11.0-next.4 → 0.11.1

package/react.js

@@ -5,39 +5,55 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 var state = require('@legendapp/state');
 
-function listenWhileCalling(fn, listeners, updateFn) {
+function useForceRender() {
+    const [, forceRender] = react.useReducer((s) => s + 1, 0);
+    return react.useCallback(() => forceRender(), []);
+}
+
+function useObserver(fn, updateFn) {
     var _a;
     // Cache previous tracking nodes since this might be nested from another observing component
     const trackingPrev = state.tracking.nodes;
     // Reset tracking nodes
     state.tracking.nodes = new Map();
+    let nodes;
+    // Create the listener effect before calling fn so that it gets called before
+    // effects in the component
+    react.useEffect(() => {
+        const listeners = [];
+        // Listen to tracked nodes
+        for (let tracked of nodes) {
+            const { node, shallow } = tracked[1];
+            listeners.push(shallow ? state.onChangeShallow(node, updateFn) : state.onChange(node, updateFn));
+        }
+        // Cleanup listeners
+        return () => {
+            for (let i = 0; i < listeners.length; i++) {
+                listeners[i]();
+            }
+        };
+    });
     // Calling the function fills up the tracking nodes
     const ret = fn();
-    const nodes = state.tracking.nodes;
-    // Restore previous tracking nodes
-    state.tracking.nodes = trackingPrev;
-    // Listen to any nodes not already listened
-    for (let tracked of nodes) {
-        const { node, shallow } = tracked[1];
-        // Listen to this path if not already listening
-        if (!((_a = node.listeners) === null || _a === void 0 ? void 0 : _a.has(updateFn))) {
-            listeners.add(shallow ? state.onChangeShallow(node, updateFn) : state.onChange(node, updateFn));
+    nodes = state.tracking.nodes;
+    // Do tracing if it was requested
+    if (process.env.NODE_ENV === 'development') {
+        (_a = state.tracking.listeners) === null || _a === void 0 ? void 0 : _a.call(state.tracking, nodes);
+        if (state.tracking.updates) {
+            updateFn = state.tracking.updates(updateFn);
         }
     }
+    // Restore previous tracking nodes
+    state.tracking.nodes = trackingPrev;
     return ret;
 }
 
-function useForceRender() {
-    const [, forceRender] = react.useReducer((s) => s + 1, 0);
-    return () => forceRender();
-}
-
 const hasSymbol = typeof Symbol === 'function' && Symbol.for;
 // Extracting the forwardRef inspired by https://github.com/mobxjs/mobx/blob/main/packages/mobx-react-lite/src/observer.ts
 const ReactForwardRefSymbol = hasSymbol
     ? Symbol.for('react.forward_ref')
     : typeof react.forwardRef === 'function' && react.forwardRef((props) => null)['$$typeof'];
-function observer(component) {
+function observer(component, propsAreEqual) {
     // Unwrap forwardRef on the component
     let useForwardRef;
     if (ReactForwardRefSymbol && component['$$typeof'] === ReactForwardRefSymbol) {
@@ -50,14 +66,9 @@ function observer(component) {
     const componentName = component.displayName || component.name;
     // Create a wrapper observer component
     let observer = function (props, ref) {
-        const refListeners = react.useRef();
-        if (!refListeners.current)
-            refListeners.current = new Set();
         const forceRender = useForceRender();
-        // Clean up listeners on the way out
-        react.useEffect(() => () => refListeners.current.forEach((dispose) => dispose()), []);
         // Set up all the listeners while rendering the component
-        return listenWhileCalling(() => component(props, ref), refListeners.current, forceRender);
+        return useObserver(() => component(props, ref), forceRender);
     };
     if (componentName !== '') {
         observer.displayName = componentName;
@@ -66,13 +77,10 @@ function observer(component) {
     if (useForwardRef) {
         observer = react.forwardRef(observer);
     }
-    return react.memo(observer);
+    return react.memo(observer, propsAreEqual);
 }
 
 function useComputed(selector, deps) {
-    const ref = react.useRef();
-    if (!ref.current)
-        ref.current = new Set();
     // Do all the computed magic inside a useMemo so we can get an initial value
     const initial = react.useMemo(() => {
         let prevValue;
@@ -85,12 +93,10 @@ function useComputed(selector, deps) {
             }
         };
         // Set up all the listeners while computing the value
-        prevValue = listenWhileCalling(selector, ref.current, onChange);
+        prevValue = useObserver(selector, onChange);
         return prevValue;
     }, deps || []);
     const [value, setValue] = react.useState(initial);
-    // Clean up listeners on the way out
-    react.useEffect(() => () => ref.current.forEach((dispose) => dispose()), []);
     return value;
 }
 
@@ -106,6 +112,33 @@ function useObservable(initialValue) {
     return react.useMemo(() => state.observable(state.isFunction(initialValue) ? initialValue() : initialValue), []); // eslint-disable-line react-hooks/exhaustive-deps
 }
 
+const symbolIsObservable = Symbol('isObservable');
+
+function isObservable(obs) {
+    return obs && !!obs[symbolIsObservable];
+}
+
+const Isolate = observer(function Isolate({ children, }) {
+    return children();
+});
+const Memo = observer(function Memo({ children }) {
+    return children();
+}, () => true);
+const Show = observer(function Show({ if: if_, else: else_, children, memo, }) {
+    if_ = if_();
+    if (isObservable(if_)) {
+        if_ = if_.observe(true);
+    }
+    return if_
+        ? (memo ? react.useMemo(() => children, []) : children)()
+        : else_
+            ? else_()
+            : null;
+});
+
+exports.Isolate = Isolate;
+exports.Memo = Memo;
+exports.Show = Show;
 exports.observer = observer;
 exports.useComputed = useComputed;
 exports.useObservable = useObservable;

package/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sources":["../../src/react/listenWhileCalling.ts","../../src/react/useForceRender.ts","../../src/react/observer.ts","../../src/react/useComputed.ts","../../src/react/useObservable.ts"],"sourcesContent":[null,null,null,null,null],"names":["tracking","onChangeShallow","onChange","useReducer","forwardRef","useRef","useEffect","memo","useMemo","useState","observable","isFunction"],"mappings":"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"}
+{"version":3,"file":"react.js","sources":["../../src/react/useForceRender.ts","../../src/react/useObserver.ts","../../src/react/observer.ts","../../src/react/useComputed.ts","../../src/react/useObservable.ts","../../src/globals.ts","../../src/helpers.ts","../../src/react/Isolate.tsx"],"sourcesContent":[null,null,null,null,null,null,null,null],"names":["useReducer","useCallback","tracking","useEffect","onChangeShallow","onChange","forwardRef","memo","useMemo","useState","observable","isFunction"],"mappings":"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"}

package/react.mjs

@@ -1,39 +1,55 @@
-import { useReducer, forwardRef, memo, useRef, useEffect, useMemo, useState } from 'react';
+import { useReducer, useCallback, useEffect, forwardRef, memo, useMemo, useState } from 'react';
 import { tracking, onChangeShallow, onChange, observable, isFunction } from '@legendapp/state';
 
-function listenWhileCalling(fn, listeners, updateFn) {
+function useForceRender() {
+    const [, forceRender] = useReducer((s) => s + 1, 0);
+    return useCallback(() => forceRender(), []);
+}
+
+function useObserver(fn, updateFn) {
     var _a;
     // Cache previous tracking nodes since this might be nested from another observing component
     const trackingPrev = tracking.nodes;
     // Reset tracking nodes
     tracking.nodes = new Map();
+    let nodes;
+    // Create the listener effect before calling fn so that it gets called before
+    // effects in the component
+    useEffect(() => {
+        const listeners = [];
+        // Listen to tracked nodes
+        for (let tracked of nodes) {
+            const { node, shallow } = tracked[1];
+            listeners.push(shallow ? onChangeShallow(node, updateFn) : onChange(node, updateFn));
+        }
+        // Cleanup listeners
+        return () => {
+            for (let i = 0; i < listeners.length; i++) {
+                listeners[i]();
+            }
+        };
+    });
     // Calling the function fills up the tracking nodes
     const ret = fn();
-    const nodes = tracking.nodes;
-    // Restore previous tracking nodes
-    tracking.nodes = trackingPrev;
-    // Listen to any nodes not already listened
-    for (let tracked of nodes) {
-        const { node, shallow } = tracked[1];
-        // Listen to this path if not already listening
-        if (!((_a = node.listeners) === null || _a === void 0 ? void 0 : _a.has(updateFn))) {
-            listeners.add(shallow ? onChangeShallow(node, updateFn) : onChange(node, updateFn));
+    nodes = tracking.nodes;
+    // Do tracing if it was requested
+    if (process.env.NODE_ENV === 'development') {
+        (_a = tracking.listeners) === null || _a === void 0 ? void 0 : _a.call(tracking, nodes);
+        if (tracking.updates) {
+            updateFn = tracking.updates(updateFn);
         }
     }
+    // Restore previous tracking nodes
+    tracking.nodes = trackingPrev;
     return ret;
 }
 
-function useForceRender() {
-    const [, forceRender] = useReducer((s) => s + 1, 0);
-    return () => forceRender();
-}
-
 const hasSymbol = typeof Symbol === 'function' && Symbol.for;
 // Extracting the forwardRef inspired by https://github.com/mobxjs/mobx/blob/main/packages/mobx-react-lite/src/observer.ts
 const ReactForwardRefSymbol = hasSymbol
     ? Symbol.for('react.forward_ref')
     : typeof forwardRef === 'function' && forwardRef((props) => null)['$$typeof'];
-function observer(component) {
+function observer(component, propsAreEqual) {
     // Unwrap forwardRef on the component
     let useForwardRef;
     if (ReactForwardRefSymbol && component['$$typeof'] === ReactForwardRefSymbol) {
@@ -46,14 +62,9 @@ function observer(component) {
     const componentName = component.displayName || component.name;
     // Create a wrapper observer component
     let observer = function (props, ref) {
-        const refListeners = useRef();
-        if (!refListeners.current)
-            refListeners.current = new Set();
         const forceRender = useForceRender();
-        // Clean up listeners on the way out
-        useEffect(() => () => refListeners.current.forEach((dispose) => dispose()), []);
         // Set up all the listeners while rendering the component
-        return listenWhileCalling(() => component(props, ref), refListeners.current, forceRender);
+        return useObserver(() => component(props, ref), forceRender);
     };
     if (componentName !== '') {
         observer.displayName = componentName;
@@ -62,13 +73,10 @@ function observer(component) {
     if (useForwardRef) {
         observer = forwardRef(observer);
     }
-    return memo(observer);
+    return memo(observer, propsAreEqual);
 }
 
 function useComputed(selector, deps) {
-    const ref = useRef();
-    if (!ref.current)
-        ref.current = new Set();
     // Do all the computed magic inside a useMemo so we can get an initial value
     const initial = useMemo(() => {
         let prevValue;
@@ -81,12 +89,10 @@ function useComputed(selector, deps) {
             }
         };
         // Set up all the listeners while computing the value
-        prevValue = listenWhileCalling(selector, ref.current, onChange);
+        prevValue = useObserver(selector, onChange);
         return prevValue;
     }, deps || []);
     const [value, setValue] = useState(initial);
-    // Clean up listeners on the way out
-    useEffect(() => () => ref.current.forEach((dispose) => dispose()), []);
     return value;
 }
 
@@ -102,5 +108,29 @@ function useObservable(initialValue) {
     return useMemo(() => observable(isFunction(initialValue) ? initialValue() : initialValue), []); // eslint-disable-line react-hooks/exhaustive-deps
 }
 
-export { observer, useComputed, useObservable };
+const symbolIsObservable = Symbol('isObservable');
+
+function isObservable(obs) {
+    return obs && !!obs[symbolIsObservable];
+}
+
+const Isolate = observer(function Isolate({ children, }) {
+    return children();
+});
+const Memo = observer(function Memo({ children }) {
+    return children();
+}, () => true);
+const Show = observer(function Show({ if: if_, else: else_, children, memo, }) {
+    if_ = if_();
+    if (isObservable(if_)) {
+        if_ = if_.observe(true);
+    }
+    return if_
+        ? (memo ? useMemo(() => children, []) : children)()
+        : else_
+            ? else_()
+            : null;
+});
+
+export { Isolate, Memo, Show, observer, useComputed, useObservable };
 //# sourceMappingURL=react.mjs.map

package/react.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"react.mjs","sources":["../../src/react/listenWhileCalling.ts","../../src/react/useForceRender.ts","../../src/react/observer.ts","../../src/react/useComputed.ts","../../src/react/useObservable.ts"],"sourcesContent":[null,null,null,null,null],"names":[],"mappings":"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"}
+{"version":3,"file":"react.mjs","sources":["../../src/react/useForceRender.ts","../../src/react/useObserver.ts","../../src/react/observer.ts","../../src/react/useComputed.ts","../../src/react/useObservable.ts","../../src/globals.ts","../../src/helpers.ts","../../src/react/Isolate.tsx"],"sourcesContent":[null,null,null,null,null,null,null,null],"names":[],"mappings":"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"}

package/src/babel/index.d.ts

@@ -0,0 +1,11 @@
+export default function (): {
+    visitor: {
+        Program(path: any): void;
+        ImportDeclaration: {
+            enter(path: any): void;
+        };
+        JSXElement: {
+            enter(path: any): void;
+        };
+    };
+};

package/src/globals.d.ts

@@ -4,6 +4,7 @@ export declare const symbolIsObservable: unique symbol;
 export declare const nextNodeID: {
     current: number;
 };
+export declare function getOutputValue(node: NodeValue): any;
 export declare function get(node: NodeValue): any;
 export declare function observe(node: NodeValue, shallow?: boolean): any;
 export declare function getNodeValue(node: NodeValue): any;

package/src/observableBatcher.d.ts

@@ -1,4 +1,4 @@
-import { ListenerFn } from './observableInterfaces';
+import { ListenerFn, NodeValue } from './observableInterfaces';
 interface BatchItem {
     cb: ListenerFn<any>;
     value: any;
@@ -6,6 +6,7 @@ interface BatchItem {
     path: (string | number)[];
     valueAtPath: any;
     prevAtPath: any;
+    node: NodeValue;
 }
 export declare function observableBatcherNotify(b: BatchItem): void;
 export declare namespace observableBatcher {

package/src/observableInterfaces.d.ts

@@ -1,6 +1,8 @@
 export declare type ObservableEventType = 'change' | 'changeShallow' | 'equals' | 'hasValue' | 'true';
 export interface ObservableBaseFns<T> {
     get(): T;
+    ref(): ObservableChild<T>;
+    observe(): T;
     onChange(cb: ListenerFn<T>): ObservableListenerDispose;
     onChangeShallow(cb: ListenerFn<T>): ObservableListenerDispose;
     onEquals(value: T, cb?: (value?: T) => void): OnReturnValue<T>;
@@ -8,14 +10,13 @@ export interface ObservableBaseFns<T> {
     onHasValue(cb?: (value?: T) => void): OnReturnValue<T>;
 }
 export interface ObservablePrimitiveFns<T> extends ObservableBaseFns<T> {
-    set(value: T): ObservableChild<T>;
-    obs(): ObservablePrimitiveFns<T>;
+    set(value: T | ((prev: T) => T)): ObservableChild<T>;
 }
-export interface ObservableFns<T> extends Omit<ObservablePrimitiveFns<T>, 'obs'> {
+export interface ObservableFns<T> extends ObservablePrimitiveFns<T> {
     observe(shallow?: boolean): T;
-    obs<K extends keyof T>(prop: K): ObservableChild<T[K]>;
-    set(value: T): ObservableChild<T>;
-    set<K extends keyof T>(key: K, value: T[K]): ObservableChild<T[K]>;
+    prop<K extends keyof T>(prop: K): ObservableObject<T[K]>;
+    set(value: T | ((prev: T) => T)): ObservableChild<T>;
+    set<K extends keyof T>(key: K, prev: T[K] | ((prev: T[K]) => T[K])): ObservableChild<T[K]>;
     set<V>(key: string | number, value: V): ObservableChild<V>;
     assign(value: T | Partial<T>): ObservableChild<T>;
     delete(): ObservableChild<T>;
@@ -23,6 +24,7 @@ export interface ObservableFns<T> extends Omit<ObservablePrimitiveFns<T>, 'obs'>
 }
 export interface ObservableComputedFns<T> {
     get(): T;
+    observe(shallow?: boolean): T;
     onChange(cb: ListenerFn<T>): ObservableListenerDispose;
     onEquals(value: T, cb?: (value?: T) => void): OnReturnValue<T>;
     onTrue(cb?: (value?: T) => void): OnReturnValue<T>;
@@ -43,7 +45,7 @@ export interface ObservableArrayOverride<T> extends Omit<Array<T>, ArrayOverride
      */
     map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];
 }
-export declare type ListenerFn<T = any> = (value: T, getPrevious: () => T, path: (string | number)[], valueAtPath: any, prevAtPath: any) => void;
+export declare type ListenerFn<T = any> = (value: T, getPrevious: () => T, path: (string | number)[], valueAtPath: any, prevAtPath: any, node: NodeValue) => void;
 export declare type ListenerFnSaved<T = any> = {
     shallow?: boolean;
 } & ListenerFn<T>;
@@ -55,6 +57,7 @@ export interface ObservableEvent {
     dispatch(): void;
     on(cb?: () => void): ObservableListenerDispose;
     on(eventType: 'change', cb?: () => void): ObservableListenerDispose;
+    observe(): void;
 }
 export declare type QueryByModified<T> = boolean | '*' | {
     '*': '*' | true;
@@ -171,5 +174,6 @@ export interface NodeValue {
 export interface TrackingNode {
     node: NodeValue;
     shallow?: boolean;
+    manual?: boolean;
 }
 export {};

package/src/react/Isolate.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement, ReactNode } from 'react';
+export declare const Isolate: ({ children, }: {
+    children: ReactNode | (() => ReactNode);
+}) => ReactElement;
+export declare const Memo: ({ children }: {
+    children: ReactNode | (() => ReactNode);
+}) => ReactElement;
+export declare const Show: ({ if: if_, else: else_, children, memo, }: {
+    if: any;
+    else?: any;
+    memo?: boolean;
+    children: ReactNode | (() => ReactNode);
+}) => ReactElement;

package/src/react/observer.d.ts

@@ -1,2 +1,2 @@
-import { FC } from 'react';
-export declare function observer<T extends FC<any>>(component: T): T;
+import { ComponentProps, FC } from 'react';
+export declare function observer<T extends FC<any>>(component: T, propsAreEqual?: (prevProps: Readonly<ComponentProps<T>>, nextProps: Readonly<ComponentProps<T>>) => boolean): T;

package/src/react/useObserver.d.ts

@@ -0,0 +1 @@
+export declare function useObserver<T>(fn: () => T, updateFn: () => void): T;

package/src/trace/traceHelpers.d.ts

@@ -0,0 +1,2 @@
+import { NodeValue } from '@legendapp/state';
+export declare function getNodePath(node: NodeValue): string;

package/src/trace/traceListeners.d.ts

@@ -0,0 +1 @@
+export declare function traceListeners(name?: string): void;

package/src/trace/traceUpdates.d.ts

@@ -0,0 +1 @@
+export declare function traceUpdates(name?: string): void;

package/src/tracking.d.ts

@@ -0,0 +1,8 @@
+import type { NodeValue, TrackingNode } from './observableInterfaces';
+export declare const tracking: {
+    nodes: Map<number, TrackingNode>;
+    listeners: (nodes: Map<number, TrackingNode>) => void;
+    updates: (fn: () => void) => () => void;
+};
+export declare function updateTracking(node: NodeValue, parent?: NodeValue, shallow?: boolean, manual?: boolean): void;
+export declare function untrack(node: NodeValue): void;

package/trace.d.ts

@@ -0,0 +1,2 @@
+export * from './src/trace/traceListeners';
+export * from './src/trace/traceUpdates';

package/trace.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var state = require('@legendapp/state');
+
+function getNodePath(node) {
+    const arr = [];
+    let n = node;
+    while ((n === null || n === void 0 ? void 0 : n.key) !== undefined) {
+        arr.splice(0, 0, n.key);
+        n = n.parent;
+    }
+    return arr.join('.');
+}
+
+function traceListeners(name) {
+    state.tracking.listeners = traceNodes.bind(this, name);
+}
+function traceNodes(name, nodes) {
+    state.tracking.listeners = undefined;
+    const arr = [];
+    for (let tracked of nodes) {
+        const { node, shallow } = tracked[1];
+        arr.push(`${arr.length + 1}: ${getNodePath(node)}${shallow ? ' (shallow)' : ''}`);
+    }
+    console.log(`[legend-state] ${name ? name + ' ' : ''}tracking ${arr.length} observable${arr.length > 1 ? 's' : ''}:\n${arr.join('\n')}`);
+}
+
+function traceUpdates(name) {
+    state.tracking.updates = replaceUpdateFn.bind(this, name);
+}
+function replaceUpdateFn(name, updateFn) {
+    return onChange.bind(this, name, updateFn);
+}
+function onChange(name, updateFn, value, getPrevious, path, valueAtPath, prevAtPath, node) {
+    console.log(`[legend-state] Rendering ${name ? name + ' ' : ''}because "${getNodePath(node)}" changed:
+from: ${JSON.stringify(getPrevious())}
+to: ${JSON.stringify(value)}`);
+    updateFn();
+}
+
+exports.traceListeners = traceListeners;
+exports.traceUpdates = traceUpdates;
+//# sourceMappingURL=trace.js.map

package/trace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"trace.js","sources":["../../src/trace/traceHelpers.ts","../../src/trace/traceListeners.ts","../../src/trace/traceUpdates.ts"],"sourcesContent":[null,null,null],"names":["tracking"],"mappings":";;;;;;AAEM,SAAU,WAAW,CAAC,IAAe,EAAA;IACvC,MAAM,GAAG,GAAwB,EAAE,CAAC;IACpC,IAAI,CAAC,GAAG,IAAI,CAAC;IACb,OAAO,CAAA,CAAC,KAAA,IAAA,IAAD,CAAC,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAD,CAAC,CAAE,GAAG,MAAK,SAAS,EAAE;QACzB,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;AACxB,QAAA,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC;AAChB,KAAA;AACD,IAAA,OAAO,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACzB;;ACPM,SAAU,cAAc,CAAC,IAAa,EAAA;IACxCA,cAAQ,CAAC,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AACrD,CAAC;AAED,SAAS,UAAU,CAAC,IAAY,EAAE,KAAgC,EAAA;AAC9D,IAAAA,cAAQ,CAAC,SAAS,GAAG,SAAS,CAAC;IAC/B,MAAM,GAAG,GAAa,EAAE,CAAC;AACzB,IAAA,KAAK,IAAI,OAAO,IAAI,KAAK,EAAE;QACvB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;QACrC,GAAG,CAAC,IAAI,CAAC,CAAG,EAAA,GAAG,CAAC,MAAM,GAAG,CAAC,CAAK,EAAA,EAAA,WAAW,CAAC,IAAI,CAAC,CAAG,EAAA,OAAO,GAAG,YAAY,GAAG,EAAE,CAAE,CAAA,CAAC,CAAC;AACrF,KAAA;AAED,IAAA,OAAO,CAAC,GAAG,CACP,kBAAkB,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,EAAE,YAAY,GAAG,CAAC,MAAM,CAC1D,WAAA,EAAA,GAAG,CAAC,MAAM,GAAG,CAAC,GAAG,GAAG,GAAG,EAC3B,CAAM,GAAA,EAAA,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA,CAAE,CACzB,CAAC;AACN;;ACjBM,SAAU,YAAY,CAAC,IAAa,EAAA;IACtCA,cAAQ,CAAC,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AACxD,CAAC;AAED,SAAS,eAAe,CAAC,IAAY,EAAE,QAAoB,EAAA;IACvD,OAAO,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;AAC/C,CAAC;AAED,SAAS,QAAQ,CACb,IAAY,EACZ,QAAoB,EACpB,KAAU,EACV,WAAsB,EACtB,IAAyB,EACzB,WAAgB,EAChB,UAAe,EACf,IAAe,EAAA;AAEf,IAAA,OAAO,CAAC,GAAG,CAAC,4BAA4B,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,EAAE,YAAY,WAAW,CAAC,IAAI,CAAC,CAAA;AACvF,MAAA,EAAA,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC,CAAA;AAC/B,IAAA,EAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA,CAAE,CAAC,CAAC;AAC3B,IAAA,QAAQ,EAAE,CAAC;AACf;;;;;"}

package/trace.mjs

@@ -0,0 +1,40 @@
+import { tracking } from '@legendapp/state';
+
+function getNodePath(node) {
+    const arr = [];
+    let n = node;
+    while ((n === null || n === void 0 ? void 0 : n.key) !== undefined) {
+        arr.splice(0, 0, n.key);
+        n = n.parent;
+    }
+    return arr.join('.');
+}
+
+function traceListeners(name) {
+    tracking.listeners = traceNodes.bind(this, name);
+}
+function traceNodes(name, nodes) {
+    tracking.listeners = undefined;
+    const arr = [];
+    for (let tracked of nodes) {
+        const { node, shallow } = tracked[1];
+        arr.push(`${arr.length + 1}: ${getNodePath(node)}${shallow ? ' (shallow)' : ''}`);
+    }
+    console.log(`[legend-state] ${name ? name + ' ' : ''}tracking ${arr.length} observable${arr.length > 1 ? 's' : ''}:\n${arr.join('\n')}`);
+}
+
+function traceUpdates(name) {
+    tracking.updates = replaceUpdateFn.bind(this, name);
+}
+function replaceUpdateFn(name, updateFn) {
+    return onChange.bind(this, name, updateFn);
+}
+function onChange(name, updateFn, value, getPrevious, path, valueAtPath, prevAtPath, node) {
+    console.log(`[legend-state] Rendering ${name ? name + ' ' : ''}because "${getNodePath(node)}" changed:
+from: ${JSON.stringify(getPrevious())}
+to: ${JSON.stringify(value)}`);
+    updateFn();
+}
+
+export { traceListeners, traceUpdates };
+//# sourceMappingURL=trace.mjs.map

package/trace.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"trace.mjs","sources":["../../src/trace/traceHelpers.ts","../../src/trace/traceListeners.ts","../../src/trace/traceUpdates.ts"],"sourcesContent":[null,null,null],"names":[],"mappings":";;AAEM,SAAU,WAAW,CAAC,IAAe,EAAA;IACvC,MAAM,GAAG,GAAwB,EAAE,CAAC;IACpC,IAAI,CAAC,GAAG,IAAI,CAAC;IACb,OAAO,CAAA,CAAC,KAAA,IAAA,IAAD,CAAC,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAD,CAAC,CAAE,GAAG,MAAK,SAAS,EAAE;QACzB,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;AACxB,QAAA,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC;AAChB,KAAA;AACD,IAAA,OAAO,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACzB;;ACPM,SAAU,cAAc,CAAC,IAAa,EAAA;IACxC,QAAQ,CAAC,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AACrD,CAAC;AAED,SAAS,UAAU,CAAC,IAAY,EAAE,KAAgC,EAAA;AAC9D,IAAA,QAAQ,CAAC,SAAS,GAAG,SAAS,CAAC;IAC/B,MAAM,GAAG,GAAa,EAAE,CAAC;AACzB,IAAA,KAAK,IAAI,OAAO,IAAI,KAAK,EAAE;QACvB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;QACrC,GAAG,CAAC,IAAI,CAAC,CAAG,EAAA,GAAG,CAAC,MAAM,GAAG,CAAC,CAAK,EAAA,EAAA,WAAW,CAAC,IAAI,CAAC,CAAG,EAAA,OAAO,GAAG,YAAY,GAAG,EAAE,CAAE,CAAA,CAAC,CAAC;AACrF,KAAA;AAED,IAAA,OAAO,CAAC,GAAG,CACP,kBAAkB,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,EAAE,YAAY,GAAG,CAAC,MAAM,CAC1D,WAAA,EAAA,GAAG,CAAC,MAAM,GAAG,CAAC,GAAG,GAAG,GAAG,EAC3B,CAAM,GAAA,EAAA,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA,CAAE,CACzB,CAAC;AACN;;ACjBM,SAAU,YAAY,CAAC,IAAa,EAAA;IACtC,QAAQ,CAAC,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AACxD,CAAC;AAED,SAAS,eAAe,CAAC,IAAY,EAAE,QAAoB,EAAA;IACvD,OAAO,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;AAC/C,CAAC;AAED,SAAS,QAAQ,CACb,IAAY,EACZ,QAAoB,EACpB,KAAU,EACV,WAAsB,EACtB,IAAyB,EACzB,WAAgB,EAChB,UAAe,EACf,IAAe,EAAA;AAEf,IAAA,OAAO,CAAC,GAAG,CAAC,4BAA4B,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,EAAE,YAAY,WAAW,CAAC,IAAI,CAAC,CAAA;AACvF,MAAA,EAAA,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC,CAAA;AAC/B,IAAA,EAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA,CAAE,CAAC,CAAC;AAC3B,IAAA,QAAQ,EAAE,CAAC;AACf;;;;"}

package/types.d.ts

@@ -0,0 +1,6 @@
+declare namespace React {
+    interface DOMAttributes<T> {
+        isolate?: boolean;
+        memo?: boolean;
+    }
+}

package/src/react/listenWhileCalling.d.ts

@@ -1,2 +0,0 @@
-import { ObservableListenerDispose } from '@legendapp/state';
-export declare function listenWhileCalling<T>(fn: () => T, listeners: Set<ObservableListenerDispose>, updateFn: () => void): T;

package/src/state.d.ts

@@ -1,5 +0,0 @@
-import type { NodeValue, TrackingNode } from './observableInterfaces';
-export declare const tracking: {
-    nodes: Map<number, TrackingNode>;
-};
-export declare function updateTracking(node: NodeValue, shallow?: boolean): void;