@plasmicapp/react-web 0.2.170 → 0.2.172

package/dist/react-web.esm.js

@@ -10,7 +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, useSnapshot, ref } from 'valtio';
+import { proxy, ref, useSnapshot } from 'valtio';
 import { useCheckbox as useCheckbox$1 } from '@react-aria/checkbox';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { useToggleState } from '@react-stately/toggle';
@@ -959,6 +959,14 @@ function chainSingleArgFuncs() {
     return res;
   };
 }
+function ensure(x) {
+  if (x === null || x === undefined) {
+    debugger;
+    throw new Error("Value must not be undefined or null");
+  } else {
+    return x;
+  }
+}
 function isString(x) {
   return typeof x === "string";
 }
@@ -2295,13 +2303,12 @@ function useTrigger(trigger, opts) {
 
 var ARRAY_SYMBOL = /*#__PURE__*/Symbol("[]");
 var PLASMIC_STATE_PROXY_SYMBOL = /*#__PURE__*/Symbol("plasmic.state.proxy");
-
 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.setSpecs = function setSpecs(specs) {
@@ -2310,9 +2317,6 @@ var StateSpecNode = /*#__PURE__*/function () {
   _proto.edges = function edges() {
     return this._edges;
   };
-  _proto.state = function state() {
-    return this._state;
-  };
   _proto.hasEdge = function hasEdge(key) {
     return this._edges.has(key);
   };
@@ -2326,11 +2330,11 @@ var StateSpecNode = /*#__PURE__*/function () {
     return this._edges.values();
   };
   _proto.makeTransition = function makeTransition(key) {
-    key = isNum(key) ? ARRAY_SYMBOL : key;
+    key = isNum$1(key) ? ARRAY_SYMBOL : key;
     return this._edges.get(key);
   };
   _proto.isLeaf = function isLeaf() {
-    return this._edges.size === 0;
+    return this._edges.size === 0 && this.getAllSpecs().length > 0;
   };
   _proto.hasArrayTransition = function hasArrayTransition() {
     return this._edges.has(ARRAY_SYMBOL);
@@ -2341,52 +2345,6 @@ var StateSpecNode = /*#__PURE__*/function () {
   _proto.getAllSpecs = function getAllSpecs() {
     return this._specs;
   };
-  _proto.getState = function getState(path) {
-    return this._state[JSON.stringify(path)];
-  };
-  _proto.getInitFunc = function getInitFunc(stateCell) {
-    var _stateCell$registered;
-    return (_stateCell$registered = stateCell.registeredInitFunc) != null ? _stateCell$registered : this.getSpec().initFunc;
-  };
-  _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,
-      path: path
-    };
-  };
-  _proto.deleteStateCell = function deleteStateCell(prefixPath) {
-    var _this = this;
-    [].concat(Object.keys(this._state)).forEach(function (key) {
-      var path = JSON.parse(key);
-      if (shallowEqual(prefixPath, path.slice(0, prefixPath.length))) {
-        delete _this._state[key];
-      }
-    });
-  };
-  _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) {
@@ -2449,7 +2407,7 @@ function updateTree(root, specs) {
   };
   return rec(root, []);
 }
-function getStateCells(root) {
+function getSpecTreeLeaves(root) {
   var leaves = [];
   var rec = function rec(node) {
     for (var _iterator = _createForOfIteratorHelperLoose(node.children()), _step; !(_step = _iterator()).done;) {
@@ -2489,156 +2447,63 @@ function findStateCell(root, pathStr, repetitionIndex) {
   };
 }
 
-function generateStateOnChangeProp($state, path) {
-  return function (val) {
-    return set($state, path, val);
-  };
-}
-function generateStateValueProp($state, path) {
-  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 getStateCellsInPlasmicProxy(obj) {
-  if (!isPlasmicStateProxy(obj)) {
-    return [];
-  }
-  var _obj$PLASMIC_STATE_PR = obj[PLASMIC_STATE_PROXY_SYMBOL],
-    rootNode = _obj$PLASMIC_STATE_PR.node,
-    rootPath = _obj$PLASMIC_STATE_PR.path,
-    isOutside = _obj$PLASMIC_STATE_PR.isOutside;
-  if (isOutside) {
-    return [];
-  }
-  return getStateCells(rootNode).flatMap(function (node) {
-    return node.states().map(function (stateCell) {
-      return {
-        path: node.getSpec().path,
-        realPath: stateCell.path.slice(rootPath.length)
-      };
-    });
-  });
-}
-function getStateSpecInPlasmicProxy(obj, path) {
-  obj = _get(obj, path.slice(0, path.length - 1));
-  if (!isPlasmicStateProxy(obj)) {
-    return undefined;
-  }
-  var _obj$PLASMIC_STATE_PR2 = obj[PLASMIC_STATE_PROXY_SYMBOL],
-    node = _obj$PLASMIC_STATE_PR2.node,
-    isOutside = _obj$PLASMIC_STATE_PR2.isOutside;
-  var nextNode = node.makeTransition(path[path.length - 1]);
-  if (isOutside || node.isLeaf() || !nextNode) {
-    return undefined;
-  }
-  return {
-    spec: nextNode.getSpec(),
-    isImplicitStateArray: nextNode.hasArrayTransition()
-  };
-}
-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;
-}
-/**
- * Shallow comparison of arrays.
- */
-function arrayEq(xs, ys) {
-  return xs.length === ys.length && xs.every(function (_, index) {
-    return xs[index] === ys[index];
-  });
-}
 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);
-  }
+function canProxy(value) {
+  return typeof value === "object" && value != null;
 }
-/**
- * Forked from https://github.com/lukeed/dset
- * Changes: fixed setting a deep value to a proxy object
- */
-function set(obj, keys, val) {
-  keys = keys.split ? keys.split(".") : keys;
-  var i = 0,
-    l = keys.length,
-    t = obj,
-    x,
-    k;
-  while (i < l) {
-    k = keys[i++];
-    if (k === "__proto__" || k === "constructor" || k === "prototype") break;
-    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 proxyObjToStateCell = /*#__PURE__*/new WeakMap();
+function ensureStateCell(target, property, path, node) {
+  if (!proxyObjToStateCell.has(target)) {
+    proxyObjToStateCell.set(target, {});
   }
-}
-/**
- * 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;
+  var stateCell = proxyObjToStateCell.get(target);
+  if (!(property in stateCell)) {
+    var _node$getSpec$initFun;
+    stateCell[property] = {
+      listeners: [],
+      initialValue: UNINITIALIZED,
+      path: path,
+      node: node,
+      initFunc: node.getSpec().initFunc,
+      initFuncHash: (_node$getSpec$initFun = node.getSpec().initFuncHash) != null ? _node$getSpec$initFun : ""
+    };
   }
+  return stateCell[property];
 }
-function eq(value, other) {
-  return value === other || value !== value && other !== other;
+function getStateCell(target, property) {
+  var _proxyObjToStateCell$;
+  return (_proxyObjToStateCell$ = proxyObjToStateCell.get(target)) == null ? void 0 : _proxyObjToStateCell$[property];
 }
-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);
+function tryGetStateCellFrom$StateRoot($state, path) {
+  if (path.length === 0) {
+    throw new Error("expected a path with length greater than 0");
   }
+  var target = _get($state, path.slice(0, -1));
+  _get(target, path.slice(-1)); // create state cell;
+  return getStateCell(target, path.slice(-1)[0]);
 }
-
-function isNum$1(value) {
-  return typeof value === "symbol" ? false : !isNaN(+value);
-}
-function canProxy(value) {
-  return typeof value === "object" && value != null;
+function getStateCellFrom$StateRoot($state, path) {
+  return ensure(tryGetStateCellFrom$StateRoot($state, path));
 }
-function initializeStateValue($$state, initialSpecNode, initialStatePath, proxyRoot) {
+function initializeStateValue($$state, initialStateCell, proxyRoot) {
+  var _initialStateCell$ove2;
   var stateAccess = new Set();
-  var $state = create$StateProxy($$state, function (node, path) {
+  var $state = create$StateProxy($$state, function (internalStateCell) {
     return {
       get: function get() {
+        var stateCell = getStateCellFrom$StateRoot(proxyRoot, internalStateCell.path);
         stateAccess.add({
-          path: path,
-          node: node
+          stateCell: stateCell
         });
-        var spec = node.getSpec();
+        var spec = stateCell.node.getSpec();
         if (spec.valueProp) {
           return $$state.env.$props[spec.valueProp];
-        } else if (!node.hasState(path) && spec.initFunc) {
-          node.createStateCell(path);
-          return initializeStateValue($$state, node, path, proxyRoot);
+        } else if (spec.initFunc && stateCell.initialValue === UNINITIALIZED) {
+          return initializeStateValue($$state, stateCell, proxyRoot);
         }
-        return _get(proxyRoot, path);
+        return _get(proxyRoot, stateCell.path);
       },
       set: function set() {
         throw new Error("Cannot update state values during initialization");
@@ -2646,23 +2511,22 @@ function initializeStateValue($$state, initialSpecNode, initialStatePath, proxyR
     };
   });
   stateAccess.forEach(function (_ref) {
-    var node = _ref.node,
-      path = _ref.path;
-    node.addListener(path, function () {
-      var newValue = invokeInitFuncBackwardsCompatible(initialSpecNode.getSpec().initFunc, _extends({
+    var stateCell = _ref.stateCell;
+    stateCell.listeners.push(function () {
+      var _initialStateCell$ove;
+      var newValue = invokeInitFuncBackwardsCompatible(initialStateCell.node.getSpec().initFunc, _extends({
         $state: $state
-      }, $$state.env));
-      set(proxyRoot, initialStatePath, newValue);
+      }, (_initialStateCell$ove = initialStateCell.overrideEnv) != null ? _initialStateCell$ove : $$state.env));
+      set(proxyRoot, initialStateCell.path, newValue);
     });
   });
-  var initFunc = initialSpecNode.getInitFunc(initialSpecNode.getState(initialStatePath));
-  var initialValue = invokeInitFuncBackwardsCompatible(initFunc, _extends({
+  var initialValue = invokeInitFuncBackwardsCompatible(initialStateCell.initFunc, _extends({
     $state: $state
-  }, $$state.env));
-  initialSpecNode.setInitialValue(initialStatePath, clone(initialValue));
-  var initialSpec = initialSpecNode.getSpec();
+  }, (_initialStateCell$ove2 = initialStateCell.overrideEnv) != null ? _initialStateCell$ove2 : $$state.env));
+  initialStateCell.initialValue = clone(initialValue);
+  var initialSpec = initialStateCell.node.getSpec();
   var value = initialSpec.isImmutable ? mkUntrackedValue(initialValue) : clone(initialValue);
-  set(proxyRoot, initialStatePath, value);
+  set(proxyRoot, initialStateCell.path, value);
   //immediately fire onChange
   if (initialSpec.onChangeProp) {
     var _$$state$env$$props$i, _$$state$env$$props;
@@ -2674,12 +2538,12 @@ function create$StateProxy($$state, leafHandlers) {
   var proxyRoot;
   var rec = function rec(currPath, currNode, isOutside, initialObject) {
     var getNextPath = function getNextPath(property) {
-      return [].concat(currPath, [isNum$1(property) ? +property : property]);
+      return [].concat(currPath, [isNum(property) ? +property : property]);
     };
     var spec = currNode.getSpec();
     var handlers = {
       deleteProperty: function deleteProperty(target, property) {
-        if (!isOutside && !currNode.isLeaf() && !currNode.hasArrayTransition() && !isNum$1(property)) {
+        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];
@@ -2690,13 +2554,6 @@ function create$StateProxy($$state, leafHandlers) {
           // 2 - delete indices in repeated implicit states, but these can't be exposed, so they don't have onChangeProp
           (_$$state$env$$props$s = (_$$state$env$$props2 = $$state.env.$props)[spec.onChangeProp]) == null ? void 0 : _$$state$env$$props$s.call(_$$state$env$$props2, _get(proxyRoot, currPath.slice(spec.pathObj.length)));
         }
-        var nextPath = getNextPath(property);
-        var nextNode = currNode.makeTransition(property);
-        if (nextNode) {
-          getStateCells(nextNode).forEach(function (node) {
-            node.deleteStateCell(nextPath);
-          });
-        }
         return Reflect.deleteProperty(target, property);
       },
       get: function get(target, property, receiver) {
@@ -2714,7 +2571,7 @@ function create$StateProxy($$state, leafHandlers) {
         var nextNode = currNode.makeTransition(property);
         if (nextNode != null && nextNode.isLeaf()) {
           var _leafHandlers$get, _leafHandlers;
-          return (_leafHandlers$get = (_leafHandlers = leafHandlers(nextNode, nextPath)).get) == null ? void 0 : _leafHandlers$get.call(_leafHandlers, target, property, receiver);
+          return (_leafHandlers$get = (_leafHandlers = leafHandlers(ensureStateCell(receiver, property, nextPath, nextNode))).get) == null ? void 0 : _leafHandlers$get.call(_leafHandlers, target, property, receiver);
         } else if (nextNode && !(property in target)) {
           target[property] = rec(nextPath, nextNode, false, undefined);
         }
@@ -2734,7 +2591,7 @@ function create$StateProxy($$state, leafHandlers) {
         }
         if ((_nextNode = nextNode) != null && _nextNode.isLeaf()) {
           var _leafHandlers$set, _leafHandlers2;
-          (_leafHandlers$set = (_leafHandlers2 = leafHandlers(nextNode, nextPath)).set) == null ? void 0 : _leafHandlers$set.call(_leafHandlers2, target, property, value, receiver);
+          (_leafHandlers$set = (_leafHandlers2 = leafHandlers(ensureStateCell(receiver, property, nextPath, nextNode))).set) == null ? void 0 : _leafHandlers$set.call(_leafHandlers2, target, property, value, receiver);
         }
         if (!isOutside && !currNode.isLeaf() && !nextNode) {
           // can't set an unknown field in $state
@@ -2850,28 +2707,27 @@ function useDollarState(specs) {
     var rootSpecTree = buildTree(specs);
     return {
       rootSpecTree: rootSpecTree,
-      specTreeLeaves: getStateCells(rootSpecTree),
+      specTreeLeaves: getSpecTreeLeaves(rootSpecTree),
       stateValues: proxy({}),
       env: envFieldsAreNonNill(env),
       specs: [],
       registrationsQueue: proxy([])
     };
   }()).current;
-  $$state.env = envFieldsAreNonNill(env), $$state.specs = specs;
-  var create$State = function create$State() {
-    var $state = Object.assign(create$StateProxy($$state, function (node, path) {
-      if (!node.hasState(path)) {
-        node.createStateCell(path);
-        var spec = node.getSpec();
-        if (spec.initFunc) {
-          initializeStateValue($$state, node, path, $state);
-        } else if (!spec.valueProp) {
-          set($state, path, spec.initVal);
-        }
+  $$state.env = envFieldsAreNonNill(env);
+  $$state.specs = specs;
+  var create$State = React__default.useCallback(function () {
+    var $state = Object.assign(create$StateProxy($$state, function (stateCell) {
+      var spec = stateCell.node.getSpec();
+      if (stateCell.initialValue === UNINITIALIZED && spec.initFunc) {
+        initializeStateValue($$state, stateCell, $state);
+      } else if (stateCell.initialValue === UNINITIALIZED && !spec.valueProp) {
+        stateCell.initialValue = spec.initVal;
+        set($state, stateCell.path, spec.initVal);
       }
       return {
         get: function get(target, property, receiver) {
-          var spec = node.getSpec();
+          var spec = stateCell.node.getSpec();
           if (spec.valueProp) {
             return $$state.env.$props[spec.valueProp];
           } else {
@@ -2880,26 +2736,26 @@ function useDollarState(specs) {
         }
       };
     }), {
-      registerInitFunc: function registerInitFunc(pathStr, f, repetitionIndex) {
+      registerInitFunc: function registerInitFunc(pathStr, f, repetitionIndex, overrideEnv) {
         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(_extends({
+        var stateCell = getStateCellFrom$StateRoot($state, realPath);
+        var env = overrideEnv ? envFieldsAreNonNill(overrideEnv) : $$state.env;
+        if (!deepEqual(stateCell.initialValue, f(_extends({
           $state: $state
-        }, $$state.env)))) {
+        }, env)))) {
           $$state.registrationsQueue.push(mkUntrackedValue({
             node: node,
             path: realPath,
-            f: f
+            f: f,
+            overrideEnv: overrideEnv ? envFieldsAreNonNill(overrideEnv) : undefined
           }));
         }
       }
     });
     return $state;
-  };
+  }, []);
   var ref = React__default.useRef(undefined);
   if (!ref.current) {
     ref.current = create$State();
@@ -2907,79 +2763,79 @@ function useDollarState(specs) {
   var $state = ref.current;
   if (opts != null && opts.inCanvas) {
     $$state.rootSpecTree = updateTree($$state.rootSpecTree, specs);
-    var newLeaves = getStateCells($$state.rootSpecTree);
+    var newLeaves = getSpecTreeLeaves($$state.rootSpecTree);
     if (!arrayEq(newLeaves, $$state.specTreeLeaves)) {
-      var old$State = $state;
+      var old$state = $state;
       $state = ref.current = create$State();
       $$state.specTreeLeaves = newLeaves;
-      $$state.specTreeLeaves.flatMap(function (node) {
-        return node.states();
-      }).forEach(function (_ref2) {
+      getStateCells(newLeaves, $$state.rootSpecTree).forEach(function (_ref2) {
         var path = _ref2.path;
-        set($state, path, _get(old$State, path));
+        var oldStateCell = tryGetStateCellFrom$StateRoot(old$state, path);
+        if (oldStateCell) {
+          set($state, path, _get(old$state, path));
+        }
       });
     }
     // we need to eager initialize all states in canvas to populate the data picker
     $$state.specTreeLeaves.forEach(function (node) {
+      var _newSpec$initFuncHash;
       var spec = node.getSpec();
-      if (spec.isRepeated || node.hasState(spec.pathObj)) {
+      if (spec.isRepeated) {
         return;
       }
-      node.createStateCell(spec.pathObj);
-      var init = spec.valueProp ? $$state.env.$props[spec.valueProp] : spec.initFunc ? initializeStateValue($$state, node, spec.pathObj, $state) : spec.initVal;
+      var stateCell = getStateCellFrom$StateRoot($state, spec.pathObj);
+      var newSpec = specs.find(function (sp) {
+        return sp.path === spec.path;
+      });
+      if (!newSpec || stateCell.initFuncHash === (newSpec == null ? void 0 : newSpec.initFuncHash)) {
+        return;
+      }
+      stateCell.initFunc = newSpec.initFunc;
+      stateCell.initFuncHash = (_newSpec$initFuncHash = newSpec.initFuncHash) != null ? _newSpec$initFuncHash : "";
+      var init = spec.valueProp ? $$state.env.$props[spec.valueProp] : spec.initFunc ? initializeStateValue($$state, stateCell, $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 (_ref3) {
-    var node = _ref3.node,
-      stateCell = _ref3.stateCell;
-    var initFunc = node.getInitFunc(stateCell);
-    if (initFunc) {
-      var newInit = invokeInitFuncBackwardsCompatible(initFunc, _extends({
+  getStateCells($state, $$state.rootSpecTree).forEach(function (stateCell) {
+    if (stateCell.initFunc) {
+      var _stateCell$overrideEn;
+      var newInit = invokeInitFuncBackwardsCompatible(stateCell.initFunc, _extends({
         $state: $state
-      }, envFieldsAreNonNill(env)));
+      }, (_stateCell$overrideEn = stateCell.overrideEnv) != null ? _stateCell$overrideEn : envFieldsAreNonNill(env)));
       if (!deepEqual(newInit, stateCell.initialValue)) {
         resetSpecs.push({
-          stateCell: stateCell,
-          node: node
+          stateCell: stateCell
         });
       }
     }
   });
-  var reInitializeState = function reInitializeState(node, stateCell) {
-    var newInit = initializeStateValue($$state, node, stateCell.path, $state);
-    var spec = node.getSpec();
+  var reInitializeState = function reInitializeState(stateCell) {
+    var newInit = initializeStateValue($$state, stateCell, $state);
+    var spec = stateCell.node.getSpec();
     if (spec.onChangeProp) {
       var _$$state$env$$props$s4, _$$state$env$$props5;
       (_$$state$env$$props$s4 = (_$$state$env$$props5 = $$state.env.$props)[spec.onChangeProp]) == null ? void 0 : _$$state$env$$props$s4.call(_$$state$env$$props5, newInit);
     }
   };
   useIsomorphicLayoutEffect$1(function () {
-    resetSpecs.forEach(function (_ref4) {
-      var stateCell = _ref4.stateCell,
-        node = _ref4.node;
-      reInitializeState(node, stateCell);
+    resetSpecs.forEach(function (_ref3) {
+      var stateCell = _ref3.stateCell;
+      reInitializeState(stateCell);
     });
   }, [env.$props, resetSpecs]);
   useIsomorphicLayoutEffect$1(function () {
     while ($$state.registrationsQueue.length) {
       var _$$state$registration = $$state.registrationsQueue.shift(),
-        node = _$$state$registration.node,
         path = _$$state$registration.path,
-        f = _$$state$registration.f;
-      var stateCell = node.getState(path);
-      stateCell.registeredInitFunc = f;
-      reInitializeState(node, stateCell);
+        f = _$$state$registration.f,
+        overrideEnv = _$$state$registration.overrideEnv;
+      var stateCell = getStateCellFrom$StateRoot($state, path);
+      stateCell.initFunc = f;
+      stateCell.overrideEnv = overrideEnv;
+      reInitializeState(stateCell);
     }
   }, [$$state.registrationsQueue.length]);
   // immediately initialize exposed non-private states
@@ -2987,8 +2843,8 @@ function useDollarState(specs) {
     $$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);
+        var stateCell = getStateCellFrom$StateRoot($state, spec.pathObj);
+        initializeStateValue($$state, stateCell, $state);
       }
     });
   }, []);
@@ -2996,10 +2852,171 @@ function useDollarState(specs) {
   useSnapshot($$state.stateValues, {
     sync: true
   });
-  useSnapshot($$state.registrationsQueue);
+  useSnapshot($$state.registrationsQueue, {
+    sync: true
+  });
   return $state;
 }
 
+function generateStateOnChangeProp($state, path) {
+  return function (val) {
+    return set($state, path, val);
+  };
+}
+function generateStateValueProp($state, path) {
+  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 getStateCells($state, root) {
+  var _proxyObjToStateCell$;
+  if ($state == null || typeof $state !== "object") {
+    return [];
+  }
+  var stateCells = Object.values((_proxyObjToStateCell$ = proxyObjToStateCell.get($state)) != null ? _proxyObjToStateCell$ : {});
+  if (root.isLeaf()) {
+    return stateCells;
+  }
+  if (root.hasArrayTransition()) {
+    return [].concat(stateCells, Object.keys($state).flatMap(function (key) {
+      return getStateCells($state[key], ensure(root.makeTransition(ARRAY_SYMBOL)));
+    }));
+  } else {
+    return [].concat(stateCells, [].concat(root.edges().entries()).flatMap(function (_ref) {
+      var key = _ref[0],
+        child = _ref[1];
+      return typeof key === "string" && key in $state ? getStateCells($state[key], child) : [];
+    }));
+  }
+}
+function getStateCellsInPlasmicProxy(obj) {
+  if (!isPlasmicStateProxy(obj)) {
+    return [];
+  }
+  var _obj$PLASMIC_STATE_PR = obj[PLASMIC_STATE_PROXY_SYMBOL],
+    rootNode = _obj$PLASMIC_STATE_PR.node,
+    rootPath = _obj$PLASMIC_STATE_PR.path,
+    isOutside = _obj$PLASMIC_STATE_PR.isOutside;
+  if (isOutside) {
+    return [];
+  }
+  return getStateCells(obj, rootNode).map(function (stateCell) {
+    return {
+      path: stateCell.node.getSpec().path,
+      realPath: stateCell.path.slice(rootPath.length)
+    };
+  });
+}
+function getStateSpecInPlasmicProxy(obj, path) {
+  obj = _get(obj, path.slice(0, path.length - 1));
+  if (!isPlasmicStateProxy(obj)) {
+    return undefined;
+  }
+  var _obj$PLASMIC_STATE_PR2 = obj[PLASMIC_STATE_PROXY_SYMBOL],
+    node = _obj$PLASMIC_STATE_PR2.node,
+    isOutside = _obj$PLASMIC_STATE_PR2.isOutside;
+  var nextNode = node.makeTransition(path[path.length - 1]);
+  if (isOutside || node.isLeaf() || !nextNode) {
+    return undefined;
+  }
+  return {
+    spec: nextNode.getSpec(),
+    isImplicitStateArray: nextNode.hasArrayTransition()
+  };
+}
+function getCurrentInitialValue(obj, path) {
+  var _tryGetStateCellFrom$;
+  if (!isPlasmicStateProxy(obj)) {
+    return undefined;
+  }
+  return (_tryGetStateCellFrom$ = tryGetStateCellFrom$StateRoot(obj, path)) == null ? void 0 : _tryGetStateCellFrom$.initialValue;
+}
+function resetToInitialValue(obj, path) {
+  var stateCell = tryGetStateCellFrom$StateRoot(obj, path);
+  if (stateCell) {
+    set(obj, path, stateCell.initialValue);
+  }
+}
+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;
+}
+/**
+ * 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);
+}
+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
+ */
+function set(obj, keys, val) {
+  keys = keys.split ? keys.split(".") : keys;
+  var i = 0,
+    l = keys.length,
+    t = obj,
+    x,
+    k;
+  while (i < l) {
+    k = keys[i++];
+    if (k === "__proto__" || k === "constructor" || k === "prototype") break;
+    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];
+  }
+}
+/**
+ * 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;
+  }
+}
+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);
+  }
+}
+
 // Utilities used by generated code
 var classNames = classNames$1;
 
@@ -4477,5 +4494,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, getStateCellsInPlasmicProxy, getStateSpecInPlasmicProxy, 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 };
+export { DropdownMenu, PlasmicHead, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicPageGuard, PlasmicRootProvider, PlasmicSlot, SelectContext, Stack, Trans, TriggeredOverlayContext, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, generateStateOnChangeProp, generateStateValueProp, getCurrentInitialValue, getDataProps, getStateCellsInPlasmicProxy, getStateSpecInPlasmicProxy, hasVariant, isPlasmicStateProxy, makeFragment, mergeVariantsWithStates, omit, pick, plasmicHeadMeta, renderPlasmicSlot, resetToInitialValue, set, setPlumeStrictMode, useButton, useCheckbox, useDollarState, useIsSSR, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, wrapWithClassName };
 //# sourceMappingURL=react-web.esm.js.map