@plasmicapp/react-web 0.2.133 → 0.2.135

package/dist/react-web.esm.js

@@ -8,6 +8,7 @@ import { PlasmicDataSourceContextProvider } from '@plasmicapp/data-sources-conte
 export { PlasmicDataSourceContextProvider, useCurrentUser } from '@plasmicapp/data-sources-context';
 import { SSRProvider, useIsSSR as useIsSSR$1 } from '@react-aria/ssr';
 import { useFocusRing, useFocusable, FocusScope } from '@react-aria/focus';
+import clone from 'clone';
 import deepEqual from 'fast-deep-equal';
 import { proxy, ref, useSnapshot } from 'valtio';
 import { subscribeKey } from 'valtio/utils';
@@ -1734,20 +1735,105 @@ function set(obj, keys, val) {
   }
 }
 var useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+function shallowEqual(a1, a2) {
+  if (a1.length !== a2.length) {
+    return false;
+  }
 
-var mkUntrackedValue = function mkUntrackedValue(o) {
-  return o != null && typeof o === "object" ? ref(o) : o;
-};
+  for (var i = 0; i < a1.length; i++) {
+    if (a1[i] !== a2[i]) {
+      return false;
+    }
+  }
+
+  return true;
+}
+function isNum(value) {
+  return typeof value === "symbol" ? false : !isNaN(+value);
+}
+
+var ARRAY_SYMBOL = /*#__PURE__*/Symbol("[]");
+
+var StateSpecNode = /*#__PURE__*/function () {
+  function StateSpecNode(specs) {
+    this.specs = specs;
+    this.edges = new Map();
+  }
+
+  var _proto = StateSpecNode.prototype;
+
+  _proto.hasEdge = function hasEdge(key) {
+    return this.edges.has(key);
+  };
+
+  _proto.addEdge = function addEdge(key, node) {
+    this.edges.set(key, node);
+  };
+
+  _proto.makeTransition = function makeTransition(key) {
+    key = isNum(key) ? ARRAY_SYMBOL : key;
+    return this.edges.get(key);
+  };
+
+  _proto.isLeaf = function isLeaf() {
+    return this.edges.size === 0;
+  };
+
+  _proto.hasArrayTransition = function hasArrayTransition() {
+    return this.edges.has(ARRAY_SYMBOL);
+  };
 
+  _proto.getSpec = function getSpec() {
+    return this.specs[0];
+  };
+
+  _proto.getAllSpecs = function getAllSpecs() {
+    return this.specs;
+  };
+
+  return StateSpecNode;
+}();
 var transformPathStringToObj = function transformPathStringToObj(str) {
   var splitStatePathPart = function splitStatePathPart(state) {
-    return state.endsWith("[]") ? [].concat(splitStatePathPart(state.slice(0, -2)), ["[]"]) : [state];
+    return state.endsWith("[]") ? [].concat(splitStatePathPart(state.slice(0, -2)), [ARRAY_SYMBOL]) : [state];
   };
 
   return str.split(".").flatMap(splitStatePathPart);
 };
+function buildGraph(specs) {
+  var internalSpec = specs.map(function (spec) {
+    return _extends({}, spec, {
+      pathObj: transformPathStringToObj(spec.path),
+      isRepeated: spec.path.split(".").some(function (part) {
+        return part.endsWith("[]");
+      })
+    });
+  });
 
-function shallowEqual(a1, a2) {
+  var rec = function rec(currentPath) {
+    var node = new StateSpecNode(internalSpec.filter(function (spec) {
+      return shallowEqual(currentPath, spec.pathObj.slice(0, currentPath.length));
+    }));
+    node.getAllSpecs().forEach(function (spec) {
+      if (spec.pathObj.length > currentPath.length) {
+        var nextKey = spec.pathObj[currentPath.length];
+
+        if (!node.hasEdge(nextKey)) {
+          node.addEdge(nextKey, rec([].concat(currentPath, [nextKey])));
+        }
+      }
+    });
+    return node;
+  };
+
+  return rec([]);
+}
+
+var mkUntrackedValue = function mkUntrackedValue(o) {
+  return o != null && typeof o === "object" ? ref(o) : o;
+};
+
+function shallowEqual$1(a1, a2) {
   if (a1.length !== a2.length) {
     return false;
   }
@@ -1761,7 +1847,7 @@ function shallowEqual(a1, a2) {
   return true;
 }
 
-function isNum(value) {
+function isNum$1(value) {
   return typeof value === "symbol" ? false : !isNaN(+value);
 }
 
@@ -1783,37 +1869,12 @@ function saveNewState($$state, path, spec) {
 }
 
 function create$StateProxy($$state, handlers) {
-  var getNextKeyToSpecMap = function getNextKeyToSpecMap(currPath) {
-    return new Map(Object.entries(Object.values($$state.specsByKey).filter(function (spec) {
-      return shallowEqual(currPath.map(function (p) {
-        return isNum(p) ? "[]" : p;
-      }), spec.pathObj.slice(0, currPath.length));
-    }).reduce(function (agg, spec) {
-      var nextKey = spec.pathObj[currPath.length];
-
-      if (!(nextKey in agg)) {
-        agg[nextKey] = [];
-      }
-
-      agg[nextKey].push(spec);
-      return agg;
-    }, {})));
-  };
-
-  var rec = function rec(currPath) {
-    var nextKeyToSpecs = getNextKeyToSpecMap(currPath);
-
-    var getSpecForProperty = function getSpecForProperty(property) {
-      var _nextKeyToSpecs$get, _nextKeyToSpecs$get2;
-
-      return nextKeyToSpecs.has("[]") && isNum(property) ? (_nextKeyToSpecs$get = nextKeyToSpecs.get("[]")) == null ? void 0 : _nextKeyToSpecs$get[0] : typeof property === "string" && nextKeyToSpecs.has(property) ? (_nextKeyToSpecs$get2 = nextKeyToSpecs.get(property)) == null ? void 0 : _nextKeyToSpecs$get2[0] : undefined;
-    };
-
+  var rec = function rec(currPath, currNode) {
     var getNextPath = function getNextPath(property) {
-      return [].concat(currPath, [isNum(property) ? +property : property]);
+      return [].concat(currPath, [isNum$1(property) ? +property : property]);
     };
 
-    return new Proxy(nextKeyToSpecs.has("[]") ? [] : {}, {
+    return new Proxy(currNode.hasArrayTransition() ? [] : {}, {
       deleteProperty: function deleteProperty(target, property) {
         var prefixPath = getNextPath(property);
         var specKeysToUpdate = new Set();
@@ -1821,7 +1882,7 @@ function create$StateProxy($$state, handlers) {
           var path = _ref.path,
               specKey = _ref.specKey;
 
-          if (path.length >= prefixPath.length && shallowEqual(path.slice(0, prefixPath.length), prefixPath)) {
+          if (path.length >= prefixPath.length && shallowEqual$1(path.slice(0, prefixPath.length), prefixPath)) {
             deleteState($$state, path);
             specKeysToUpdate.add(specKey);
           }
@@ -1838,36 +1899,34 @@ function create$StateProxy($$state, handlers) {
         return Reflect.deleteProperty(target, property);
       },
       get: function get(target, property, receiver) {
-        var spec = getSpecForProperty(property);
-
-        if (spec && typeof property !== "symbol") {
-          var nextPath = getNextPath(property);
+        var nextPath = getNextPath(property);
+        var nextNode = currNode.makeTransition(property);
 
-          if (spec.pathObj.length === currPath.length + 1) {
+        if (nextNode) {
+          if (nextNode.isLeaf()) {
             var _handlers$get, _handlers;
 
-            // reached the end of the spec
-            target[property] = (_handlers$get = (_handlers = handlers(nextPath, spec)).get) == null ? void 0 : _handlers$get.call(_handlers, target, property, receiver);
+            target[property] = (_handlers$get = (_handlers = handlers(nextPath, nextNode.getSpec())).get) == null ? void 0 : _handlers$get.call(_handlers, target, property, receiver);
           } else if (!(property in target)) {
-            target[property] = rec(nextPath);
+            target[property] = rec(nextPath, nextNode);
           }
         }
 
         return Reflect.get(target, property, receiver);
       },
       set: function set$1(target, property, value, receiver) {
-        var spec = getSpecForProperty(property);
         var nextPath = getNextPath(property);
+        var nextNode = currNode.makeTransition(property);
 
-        if (spec && typeof property !== "symbol") {
-          if (spec.pathObj.length === currPath.length + 1) {
+        if (nextNode && typeof property !== "symbol") {
+          if (nextNode.isLeaf()) {
             var _handlers$set, _handlers2;
 
             // reached the end of the spec
-            target[property] = (_handlers$set = (_handlers2 = handlers(nextPath, spec)).set) == null ? void 0 : _handlers$set.call(_handlers2, target, property, value, receiver);
+            target[property] = (_handlers$set = (_handlers2 = handlers(nextPath, nextNode.getSpec())).set) == null ? void 0 : _handlers$set.call(_handlers2, target, property, value, receiver);
             return Reflect.set(target, property, value, receiver);
           } else if (typeof value === "object") {
-            target[property] = rec(nextPath);
+            target[property] = rec(nextPath, nextNode);
 
             for (var _i = 0, _Object$keys = Object.keys(value); _i < _Object$keys.length; _i++) {
               var key = _Object$keys[_i];
@@ -1882,13 +1941,13 @@ function create$StateProxy($$state, handlers) {
           return Reflect.set(target, property, value, receiver);
         }
 
-        if (nextKeyToSpecs.has("[]")) {
-          var _nextKeyToSpecs$get3;
+        if (currNode.hasArrayTransition()) {
+          var _currNode$makeTransit, _currNode$makeTransit2;
 
           set($$state.stateValues, nextPath, value);
 
-          (_nextKeyToSpecs$get3 = nextKeyToSpecs.get("[]")) == null ? void 0 : _nextKeyToSpecs$get3.forEach(function (spec) {
-            if (spec != null && spec.onChangeProp) {
+          (_currNode$makeTransit = currNode.makeTransition(ARRAY_SYMBOL)) == null ? void 0 : (_currNode$makeTransit2 = _currNode$makeTransit.getAllSpecs()) == null ? void 0 : _currNode$makeTransit2.forEach(function (spec) {
+            if (spec.onChangeProp) {
               var _$$state$props$spec$o2, _$$state$props2;
 
               (_$$state$props$spec$o2 = (_$$state$props2 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o2.call(_$$state$props2, value, nextPath);
@@ -1903,7 +1962,7 @@ function create$StateProxy($$state, handlers) {
     });
   };
 
-  return rec([]);
+  return rec([], $$state.rootStateSpec);
 }
 
 var deleteState = function deleteState($$state, path) {
@@ -1974,7 +2033,7 @@ function initializeStateValue($$state, initialStatePath, initialSpec) {
     var path = _ref2.path,
         spec = _ref2.spec;
     var unsubscribe = subscribeKey(_get($$state.stateValues, path.slice(-1)), path.slice(-1)[0], function () {
-      return set($$state.stateValues, initialStatePath, mkUntrackedValue(initialSpec.initFunc($$state.props, $state, $$state.ctx, getIndexes(path, spec))));
+      return saveValue($$state, initialStatePath, initialSpec, initialSpec.initFunc($$state.props, $state, $$state.ctx, getIndexes(path, spec)));
     });
     $$state.unsubscriptionsByState[initialStateKey].push(unsubscribe);
   });
@@ -1983,27 +2042,25 @@ function initializeStateValue($$state, initialStatePath, initialSpec) {
   return initialValue;
 }
 
-function saveStateInitialValue($$state, path, spec, initialValue) {
-  // array states are a special case.Wwe listen for changes in the array and in the array cells.
-  // for example: $state.people.push(...), $state.people.splice(...), $state.people[0] = ...
-  // that's why we need to track the array object
-  if (spec.isArray && Array.isArray(initialValue)) {
-    var array = initialValue.map(function (val) {
-      return mkUntrackedValue(val);
-    });
-
-    set($$state.stateValues, path, array); // we need to make the array untracked for initStateValues
-    // so we can distinguish between stateValue and initStateValue.
-    // otherwise they would reference the same array.
-
-
-    set($$state.initStateValues, path, mkUntrackedValue(array));
+function saveValue($$state, path, spec, value) {
+  if (spec.isImmutable) {
+    set($$state.stateValues, path, mkUntrackedValue(value));
   } else {
+    set($$state.stateValues, path, value);
+  }
+}
+
+function saveStateInitialValue($$state, path, spec, initialValue) {
+  if (spec.isImmutable) {
     var untrackedValue = mkUntrackedValue(initialValue);
 
     set($$state.stateValues, path, untrackedValue);
 
-    set($$state.initStateValues, path, untrackedValue);
+    set($$state.initStateValues, path, clone(untrackedValue));
+  } else {
+    set($$state.stateValues, path, clone(initialValue));
+
+    set($$state.initStateValues, path, clone(initialValue));
   }
 }
 
@@ -2024,7 +2081,8 @@ function useDollarState(specs, props, $ctx) {
     unsubscriptionsByState: {},
     props: {},
     ctx: {},
-    registrationsQueue: []
+    registrationsQueue: [],
+    rootStateSpec: buildGraph(specs)
   })).current;
   $$state.props = mkUntrackedValue(props);
   $$state.ctx = mkUntrackedValue($ctx != null ? $ctx : {});
@@ -2048,8 +2106,8 @@ function useDollarState(specs, props, $ctx) {
           return _get($$state.stateValues, path);
         }
       },
-      set: function set$1(_t, _p, value) {
-        set($$state.stateValues, path, mkUntrackedValue(value));
+      set: function set(_t, _p, value) {
+        saveValue($$state, path, spec, value);
 
         if (spec.onChangeProp) {
           var _$$state$props$spec$o3, _$$state$props3;
@@ -2143,28 +2201,12 @@ function useCanvasDollarState(specs, props, $ctx) {
     unsubscriptionsByState: {},
     props: {},
     ctx: {},
-    registrationsQueue: []
+    registrationsQueue: [],
+    rootStateSpec: buildGraph(specs)
   });
   $$state.props = mkUntrackedValue(props);
   $$state.ctx = mkUntrackedValue($ctx);
-  var $state = create$StateProxy($$state, function (path, spec) {
-    return {
-      get: function get() {
-        return _get($$state.stateValues, path);
-      },
-      set: function set$1(_t, _p, value) {
-        set($$state.stateValues, path, mkUntrackedValue(value));
-
-        if (spec.onChangeProp) {
-          var _$$state$props$spec$o5, _$$state$props5;
-
-          (_$$state$props$spec$o5 = (_$$state$props5 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o5.call(_$$state$props5, value, path);
-        }
-
-        return true;
-      }
-    };
-  });
+  var $state = {};
 
   for (var _iterator = _createForOfIteratorHelperLoose(specs), _step; !(_step = _iterator()).done;) {
     var spec = _step.value;
@@ -3729,5 +3771,5 @@ function useTriggeredOverlay(plasmicClass, props, config, outerRef, isDismissabl
   };
 }
 
-export { DropdownMenu, PlasmicHead, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicRootProvider, PlasmicSlot, SelectContext, Stack, Trans, TriggeredOverlayContext, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, generateStateOnChangeProp, generateStateValueProp, getDataProps, hasVariant, makeFragment, mergeVariantsWithStates, omit, pick, plasmicHeadMeta, renderPlasmicSlot, set, setPlumeStrictMode, useButton, useCanvasDollarState, useCheckbox, useDollarState, useIsSSR, useIsomorphicLayoutEffect$1 as useIsomorphicLayoutEffect, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, wrapWithClassName };
+export { DropdownMenu, PlasmicHead, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicRootProvider, PlasmicSlot, SelectContext, Stack, Trans, TriggeredOverlayContext, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, generateStateOnChangeProp, generateStateValueProp, getDataProps, hasVariant, isNum, makeFragment, mergeVariantsWithStates, omit, pick, plasmicHeadMeta, renderPlasmicSlot, set, setPlumeStrictMode, shallowEqual, useButton, useCanvasDollarState, useCheckbox, useDollarState, useIsSSR, useIsomorphicLayoutEffect$1 as useIsomorphicLayoutEffect, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, wrapWithClassName };
 //# sourceMappingURL=react-web.esm.js.map