@plasmicapp/react-web 0.2.102 → 0.2.103

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,349 @@ 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]);
-    }
-  }
+  var rec = function rec(currPath) {
+    var nextParts = Object.fromEntries(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,
+          spec: spec
+        }];
+      } else {
+        return [nextPart, {
+          isLast: false,
+          spec: spec
+        }];
+      }
+    }));
+    return new Proxy("[]" in nextParts ? [] : {}, {
+      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, _handlers;
+
+            return handlers == null ? void 0 : (_handlers$get = (_handlers = handlers({
+              path: [].concat(currPath, [property]),
+              spec: nextParts[property].spec
+            })).get) == null ? void 0 : _handlers$get.call(_handlers, target, property, receiver);
+          } else if (!(property in target)) {
+            target[property] = rec([].concat(currPath, [property]));
+          }
+        }
 
-  function updateStateValue(path, value) {
-    makeDirty("stateValues", function (x) {
-      return _extends({}, x);
+        return target[property];
+      },
+      set: function set(target, property, value, receiver) {
+        if (!(property in target) && property in nextParts) {
+          if (nextParts[property].isLast) {
+            var _handlers$set, _handlers$set2, _handlers2;
+
+            return (_handlers$set = (_handlers$set2 = (_handlers2 = handlers({
+              path: [].concat(currPath, [property]),
+              spec: nextParts[property].spec
+            })).set) == null ? void 0 : _handlers$set2.call(_handlers2, target, property, value, receiver)) != null ? _handlers$set : false;
+          } else {
+            throw new Error("You can't set a value in the middle of the path");
+          }
+        } else {
+          target[property] = value;
+          return true;
+        }
+      }
     });
-    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
-
-    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);
-      }
-    }
+  return rec([]);
+}
 
-    var spec = specByPath[path];
+function cloneProxy(specs, states, obj) {
+  var newObj = mkProxy(specs);
+  Object.values(states).forEach(function (_ref) {
+    var path = _ref.path;
 
-    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;
+    dset(newObj, path, _get(obj, path));
+  });
+  return newObj;
+}
 
-        // 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);
-      }
-    }
-  }
+function saveState(state, states) {
+  states[JSON.stringify(state.path)] = state;
+}
 
-  function updateInitStateValue(path, value) {
-    makeDirty("initStateValues", function (x) {
-      return _extends({}, x);
-    });
-    console.log("UPDATE initValue:", path, value);
-    $$state.initStateValues[path] = value;
-  }
+function hasState(state, states) {
+  return JSON.stringify(state.path) in states;
+}
 
-  function updateInitStateDeps(path, deps) {
-    makeDirty("initStateDeps", function (x) {
-      return _extends({}, x);
-    });
-    console.log("UPDATE DEPS: " + path, deps);
-    $$state.initStateDeps[path] = deps;
-  }
+var transformPathStringToObj = function transformPathStringToObj(str) {
+  // "c[][]" -> ["c", "[]", "[]"]
+  var splitStatePathPart = function splitStatePathPart(state) {
+    return state.endsWith("[]") ? [].concat(splitStatePathPart(state.slice(0, -2)), ["[]"]) : [state];
+  };
 
-  function updateInternalStateIfDirty() {
-    if (Object.values(dirtyFields).some(function (x) {
-      return x;
-    })) {
-      console.log("UPDATE $$STATE");
-      set$$State($$state);
-    }
-  }
+  return str.split(".").flatMap(splitStatePathPart);
+};
 
-  function updateFireOnChange(path, value) {
-    makeDirty("fireOnChange", function (x) {
-      return _extends({}, x);
+function useVanillaDollarState(_specs, props) {
+  var specs = _specs.map(function (_ref2) {
+    var pathStr = _ref2.path,
+        spec = _objectWithoutPropertiesLoose(_ref2, ["path"]);
+
+    return _extends({}, spec, {
+      pathStr: pathStr,
+      path: transformPathStringToObj(pathStr),
+      isRepeated: pathStr.split(".").some(function (part) {
+        return part.endsWith("[]");
+      })
     });
-    $$state.fireOnChange[path] = value;
-  }
+  });
 
-  console.log("useDollarState", _extends({}, _$$state));
-  var specByPath = React__default.useMemo(function () {
-    return keyBy(specs, function (spec) {
-      return spec.path;
-    });
-  }, [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);
-
-    if (!shallowEqual(deps, (_$$state$initStateDep = $$state.initStateDeps[spec.path]) != null ? _$$state$initStateDep : [])) {
-      updateInitStateDeps(spec.path, deps);
-    }
+  var _React$useState = React__default.useState(function () {
+    var stateValues = mkProxy(specs);
+    var initStates = {};
 
-    stateAccessStack.pop();
-    return res;
-  }
-  /**
-   * Resets the value for this state
-   */
+    for (var _iterator = _createForOfIteratorHelperLoose(specs), _step; !(_step = _iterator()).done;) {
+      var spec = _step.value;
 
+      if (spec.valueProp || spec.isRepeated) {
+        continue;
+      } else if (spec.initFunc) {
+        dset(stateValues, spec.path, UNINITIALIZED);
+      } else {
+        var _spec$initVal;
 
-  function resetPath(path) {
-    // Resets the value for this state
-    var spec = specByPath[path];
-    var initValue = trackedInit(spec);
+        dset(stateValues, spec.path, (_spec$initVal = spec.initVal) != null ? _spec$initVal : undefined);
+      }
 
-    if (initValue !== $$state.stateValues[spec.path]) {
-      updateStateValue(spec.path, initValue);
+      saveState({
+        path: spec.path,
+        spec: spec
+      }, initStates);
     }
 
-    if (initValue !== $$state.initStateValues[spec.path]) {
-      updateInitStateValue(spec.path, initValue);
-    }
+    var deps = fillUninitializedStateValues(specs, props, stateValues, initStates);
+    return {
+      stateValues: stateValues,
+      initStateDeps: deps,
+      initStateValues: cloneProxy(specs, initStates, stateValues),
+      states: initStates
+    };
+  }),
+      $$state = _React$useState[0],
+      set$$State = _React$useState[1];
 
-    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.
+  var $state = mkProxy(specs, function (state) {
+    return {
+      get: function get(_target, _property) {
+        if (state.spec.valueProp) {
+          if (!state.spec.isRepeated) {
+            return props[state.spec.valueProp];
+          } else {
+            return _get(props[state.spec.valueProp], state.path.slice(1));
+          }
+        }
 
+        if (!hasState(state, $$state.states)) {
+          var _state$spec$initVal;
 
-  var accessLevel = 0;
-  var $state = {};
+          saveState(state, $$state.states);
 
-  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
+          dset($$state.stateValues, state.path, state.spec.initFunc ? UNINITIALIZED : (_state$spec$initVal = state.spec.initVal) != null ? _state$spec$initVal : undefined);
 
-    Object.defineProperty(obj, name, {
-      get: function get() {
-        if (spec.valueProp) {
-          return props[spec.valueProp];
-        }
+          var deps = state.spec.initFunc ? fillUninitializedStateValues(specs, props, $$state.stateValues, $$state.states) : {};
 
-        accessLevel += 1;
-        var value = $$state.stateValues[spec.path];
+          dset($$state.initStateValues, state.path, _get($$state.stateValues, state.path));
 
-        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
+          set$$State(function (prev) {
+            return {
+              initStateValues: cloneProxy(specs, prev.states, prev.stateValues),
+              stateValues: cloneProxy(specs, prev.states, prev.initStateValues),
+              initStateDeps: _extends({}, prev.initStateDeps, deps),
+              states: _extends({}, prev.states)
+            };
+          });
+        }
 
+        return _get($$state.stateValues, state.path);
+      },
+      set: function set(_target, _property, newValue) {
+        saveState(state, $$state.states);
 
-        stateAccessStack[stateAccessStack.length - 1][spec.path] = true;
-        accessLevel -= 1;
+        if (newValue !== _get($$state.stateValues, state.path)) {
+          dset($$state.stateValues, state.path, newValue);
 
-        if (accessLevel === 0) {
-          updateInternalStateIfDirty();
-        }
+          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];
 
-        return value;
-      },
-      set: function set(newValue) {
-        accessLevel += 1;
+            if (deps.includes(JSON.stringify(state.path))) {
+              dset($$state.stateValues, JSON.parse(key), UNINITIALIZED);
+            }
+          }
 
-        if (newValue !== $$state.stateValues[spec.path]) {
-          updateStateValue(spec.path, newValue);
-        }
+          var newDeps = fillUninitializedStateValues(specs, props, $$state.stateValues, $$state.states);
+          set$$State(function (prev) {
+            return {
+              initStateValues: _extends({}, prev.initStateValues),
+              stateValues: cloneProxy(specs, prev.states, prev.stateValues),
+              initStateDeps: _extends({}, prev.initStateDeps, newDeps),
+              states: _extends({}, prev.states)
+            };
+          });
 
-        accessLevel -= 1;
+          if (state.spec.onChangeProp) {
+            var _props$state$spec$onC;
 
-        if (accessLevel === 0) {
-          updateInternalStateIfDirty();
+            (_props$state$spec$onC = props[state.spec.onChangeProp]) == null ? void 0 : _props$state$spec$onC.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;
+      }
+    };
+  }); // 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 _i2 = 0, _Object$values = Object.values($$state.states); _i2 < _Object$values.length; _i2++) {
+    var _Object$values$_i = _Object$values[_i2],
+        path = _Object$values$_i.path,
+        spec = _Object$values$_i.spec;
 
     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,
+          spec: spec
+        });
 
-        if (spec.onChangeProp) {
-          updateFireOnChange(spec.path, newInit);
+        if (!newStateValues) {
+          newStateValues = cloneProxy(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(specs, props, newStateValues, $$state.states);
+      set$$State(function (prev) {
+        var initStateValues = cloneProxy(specs, prev.states, prev.initStateValues);
+        resetSpecs.forEach(function (_ref3) {
+          var path = _ref3.path;
+
+          dset(initStateValues, path, _get(newStateValues, path));
+        });
+        return {
+          stateValues: cloneProxy(specs, prev.states, newStateValues),
+          initStateDeps: _extends({}, prev.initStateDeps, newDeps),
+          initStateValues: initStateValues,
+          states: _extends({}, prev.states)
+        };
+      });
+
+      for (var _iterator2 = _createForOfIteratorHelperLoose(resetSpecs), _step2; !(_step2 = _iterator2()).done;) {
+        var _step2$value = _step2.value,
+            _path = _step2$value.path,
+            _spec = _step2$value.spec;
 
-        if (spec.onChangeProp) {
-          var _props$spec$onChangeP2;
+        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.
-
-  updateInternalStateIfDirty();
+  }, [newStateValues, props, resetSpecs, specs]);
   return $state;
 }
 
-var useDollarState = useVanillaDollarState;
+function fillUninitializedStateValues(specs, props, stateValues, states) {
+  var stateAccessStack = [new Set()];
+  var initFuncDeps = {};
+  var $state = mkProxy(specs, function (state) {
+    return {
+      get: function get(_target, _property) {
+        if (state.spec.valueProp) {
+          if (!state.spec.isRepeated) {
+            return props[state.spec.valueProp];
+          } else {
+            return _get(props[state.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");
+      }
+    };
+  });
+
+  function tracked(state) {
+    stateAccessStack.push(new Set());
+    var res = state.spec.initFunc(props, $state);
+    var deps = stateAccessStack.pop();
+    initFuncDeps[JSON.stringify(state.path)] = [].concat(deps.values());
+    return res;
+  }
+
+  for (var _i3 = 0, _Object$values2 = Object.values(states); _i3 < _Object$values2.length; _i3++) {
+    var path = _Object$values2[_i3].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, Stack, Trans, 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