@plasmicapp/react-web 0.2.183 → 0.2.185

package/dist/all.d.ts

@@ -11678,6 +11678,7 @@ declare function generateStateOnChangeProp($state: $State, path: ObjectPath): (v
 declare function generateStateOnChangePropForCodeComponents($state: $State, stateName: string, plasmicStatePath: ObjectPath, componentHelpers: ComponentHelpers<any>): (val: any) => void;
 declare function generateStateValueProp($state: $State, path: ObjectPath): any;
 declare function isPlasmicStateProxy(obj: any): boolean;
+declare function is$StateProxy(obj: any): number | boolean | undefined;
 declare function getStateCellsInPlasmicProxy(obj: any): {
     realPath: ObjectPath;
     path: string;
@@ -13299,4 +13300,4 @@ interface TriggeredOverlayContextValue {
 }
 declare const TriggeredOverlayContext: React$1.Context<TriggeredOverlayContextValue | undefined>;
 
-export { $State, $StateSpec, BaseButtonProps, BaseMenuButtonProps, BaseMenuGroupProps, BaseMenuItemProps, BaseMenuProps, BaseSelectOptionGroupProps, BaseSelectOptionProps, BaseSelectProps, BaseTextInputProps, BaseTriggeredOverlayProps, ButtonRef, CheckboxProps, CheckboxRef, CheckboxRefValue, DropdownMenu, Flex, HTMLElementRefOf, HtmlAnchorOnlyProps, HtmlButtonOnlyProps, MenuButtonRef, MenuButtonRefValue, MenuRef, MenuRefValue, MultiChoiceArg, PlasmicDataSourceContextProvider, PlasmicHead, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicPageGuard, PlasmicRootProvider, PlasmicSlot, SelectContext, SelectOptionRef, SelectRef, SelectRefValue, SingleBooleanChoiceArg, SingleChoiceArg, Stack, StrictProps, SwitchProps, SwitchRef, SwitchRefValue, TextInputRef, TextInputRefValue, Trans, TriggeredOverlayConfig, TriggeredOverlayContext, TriggeredOverlayRef, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, generateStateOnChangeProp, generateStateOnChangePropForCodeComponents, generateStateValueProp, dlv as get, getCurrentInitialValue, getDataProps, getStateCellsInPlasmicProxy, getStateSpecInPlasmicProxy, hasVariant, initializeCodeComponentStates, initializePlasmicStates, isPlasmicStateProxy, makeFragment, mergeVariantsWithStates, omit, pick, plasmicHeadMeta, renderPlasmicSlot, resetToInitialValue, set, setPlumeStrictMode, useButton, useCheckbox, useCurrentUser, useDollarState, useIsSSR, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, wrapWithClassName };
+export { $State, $StateSpec, BaseButtonProps, BaseMenuButtonProps, BaseMenuGroupProps, BaseMenuItemProps, BaseMenuProps, BaseSelectOptionGroupProps, BaseSelectOptionProps, BaseSelectProps, BaseTextInputProps, BaseTriggeredOverlayProps, ButtonRef, CheckboxProps, CheckboxRef, CheckboxRefValue, DropdownMenu, Flex, HTMLElementRefOf, HtmlAnchorOnlyProps, HtmlButtonOnlyProps, MenuButtonRef, MenuButtonRefValue, MenuRef, MenuRefValue, MultiChoiceArg, PlasmicDataSourceContextProvider, PlasmicHead, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicPageGuard, PlasmicRootProvider, PlasmicSlot, SelectContext, SelectOptionRef, SelectRef, SelectRefValue, SingleBooleanChoiceArg, SingleChoiceArg, Stack, StrictProps, SwitchProps, SwitchRef, SwitchRefValue, TextInputRef, TextInputRefValue, Trans, TriggeredOverlayConfig, TriggeredOverlayContext, TriggeredOverlayRef, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, generateStateOnChangeProp, generateStateOnChangePropForCodeComponents, generateStateValueProp, dlv as get, getCurrentInitialValue, getDataProps, getStateCellsInPlasmicProxy, getStateSpecInPlasmicProxy, hasVariant, initializeCodeComponentStates, initializePlasmicStates, is$StateProxy, isPlasmicStateProxy, makeFragment, mergeVariantsWithStates, omit, pick, plasmicHeadMeta, renderPlasmicSlot, resetToInitialValue, set, setPlumeStrictMode, useButton, useCheckbox, useCurrentUser, useDollarState, useIsSSR, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, wrapWithClassName };

package/dist/react-web.cjs.development.js

@@ -13,9 +13,9 @@ var ReactDOM = require('react-dom');
 var ReactDOM__default = _interopDefault(ReactDOM);
 var ssr = require('@react-aria/ssr');
 var focus = require('@react-aria/focus');
+var valtio = require('valtio');
 var clone = _interopDefault(require('clone'));
 var deepEqual = _interopDefault(require('fast-deep-equal'));
-var valtio = require('valtio');
 var checkbox = require('@react-aria/checkbox');
 var visuallyHidden = require('@react-aria/visually-hidden');
 var toggle = require('@react-stately/toggle');
@@ -2554,6 +2554,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, {});
@@ -2587,6 +2588,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 (valtio.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 (valtio.getVersion(maybeValtioProxy) && spec.onChangeProp) {
+    var unsub = valtio.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;
@@ -2647,8 +2672,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();
@@ -2656,23 +2681,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);
       },
@@ -2680,27 +2705,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);
         }
@@ -2709,62 +2730,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" ? valtio.ref(o) : o;
@@ -2850,12 +2851,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);
           }
         }
       };
@@ -2904,7 +2907,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;
@@ -2913,11 +2916,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);
     });
@@ -2942,8 +2945,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 () {
@@ -3038,6 +3041,9 @@ var useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? React.useLayou
 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] || valtio.getVersion(obj));
+}
 function getStateCells($state, root) {
   if ($state == null || typeof $state !== "object") {
     return [];
@@ -3087,11 +3093,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 {
@@ -3134,18 +3138,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
@@ -4708,6 +4700,7 @@ exports.getStateSpecInPlasmicProxy = getStateSpecInPlasmicProxy;
 exports.hasVariant = hasVariant;
 exports.initializeCodeComponentStates = initializeCodeComponentStates;
 exports.initializePlasmicStates = initializePlasmicStates;
+exports.is$StateProxy = is$StateProxy;
 exports.isPlasmicStateProxy = isPlasmicStateProxy;
 exports.makeFragment = makeFragment;
 exports.mergeVariantsWithStates = mergeVariantsWithStates;