@plasmicapp/react-web 0.2.137 → 0.2.139

package/skinny/dist/index.js

@@ -14,8 +14,7 @@ import ReactDOM__default from 'react-dom';
 import { useFocusRing } from '@react-aria/focus';
 import clone from 'clone';
 import deepEqual from 'fast-deep-equal';
-import { proxy, ref, useSnapshot } from 'valtio';
-import { subscribeKey } from 'valtio/utils';
+import { proxy, useSnapshot, ref } from 'valtio';
 export { PlasmicDataSourceContextProvider, useCurrentUser } from '@plasmicapp/data-sources-context';
 import '@react-aria/ssr';
 
@@ -661,6 +660,9 @@ function useTrigger(trigger, opts) {
     return TRIGGER_TO_HOOK[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); };
 }
@@ -674,6 +676,34 @@ function generateStateValueProp($state, path // ["parent", 0, 1, "counter"]
 ) {
     return get($state, path);
 }
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+function isPlasmicStateProxy(obj) {
+    return (obj != null && typeof obj === "object" && obj[PLASMIC_STATE_PROXY_SYMBOL]);
+}
+function shallowEqual(a1, a2) {
+    if (a1.length !== a2.length) {
+        return false;
+    }
+    for (var i = 0; i < a1.length; i++) {
+        if (a1[i] !== a2[i]) {
+            return false;
+        }
+    }
+    return true;
+}
+function isNum$1(value) {
+    return typeof value === "symbol" ? false : !isNaN(+value);
+}
+function assert(cond, msg) {
+    if (msg === void 0) { msg = "Assertion failed"; }
+    if (!cond) {
+        // We always generate an non empty message so that it doesn't get swallowed
+        // by the async library.
+        msg = (typeof msg === "string" ? msg : msg()) || "Assertion failed";
+        debugger;
+        throw new Error(msg);
+    }
+}
 /**
  * Forked from https://github.com/lukeed/dset
  * Changes: fixed setting a deep value to a proxy object
@@ -685,47 +715,50 @@ function set(obj, keys, val) {
         k = keys[i++];
         if (k === "__proto__" || k === "constructor" || k === "prototype")
             break;
-        if (i === l) {
-            t[k] = val;
-            t = t[k];
-        }
-        else {
-            if (typeof (x = t[k]) === typeof keys) {
-                t = t[k] = x;
-            }
-            else if (keys[i] * 0 !== 0 || !!~("" + keys[i]).indexOf(".")) {
-                t[k] = {};
-                t = t[k];
-            }
-            else {
-                t[k] = [];
-                t = t[k];
-            }
-        }
+        var newValue = i === l
+            ? val
+            : typeof (x = t[k]) === typeof keys
+                ? x
+                : keys[i] * 0 !== 0 || !!~("" + keys[i]).indexOf(".")
+                    ? {}
+                    : [];
+        assignValue(t, k, newValue);
+        t = t[k];
     }
 }
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-function shallowEqual$1(a1, a2) {
-    if (a1.length !== a2.length) {
-        return false;
+/**
+ * Forked from lodash
+ */
+function baseAssignValue(object, key, value) {
+    if (key == "__proto__") {
+        Object.defineProperty(object, key, {
+            configurable: true,
+            enumerable: true,
+            value: value,
+            writable: true
+        });
     }
-    for (var i = 0; i < a1.length; i++) {
-        if (a1[i] !== a2[i]) {
-            return false;
-        }
+    else {
+        object[key] = value;
     }
-    return true;
 }
-function isNum$1(value) {
-    return typeof value === "symbol" ? false : !isNaN(+value);
+function eq(value, other) {
+    return value === other || (value !== value && other !== other);
+}
+function assignValue(object, key, value) {
+    var objValue = object[key];
+    if (!(Object.prototype.hasOwnProperty.call(object, key) && eq(objValue, value)) ||
+        (value === undefined && !(key in object))) {
+        baseAssignValue(object, key, value);
+    }
 }
 
-var ARRAY_SYMBOL = Symbol("[]");
-
+var UNINITIALIZED = Symbol("plasmic.unitialized");
 var StateSpecNode = /** @class */ (function () {
     function StateSpecNode(specs) {
         this.specs = specs;
         this.edges = new Map();
+        this.state = {};
     }
     StateSpecNode.prototype.hasEdge = function (key) {
         return this.edges.has(key);
@@ -733,6 +766,9 @@ var StateSpecNode = /** @class */ (function () {
     StateSpecNode.prototype.addEdge = function (key, node) {
         this.edges.set(key, node);
     };
+    StateSpecNode.prototype.children = function () {
+        return this.edges.values();
+    };
     StateSpecNode.prototype.makeTransition = function (key) {
         key = isNum$1(key) ? ARRAY_SYMBOL : key;
         return this.edges.get(key);
@@ -749,6 +785,40 @@ var StateSpecNode = /** @class */ (function () {
     StateSpecNode.prototype.getAllSpecs = function () {
         return this.specs;
     };
+    StateSpecNode.prototype.getState = function (path) {
+        return this.state[JSON.stringify(path)];
+    };
+    StateSpecNode.prototype.clearStates = function () {
+        this.state = {};
+    };
+    StateSpecNode.prototype.states = function () {
+        return Object.values(this.state);
+    };
+    StateSpecNode.prototype.hasState = function (path) {
+        var key = JSON.stringify(path);
+        return key in this.state;
+    };
+    StateSpecNode.prototype.createStateCell = function (path) {
+        var key = JSON.stringify(path);
+        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;
+    };
+    StateSpecNode.prototype.getInitialValue = function (path) {
+        var key = JSON.stringify(path);
+        return this.state[key].initialValue;
+    };
+    StateSpecNode.prototype.addListener = function (path, f) {
+        var key = JSON.stringify(path);
+        this.state[key].listeners.push(f);
+    };
     return StateSpecNode;
 }());
 var transformPathStringToObj = function (str) {
@@ -758,13 +828,13 @@ var transformPathStringToObj = function (str) {
     };
     return str.split(".").flatMap(splitStatePathPart);
 };
-function buildGraph(specs) {
+function buildTree(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 (currentPath) {
         var node = new StateSpecNode(internalSpec.filter(function (spec) {
-            return shallowEqual$1(currentPath, spec.pathObj.slice(0, currentPath.length));
+            return shallowEqual(currentPath, spec.pathObj.slice(0, currentPath.length));
         }));
         node.getAllSpecs().forEach(function (spec) {
             if (spec.pathObj.length > currentPath.length) {
@@ -777,349 +847,337 @@ function buildGraph(specs) {
         return node;
     };
     return rec([]);
-}
-
-var mkUntrackedValue = function (o) {
-    return o != null && typeof o === "object" ? ref(o) : o;
-};
-function shallowEqual(a1, a2) {
-    if (a1.length !== a2.length) {
-        return false;
+}
+function getLeaves(root) {
+    var leaves = [];
+    var rec = function (node) {
+        var e_1, _a;
+        try {
+            for (var _b = __values(node.children()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var child = _c.value;
+                rec(child);
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b["return"])) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        if (node.isLeaf()) {
+            leaves.push(node);
+        }
+    };
+    rec(root);
+    return leaves;
+}
+function findStateCell(root, pathStr, repetitionIndex) {
+    var e_2, _a;
+    var realPath = [];
+    var pathObj = transformPathStringToObj(pathStr);
+    var currRepIndex = 0;
+    try {
+        for (var pathObj_1 = __values(pathObj), pathObj_1_1 = pathObj_1.next(); !pathObj_1_1.done; pathObj_1_1 = pathObj_1.next()) {
+            var part = pathObj_1_1.value;
+            if (typeof part === "symbol") {
+                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++]);
+                root = root.makeTransition(ARRAY_SYMBOL);
+            }
+            else {
+                if (!root.hasEdge(part)) {
+                    throw new Error("transition not found: pathStr ".concat(pathStr, " part ").concat(typeof part === "symbol" ? "[]" : part));
+                }
+                realPath.push(part);
+                root = root.makeTransition(part);
+            }
+        }
     }
-    for (var i = 0; i < a1.length; i++) {
-        if (a1[i] !== a2[i]) {
-            return false;
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (pathObj_1_1 && !pathObj_1_1.done && (_a = pathObj_1["return"])) _a.call(pathObj_1);
         }
+        finally { if (e_2) throw e_2.error; }
     }
-    return true;
-}
+    return {
+        node: root,
+        realPath: realPath
+    };
+}
+
 function isNum(value) {
     return typeof value === "symbol" ? false : !isNaN(+value);
 }
-function saveNewState($$state, path, spec) {
-    var key = JSON.stringify(path);
-    $$state.existingStates.set(key, { path: path, specKey: spec.path });
-    if (!$$state.statesInstanceBySpec.has(spec.path)) {
-        $$state.statesInstanceBySpec.set(spec.path, []);
-    }
-    $$state.statesInstanceBySpec
-        .get(spec.path)
-        .push({ path: path, specKey: spec.path });
+function canProxy(value) {
+    return typeof value === "object" && value != null;
+}
+function initializeStateValue($$state, initialSpecNode, initialStatePath, proxyRoot) {
+    var _a, _b;
+    var stateAccess = new Set();
+    var $state = create$StateProxy($$state, function (node, path) { return ({
+        get: function () {
+            stateAccess.add({ path: path, node: node });
+            var spec = node.getSpec();
+            if (spec.valueProp) {
+                return $$state.props[spec.valueProp];
+            }
+            else if (!node.hasState(path) && spec.initFunc) {
+                return initializeStateValue($$state, node, path, proxyRoot);
+            }
+            return get(proxyRoot, path);
+        },
+        set: function () {
+            throw new Error("Cannot update state values during initialization");
+        }
+    }); });
+    stateAccess.forEach(function (_a) {
+        var node = _a.node, path = _a.path;
+        node.addListener(path, function () {
+            var newValue = initialSpecNode.getSpec().initFunc($$state.props, $state, $$state.ctx);
+            set(proxyRoot, initialStatePath, newValue);
+        });
+    });
+    var initialValue = initialSpecNode.getState(initialStatePath)
+        .registeredInitFunc($$state.props, $state, $$state.ctx);
+    initialSpecNode.setInitialValue(initialStatePath, clone(initialValue));
+    var initialSpec = initialSpecNode.getSpec();
+    var value = initialSpec.isImmutable
+        ? mkUntrackedValue(initialValue)
+        : clone(initialValue);
+    set(proxyRoot, initialStatePath, value);
+    //immediately fire onChange
+    if (initialSpec.onChangeProp) {
+        (_b = (_a = $$state.props)[initialSpec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, initialValue);
+    }
+    return initialValue;
 }
-function create$StateProxy($$state, handlers) {
-    var rec = function (currPath, currNode) {
+function create$StateProxy($$state, leafHandlers) {
+    var rec = function (currPath, currNode, isOutside, proxyRoot, initialObject) {
         var getNextPath = function (property) { return __spreadArray(__spreadArray([], __read(currPath), false), [
             isNum(property) ? +property : property,
         ], false); };
-        return new Proxy(currNode.hasArrayTransition() ? [] : {}, {
+        var spec = currNode.getSpec();
+        var handlers = {
             deleteProperty: function (target, property) {
-                var prefixPath = getNextPath(property);
-                var specKeysToUpdate = new Set();
-                $$state.existingStates.forEach(function (_a) {
-                    var path = _a.path, specKey = _a.specKey;
-                    if (path.length >= prefixPath.length &&
-                        shallowEqual(path.slice(0, prefixPath.length), prefixPath)) {
-                        deleteState($$state, path);
-                        specKeysToUpdate.add(specKey);
-                    }
-                });
-                specKeysToUpdate.forEach(function (specKey) {
-                    var _a, _b;
-                    var spec = $$state.specsByKey[specKey];
-                    if (spec.onChangeProp) {
-                        (_b = (_a = $$state.props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, get($$state.stateValues, currPath), currPath);
-                    }
-                });
+                var _a, _b;
+                if (!isOutside &&
+                    !currNode.isLeaf() &&
+                    !currNode.hasArrayTransition() &&
+                    !isNum(property)) {
+                    throw new Error("Can't delete a property in the middle of the state spec");
+                }
+                delete get($$state.stateValues, currPath)[property];
+                if (spec.onChangeProp) {
+                    //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)));
+                }
                 return Reflect.deleteProperty(target, property);
             },
             get: function (target, property, receiver) {
                 var _a, _b;
+                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) {
-                    if (nextNode.isLeaf()) {
-                        target[property] = (_b = (_a = handlers(nextPath, nextNode.getSpec())).get) === null || _b === void 0 ? void 0 : _b.call(_a, target, property, receiver);
-                    }
-                    else if (!(property in target)) {
-                        target[property] = rec(nextPath, nextNode);
-                    }
+                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);
+                }
+                else if (nextNode && !(property in target)) {
+                    target[property] = rec(nextPath, nextNode, false, proxyRoot, undefined);
                 }
                 return Reflect.get(target, property, receiver);
             },
             set: function (target, property, value, receiver) {
-                var e_1, _a;
-                var _b, _c, _d, _e;
+                var _a, _b;
+                proxyRoot = proxyRoot == null ? receiver : proxyRoot;
                 var nextPath = getNextPath(property);
                 var nextNode = currNode.makeTransition(property);
-                if (nextNode && typeof property !== "symbol") {
-                    if (nextNode.isLeaf()) {
-                        // reached the end of the spec
-                        target[property] = (_c = (_b = handlers(nextPath, nextNode.getSpec())).set) === null || _c === void 0 ? void 0 : _c.call(_b, target, property, value, receiver);
-                        return Reflect.set(target, property, value, receiver);
-                    }
-                    else if (typeof value === "object") {
-                        target[property] = rec(nextPath, nextNode);
-                        try {
-                            for (var _f = __values(Object.keys(value)), _g = _f.next(); !_g.done; _g = _f.next()) {
-                                var key = _g.value;
-                                target[property][key] = value[key];
-                            }
-                        }
-                        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                        finally {
-                            try {
-                                if (_g && !_g.done && (_a = _f["return"])) _a.call(_f);
-                            }
-                            finally { if (e_1) throw e_1.error; }
-                        }
-                        return true;
-                    }
-                }
                 if (property === "registerInitFunc" && currPath.length === 0) {
                     return Reflect.set(target, property, value, receiver);
                 }
-                if (currNode.hasArrayTransition()) {
+                if (!nextNode && currNode.hasArrayTransition()) {
                     set($$state.stateValues, nextPath, value);
-                    (_e = (_d = currNode
-                        .makeTransition(ARRAY_SYMBOL)) === null || _d === void 0 ? void 0 : _d.getAllSpecs()) === null || _e === void 0 ? void 0 : _e.forEach(function (spec) {
-                        var _a, _b;
-                        if (spec.onChangeProp) {
-                            (_b = (_a = $$state.props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, value, nextPath);
-                        }
-                    });
+                    //array can set his own properties such as length, map, ...
                     return Reflect.set(target, property, value, receiver);
                 }
-                // invalid setting a value that doesn't make part of the spec
-                return false;
+                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);
+                }
+                if (!isOutside && !currNode.isLeaf() && !nextNode) {
+                    // can't set an unknown field in $state
+                    return false;
+                }
+                // we keep pointing to the leaf
+                if (!nextNode) {
+                    assert(isOutside || currNode.isLeaf, "unexpected update in nextNode");
+                    nextNode = currNode;
+                }
+                if (canProxy(value)) {
+                    target[property] = rec(nextPath, nextNode, isOutside || currNode.isLeaf(), proxyRoot, 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");
+                }
+                else {
+                    Reflect.set(target, property, value, receiver);
+                }
+                nextNode.getAllSpecs().forEach(function (spec) {
+                    var _a, _b;
+                    if (spec.onChangeProp) {
+                        (_b = (_a = $$state.props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+                    }
+                });
+                var newValue = (isOutside || currNode.isLeaf()) && currNode.getSpec().isImmutable
+                    ? mkUntrackedValue(value)
+                    : value;
+                set($$state.stateValues, nextPath, newValue);
+                return true;
             }
-        });
+        };
+        var baseObject = !isOutside && !currNode.isLeaf()
+            ? currNode.hasArrayTransition()
+                ? []
+                : {}
+            : Array.isArray(initialObject)
+                ? []
+                : Object.create(Object.getPrototypeOf(initialObject));
+        var proxyObj = new Proxy(baseObject, handlers);
+        if (initialObject) {
+            Reflect.ownKeys(initialObject).forEach(function (key) {
+                var desc = Object.getOwnPropertyDescriptor(initialObject, key);
+                if (desc.get || desc.set) {
+                    Object.defineProperty(baseObject, key, desc);
+                }
+                else {
+                    proxyObj[key] = initialObject[key];
+                }
+            });
+        }
+        return proxyObj;
     };
-    return rec([], $$state.rootStateSpec);
+    return rec([], $$state.rootSpecTree, false, undefined, undefined);
 }
-var deleteState = function ($$state, path) {
-    var _a;
-    var key = JSON.stringify(path);
-    (_a = $$state.unsubscriptionsByState[key]) === null || _a === void 0 ? void 0 : _a.forEach(function (f) { return f(); });
-    delete $$state.unsubscriptionsByState[key];
-    $$state.existingStates["delete"](key);
-    // delete get($$state.stateValues, path.slice(-1))[path.slice(-1)[0]];
-    // delete get($$state.initStateValues, path.slice(-1))[path.slice(-1)[0]];
-};
-var getIndexes = function (path, spec) {
-    var indexes = [];
-    if (path.length !== spec.pathObj.length) {
-        throw new Error("Unexpected error: state path and spec path have different lengths");
-    }
-    for (var i = 0; i < spec.pathObj.length; i++) {
-        if (spec.pathObj[i] === "[]") {
-            indexes.push(path[i]);
-        }
-    }
-    return indexes;
+var mkUntrackedValue = function (o) {
+    return o != null && typeof o === "object" ? ref(o) : o;
 };
-function initializeStateValue($$state, initialStatePath, initialSpec) {
-    var _a;
-    var initialStateKey = JSON.stringify(initialStatePath);
-    var stateAccess = new Set();
-    var $state = create$StateProxy($$state, function (path, spec) { return ({
-        get: function () {
-            var key = JSON.stringify(path);
-            stateAccess.add({ path: path, spec: spec });
-            if (spec.valueProp) {
-                return !spec.isRepeated
-                    ? $$state.props[spec.valueProp]
-                    : get($$state.props[spec.valueProp], path.slice(1));
-            }
-            if ($$state.existingStates.has(key)) {
-                // is already initialized
-                return get($$state.stateValues, path);
-            }
-            else if (spec.initFunc) {
-                initializeStateValue($$state, path, spec);
-            }
-            return get($$state.stateValues, path);
-        },
-        set: function () {
-            throw new Error("Cannot update state values during initialization");
-        }
-    }); });
-    (_a = $$state.unsubscriptionsByState[initialStateKey]) === null || _a === void 0 ? void 0 : _a.forEach(function (f) { return f(); });
-    $$state.unsubscriptionsByState[initialStateKey] = [];
-    stateAccess.forEach(function (_a) {
-        var path = _a.path, spec = _a.spec;
-        var unsubscribe = subscribeKey(get($$state.stateValues, path.slice(-1)), path.slice(-1)[0], function () {
-            return saveValue($$state, initialStatePath, initialSpec, initialSpec.initFunc($$state.props, $state, $$state.ctx, getIndexes(path, spec)));
-        });
-        $$state.unsubscriptionsByState[initialStateKey].push(unsubscribe);
-    });
-    var initialValue = initialSpec.initFunc($$state.props, $state, $$state.ctx, getIndexes(initialStatePath, initialSpec));
-    saveStateInitialValue($$state, initialStatePath, initialSpec, initialValue);
-    return initialValue;
-}
-function saveValue($$state, path, spec, value) {
-    if (spec.isImmutable) {
-        set($$state.stateValues, path, mkUntrackedValue(value));
-    }
-    else {
-        set($$state.stateValues, path, value);
-    }
-}
-function saveStateInitialValue($$state, path, spec, initialValue) {
-    if (spec.isImmutable) {
-        var untrackedValue = mkUntrackedValue(initialValue);
-        set($$state.stateValues, path, untrackedValue);
-        set($$state.initStateValues, path, clone(untrackedValue));
-    }
-    else {
-        set($$state.stateValues, path, clone(initialValue));
-        set($$state.initStateValues, path, clone(initialValue));
-    }
-}
 function useDollarState(specs, props, $ctx) {
-    var $$state = React__default.useRef(proxy({
-        stateValues: {},
-        initStateValues: {},
-        specsByKey: Object.fromEntries(specs.map(function (spec) { return [
-            spec.path,
-            __assign(__assign({}, spec), { pathObj: transformPathStringToObj(spec.path), isRepeated: spec.path
-                    .split(".")
-                    .some(function (part) { return part.endsWith("[]"); }) }),
-        ]; })),
-        statesInstanceBySpec: new Map(),
-        existingStates: new Map(),
-        unsubscriptionsByState: {},
-        props: {},
-        ctx: {},
-        registrationsQueue: [],
-        rootStateSpec: buildGraph(specs)
-    })).current;
-    $$state.props = mkUntrackedValue(props);
-    $$state.ctx = mkUntrackedValue($ctx !== null && $ctx !== void 0 ? $ctx : {});
-    var $state = React__default.useRef(Object.assign(create$StateProxy($$state, function (path, spec) {
-        var _a;
-        var key = JSON.stringify(path);
-        if (!$$state.existingStates.has(key)) {
-            saveNewState($$state, path, spec);
-            var initialValue = !spec.initFunc
-                ? (_a = spec.initVal) !== null && _a !== void 0 ? _a : undefined
-                : initializeStateValue($$state, path, spec);
-            saveStateInitialValue($$state, path, spec, initialValue);
-        }
+    var $$state = React__default.useRef((function () {
+        var rootSpecTree = buildTree(specs);
         return {
-            get: function () {
-                if (spec.valueProp) {
-                    var value = !spec.isRepeated
-                        ? $$state.props[spec.valueProp]
-                        : get($$state.props[spec.valueProp], path.slice(1));
-                    return value;
+            rootSpecTree: rootSpecTree,
+            specTreeLeaves: getLeaves(rootSpecTree),
+            stateValues: proxy({}),
+            props: {},
+            ctx: {},
+            registrationsQueue: []
+        };
+    })()).current;
+    $$state.props = props;
+    $$state.ctx = $ctx !== null && $ctx !== void 0 ? $ctx : {};
+    var $state = React__default.useRef((function () {
+        var useRef$state = 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 {
-                    return get($$state.stateValues, path);
+                else if (!spec.valueProp) {
+                    set(proxyRoot, path, spec.initVal);
                 }
-            },
-            set: function (_t, _p, value) {
-                var _a, _b;
-                saveValue($$state, path, spec, value);
-                if (spec.onChangeProp) {
-                    (_b = (_a = $$state.props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, value, path);
-                }
-                return true;
             }
-        };
-    }), {
-        registerInitFunc: function (pathStr, f) {
-            var _a;
-            if ((_a = $$state.statesInstanceBySpec
-                .get(pathStr)) === null || _a === void 0 ? void 0 : _a.some(function (_a) {
-                var path = _a.path, specKey = _a.specKey;
-                return !deepEqual(get($$state.initStateValues, path), f(props, $state, $ctx !== null && $ctx !== void 0 ? $ctx : {}, getIndexes(path, $$state.specsByKey[specKey])));
-            })) {
-                $$state.registrationsQueue.push({ pathStr: pathStr, 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, useRef$state, $$state.ctx))) {
+                    $$state.registrationsQueue.push({ node: node, path: realPath, f: f });
+                }
             }
-        }
-    })).current;
+        });
+        return useRef$state;
+    })()).current;
     // For each spec with an initFunc, evaluate it and see if
     // the init value has changed. If so, reset its state.
     var resetSpecs = [];
-    $$state.existingStates.forEach(function (_a) {
-        var path = _a.path, specKey = _a.specKey;
-        var spec = $$state.specsByKey[specKey];
-        if (spec.initFunc) {
-            var newInit = spec.initFunc(props, $state, $ctx !== null && $ctx !== void 0 ? $ctx : {}, getIndexes(path, spec));
-            if (!deepEqual(newInit, get($$state.initStateValues, path))) {
-                resetSpecs.push({ path: path, spec: spec });
+    $$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 : {});
+            if (!deepEqual(newInit, stateCell.initialValue)) {
+                resetSpecs.push({ stateCell: stateCell, node: node });
             }
         }
     });
+    var reInitializeState = function (node, stateCell) {
+        var _a, _b;
+        var newInit = initializeStateValue($$state, node, stateCell.path, $state);
+        var spec = node.getSpec();
+        if (spec.onChangeProp) {
+            (_b = (_a = $$state.props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, newInit);
+        }
+    };
     useIsomorphicLayoutEffect(function () {
         resetSpecs.forEach(function (_a) {
-            var _b, _c;
-            var path = _a.path, spec = _a.spec;
-            var newInit = initializeStateValue($$state, path, spec);
-            if (spec.onChangeProp) {
-                (_c = (_b = $$state.props)[spec.onChangeProp]) === null || _c === void 0 ? void 0 : _c.call(_b, newInit, path);
-            }
+            var stateCell = _a.stateCell, node = _a.node;
+            reInitializeState(node, stateCell);
         });
     }, [props, resetSpecs]);
     useIsomorphicLayoutEffect(function () {
         $$state.registrationsQueue.forEach(function (_a) {
-            var f = _a.f, pathStr = _a.pathStr;
-            $$state.specsByKey[pathStr].initFunc = f;
+            var node = _a.node, path = _a.path, f = _a.f;
+            var stateCell = node.getState(path);
+            stateCell.registeredInitFunc = f;
+            reInitializeState(node, stateCell);
         });
         $$state.registrationsQueue = [];
     }, [$$state.registrationsQueue]);
+    // immediately initialize exposed non-private states
+    useIsomorphicLayoutEffect(function () {
+        $$state.specTreeLeaves.forEach(function (node) {
+            var spec = node.getSpec();
+            if (!spec.isRepeated && spec.type !== "private" && spec.initFunc) {
+                node.createStateCell(spec.pathObj);
+                initializeStateValue($$state, node, spec.pathObj, $state);
+            }
+        });
+    }, []);
     // Re-render if any value changed in one of these objects
     useSnapshot($$state.stateValues, { sync: true });
-    useSnapshot($$state.specsByKey, { sync: true });
-    return $state;
-}
-// Simple version of $state useDollarState for read-only
-function useCanvasDollarState(specs, props, $ctx) {
-    var e_2, _a;
-    var $$state = proxy({
-        stateValues: {},
-        initStateValues: {},
-        specsByKey: Object.fromEntries(specs.map(function (spec) { return [
-            spec.path,
-            __assign(__assign({}, spec), { pathObj: transformPathStringToObj(spec.path), isRepeated: spec.path.split(".").some(function (part) { return part.endsWith("[]"); }) }),
-        ]; })),
-        statesInstanceBySpec: new Map(),
-        existingStates: new Map(),
-        unsubscriptionsByState: {},
-        props: {},
-        ctx: {},
-        registrationsQueue: [],
-        rootStateSpec: buildGraph(specs)
-    });
-    $$state.props = mkUntrackedValue(props);
-    $$state.ctx = mkUntrackedValue($ctx);
-    var $state = {};
-    try {
-        for (var specs_1 = __values(specs), specs_1_1 = specs_1.next(); !specs_1_1.done; specs_1_1 = specs_1.next()) {
-            var spec = specs_1_1.value;
-            var path = transformPathStringToObj(spec.path);
-            var init = spec.valueProp
-                ? $$state.props[spec.valueProp]
-                : spec.initVal
-                    ? spec.initVal
-                    : spec.initFunc
-                        ? initializeStateValue($$state, path, $$state.specsByKey[spec.path])
-                        : undefined;
-            set($state, path, init);
-        }
-    }
-    catch (e_2_1) { e_2 = { error: e_2_1 }; }
-    finally {
-        try {
-            if (specs_1_1 && !specs_1_1.done && (_a = specs_1["return"])) _a.call(specs_1);
-        }
-        finally { if (e_2) throw e_2.error; }
-    }
     return $state;
 }
 
 // Utilities used by generated code
 var classNames = classNames$1;
 
-export { PlasmicIcon, PlasmicLink, PlasmicPageGuard, PlasmicSlot, Stack, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, generateStateOnChangeProp, generateStateValueProp, hasVariant, isNum$1 as isNum, makeFragment, mergeVariantsWithStates, renderPlasmicSlot, set, shallowEqual$1 as shallowEqual, useCanvasDollarState, useDollarState, useIsomorphicLayoutEffect, useTrigger, wrapWithClassName };
+export { PlasmicIcon, PlasmicLink, PlasmicPageGuard, PlasmicSlot, Stack, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, generateStateOnChangeProp, generateStateValueProp, hasVariant, isPlasmicStateProxy, makeFragment, mergeVariantsWithStates, renderPlasmicSlot, set, useDollarState, useTrigger, wrapWithClassName };
 //# sourceMappingURL=index.js.map