@plasmicapp/react-web 0.2.183 → 0.2.185

package/dist/react-web.esm.js

@@ -8,9 +8,9 @@ export { default as get } from 'dlv';
 import ReactDOM__default, { createPortal } from 'react-dom';
 import { SSRProvider, useIsSSR as useIsSSR$1 } from '@react-aria/ssr';
 import { useFocusRing, useFocusable, FocusScope } from '@react-aria/focus';
+import { proxy, ref, useSnapshot, getVersion, subscribe } from 'valtio';
 import clone from 'clone';
 import deepEqual from 'fast-deep-equal';
-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';
@@ -2549,6 +2549,7 @@ function canProxy(value) {
   return typeof value === "object" && value != null;
 }
 var proxyObjToStateCell = /*#__PURE__*/new WeakMap();
+var valtioSubscriptions = /*#__PURE__*/new WeakMap();
 function ensureStateCell(target, property, path, node) {
   if (!proxyObjToStateCell.has(target)) {
     proxyObjToStateCell.set(target, {});
@@ -2582,6 +2583,30 @@ function tryGetStateCellFrom$StateRoot($state, path) {
 function getStateCellFrom$StateRoot($state, path) {
   return ensure(tryGetStateCellFrom$StateRoot($state, path));
 }
+function unsubscribeToValtio($$state, statePath) {
+  var oldValue = _get($$state.stateValues, statePath);
+  if (getVersion(oldValue)) {
+    var _valtioSubscriptions$;
+    (_valtioSubscriptions$ = valtioSubscriptions.get(oldValue)) == null ? void 0 : _valtioSubscriptions$.forEach(function (f) {
+      return f();
+    });
+    valtioSubscriptions["delete"](oldValue);
+  }
+}
+function subscribeToValtio($$state, statePath, node) {
+  var spec = node.getSpec();
+  var maybeValtioProxy = spec.valueProp ? $$state.env.$props[spec.valueProp] : _get($$state.stateValues, statePath);
+  if (getVersion(maybeValtioProxy) && spec.onChangeProp) {
+    var unsub = subscribe(maybeValtioProxy, function () {
+      var _$$state$env$$props$s, _$$state$env$$props;
+      (_$$state$env$$props$s = (_$$state$env$$props = $$state.env.$props)[spec.onChangeProp]) == null ? void 0 : _$$state$env$$props$s.call(_$$state$env$$props, spec.valueProp ? $$state.env.$props[spec.valueProp] : _get($$state.stateValues, statePath));
+    });
+    if (!valtioSubscriptions.has(maybeValtioProxy)) {
+      valtioSubscriptions.set(maybeValtioProxy, []);
+    }
+    ensure(valtioSubscriptions.get(maybeValtioProxy)).push(unsub);
+  }
+}
 function initializeStateValue($$state, initialStateCell, proxyRoot) {
   var _initialStateCell$ove2;
   var initialStateName = initialStateCell.node.getSpec().path;
@@ -2642,8 +2667,8 @@ function initializeStateValue($$state, initialStateCell, proxyRoot) {
   set(proxyRoot, initialStateCell.path, value);
   //immediately fire onChange
   if (initialSpec.onChangeProp) {
-    var _$$state$env$$props$i, _$$state$env$$props;
-    (_$$state$env$$props$i = (_$$state$env$$props = $$state.env.$props)[initialSpec.onChangeProp]) == null ? void 0 : _$$state$env$$props$i.call(_$$state$env$$props, initialValue);
+    var _$$state$env$$props$i, _$$state$env$$props2;
+    (_$$state$env$$props$i = (_$$state$env$$props2 = $$state.env.$props)[initialSpec.onChangeProp]) == null ? void 0 : _$$state$env$$props$i.call(_$$state$env$$props2, initialValue);
   }
   $$state.stateInitializationEnv.visited["delete"](initialStateName);
   $$state.stateInitializationEnv.stack.pop();
@@ -2651,23 +2676,23 @@ function initializeStateValue($$state, initialStateCell, proxyRoot) {
 }
 function create$StateProxy($$state, leafHandlers) {
   var proxyRoot;
-  var rec = function rec(currPath, currNode, isOutside, initialObject) {
+  var rec = function rec(currPath, currNode) {
     var getNextPath = function getNextPath(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(property)) {
+        if (!currNode.isLeaf() && !currNode.hasArrayTransition() && !isNum(property)) {
           throw new InvalidOperation("Can't delete a property in the middle of the state spec");
         }
         delete _get($$state.stateValues, currPath)[property];
         if (spec.onChangeProp) {
-          var _$$state$env$$props$s, _$$state$env$$props2;
+          var _$$state$env$$props$s2, _$$state$env$$props3;
           //we are always in a leaf, since we only have two cases:
           // 1 - delete properties outside the state tree
           // 2 - delete indices in repeated implicit states, but these can't be exposed, so they don't have onChangeProp
-          (_$$state$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)));
+          (_$$state$env$$props$s2 = (_$$state$env$$props3 = $$state.env.$props)[spec.onChangeProp]) == null ? void 0 : _$$state$env$$props$s2.call(_$$state$env$$props3, _get(proxyRoot, currPath.slice(spec.pathObj.length)));
         }
         return Reflect.deleteProperty(target, property);
       },
@@ -2675,27 +2700,23 @@ function create$StateProxy($$state, leafHandlers) {
         if (property === PLASMIC_STATE_PROXY_SYMBOL) {
           return {
             node: currNode,
-            path: currPath,
-            isOutside: isOutside
+            path: currPath
           };
         }
         var nextPath = getNextPath(property);
-        if (isOutside || currNode.isLeaf()) {
-          return Reflect.get(target, property, receiver);
-        }
         var nextNode = currNode.makeTransition(property);
         if (nextNode != null && nextNode.isLeaf()) {
           var _leafHandlers$get, _leafHandlers;
           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);
+          target[property] = rec(nextPath, nextNode);
         }
         return Reflect.get(target, property, receiver);
       },
       set: function set$1(target, property, value, receiver) {
-        var _nextNode, _nextNode2;
         var nextPath = getNextPath(property);
         var nextNode = currNode.makeTransition(property);
+        var nextSpec = nextNode == null ? void 0 : nextNode.getSpec();
         if (property === "registerInitFunc" && currPath.length === 0) {
           return Reflect.set(target, property, value, receiver);
         }
@@ -2704,62 +2725,42 @@ function create$StateProxy($$state, leafHandlers) {
           //array can set his own properties such as length, map, ...
           return Reflect.set(target, property, value, receiver);
         }
-        if ((_nextNode = nextNode) != null && _nextNode.isLeaf()) {
+        if (nextNode != null && nextNode.isLeaf()) {
           var _leafHandlers$set, _leafHandlers2;
           (_leafHandlers$set = (_leafHandlers2 = leafHandlers(ensureStateCell(receiver, property, nextPath, nextNode))).set) == null ? void 0 : _leafHandlers$set.call(_leafHandlers2, target, property, value, receiver);
+          Reflect.set(target, property, value, receiver);
+          if (nextSpec != null && nextSpec.onChangeProp) {
+            var _$$state$env$$props$n, _$$state$env$$props4;
+            (_$$state$env$$props$n = (_$$state$env$$props4 = $$state.env.$props)[nextSpec.onChangeProp]) == null ? void 0 : _$$state$env$$props$n.call(_$$state$env$$props4, value);
+          }
         }
-        if (!isOutside && !currNode.isLeaf() && !nextNode) {
+        if (!nextNode) {
           // can't set an unknown field in $state
           return false;
         }
-        // we keep pointing to the leaf
-        if (!nextNode) {
-          assert(isOutside || currNode.isLeaf, "unexpected update in nextNode");
-          nextNode = currNode;
-        }
-        if (canProxy(value)) {
-          target[property] = rec(nextPath, nextNode, isOutside || currNode.isLeaf(), value);
-        } else if (!isOutside && !currNode.isLeaf() && !((_nextNode2 = nextNode) != null && _nextNode2.isLeaf())) {
-          throw new InvalidOperation("inserting a primitive value into a non-leaf");
-        } else {
-          Reflect.set(target, property, value, receiver);
-        }
-        if (currNode.isLeaf()) {
-          if (spec.onChangeProp) {
-            var _$$state$env$$props$s2, _$$state$env$$props3;
-            (_$$state$env$$props$s2 = (_$$state$env$$props3 = $$state.env.$props)[spec.onChangeProp]) == null ? void 0 : _$$state$env$$props$s2.call(_$$state$env$$props3, target);
-          }
-        } else {
-          nextNode.getAllSpecs().forEach(function (spec) {
-            if (spec.onChangeProp) {
-              var _$$state$env$$props$s3, _$$state$env$$props4;
-              (_$$state$env$$props$s3 = (_$$state$env$$props4 = $$state.env.$props)[spec.onChangeProp]) == null ? void 0 : _$$state$env$$props$s3.call(_$$state$env$$props4, value);
-            }
+        if (canProxy(value) && !nextNode.isLeaf()) {
+          target[property] = rec(nextPath, nextNode);
+          Reflect.ownKeys(value).forEach(function (key) {
+            target[property][key] = value[key];
           });
+        } else if (!nextNode.isLeaf()) {
+          throw new InvalidOperation("inserting a primitive value into a non-leaf");
         }
-        var newValue = (isOutside || currNode.isLeaf()) && currNode.getSpec().isImmutable ? mkUntrackedValue(value) : value;
+        var newValue = nextNode.isLeaf() && nextSpec != null && nextSpec.isImmutable ? mkUntrackedValue(value) : value;
+        unsubscribeToValtio($$state, nextPath);
         set($$state.stateValues, nextPath, newValue);
+        subscribeToValtio($$state, nextPath, nextNode);
         return true;
       }
     };
-    var baseObject = !isOutside && !currNode.isLeaf() ? currNode.hasArrayTransition() ? [] : {} : Array.isArray(initialObject) ? [] : Object.create(Object.getPrototypeOf(initialObject != null ? initialObject : {}));
+    var baseObject = currNode.hasArrayTransition() ? [] : {};
     var proxyObj = new Proxy(baseObject, handlers);
     if (currPath.length === 0) {
       proxyRoot = proxyObj;
     }
-    if (initialObject) {
-      Reflect.ownKeys(initialObject).forEach(function (key) {
-        var desc = Object.getOwnPropertyDescriptor(initialObject, key);
-        if (desc.get || desc.set) {
-          Object.defineProperty(baseObject, key, desc);
-        } else {
-          proxyObj[key] = initialObject[key];
-        }
-      });
-    }
     return proxyObj;
   };
-  return rec([], $$state.rootSpecTree, false, undefined);
+  return rec([], $$state.rootSpecTree);
 }
 var mkUntrackedValue = function mkUntrackedValue(o) {
   return o != null && typeof o === "object" ? ref(o) : o;
@@ -2845,12 +2846,14 @@ function useDollarState(specs) {
         set($state, stateCell.path, spec.initVal);
       }
       return {
-        get: function get(target, property, receiver) {
+        get: function get() {
           var spec = stateCell.node.getSpec();
           if (spec.valueProp) {
-            return $$state.env.$props[spec.valueProp];
+            var valueProp = $$state.env.$props[spec.valueProp];
+            subscribeToValtio($$state, stateCell.path, stateCell.node);
+            return valueProp;
           } else {
-            return Reflect.get(target, property, receiver);
+            return _get($$state.stateValues, stateCell.path);
           }
         }
       };
@@ -2899,7 +2902,7 @@ function useDollarState(specs) {
     }
     // we need to eager initialize all states in canvas to populate the data picker
     $$state.specTreeLeaves.forEach(function (node) {
-      var _newSpec$initFuncHash;
+      var _newSpec$initFuncHash, _newSpec$initFuncHash2;
       var spec = node.getSpec();
       if (spec.isRepeated) {
         return;
@@ -2908,11 +2911,11 @@ function useDollarState(specs) {
       var newSpec = specs.find(function (sp) {
         return sp.path === spec.path;
       });
-      if (!newSpec || stateCell.initFuncHash === (newSpec == null ? void 0 : newSpec.initFuncHash) || stateCell.initialValue !== UNINITIALIZED) {
+      if (!newSpec || stateCell.initFuncHash === ((_newSpec$initFuncHash = newSpec == null ? void 0 : newSpec.initFuncHash) != null ? _newSpec$initFuncHash : "") && stateCell.initialValue !== UNINITIALIZED) {
         return;
       }
       stateCell.initFunc = newSpec.initFunc;
-      stateCell.initFuncHash = (_newSpec$initFuncHash = newSpec.initFuncHash) != null ? _newSpec$initFuncHash : "";
+      stateCell.initFuncHash = (_newSpec$initFuncHash2 = newSpec.initFuncHash) != null ? _newSpec$initFuncHash2 : "";
       var init = spec.valueProp ? $$state.env.$props[spec.valueProp] : spec.initFunc ? initializeStateValue($$state, stateCell, $state) : spec.initVal;
       set($state, spec.pathObj, init);
     });
@@ -2937,8 +2940,8 @@ function useDollarState(specs) {
     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);
+      var _$$state$env$$props$s3, _$$state$env$$props5;
+      (_$$state$env$$props$s3 = (_$$state$env$$props5 = $$state.env.$props)[spec.onChangeProp]) == null ? void 0 : _$$state$env$$props$s3.call(_$$state$env$$props5, newInit);
     }
   };
   useIsomorphicLayoutEffect$1(function () {
@@ -3033,6 +3036,9 @@ var useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? useLayoutEffec
 function isPlasmicStateProxy(obj) {
   return obj != null && typeof obj === "object" && !!obj[PLASMIC_STATE_PROXY_SYMBOL];
 }
+function is$StateProxy(obj) {
+  return obj != null && typeof obj === "object" && (!!obj[PLASMIC_STATE_PROXY_SYMBOL] || getVersion(obj));
+}
 function getStateCells($state, root) {
   if ($state == null || typeof $state !== "object") {
     return [];
@@ -3082,11 +3088,9 @@ function getStateSpecInPlasmicProxy(obj, path) {
   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 node = obj[PLASMIC_STATE_PROXY_SYMBOL].node;
   var nextNode = node.makeTransition(path[path.length - 1]);
-  if (isOutside || node.isLeaf() || !nextNode) {
+  if (node.isLeaf() || !nextNode) {
     return undefined;
   }
   return {
@@ -3129,18 +3133,6 @@ function arrayEq(xs, ys) {
 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
@@ -4662,5 +4654,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, generateStateOnChangePropForCodeComponents, generateStateValueProp, getCurrentInitialValue, getDataProps, getStateCellsInPlasmicProxy, getStateSpecInPlasmicProxy, hasVariant, initializeCodeComponentStates, initializePlasmicStates, 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 };
+export { DropdownMenu, PlasmicHead, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicPageGuard, PlasmicRootProvider, PlasmicSlot, SelectContext, Stack, Trans, TriggeredOverlayContext, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, generateStateOnChangeProp, generateStateOnChangePropForCodeComponents, generateStateValueProp, getCurrentInitialValue, getDataProps, getStateCellsInPlasmicProxy, getStateSpecInPlasmicProxy, hasVariant, initializeCodeComponentStates, initializePlasmicStates, is$StateProxy, 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