@plasmicapp/react-web 0.2.140 → 0.2.141

package/dist/states/graph.d.ts

@@ -6,12 +6,16 @@ export interface StateCell<T> {
     listeners: (() => void)[];
 }
 export declare class StateSpecNode<T> {
-    private specs;
-    private edges;
-    private state;
+    private _specs;
+    private _edges;
+    private _state;
     constructor(specs: Internal$StateSpec<T>[]);
+    setSpecs(specs: Internal$StateSpec<T>[]): void;
+    edges(): Map<string | symbol, StateSpecNode<any>>;
+    state(): Record<string, StateCell<T>>;
     hasEdge(key: string | symbol): boolean;
     addEdge(key: string | symbol, node: StateSpecNode<any>): void;
+    clearEdges(): void;
     children(): IterableIterator<StateSpecNode<any>>;
     makeTransition(key: string | symbol | number): StateSpecNode<any> | undefined;
     isLeaf(): boolean;
@@ -19,6 +23,7 @@ export declare class StateSpecNode<T> {
     getSpec(): Internal$StateSpec<T>;
     getAllSpecs(): Internal$StateSpec<T>[];
     getState(path: ObjectPath): StateCell<T>;
+    getInitFunc(stateCell: StateCell<any>): InitFunc<any> | undefined;
     clearStates(): void;
     states(): StateCell<T>[];
     hasState(path: ObjectPath): boolean;
@@ -29,7 +34,8 @@ export declare class StateSpecNode<T> {
 }
 export declare const transformPathStringToObj: (str: string) => (string | symbol)[];
 export declare function buildTree(specs: $StateSpec<any>[]): StateSpecNode<any>;
-export declare function getLeaves(root: StateSpecNode<any>): StateSpecNode<any>[];
+export declare function updateTree(root: StateSpecNode<any>, specs: $StateSpec<any>[]): StateSpecNode<any>;
+export declare function getStateCells(root: StateSpecNode<any>): StateSpecNode<any>[];
 export declare function findStateCell(root: StateSpecNode<any>, pathStr: string, repetitionIndex?: number[]): {
     node: StateSpecNode<any>;
     realPath: ObjectPath;

package/dist/states/helpers.d.ts

@@ -1,16 +1,14 @@
 import { useLayoutEffect } from "react";
-import { $State } from "./types";
-export declare function generateStateOnChangeProp($state: $State, stateName: string, dataReps: number[]): (val: any, path: (string | number)[]) => void;
-/**
- * This function generate the state value prop for repeated states
- * Example:
- *   - parent[][].counter[].count
- * We need to pass `parent[index1][index2].counter to the child component
- */
-export declare function generateStateValueProp($state: $State, path: (string | number)[]): any;
+import { $State, ObjectPath } from "./types";
+export declare function generateStateOnChangeProp($state: $State, path: ObjectPath): (val: any) => void;
+export declare function generateStateValueProp($state: $State, path: ObjectPath): any;
 export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
 export declare function isPlasmicStateProxy(obj: any): any;
 export declare function shallowEqual<T>(a1: T[], a2: T[]): boolean;
+/**
+ * Shallow comparison of arrays.
+ */
+export declare function arrayEq(xs: ReadonlyArray<any>, ys: ReadonlyArray<any>): boolean;
 export declare function isNum(value: string | number | symbol): value is number;
 declare type StringGen = string | (() => string);
 export declare function assert<T>(cond: T, msg?: StringGen): asserts cond;

package/dist/states/valtio.d.ts

@@ -1,3 +1,5 @@
 import { $State, $StateSpec } from "./types";
-export declare function useDollarState(specs: $StateSpec<any>[], props: Record<string, any>, $ctx?: Record<string, any>): $State;
+export declare function useDollarState(specs: $StateSpec<any>[], props: Record<string, any>, $ctx?: Record<string, any>, opts?: {
+    inCanvas: boolean;
+}): $State;
 export default useDollarState;

package/dist/stories/UseDollarState.stories.d.ts

@@ -43,6 +43,12 @@ export declare const InitFuncFromRootContextData: import("@storybook/csf").Annot
         name: string;
     }[];
 }>;
+export declare const InitFuncFromInternalContextDataWithDelay: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, {
+    products: {
+        price: number;
+        name: string;
+    }[];
+}>;
 export declare const RepeatedImplicitState: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, {}>;
 interface Person {
     firstName: string;
@@ -62,3 +68,4 @@ export declare const IsOnChangePropImmediatelyFired: import("@storybook/csf").An
 export declare const ImmutableStateCells: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, {
     people: Person[];
 }>;
+export declare const InCanvasDollarState: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, {}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/react-web",
-  "version": "0.2.140",
+  "version": "0.2.141",
   "description": "plasmic library for rendering in the presentational style",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -109,5 +109,5 @@
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "gitHead": "2ddf7320f54e314e4f44d3df3c50468d2740ddbf"
+  "gitHead": "412d7cef82888017b8a4fad4acc87e3e6be13562"
 }

package/skinny/dist/index.js

@@ -670,17 +670,10 @@ function useTrigger(trigger, opts) {
 var ARRAY_SYMBOL = Symbol("[]");
 var PLASMIC_STATE_PROXY_SYMBOL = Symbol("plasmic.state.proxy");
 
-function generateStateOnChangeProp($state, stateName, dataReps) {
-    return function (val, path) { return set($state, __spreadArray(__spreadArray([stateName], __read(dataReps), false), __read(path), false), val); };
+function generateStateOnChangeProp($state, path) {
+    return function (val) { return set($state, path, val); };
 }
-/**
- * This function generate the state value prop for repeated states
- * Example:
- *   - parent[][].counter[].count
- * We need to pass `parent[index1][index2].counter to the child component
- */
-function generateStateValueProp($state, path // ["parent", 0, 1, "counter"]
-) {
+function generateStateValueProp($state, path) {
     return get($state, path);
 }
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
@@ -698,6 +691,12 @@ function shallowEqual(a1, a2) {
     }
     return true;
 }
+/**
+ * Shallow comparison of arrays.
+ */
+function arrayEq(xs, ys) {
+    return (xs.length === ys.length && xs.every(function (_, index) { return xs[index] === ys[index]; }));
+}
 function isNum$1(value) {
     return typeof value === "symbol" ? false : !isNaN(+value);
 }
@@ -763,68 +762,83 @@ function assignValue(object, key, value) {
 var UNINITIALIZED = Symbol("plasmic.unitialized");
 var StateSpecNode = /** @class */ (function () {
     function StateSpecNode(specs) {
-        this.specs = specs;
-        this.edges = new Map();
-        this.state = {};
+        this._specs = specs;
+        this._edges = new Map();
+        this._state = {};
     }
+    StateSpecNode.prototype.setSpecs = function (specs) {
+        this._specs = specs;
+    };
+    StateSpecNode.prototype.edges = function () {
+        return this._edges;
+    };
+    StateSpecNode.prototype.state = function () {
+        return this._state;
+    };
     StateSpecNode.prototype.hasEdge = function (key) {
-        return this.edges.has(key);
+        return this._edges.has(key);
     };
     StateSpecNode.prototype.addEdge = function (key, node) {
-        this.edges.set(key, node);
+        this._edges.set(key, node);
+    };
+    StateSpecNode.prototype.clearEdges = function () {
+        this._edges = new Map();
     };
     StateSpecNode.prototype.children = function () {
-        return this.edges.values();
+        return this._edges.values();
     };
     StateSpecNode.prototype.makeTransition = function (key) {
         key = isNum$1(key) ? ARRAY_SYMBOL : key;
-        return this.edges.get(key);
+        return this._edges.get(key);
     };
     StateSpecNode.prototype.isLeaf = function () {
-        return this.edges.size === 0;
+        return this._edges.size === 0;
     };
     StateSpecNode.prototype.hasArrayTransition = function () {
-        return this.edges.has(ARRAY_SYMBOL);
+        return this._edges.has(ARRAY_SYMBOL);
     };
     StateSpecNode.prototype.getSpec = function () {
-        return this.specs[0];
+        return this._specs[0];
     };
     StateSpecNode.prototype.getAllSpecs = function () {
-        return this.specs;
+        return this._specs;
     };
     StateSpecNode.prototype.getState = function (path) {
-        return this.state[JSON.stringify(path)];
+        return this._state[JSON.stringify(path)];
+    };
+    StateSpecNode.prototype.getInitFunc = function (stateCell) {
+        var _a;
+        return (_a = stateCell.registeredInitFunc) !== null && _a !== void 0 ? _a : this.getSpec().initFunc;
     };
     StateSpecNode.prototype.clearStates = function () {
-        this.state = {};
+        this._state = {};
     };
     StateSpecNode.prototype.states = function () {
-        return Object.values(this.state);
+        return Object.values(this._state);
     };
     StateSpecNode.prototype.hasState = function (path) {
         var key = JSON.stringify(path);
-        return key in this.state;
+        return key in this._state;
     };
     StateSpecNode.prototype.createStateCell = function (path) {
         var key = JSON.stringify(path);
-        this.state[key] = {
+        this._state[key] = {
             listeners: [],
             initialValue: UNINITIALIZED,
-            registeredInitFunc: this.getSpec().initFunc,
             path: path
         };
     };
     StateSpecNode.prototype.setInitialValue = function (path, value) {
         var key = JSON.stringify(path);
-        this.state[key].initialValue = value;
+        this._state[key].initialValue = value;
     };
     StateSpecNode.prototype.getInitialValue = function (path) {
         var key = JSON.stringify(path);
-        return this.state[key].initialValue;
+        return this._state[key].initialValue;
     };
     StateSpecNode.prototype.addListener = function (path, f) {
         var key = JSON.stringify(path);
-        this.state[key].listeners.push(f);
+        this._state[key].listeners.push(f);
     };
     return StateSpecNode;
 }());
@@ -855,7 +869,31 @@ function buildTree(specs) {
     };
     return rec([]);
 }
-function getLeaves(root) {
+function updateTree(root, specs) {
+    var internalSpec = specs.map(function (spec) {
+        return (__assign(__assign({}, spec), { pathObj: transformPathStringToObj(spec.path), isRepeated: spec.path.split(".").some(function (part) { return part.endsWith("[]"); }) }));
+    });
+    var rec = function (oldNode, currentPath) {
+        var nodeSpecs = internalSpec.filter(function (spec) {
+            return shallowEqual(currentPath, spec.pathObj.slice(0, currentPath.length));
+        });
+        var node = oldNode !== null && oldNode !== void 0 ? oldNode : new StateSpecNode(nodeSpecs);
+        node.setSpecs(nodeSpecs);
+        var oldEdges = oldNode === null || oldNode === void 0 ? void 0 : oldNode.edges();
+        node.clearEdges();
+        node.getAllSpecs().forEach(function (spec) {
+            if (spec.pathObj.length > currentPath.length) {
+                var nextKey = spec.pathObj[currentPath.length];
+                if (!node.hasEdge(nextKey)) {
+                    node.addEdge(nextKey, rec(oldEdges === null || oldEdges === void 0 ? void 0 : oldEdges.get(nextKey), __spreadArray(__spreadArray([], __read(currentPath), false), [nextKey], false)));
+                }
+            }
+        });
+        return node;
+    };
+    return rec(root, []);
+}
+function getStateCells(root) {
     var leaves = [];
     var rec = function (node) {
         var e_1, _a;
@@ -872,7 +910,7 @@ function getLeaves(root) {
             }
             finally { if (e_1) throw e_1.error; }
         }
-        if (node.isLeaf()) {
+        if (node.isLeaf() && node.getAllSpecs().length > 0) {
             leaves.push(node);
         }
     };
@@ -891,7 +929,6 @@ function findStateCell(root, pathStr, repetitionIndex) {
                 if (!root.hasArrayTransition() ||
                     !repetitionIndex ||
                     currRepIndex > repetitionIndex.length) {
-                    console.log(root);
                     throw new Error("transition not found: pathStr ".concat(pathStr, " part ").concat(typeof part === "symbol" ? "[]" : part));
                 }
                 realPath.push(repetitionIndex[currRepIndex++]);
@@ -951,8 +988,7 @@ function initializeStateValue($$state, initialSpecNode, initialStatePath, proxyR
             set(proxyRoot, initialStatePath, newValue);
         });
     });
-    var initialValue = initialSpecNode.getState(initialStatePath)
-        .registeredInitFunc($$state.props, $state, $$state.ctx);
+    var initialValue = initialSpecNode.getInitFunc(initialSpecNode.getState(initialStatePath))($$state.props, $state, $$state.ctx);
     initialSpecNode.setInitialValue(initialStatePath, clone(initialValue));
     var initialSpec = initialSpecNode.getSpec();
     var value = initialSpec.isImmutable
@@ -966,7 +1002,8 @@ function initializeStateValue($$state, initialSpecNode, initialStatePath, proxyR
     return initialValue;
 }
 function create$StateProxy($$state, leafHandlers) {
-    var rec = function (currPath, currNode, isOutside, proxyRoot, initialObject) {
+    var proxyRoot;
+    var rec = function (currPath, currNode, isOutside, initialObject) {
         var getNextPath = function (property) { return __spreadArray(__spreadArray([], __read(currPath), false), [
             isNum(property) ? +property : property,
         ], false); };
@@ -985,7 +1022,7 @@ function create$StateProxy($$state, leafHandlers) {
                     //we are always in a leaf, since we only have two cases:
                     // 1 - delete properties outside the state tree
                     // 2 - delete indices in repeated implicit states, but these can't be exposed, so they don't have onChangeProp
-                    (_b = (_a = $$state.props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, get($$state.stateValues, currPath.slice(spec.pathObj.length)));
+                    (_b = (_a = $$state.props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, get(proxyRoot, currPath.slice(spec.pathObj.length)));
                 }
                 return Reflect.deleteProperty(target, property);
             },
@@ -994,23 +1031,21 @@ function create$StateProxy($$state, leafHandlers) {
                 if (property === PLASMIC_STATE_PROXY_SYMBOL) {
                     return true;
                 }
-                proxyRoot = proxyRoot == null ? receiver : proxyRoot;
                 var nextPath = getNextPath(property);
                 if (isOutside || currNode.isLeaf()) {
                     return Reflect.get(target, property, receiver);
                 }
                 var nextNode = currNode.makeTransition(property);
                 if (nextNode === null || nextNode === void 0 ? void 0 : nextNode.isLeaf()) {
-                    return (_b = (_a = leafHandlers(nextNode, nextPath, proxyRoot)).get) === null || _b === void 0 ? void 0 : _b.call(_a, target, property, receiver);
+                    return (_b = (_a = leafHandlers(nextNode, nextPath)).get) === null || _b === void 0 ? void 0 : _b.call(_a, target, property, receiver);
                 }
                 else if (nextNode && !(property in target)) {
-                    target[property] = rec(nextPath, nextNode, false, proxyRoot, undefined);
+                    target[property] = rec(nextPath, nextNode, false, undefined);
                 }
                 return Reflect.get(target, property, receiver);
             },
             set: function (target, property, value, receiver) {
                 var _a, _b;
-                proxyRoot = proxyRoot == null ? receiver : proxyRoot;
                 var nextPath = getNextPath(property);
                 var nextNode = currNode.makeTransition(property);
                 if (property === "registerInitFunc" && currPath.length === 0) {
@@ -1022,7 +1057,7 @@ function create$StateProxy($$state, leafHandlers) {
                     return Reflect.set(target, property, value, receiver);
                 }
                 if (nextNode === null || nextNode === void 0 ? void 0 : nextNode.isLeaf()) {
-                    (_b = (_a = leafHandlers(nextNode, nextPath, proxyRoot)).set) === null || _b === void 0 ? void 0 : _b.call(_a, target, property, value, receiver);
+                    (_b = (_a = leafHandlers(nextNode, nextPath)).set) === null || _b === void 0 ? void 0 : _b.call(_a, target, property, value, receiver);
                 }
                 if (!isOutside && !currNode.isLeaf() && !nextNode) {
                     // can't set an unknown field in $state
@@ -1034,7 +1069,7 @@ function create$StateProxy($$state, leafHandlers) {
                     nextNode = currNode;
                 }
                 if (canProxy(value)) {
-                    target[property] = rec(nextPath, nextNode, isOutside || currNode.isLeaf(), proxyRoot, value);
+                    target[property] = rec(nextPath, nextNode, isOutside || currNode.isLeaf(), value);
                 }
                 else if (!isOutside && !currNode.isLeaf() && !(nextNode === null || nextNode === void 0 ? void 0 : nextNode.isLeaf())) {
                     throw new Error("inserting a primitive value into a non-leaf");
@@ -1063,6 +1098,9 @@ function create$StateProxy($$state, leafHandlers) {
                 ? []
                 : Object.create(Object.getPrototypeOf(initialObject !== null && initialObject !== void 0 ? initialObject : {}));
         var proxyObj = new Proxy(baseObject, handlers);
+        if (currPath.length === 0) {
+            proxyRoot = proxyObj;
+        }
         if (initialObject) {
             Reflect.ownKeys(initialObject).forEach(function (key) {
                 var desc = Object.getOwnPropertyDescriptor(initialObject, key);
@@ -1076,67 +1114,100 @@ function create$StateProxy($$state, leafHandlers) {
         }
         return proxyObj;
     };
-    return rec([], $$state.rootSpecTree, false, undefined, undefined);
+    return rec([], $$state.rootSpecTree, false, undefined);
 }
 var mkUntrackedValue = function (o) {
     return o != null && typeof o === "object" ? ref(o) : o;
 };
-function useDollarState(specs, props, $ctx) {
+function useDollarState(specs, props, $ctx, opts) {
     var $$state = React__default.useRef((function () {
         var rootSpecTree = buildTree(specs);
         return {
             rootSpecTree: rootSpecTree,
-            specTreeLeaves: getLeaves(rootSpecTree),
+            specTreeLeaves: getStateCells(rootSpecTree),
             stateValues: proxy({}),
             props: {},
             ctx: {},
-            registrationsQueue: []
+            specs: [],
+            registrationsQueue: proxy([])
         };
     })()).current;
     $$state.props = props;
     $$state.ctx = $ctx !== null && $ctx !== void 0 ? $ctx : {};
-    var $state = React__default.useRef(Object.assign(create$StateProxy($$state, function (node, path, proxyRoot) {
-        if (!node.hasState(path)) {
-            node.createStateCell(path);
-            var spec = node.getSpec();
-            if (spec.initFunc) {
-                initializeStateValue($$state, node, path, proxyRoot);
-            }
-            else if (!spec.valueProp) {
-                set(proxyRoot, path, spec.initVal);
-            }
-        }
-        return {
-            get: function (target, property, receiver) {
+    $$state.specs = specs;
+    var create$State = function () {
+        var $state = Object.assign(create$StateProxy($$state, function (node, path) {
+            if (!node.hasState(path)) {
+                node.createStateCell(path);
                 var spec = node.getSpec();
-                if (spec.valueProp) {
-                    return $$state.props[spec.valueProp];
+                if (spec.initFunc) {
+                    initializeStateValue($$state, node, path, $state);
                 }
-                else {
-                    return Reflect.get(target, property, receiver);
+                else if (!spec.valueProp) {
+                    set($state, path, spec.initVal);
                 }
             }
-        };
-    }), {
-        registerInitFunc: function (pathStr, f, repetitionIndex) {
-            var _a = findStateCell($$state.rootSpecTree, pathStr, repetitionIndex), node = _a.node, realPath = _a.realPath;
-            if (!node.hasState(realPath)) {
-                node.createStateCell(realPath);
-            }
-            if (!deepEqual(node.getState(realPath).initialValue, f($$state.props, $state, $$state.ctx))) {
-                $$state.registrationsQueue.push({ node: node, path: realPath, f: f });
+            return {
+                get: function (target, property, receiver) {
+                    var spec = node.getSpec();
+                    if (spec.valueProp) {
+                        return $$state.props[spec.valueProp];
+                    }
+                    else {
+                        return Reflect.get(target, property, receiver);
+                    }
+                }
+            };
+        }), {
+            registerInitFunc: function (pathStr, f, repetitionIndex) {
+                var _a = findStateCell($$state.rootSpecTree, pathStr, repetitionIndex), node = _a.node, realPath = _a.realPath;
+                if (!node.hasState(realPath)) {
+                    node.createStateCell(realPath);
+                }
+                if (!deepEqual(node.getState(realPath).initialValue, f($$state.props, $state, $$state.ctx))) {
+                    $$state.registrationsQueue.push(mkUntrackedValue({ node: node, path: realPath, f: f }));
+                }
             }
+        });
+        return $state;
+    };
+    var ref = React__default.useRef(undefined);
+    if (!ref.current) {
+        ref.current = create$State();
+    }
+    var $state = ref.current;
+    if (opts === null || opts === void 0 ? void 0 : opts.inCanvas) {
+        $$state.rootSpecTree = updateTree($$state.rootSpecTree, specs);
+        var newLeaves = getStateCells($$state.rootSpecTree);
+        if (!arrayEq(newLeaves, $$state.specTreeLeaves)) {
+            $state = ref.current = create$State();
+            $$state.specTreeLeaves = newLeaves;
         }
-    })).current;
+        // we need to eager initialize all states in canvas to populate the data picker
+        $$state.specTreeLeaves.forEach(function (node) {
+            var spec = node.getSpec();
+            if (spec.isRepeated || node.hasState(spec.pathObj)) {
+                return;
+            }
+            node.createStateCell(spec.pathObj);
+            var init = spec.valueProp
+                ? $$state.props[spec.valueProp]
+                : spec.initFunc
+                    ? initializeStateValue($$state, node, spec.pathObj, $state)
+                    : spec.initVal;
+            set($state, spec.pathObj, init);
+        });
+    }
     // For each spec with an initFunc, evaluate it and see if
     // the init value has changed. If so, reset its state.
     var resetSpecs = [];
     $$state.specTreeLeaves
         .flatMap(function (node) { return node.states().map(function (stateCell) { return ({ stateCell: stateCell, node: node }); }); })
         .forEach(function (_a) {
-        var stateCell = _a.stateCell, node = _a.node;
-        if (stateCell.registeredInitFunc) {
-            var newInit = stateCell.registeredInitFunc(props, $state, $ctx !== null && $ctx !== void 0 ? $ctx : {});
+        var node = _a.node, stateCell = _a.stateCell;
+        var initFunc = node.getInitFunc(stateCell);
+        if (initFunc) {
+            var newInit = initFunc(props, $state, $ctx !== null && $ctx !== void 0 ? $ctx : {});
             if (!deepEqual(newInit, stateCell.initialValue)) {
                 resetSpecs.push({ stateCell: stateCell, node: node });
             }
@@ -1157,14 +1228,13 @@ function useDollarState(specs, props, $ctx) {
         });
     }, [props, resetSpecs]);
     useIsomorphicLayoutEffect(function () {
-        $$state.registrationsQueue.forEach(function (_a) {
-            var node = _a.node, path = _a.path, f = _a.f;
+        while ($$state.registrationsQueue.length) {
+            var _a = $$state.registrationsQueue.shift(), node = _a.node, path = _a.path, f = _a.f;
             var stateCell = node.getState(path);
             stateCell.registeredInitFunc = f;
             reInitializeState(node, stateCell);
-        });
-        $$state.registrationsQueue = [];
-    }, [$$state.registrationsQueue]);
+        }
+    }, [$$state.registrationsQueue.length]);
     // immediately initialize exposed non-private states
     useIsomorphicLayoutEffect(function () {
         $$state.specTreeLeaves.forEach(function (node) {
@@ -1177,6 +1247,7 @@ function useDollarState(specs, props, $ctx) {
     }, []);
     // Re-render if any value changed in one of these objects
     useSnapshot($$state.stateValues, { sync: true });
+    useSnapshot($$state.registrationsQueue);
     return $state;
 }