@plasmicapp/react-web 0.2.137 → 0.2.139

package/dist/react-web.esm.js

@@ -10,8 +10,7 @@ import { SSRProvider, useIsSSR as useIsSSR$1 } from '@react-aria/ssr';
 import { useFocusRing, useFocusable, FocusScope } 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';
 import { useCheckbox as useCheckbox$1 } from '@react-aria/checkbox';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { useToggleState } from '@react-stately/toggle';
@@ -1504,6 +1503,9 @@ function useTrigger(trigger, opts) {
   return TRIGGER_TO_HOOK[trigger](opts);
 }
 
+var ARRAY_SYMBOL = /*#__PURE__*/Symbol("[]");
+var PLASMIC_STATE_PROXY_SYMBOL = /*#__PURE__*/Symbol("plasmic.state.proxy");
+
 function generateStateOnChangeProp($state, stateName, dataReps) {
   return function (val, path) {
     return set($state, [stateName].concat(dataReps, path), val);
@@ -1519,6 +1521,36 @@ function generateStateValueProp($state, path // ["parent", 0, 1, "counter"]
 ) {
   return _get($state, path);
 }
+var useIsomorphicLayoutEffect$1 = 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(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
@@ -1533,44 +1565,42 @@ function set(obj, keys, val) {
   while (i < l) {
     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$1 = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-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;
-    }
+/**
+ * Forked from lodash
+ */
+function baseAssignValue(object, key, value) {
+  if (key == "__proto__") {
+    Object.defineProperty(object, key, {
+      configurable: true,
+      enumerable: true,
+      value: value,
+      writable: true
+    });
+  } else {
+    object[key] = value;
   }
-  return true;
 }
-function isNum(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 = /*#__PURE__*/Symbol("[]");
-
+var UNINITIALIZED = /*#__PURE__*/Symbol("plasmic.unitialized");
 var StateSpecNode = /*#__PURE__*/function () {
   function StateSpecNode(specs) {
     this.specs = specs;
     this.edges = new Map();
+    this.state = {};
   }
   var _proto = StateSpecNode.prototype;
   _proto.hasEdge = function hasEdge(key) {
@@ -1579,6 +1609,9 @@ var StateSpecNode = /*#__PURE__*/function () {
   _proto.addEdge = function addEdge(key, node) {
     this.edges.set(key, node);
   };
+  _proto.children = function children() {
+    return this.edges.values();
+  };
   _proto.makeTransition = function makeTransition(key) {
     key = isNum(key) ? ARRAY_SYMBOL : key;
     return this.edges.get(key);
@@ -1595,6 +1628,40 @@ var StateSpecNode = /*#__PURE__*/function () {
   _proto.getAllSpecs = function getAllSpecs() {
     return this.specs;
   };
+  _proto.getState = function getState(path) {
+    return this.state[JSON.stringify(path)];
+  };
+  _proto.clearStates = function clearStates() {
+    this.state = {};
+  };
+  _proto.states = function states() {
+    return Object.values(this.state);
+  };
+  _proto.hasState = function hasState(path) {
+    var key = JSON.stringify(path);
+    return key in this.state;
+  };
+  _proto.createStateCell = function createStateCell(path) {
+    var key = JSON.stringify(path);
+    this.state[key] = {
+      listeners: [],
+      initialValue: UNINITIALIZED,
+      registeredInitFunc: this.getSpec().initFunc,
+      path: path
+    };
+  };
+  _proto.setInitialValue = function setInitialValue(path, value) {
+    var key = JSON.stringify(path);
+    this.state[key].initialValue = value;
+  };
+  _proto.getInitialValue = function getInitialValue(path) {
+    var key = JSON.stringify(path);
+    return this.state[key].initialValue;
+  };
+  _proto.addListener = function addListener(path, f) {
+    var key = JSON.stringify(path);
+    this.state[key].listeners.push(f);
+  };
   return StateSpecNode;
 }();
 var transformPathStringToObj = function transformPathStringToObj(str) {
@@ -1603,7 +1670,7 @@ var transformPathStringToObj = function transformPathStringToObj(str) {
   };
   return str.split(".").flatMap(splitStatePathPart);
 };
-function buildGraph(specs) {
+function buildTree(specs) {
   var internalSpec = specs.map(function (spec) {
     return _extends({}, spec, {
       pathObj: transformPathStringToObj(spec.path),
@@ -1628,339 +1695,314 @@ function buildGraph(specs) {
   };
   return rec([]);
 }
-
-var mkUntrackedValue = function mkUntrackedValue(o) {
-  return o != null && typeof o === "object" ? ref(o) : o;
-};
-function shallowEqual$1(a1, a2) {
-  if (a1.length !== a2.length) {
-    return false;
-  }
-  for (var i = 0; i < a1.length; i++) {
-    if (a1[i] !== a2[i]) {
-      return false;
+function getLeaves(root) {
+  var leaves = [];
+  var rec = function rec(node) {
+    for (var _iterator = _createForOfIteratorHelperLoose(node.children()), _step; !(_step = _iterator()).done;) {
+      var child = _step.value;
+      rec(child);
+    }
+    if (node.isLeaf()) {
+      leaves.push(node);
+    }
+  };
+  rec(root);
+  return leaves;
+}
+function findStateCell(root, pathStr, repetitionIndex) {
+  var realPath = [];
+  var pathObj = transformPathStringToObj(pathStr);
+  var currRepIndex = 0;
+  for (var _iterator2 = _createForOfIteratorHelperLoose(pathObj), _step2; !(_step2 = _iterator2()).done;) {
+    var part = _step2.value;
+    if (typeof part === "symbol") {
+      if (!root.hasArrayTransition() || !repetitionIndex || currRepIndex > repetitionIndex.length) {
+        console.log(root);
+        throw new Error("transition not found: pathStr " + pathStr + " part " + (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 " + pathStr + " part " + (typeof part === "symbol" ? "[]" : part));
+      }
+      realPath.push(part);
+      root = root.makeTransition(part);
     }
   }
-  return true;
+  return {
+    node: root,
+    realPath: realPath
+  };
 }
+
 function isNum$1(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
+function canProxy(value) {
+  return typeof value === "object" && value != null;
+}
+function initializeStateValue($$state, initialSpecNode, initialStatePath, proxyRoot) {
+  var stateAccess = new Set();
+  var $state = create$StateProxy($$state, function (node, path) {
+    return {
+      get: function get() {
+        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 set() {
+        throw new Error("Cannot update state values during initialization");
+      }
+    };
   });
-  if (!$$state.statesInstanceBySpec.has(spec.path)) {
-    $$state.statesInstanceBySpec.set(spec.path, []);
-  }
-  $$state.statesInstanceBySpec.get(spec.path).push({
-    path: path,
-    specKey: spec.path
+  stateAccess.forEach(function (_ref) {
+    var node = _ref.node,
+      path = _ref.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) {
+    var _$$state$props$initia, _$$state$props;
+    (_$$state$props$initia = (_$$state$props = $$state.props)[initialSpec.onChangeProp]) == null ? void 0 : _$$state$props$initia.call(_$$state$props, initialValue);
+  }
+  return initialValue;
 }
-function create$StateProxy($$state, handlers) {
-  var rec = function rec(currPath, currNode) {
+function create$StateProxy($$state, leafHandlers) {
+  var rec = function rec(currPath, currNode, isOutside, proxyRoot, initialObject) {
     var getNextPath = function getNextPath(property) {
       return [].concat(currPath, [isNum$1(property) ? +property : property]);
     };
-    return new Proxy(currNode.hasArrayTransition() ? [] : {}, {
+    var spec = currNode.getSpec();
+    var handlers = {
       deleteProperty: function deleteProperty(target, property) {
-        var prefixPath = getNextPath(property);
-        var specKeysToUpdate = new Set();
-        $$state.existingStates.forEach(function (_ref) {
-          var path = _ref.path,
-            specKey = _ref.specKey;
-          if (path.length >= prefixPath.length && shallowEqual$1(path.slice(0, prefixPath.length), prefixPath)) {
-            deleteState($$state, path);
-            specKeysToUpdate.add(specKey);
-          }
-        });
-        specKeysToUpdate.forEach(function (specKey) {
-          var spec = $$state.specsByKey[specKey];
-          if (spec.onChangeProp) {
-            var _$$state$props$spec$o, _$$state$props;
-            (_$$state$props$spec$o = (_$$state$props = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o.call(_$$state$props, _get($$state.stateValues, currPath), currPath);
-          }
-        });
+        if (!isOutside && !currNode.isLeaf() && !currNode.hasArrayTransition() && !isNum$1(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) {
+          var _$$state$props$spec$o, _$$state$props2;
+          //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
+          (_$$state$props$spec$o = (_$$state$props2 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o.call(_$$state$props2, _get($$state.stateValues, currPath.slice(spec.pathObj.length)));
+        }
         return Reflect.deleteProperty(target, property);
       },
       get: function get(target, property, receiver) {
+        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()) {
-            var _handlers$get, _handlers;
-            target[property] = (_handlers$get = (_handlers = handlers(nextPath, nextNode.getSpec())).get) == null ? void 0 : _handlers$get.call(_handlers, target, property, receiver);
-          } else if (!(property in target)) {
-            target[property] = rec(nextPath, nextNode);
-          }
+        if (nextNode != null && nextNode.isLeaf()) {
+          var _leafHandlers$get, _leafHandlers;
+          return (_leafHandlers$get = (_leafHandlers = leafHandlers(nextNode, nextPath, proxyRoot)).get) == null ? void 0 : _leafHandlers$get.call(_leafHandlers, 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 set$1(target, property, value, receiver) {
+        var _nextNode, _nextNode2;
+        proxyRoot = proxyRoot == null ? receiver : proxyRoot;
         var nextPath = getNextPath(property);
         var nextNode = currNode.makeTransition(property);
-        if (nextNode && typeof property !== "symbol") {
-          if (nextNode.isLeaf()) {
-            var _handlers$set, _handlers2;
-            // reached the end of the spec
-            target[property] = (_handlers$set = (_handlers2 = handlers(nextPath, nextNode.getSpec())).set) == null ? void 0 : _handlers$set.call(_handlers2, target, property, value, receiver);
-            return Reflect.set(target, property, value, receiver);
-          } else if (typeof value === "object") {
-            target[property] = rec(nextPath, nextNode);
-            for (var _i = 0, _Object$keys = Object.keys(value); _i < _Object$keys.length; _i++) {
-              var key = _Object$keys[_i];
-              target[property][key] = value[key];
-            }
-            return true;
-          }
-        }
         if (property === "registerInitFunc" && currPath.length === 0) {
           return Reflect.set(target, property, value, receiver);
         }
-        if (currNode.hasArrayTransition()) {
-          var _currNode$makeTransit, _currNode$makeTransit2;
+        if (!nextNode && currNode.hasArrayTransition()) {
           set($$state.stateValues, nextPath, value);
-          (_currNode$makeTransit = currNode.makeTransition(ARRAY_SYMBOL)) == null ? void 0 : (_currNode$makeTransit2 = _currNode$makeTransit.getAllSpecs()) == null ? void 0 : _currNode$makeTransit2.forEach(function (spec) {
-            if (spec.onChangeProp) {
-              var _$$state$props$spec$o2, _$$state$props2;
-              (_$$state$props$spec$o2 = (_$$state$props2 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o2.call(_$$state$props2, 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;
-      }
-    });
-  };
-  return rec([], $$state.rootStateSpec);
-}
-var deleteState = function deleteState($$state, path) {
-  var _$$state$unsubscripti;
-  var key = JSON.stringify(path);
-  (_$$state$unsubscripti = $$state.unsubscriptionsByState[key]) == null ? void 0 : _$$state$unsubscripti.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 getIndexes(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;
-};
-function initializeStateValue($$state, initialStatePath, initialSpec) {
-  var _$$state$unsubscripti2;
-  var initialStateKey = JSON.stringify(initialStatePath);
-  var stateAccess = new Set();
-  var $state = create$StateProxy($$state, function (path, spec) {
-    return {
-      get: function get() {
-        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 ((_nextNode = nextNode) != null && _nextNode.isLeaf()) {
+          var _leafHandlers$set, _leafHandlers2;
+          (_leafHandlers$set = (_leafHandlers2 = leafHandlers(nextNode, nextPath, proxyRoot)).set) == null ? void 0 : _leafHandlers$set.call(_leafHandlers2, target, property, value, receiver);
         }
-        if ($$state.existingStates.has(key)) {
-          // is already initialized
-          return _get($$state.stateValues, path);
-        } else if (spec.initFunc) {
-          initializeStateValue($$state, path, spec);
+        if (!isOutside && !currNode.isLeaf() && !nextNode) {
+          // can't set an unknown field in $state
+          return false;
         }
-        return _get($$state.stateValues, path);
-      },
-      set: function set() {
-        throw new Error("Cannot update state values during initialization");
+        // 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() && !((_nextNode2 = nextNode) != null && _nextNode2.isLeaf())) {
+          throw new Error("inserting a primitive value into a non-leaf");
+        } else {
+          Reflect.set(target, property, value, receiver);
+        }
+        nextNode.getAllSpecs().forEach(function (spec) {
+          if (spec.onChangeProp) {
+            var _$$state$props$spec$o2, _$$state$props3;
+            (_$$state$props$spec$o2 = (_$$state$props3 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o2.call(_$$state$props3, value);
+          }
+        });
+        var newValue = (isOutside || currNode.isLeaf()) && currNode.getSpec().isImmutable ? mkUntrackedValue(value) : value;
+        set($$state.stateValues, nextPath, newValue);
+        return true;
       }
     };
-  });
-  (_$$state$unsubscripti2 = $$state.unsubscriptionsByState[initialStateKey]) == null ? void 0 : _$$state$unsubscripti2.forEach(function (f) {
-    return f();
-  });
-  $$state.unsubscriptionsByState[initialStateKey] = [];
-  stateAccess.forEach(function (_ref2) {
-    var path = _ref2.path,
-      spec = _ref2.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));
-  }
+    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.rootSpecTree, false, undefined, undefined);
 }
+var mkUntrackedValue = function mkUntrackedValue(o) {
+  return o != null && typeof o === "object" ? ref(o) : o;
+};
 function useDollarState(specs, props, $ctx) {
-  var $$state = React__default.useRef(proxy({
-    stateValues: {},
-    initStateValues: {},
-    specsByKey: Object.fromEntries(specs.map(function (spec) {
-      return [spec.path, _extends({}, 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 : {});
-  var $state = React__default.useRef(Object.assign(create$StateProxy($$state, function (path, spec) {
-    var key = JSON.stringify(path);
-    if (!$$state.existingStates.has(key)) {
-      var _spec$initVal;
-      saveNewState($$state, path, spec);
-      var initialValue = !spec.initFunc ? (_spec$initVal = spec.initVal) != null ? _spec$initVal : undefined : initializeStateValue($$state, path, spec);
-      saveStateInitialValue($$state, path, spec, initialValue);
-    }
+  var $$state = React__default.useRef(function () {
+    var rootSpecTree = buildTree(specs);
     return {
-      get: function get() {
-        if (spec.valueProp) {
-          var value = !spec.isRepeated ? $$state.props[spec.valueProp] : _get($$state.props[spec.valueProp], path.slice(1));
-          return value;
-        } else {
-          return _get($$state.stateValues, path);
-        }
-      },
-      set: function set(_t, _p, value) {
-        saveValue($$state, path, spec, value);
-        if (spec.onChangeProp) {
-          var _$$state$props$spec$o3, _$$state$props3;
-          (_$$state$props$spec$o3 = (_$$state$props3 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o3.call(_$$state$props3, value, path);
+      rootSpecTree: rootSpecTree,
+      specTreeLeaves: getLeaves(rootSpecTree),
+      stateValues: proxy({}),
+      props: {},
+      ctx: {},
+      registrationsQueue: []
+    };
+  }()).current;
+  $$state.props = props;
+  $$state.ctx = $ctx != null ? $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 if (!spec.valueProp) {
+          set(proxyRoot, path, spec.initVal);
         }
-        return true;
       }
-    };
-  }), {
-    registerInitFunc: function registerInitFunc(pathStr, f) {
-      var _$$state$statesInstan;
-      if ((_$$state$statesInstan = $$state.statesInstanceBySpec.get(pathStr)) != null && _$$state$statesInstan.some(function (_ref3) {
-        var path = _ref3.path,
-          specKey = _ref3.specKey;
-        return !deepEqual(_get($$state.initStateValues, path), f(props, $state, $ctx != null ? $ctx : {}, getIndexes(path, $$state.specsByKey[specKey])));
-      })) {
-        $$state.registrationsQueue.push({
-          pathStr: pathStr,
-          f: f
-        });
+      return {
+        get: function get(target, property, receiver) {
+          var spec = node.getSpec();
+          if (spec.valueProp) {
+            return $$state.props[spec.valueProp];
+          } else {
+            return Reflect.get(target, property, receiver);
+          }
+        }
+      };
+    }), {
+      registerInitFunc: function registerInitFunc(pathStr, f, repetitionIndex) {
+        var _findStateCell = findStateCell($$state.rootSpecTree, pathStr, repetitionIndex),
+          node = _findStateCell.node,
+          realPath = _findStateCell.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 (_ref4) {
-    var path = _ref4.path,
-      specKey = _ref4.specKey;
-    var spec = $$state.specsByKey[specKey];
-    if (spec.initFunc) {
-      var newInit = spec.initFunc(props, $state, $ctx != null ? $ctx : {}, getIndexes(path, spec));
-      if (!deepEqual(newInit, _get($$state.initStateValues, path))) {
+  $$state.specTreeLeaves.flatMap(function (node) {
+    return node.states().map(function (stateCell) {
+      return {
+        stateCell: stateCell,
+        node: node
+      };
+    });
+  }).forEach(function (_ref2) {
+    var stateCell = _ref2.stateCell,
+      node = _ref2.node;
+    if (stateCell.registeredInitFunc) {
+      var newInit = stateCell.registeredInitFunc(props, $state, $ctx != null ? $ctx : {});
+      if (!deepEqual(newInit, stateCell.initialValue)) {
         resetSpecs.push({
-          path: path,
-          spec: spec
+          stateCell: stateCell,
+          node: node
         });
       }
     }
   });
+  var reInitializeState = function reInitializeState(node, stateCell) {
+    var newInit = initializeStateValue($$state, node, stateCell.path, $state);
+    var spec = node.getSpec();
+    if (spec.onChangeProp) {
+      var _$$state$props$spec$o3, _$$state$props4;
+      (_$$state$props$spec$o3 = (_$$state$props4 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o3.call(_$$state$props4, newInit);
+    }
+  };
   useIsomorphicLayoutEffect$1(function () {
-    resetSpecs.forEach(function (_ref5) {
-      var path = _ref5.path,
-        spec = _ref5.spec;
-      var newInit = initializeStateValue($$state, path, spec);
-      if (spec.onChangeProp) {
-        var _$$state$props$spec$o4, _$$state$props4;
-        (_$$state$props$spec$o4 = (_$$state$props4 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o4.call(_$$state$props4, newInit, path);
-      }
+    resetSpecs.forEach(function (_ref3) {
+      var stateCell = _ref3.stateCell,
+        node = _ref3.node;
+      reInitializeState(node, stateCell);
     });
   }, [props, resetSpecs]);
   useIsomorphicLayoutEffect$1(function () {
-    $$state.registrationsQueue.forEach(function (_ref6) {
-      var f = _ref6.f,
-        pathStr = _ref6.pathStr;
-      $$state.specsByKey[pathStr].initFunc = f;
+    $$state.registrationsQueue.forEach(function (_ref4) {
+      var node = _ref4.node,
+        path = _ref4.path,
+        f = _ref4.f;
+      var stateCell = node.getState(path);
+      stateCell.registeredInitFunc = f;
+      reInitializeState(node, stateCell);
     });
     $$state.registrationsQueue = [];
   }, [$$state.registrationsQueue]);
+  // immediately initialize exposed non-private states
+  useIsomorphicLayoutEffect$1(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 $$state = proxy({
-    stateValues: {},
-    initStateValues: {},
-    specsByKey: Object.fromEntries(specs.map(function (spec) {
-      return [spec.path, _extends({}, 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 = {};
-  for (var _iterator = _createForOfIteratorHelperLoose(specs), _step; !(_step = _iterator()).done;) {
-    var spec = _step.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);
-  }
   return $state;
 }
 
@@ -3360,5 +3402,5 @@ function useTriggeredOverlay(plasmicClass, props, config, outerRef, isDismissabl
   };
 }
 
-export { DropdownMenu, PlasmicHead, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicPageGuard, PlasmicRootProvider, PlasmicSlot, SelectContext, Stack, Trans, TriggeredOverlayContext, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, generateStateOnChangeProp, generateStateValueProp, getDataProps, hasVariant, isNum, makeFragment, mergeVariantsWithStates, omit, pick, plasmicHeadMeta, renderPlasmicSlot, set, setPlumeStrictMode, shallowEqual, useButton, useCanvasDollarState, useCheckbox, useDollarState, useIsSSR, useIsomorphicLayoutEffect$1 as useIsomorphicLayoutEffect, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, wrapWithClassName };
+export { DropdownMenu, PlasmicHead, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicPageGuard, PlasmicRootProvider, PlasmicSlot, SelectContext, Stack, Trans, TriggeredOverlayContext, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, generateStateOnChangeProp, generateStateValueProp, getDataProps, hasVariant, isPlasmicStateProxy, makeFragment, mergeVariantsWithStates, omit, pick, plasmicHeadMeta, renderPlasmicSlot, set, setPlumeStrictMode, useButton, useCheckbox, useDollarState, useIsSSR, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, wrapWithClassName };
 //# sourceMappingURL=react-web.esm.js.map