@plasmicapp/react-web 0.2.102 → 0.2.105

package/dist/react-web.esm.js

@@ -18,7 +18,7 @@ import { useListBox, useOption, useListBoxSection } from '@react-aria/listbox';
 import { useSelectState } from '@react-stately/select';
 import { useSwitch as useSwitch$1 } from '@react-aria/switch';
 import { useOverlay, useOverlayPosition, DismissButton } from '@react-aria/overlays';
-import get from 'dlv';
+import _get from 'dlv';
 import { dset } from 'dset';
 
 function _extends() {
@@ -1199,6 +1199,96 @@ function isInternalHref(href) {
   return /^\/(?!\/)/.test(href);
 }
 
+var PlasmicTranslatorContext = /*#__PURE__*/React__default.createContext(undefined);
+
+function isIterable(val) {
+  return val != null && typeof val[Symbol.iterator] === "function";
+}
+
+function genTranslatableString(elt) {
+  var components = {};
+  var componentsCount = 0;
+
+  var getText = function getText(node) {
+    if (!node) {
+      return "";
+    }
+
+    if (typeof node === "number" || typeof node === "boolean" || typeof node === "string") {
+      return node.toString();
+    }
+
+    if (typeof node !== "object") {
+      return "";
+    }
+
+    if (Array.isArray(node) || isIterable(node)) {
+      return Array.from(node).map(function (child) {
+        return getText(child);
+      }).filter(function (child) {
+        return !!child;
+      }).join("");
+    }
+
+    var nodeChildren = hasKey(node, "props") && hasKey(node.props, "children") && node.props.children || hasKey(node, "children") && node.children || [];
+    var contents = "" + React__default.Children.toArray(nodeChildren).map(function (child) {
+      return getText(child);
+    }).filter(function (child) {
+      return !!child;
+    }).join("");
+
+    if (React__default.isValidElement(node) && node.type === React__default.Fragment) {
+      return contents;
+    }
+
+    var componentId = componentsCount + 1;
+    componentsCount++;
+    components[componentId] = React__default.isValidElement(node) ? React__default.cloneElement(node, {
+      key: componentId,
+      children: undefined
+    }) : node;
+    return "<" + componentId + ">" + contents + "</" + componentId + ">";
+  };
+
+  var str = getText(elt);
+  return {
+    str: str,
+    components: components,
+    componentsCount: componentsCount
+  };
+}
+function Trans(_ref) {
+  var children = _ref.children;
+
+  var _t = React__default.useContext(PlasmicTranslatorContext);
+
+  if (!_t) {
+    warnNoTranslationFunctionAtMostOnce();
+    return children;
+  }
+
+  var _genTranslatableStrin = genTranslatableString(children),
+      str = _genTranslatableStrin.str,
+      components = _genTranslatableStrin.components,
+      componentsCount = _genTranslatableStrin.componentsCount;
+
+  return _t(str, componentsCount > 0 ? {
+    components: components
+  } : undefined);
+}
+var hasWarned = false;
+
+function warnNoTranslationFunctionAtMostOnce() {
+  if (!hasWarned) {
+    console.warn("Using Plasmic Translation but no translation function has been provided");
+    hasWarned = true;
+  }
+}
+
+function hasKey(v, key) {
+  return typeof v === "object" && v !== null && key in v;
+}
+
 function PlasmicSlot(props) {
   return renderPlasmicSlot(props);
 }
@@ -1242,7 +1332,8 @@ function renderPlasmicSlot(opts) {
 
 function maybeAsString(node) {
   // Unwrap fragments
-  if (isValidElement(node) && node.type === Fragment) {
+  if (isValidElement(node) && ( // Fragment and Trans don't render DOM elements
+  node.type === Fragment || node.type === Trans)) {
     return maybeAsString(node.props.children);
   }
 
@@ -1353,96 +1444,6 @@ function createUseScreenVariants(isMulti, screenQueries) {
   };
 }
 
-var PlasmicTranslatorContext = /*#__PURE__*/React__default.createContext(undefined);
-
-function isIterable(val) {
-  return val != null && typeof val[Symbol.iterator] === "function";
-}
-
-function genTranslatableString(elt) {
-  var components = {};
-  var componentsCount = 0;
-
-  var getText = function getText(node) {
-    if (!node) {
-      return "";
-    }
-
-    if (typeof node === "number" || typeof node === "boolean" || typeof node === "string") {
-      return node.toString();
-    }
-
-    if (typeof node !== "object") {
-      return "";
-    }
-
-    if (Array.isArray(node) || isIterable(node)) {
-      return Array.from(node).map(function (child) {
-        return getText(child);
-      }).filter(function (child) {
-        return !!child;
-      }).join("");
-    }
-
-    var nodeChildren = hasKey(node, "props") && hasKey(node.props, "children") && node.props.children || hasKey(node, "children") && node.children || [];
-    var contents = "" + React__default.Children.toArray(nodeChildren).map(function (child) {
-      return getText(child);
-    }).filter(function (child) {
-      return !!child;
-    }).join("");
-
-    if (React__default.isValidElement(node) && node.type === React__default.Fragment) {
-      return contents;
-    }
-
-    var componentId = componentsCount + 1;
-    componentsCount++;
-    components[componentId] = React__default.isValidElement(node) ? React__default.cloneElement(node, {
-      key: componentId,
-      children: undefined
-    }) : node;
-    return "<" + componentId + ">" + contents + "</" + componentId + ">";
-  };
-
-  var str = getText(elt);
-  return {
-    str: str,
-    components: components,
-    componentsCount: componentsCount
-  };
-}
-function Trans(_ref) {
-  var children = _ref.children;
-
-  var _t = React__default.useContext(PlasmicTranslatorContext);
-
-  if (!_t) {
-    warnNoTranslationFunctionAtMostOnce();
-    return children;
-  }
-
-  var _genTranslatableStrin = genTranslatableString(children),
-      str = _genTranslatableStrin.str,
-      components = _genTranslatableStrin.components,
-      componentsCount = _genTranslatableStrin.componentsCount;
-
-  return _t(str, componentsCount > 0 ? {
-    components: components
-  } : undefined);
-}
-var hasWarned = false;
-
-function warnNoTranslationFunctionAtMostOnce() {
-  if (!hasWarned) {
-    console.warn("Using Plasmic Translation but no translation function has been provided");
-    hasWarned = true;
-  }
-}
-
-function hasKey(v, key) {
-  return typeof v === "object" && v !== null && key in v;
-}
-
 var PlasmicRootContext = /*#__PURE__*/createContext(undefined);
 function PlasmicRootProvider(props) {
   var platform = props.platform,
@@ -3117,40 +3118,24 @@ function useTriggeredOverlay(plasmicClass, props, config, outerRef) {
   };
 }
 
-var UNINITIALIZED = /*#__PURE__*/Symbol("plasmic.unitialized");
-function keyBy(list, keyFunc) {
-  var keyedObject = {};
-
-  for (var _iterator = _createForOfIteratorHelperLoose(list), _step; !(_step = _iterator()).done;) {
-    var val = _step.value;
-    keyedObject[keyFunc(val)] = val;
-  }
-
-  return keyedObject;
+function generateStateOnChangeProp($state, stateName, dataReps) {
+  return function (val, path) {
+    return dset($state, [stateName].concat(dataReps, path), val);
+  };
 }
+/**
+ * This function generate the state value prop for repeated states
+ * Example:
+ *   - parent[][].counter[].count
+ * We need to pass `parent[index1][index2].counter to the child component
+ */
 
-function getObjectAtPath($state, path) {
-  var parts = path.split(".");
-  var parts2 = parts.slice(0, parts.length - 1);
-
-  if (parts2.length === 0) {
-    return $state;
-  }
-
-  var existing = get($state, parts2);
-
-  if (existing) {
-    return existing;
-  }
-
-  var newObj = {};
-  dset($state, parts2, newObj);
-  return newObj;
+function generateStateValueProp($state, path // ["parent", 0, 1, "counter"]
+) {
+  return _get($state, path);
 }
 
-function isRendering() {
-  return !!React__default.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner.current;
-}
+var UNINITIALIZED = /*#__PURE__*/Symbol("plasmic.unitialized");
 
 function shallowEqual(a1, a2) {
   if (a1.length !== a2.length) {
@@ -3166,289 +3151,441 @@ function shallowEqual(a1, a2) {
   return true;
 }
 
-function useVanillaDollarState(specs, props) {
-  var _React$useState = React__default.useState(function () {
+var isNum = function isNum(value) {
+  return typeof value === "symbol" ? false : !isNaN(+value);
+};
+
+function mkProxy(specs, maybeHandlers) {
+  var handlers = maybeHandlers != null ? maybeHandlers : function () {
     return {
-      stateValues: Object.fromEntries(specs.map(function (spec) {
-        return [spec.path, // If the initial value depends on initFunc, then we initialize
-        // it to this special UNINITIALIZED symbol. We can't just run
-        // spec.initFunc() here, because the expression may read from
-        // $state, which is not yet initialized.  Instead, we will
-        // lazily compute and initialize this at get() time.
-        spec.initFunc ? UNINITIALIZED : spec.initVal];
-      })),
-      initStateValues: Object.fromEntries(specs.filter(function (spec) {
-        return !spec.initFunc;
-      }).map(function (spec) {
-        return [spec.path, spec.initVal];
-      })),
-      initStateDeps: {},
-      fireOnChange: {}
+      get: function get(target, property) {
+        return target[property];
+      },
+      set: function set(target, property, value) {
+        return (target[property] = value) || true;
+      }
     };
-  }),
-      _$$state = _React$useState[0],
-      set$$State = _React$useState[1]; // We have a weird scheme here to reduce the number of state updates.
-  // Whenever user does a $state get() or set(), we may end up initializing
-  // a bunch of values. We don't want to call set$$State() a bunch of times.
-  // Instead, we will fork as we need to, and call set$$State() at the end of
-  // the hook and at the end of get() / set() as appropriate.
-  // $$state here is going to be copied-on-write; once copied, it will
-  // be directly mutated. Since $state will always be directly proxying $$state,
-  // that means you can "read what you wrote": after $state.count = $state.count + 1,
-  // if you read $state.count again, it will reflect the latest value.
-  //
-  // There are three places where we might actually call set$$State():
-  // 1. At the end of a "top-level" get(): we may have ended up initializing
-  //    some state values.
-  // 2. At the end of a "top-level" set(): we mutated this value, but also
-  //    may have reset some other state values that depended on this one.
-  // 3. At the end of the hook, where we compare the new initial value with
-  //    the previous initial value.
-
-
-  var $$state = _extends({}, _$$state);
-
-  var dirtyFields = {
-    stateValues: false,
-    initStateValues: false,
-    initStateDeps: false,
-    fireOnChange: false
   };
 
-  function makeDirty(field, copy) {
-    if (!dirtyFields[field]) {
-      dirtyFields[field] = true;
-      $$state[field] = copy($$state[field]);
-    }
-  }
-
-  function updateStateValue(path, value) {
-    makeDirty("stateValues", function (x) {
-      return _extends({}, x);
-    });
-    console.log("UPDATE state value:", path, value);
-    $$state.stateValues[path] = value; // If any other state depends on this one, then reset their
-    // values to their initial as well
+  var getNextParts = function getNextParts(currPath) {
+    return Object.fromEntries(Object.values(specs).filter(function (spec) {
+      return shallowEqual(currPath.map(function (p) {
+        return isNum(p) ? "[]" : p;
+      }), spec.path.slice(0, currPath.length));
+    }).map(function (spec) {
+      var nextPart = spec.path[currPath.length];
+
+      if (spec.path.length === currPath.length + 1) {
+        return [nextPart, {
+          isLast: true,
+          specKey: spec.pathStr
+        }];
+      } else {
+        return [nextPart, {
+          isLast: false,
+          specKey: spec.pathStr
+        }];
+      }
+    }));
+  };
+  /**
+   * We use this function when we're setting a value in the middle of the state path.
+   * We can't just set the value, because we need to keep the proxy properties, so
+   * we use the specs to walk through the object and just set the value in the end of the path
+   **/
 
-    for (var _i = 0, _Object$entries = Object.entries($$state.initStateDeps); _i < _Object$entries.length; _i++) {
-      var _Object$entries$_i = _Object$entries[_i],
-          key = _Object$entries$_i[0],
-          deps = _Object$entries$_i[1];
 
-      if (deps.includes(path)) {
-        resetPath(key);
-      }
+  var cloneValue = function cloneValue(target, currPath, value) {
+    if (typeof value !== "object") {
+      return;
     }
 
-    var spec = specByPath[path];
+    var nextParts = getNextParts(currPath);
 
-    if (spec.onChangeProp) {
-      if (isRendering()) {
-        // If we're currently rendering this component, then we
-        // CANNOT fire the event handler, as it is illegal to set
-        // the state of another component during rendering.
-        // Instead, we save it into our internal state, and fire
-        // it later in a layout effect.
-        updateFireOnChange(spec.path, value);
-      } else {
-        var _props$spec$onChangeP;
-
-        // Most of the time, state changes outside of rendering
-        // (in an event handler), and we just directly call the
-        // onChange
-        (_props$spec$onChangeP = props[spec.onChangeProp]) == null ? void 0 : _props$spec$onChangeP.call(props, value);
+    for (var _i = 0, _Object$entries = Object.entries(nextParts); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = _Object$entries[_i],
+          nextPart = _Object$entries$_i[0],
+          _Object$entries$_i$ = _Object$entries$_i[1],
+          isLast = _Object$entries$_i$.isLast,
+          specKey = _Object$entries$_i$.specKey;
+
+      if (nextPart === "[]" && Array.isArray(value)) {
+        for (var i = 0; i < value.length; i++) {
+          cloneValue(target[i], [].concat(currPath, [i]), value[i]);
+        }
+      } else if (nextPart in value) {
+        if (isLast) {
+          var _handlers$set, _handlers;
+
+          handlers == null ? void 0 : (_handlers$set = (_handlers = handlers({
+            specKey: specKey,
+            path: [].concat(currPath, [nextPart])
+          })).set) == null ? void 0 : _handlers$set.call(_handlers, target, nextPart, value[nextPart], undefined);
+        } else {
+          cloneValue(target[nextPart], [].concat(currPath, [nextPart]), value[nextPart]);
+        }
       }
     }
-  }
+  };
 
-  function updateInitStateValue(path, value) {
-    makeDirty("initStateValues", function (x) {
-      return _extends({}, x);
-    });
-    console.log("UPDATE initValue:", path, value);
-    $$state.initStateValues[path] = value;
-  }
+  var rec = function rec(currPath) {
+    var nextParts = getNextParts(currPath);
+    return new Proxy("[]" in nextParts ? [] : {}, {
+      deleteProperty: function deleteProperty(target, property) {
+        if ("[]" in nextParts && isNum(property)) {
+          var _handlers$deletePrope, _handlers2;
+
+          delete target[property];
+          handlers == null ? void 0 : (_handlers$deletePrope = (_handlers2 = handlers({
+            path: [].concat(currPath, [+property]),
+            specKey: nextParts["[]"].specKey
+          })).deleteProperty) == null ? void 0 : _handlers$deletePrope.call(_handlers2, target, property);
+        } else {
+          throw new Error("You can't delete a non-repeated property in the middle of the path");
+        }
 
-  function updateInitStateDeps(path, deps) {
-    makeDirty("initStateDeps", function (x) {
-      return _extends({}, x);
-    });
-    console.log("UPDATE DEPS: " + path, deps);
-    $$state.initStateDeps[path] = deps;
-  }
+        return true;
+      },
+      get: function get(target, property, receiver) {
+        if ("[]" in nextParts && isNum(property)) {
+          if (!(property in target)) {
+            target[property] = rec([].concat(currPath, [+property]));
+          }
+        } else if (property in nextParts) {
+          if (nextParts[property].isLast) {
+            var _handlers$get, _handlers3;
+
+            return target[property] = handlers == null ? void 0 : (_handlers$get = (_handlers3 = handlers({
+              path: [].concat(currPath, [property]),
+              specKey: nextParts[property].specKey
+            })).get) == null ? void 0 : _handlers$get.call(_handlers3, target, property, receiver);
+          } else if (!(property in target)) {
+            target[property] = rec([].concat(currPath, [property]));
+          }
+        }
 
-  function updateInternalStateIfDirty() {
-    if (Object.values(dirtyFields).some(function (x) {
-      return x;
-    })) {
-      console.log("UPDATE $$STATE");
-      set$$State($$state);
-    }
-  }
+        return target[property];
+      },
+      set: function set(target, property, value, receiver) {
+        if ("[]" in nextParts && isNum(property)) {
+          if (!(property in target)) {
+            target[property] = rec([].concat(currPath, [+property]));
+          }
+        } else if (property in nextParts) {
+          if (nextParts[property].isLast) {
+            var _handlers$set2, _handlers$set3, _handlers4;
+
+            target[property] = value;
+            return (_handlers$set2 = (_handlers$set3 = (_handlers4 = handlers({
+              path: [].concat(currPath, [property]),
+              specKey: nextParts[property].specKey
+            })).set) == null ? void 0 : _handlers$set3.call(_handlers4, target, property, value, receiver)) != null ? _handlers$set2 : false;
+          }
+        }
 
-  function updateFireOnChange(path, value) {
-    makeDirty("fireOnChange", function (x) {
-      return _extends({}, x);
-    });
-    $$state.fireOnChange[path] = value;
-  }
+        if (property === "registerInitFunc") {
+          target[property] = value;
+        } else if (typeof value === "object") {
+          cloneValue(target[property], [].concat(currPath, [isNum(property) ? +property : property]), value);
+        }
 
-  console.log("useDollarState", _extends({}, _$$state));
-  var specByPath = React__default.useMemo(function () {
-    return keyBy(specs, function (spec) {
-      return spec.path;
+        return true;
+      }
     });
-  }, [specs]);
-  var stateAccessStack = [{}];
-  var $props = props;
-  /**
-   * Runs spec.initFunc, keeping track of the state accesses
-   * that occurred while running it
-   */
-
-  function trackedInit(spec) {
-    var _$$state$initStateDep;
+  };
 
-    var stateAccess = {};
-    stateAccessStack.push(stateAccess);
-    var res = spec.initFunc($props, $state);
-    var deps = Object.keys(stateAccess);
+  return rec([]);
+}
 
-    if (!shallowEqual(deps, (_$$state$initStateDep = $$state.initStateDeps[spec.path]) != null ? _$$state$initStateDep : [])) {
-      updateInitStateDeps(spec.path, deps);
-    }
+function cloneProxy(specs, states, obj) {
+  var newObj = mkProxy(specs);
+  Object.values(states).forEach(function (_ref) {
+    var path = _ref.path;
 
-    stateAccessStack.pop();
-    return res;
-  }
-  /**
-   * Resets the value for this state
-   */
+    dset(newObj, path, _get(obj, path));
+  });
+  return newObj;
+}
 
+function saveState(state, states) {
+  states[JSON.stringify(state.path)] = state;
+}
 
-  function resetPath(path) {
-    // Resets the value for this state
-    var spec = specByPath[path];
-    var initValue = trackedInit(spec);
+function hasState(state, states) {
+  return JSON.stringify(state.path) in states;
+}
 
-    if (initValue !== $$state.stateValues[spec.path]) {
-      updateStateValue(spec.path, initValue);
-    }
+var transformPathStringToObj = function transformPathStringToObj(str) {
+  // "c[][]" -> ["c", "[]", "[]"]
+  var splitStatePathPart = function splitStatePathPart(state) {
+    return state.endsWith("[]") ? [].concat(splitStatePathPart(state.slice(0, -2)), ["[]"]) : [state];
+  };
 
-    if (initValue !== $$state.initStateValues[spec.path]) {
-      updateInitStateValue(spec.path, initValue);
-    }
+  return str.split(".").flatMap(splitStatePathPart);
+};
 
-    return initValue;
-  } // Since a get() or a set() may result in other get() or set(),
-  // we keep track of whether we're at the "top-level" so we know
-  // whether to update state at the end.
+function useVanillaDollarState(_specs, props) {
+  var forceRender = React__default.useState(0)[1];
+  var $$state = React__default.useMemo(function () {
+    var specs = Object.fromEntries(_specs.map(function (_ref2) {
+      var pathStr = _ref2.path,
+          spec = _objectWithoutPropertiesLoose(_ref2, ["path"]);
+
+      return [pathStr, _extends({}, spec, {
+        pathStr: pathStr,
+        path: transformPathStringToObj(pathStr),
+        isRepeated: pathStr.split(".").some(function (part) {
+          return part.endsWith("[]");
+        })
+      })];
+    }));
+    return {
+      stateValues: mkProxy(specs),
+      initStateDeps: {},
+      initStateValues: mkProxy(specs),
+      states: {},
+      specs: specs
+    };
+  }, []);
+  var $state = Object.assign(mkProxy($$state.specs, function (state) {
+    return {
+      deleteProperty: function deleteProperty(_target, _property) {
+        var prefixPath = state.path;
 
+        for (var _i2 = 0, _Object$entries2 = Object.entries($$state.states); _i2 < _Object$entries2.length; _i2++) {
+          var _Object$entries2$_i = _Object$entries2[_i2],
+              key = _Object$entries2$_i[0],
+              existingState = _Object$entries2$_i[1];
 
-  var accessLevel = 0;
-  var $state = {};
+          if (existingState.path.length >= prefixPath.length && shallowEqual(existingState.path.slice(0, prefixPath.length), prefixPath)) {
+            delete $$state.states[key];
+          }
+        }
 
-  var _loop = function _loop() {
-    var spec = _step2.value;
-    var parts = spec.path.split(".");
-    var name = parts[parts.length - 1];
-    var obj = getObjectAtPath($state, spec.path); // Define get() and set() for this state cell
+        forceRender(function (r) {
+          return r + 1;
+        });
+        return true;
+      },
+      get: function get(_target, _property) {
+        var spec = $$state.specs[state.specKey];
 
-    Object.defineProperty(obj, name, {
-      get: function get() {
         if (spec.valueProp) {
-          return props[spec.valueProp];
+          if (!spec.isRepeated) {
+            return props[spec.valueProp];
+          } else {
+            return _get(props[spec.valueProp], state.path.slice(1));
+          }
         }
 
-        accessLevel += 1;
-        var value = $$state.stateValues[spec.path];
+        if (!hasState(state, $$state.states)) {
+          var _spec$initVal;
 
-        if (value === UNINITIALIZED) {
-          // This value has a init expression; need to be evaluated.
-          value = resetPath(spec.path);
-        } // Record that this field had just been accessed; for
-        // trackInit() to know what fields were used to compute
-        // the init value
+          saveState(state, $$state.states);
+
+          dset($$state.stateValues, state.path, spec.initFunc ? UNINITIALIZED : (_spec$initVal = spec.initVal) != null ? _spec$initVal : undefined);
 
+          var deps = spec.initFunc ? fillUninitializedStateValues($$state.specs, props, $$state.stateValues, $$state.states) : {};
 
-        stateAccessStack[stateAccessStack.length - 1][spec.path] = true;
-        accessLevel -= 1;
+          dset($$state.initStateValues, state.path, _get($$state.stateValues, state.path));
 
-        if (accessLevel === 0) {
-          updateInternalStateIfDirty();
+          $$state.initStateDeps = _extends({}, $$state.initStateDeps, deps);
+          forceRender(function (r) {
+            return r + 1;
+          });
+          return spec.initFunc ? spec.initFunc(props, $state) : spec.initVal;
         }
 
-        return value;
+        return _get($$state.stateValues, state.path);
       },
-      set: function set(newValue) {
-        accessLevel += 1;
+      set: function set(_target, _property, newValue) {
+        if (newValue !== _get($$state.stateValues, state.path)) {
+          saveState(state, $$state.states);
+
+          dset($$state.stateValues, state.path, newValue);
+
+          for (var _i3 = 0, _Object$entries3 = Object.entries($$state.initStateDeps); _i3 < _Object$entries3.length; _i3++) {
+            var _Object$entries3$_i = _Object$entries3[_i3],
+                key = _Object$entries3$_i[0],
+                deps = _Object$entries3$_i[1];
 
-        if (newValue !== $$state.stateValues[spec.path]) {
-          updateStateValue(spec.path, newValue);
+            if (deps.includes(JSON.stringify(state.path))) {
+              dset($$state.stateValues, JSON.parse(key), UNINITIALIZED);
+            }
+          }
+
+          var newDeps = fillUninitializedStateValues($$state.specs, props, $$state.stateValues, $$state.states);
+          $$state.initStateDeps = _extends({}, $$state.initStateDeps, newDeps);
+          forceRender(function (r) {
+            return r + 1;
+          });
         }
 
-        accessLevel -= 1;
+        var spec = $$state.specs[state.specKey];
 
-        if (accessLevel === 0) {
-          updateInternalStateIfDirty();
+        if (spec.onChangeProp) {
+          var _props$spec$onChangeP;
+
+          (_props$spec$onChangeP = props[spec.onChangeProp]) == null ? void 0 : _props$spec$onChangeP.call(props, newValue, state.path);
         }
-      }
-    });
-  };
 
-  for (var _iterator2 = _createForOfIteratorHelperLoose(specs), _step2; !(_step2 = _iterator2()).done;) {
-    _loop();
-  } // For each spec with an initFunc, evaluate it and see if
+        return true;
+      }
+    };
+  }), {
+    registerInitFunc: function registerInitFunc(pathStr, f) {
+      if (Object.values($$state.states).filter(function (_ref3) {
+        var specKey = _ref3.specKey;
+        return specKey === pathStr;
+      }).some(function (_ref4) {
+        var path = _ref4.path;
+        return _get($$state.stateValues, path) !== f(props, $state);
+      })) {
+        $$state.specs[pathStr] = _extends({}, $$state.specs[pathStr], {
+          initFunc: f
+        });
+        forceRender(function (r) {
+          return r + 1;
+        });
+      }
+    }
+  }); // For each spec with an initFunc, evaluate it and see if
   // the init value has changed. If so, reset its state.
 
+  var newStateValues = undefined;
+  var resetSpecs = [];
 
-  for (var _iterator3 = _createForOfIteratorHelperLoose(specs), _step3; !(_step3 = _iterator3()).done;) {
-    var spec = _step3.value;
+  for (var _i4 = 0, _Object$values = Object.values($$state.states); _i4 < _Object$values.length; _i4++) {
+    var _Object$values$_i = _Object$values[_i4],
+        path = _Object$values$_i.path,
+        specKey = _Object$values$_i.specKey;
+    var spec = $$state.specs[specKey];
 
     if (spec.initFunc) {
-      var newInit = spec.initFunc($props, $state);
+      var newInit = spec.initFunc(props, $state);
 
-      if (newInit !== $$state.initStateValues[spec.path]) {
-        console.log("init changed for " + spec.path + " from " + $$state.initStateValues[spec.path] + " to " + newInit + "; resetting state");
-        updateInitStateValue(spec.path, newInit);
-        updateStateValue(spec.path, newInit);
+      if (newInit !== _get($$state.initStateValues, path)) {
+        console.log("init changed for " + JSON.stringify(path) + " from " + _get($$state.initStateValues, path) + " to " + newInit + "; resetting state");
+        resetSpecs.push({
+          path: path,
+          specKey: specKey
+        });
 
-        if (spec.onChangeProp) {
-          updateFireOnChange(spec.path, newInit);
+        if (!newStateValues) {
+          newStateValues = cloneProxy($$state.specs, $$state.states, $$state.stateValues);
         }
+
+        dset(newStateValues, path, UNINITIALIZED);
       }
     }
   }
 
-  var fireOnChange = $$state.fireOnChange;
   React__default.useLayoutEffect(function () {
-    if (Object.keys(fireOnChange).length > 0) {
-      for (var _i2 = 0, _Object$entries2 = Object.entries(fireOnChange); _i2 < _Object$entries2.length; _i2++) {
-        var _Object$entries2$_i = _Object$entries2[_i2],
-            path = _Object$entries2$_i[0],
-            value = _Object$entries2$_i[1];
-        var spec = specByPath[path];
+    if (newStateValues !== undefined) {
+      var newDeps = fillUninitializedStateValues($$state.specs, props, newStateValues, $$state.states);
+      var initStateValues = cloneProxy($$state.specs, $$state.states, $$state.initStateValues);
+      resetSpecs.forEach(function (_ref5) {
+        var path = _ref5.path;
 
-        if (spec.onChangeProp) {
-          var _props$spec$onChangeP2;
+        dset(initStateValues, path, _get(newStateValues, path));
+      });
+      $$state.stateValues = cloneProxy($$state.specs, $$state.states, newStateValues);
+      $$state.initStateValues = initStateValues;
+      $$state.initStateDeps = _extends({}, $$state.initStateDeps, newDeps);
+      forceRender(function (r) {
+        return r + 1;
+      });
+
+      for (var _iterator = _createForOfIteratorHelperLoose(resetSpecs), _step; !(_step = _iterator()).done;) {
+        var _step$value = _step.value,
+            _path = _step$value.path,
+            _specKey = _step$value.specKey;
+        var _spec = $$state.specs[_specKey];
+
+        if (_spec.onChangeProp) {
+          var _props$_spec$onChange;
 
-          (_props$spec$onChangeP2 = props[spec.onChangeProp]) == null ? void 0 : _props$spec$onChangeP2.call(props, value);
+          console.log("Firing onChange for reset init value: " + _spec.path, _get(newStateValues, _path));
+          (_props$_spec$onChange = props[_spec.onChangeProp]) == null ? void 0 : _props$_spec$onChange.call(props, _get(newStateValues, _path));
         }
       }
-
-      set$$State(function (prev) {
-        return _extends({}, prev, {
-          fireOnChange: {}
-        });
-      });
     }
-  }, [fireOnChange, props, specByPath]); // update state if the above did some writes.
+  }, [newStateValues, props, resetSpecs, $$state.specs]);
+  /* *
+   * Initialize all known states. (we need to do it for repeated states
+   * because they're created only after the first get/set operation)
+   * If we don't initialize them, we won't be able to consume the repeated states properly.
+   * For example, let's say the consumer is just mapping the repeated states. The first operation
+   * is to get the length of the array which will always be 0 because the existing states
+   * weren't allocated yet -- they're only stored in internal state)
+   * */
+
+  for (var _i5 = 0, _Object$values2 = Object.values($$state.states); _i5 < _Object$values2.length; _i5++) {
+    var _path2 = _Object$values2[_i5].path;
+
+    _get($state, _path2);
+  }
 
-  updateInternalStateIfDirty();
   return $state;
 }
 
-var useDollarState = useVanillaDollarState;
+function fillUninitializedStateValues(specs, props, stateValues, states) {
+  var stateAccessStack = [new Set()];
+  var initFuncDeps = {};
+  var $state = Object.assign(mkProxy(specs, function (state) {
+    return {
+      get: function get(_target, _property) {
+        var spec = specs[state.specKey];
+
+        if (spec.valueProp) {
+          if (!spec.isRepeated) {
+            return props[spec.valueProp];
+          } else {
+            return _get(props[spec.valueProp], state.path.slice(1));
+          }
+        }
+
+        var value = _get(stateValues, state.path);
+
+        if (value === UNINITIALIZED) {
+          // This value has a init expression; need to be evaluated.
+          value = tracked(state);
+
+          dset(stateValues, state.path, value);
+        } // Record that this field had just been accessed; for
+        // trackInit() to know what fields were used to compute
+        // the init value
+
+
+        stateAccessStack[stateAccessStack.length - 1].add(JSON.stringify(state.path));
+        return value;
+      },
+      set: function set() {
+        throw new Error("Cannot update state values during initialization");
+      }
+    };
+  }), {
+    registerInitFunc: function registerInitFunc() {}
+  });
+
+  function tracked(state) {
+    stateAccessStack.push(new Set());
+    var res = specs[state.specKey].initFunc(props, $state);
+    var deps = stateAccessStack.pop();
+    initFuncDeps[JSON.stringify(state.path)] = [].concat(deps.values());
+    return res;
+  }
+
+  for (var _i6 = 0, _Object$values3 = Object.values(states); _i6 < _Object$values3.length; _i6++) {
+    var path = _Object$values3[_i6].path;
+
+    if (_get(stateValues, path) === UNINITIALIZED) {
+      _get($state, path);
+    }
+  }
+
+  return initFuncDeps;
+}
 
-export { DropdownMenu, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicRootProvider, PlasmicSlot, Stack, Trans, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, getDataProps, hasVariant, makeFragment, omit, pick, renderPlasmicSlot, setPlumeStrictMode, useButton, useCheckbox, useDollarState, useIsSSR, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, wrapWithClassName };
+export { DropdownMenu, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicRootProvider, PlasmicSlot, SelectContext, Stack, Trans, TriggeredOverlayContext, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, generateStateOnChangeProp, generateStateValueProp, getDataProps, hasVariant, makeFragment, omit, pick, renderPlasmicSlot, setPlumeStrictMode, useButton, useCheckbox, useVanillaDollarState as useDollarState, useIsSSR, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, wrapWithClassName };
 //# sourceMappingURL=react-web.esm.js.map