@plasmicapp/react-web 0.2.158 → 0.2.160

package/dist/all.d.ts

@@ -36,7 +36,16 @@ declare type HTMLElementRefOf<T extends keyof JSX.IntrinsicElements> = Exclude<R
 
 declare function dlv(object: object, key: string | Array<string | number>, defaultValue?: any): any;
 
-declare type InitFunc<T> = ($props: Record<string, any>, $state: $State, $ctx: Record<string, any>, indexes?: number[]) => T;
+declare type InitFuncEnv = {
+    $props: Record<string, any>;
+    $state: Record<string, any>;
+    $queries?: Record<string, any>;
+    $ctx?: Record<string, any>;
+};
+declare type NoUndefinedField<T> = {
+    [P in keyof T]-?: T[P];
+};
+declare type InitFunc<T> = (env: NoUndefinedField<InitFuncEnv>) => T;
 declare type ObjectPath = (string | number)[];
 interface $StateSpec<T> {
     path: string;
@@ -74,9 +83,7 @@ declare function getStateSpecInPlasmicProxy(obj: any, path: ObjectPath): {
  */
 declare function set(obj: any, keys: any, val: any): void;
 
-declare function useDollarState(specs: $StateSpec<any>[], props: Record<string, any>, $ctx?: Record<string, any>, opts?: {
-    inCanvas: boolean;
-}): $State;
+declare function useDollarState(specs: $StateSpec<any>[], ...rest: any[]): $State;
 
 interface Variants {
     [vg: string]: any;

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

@@ -2625,7 +2625,7 @@ function initializeStateValue($$state, initialSpecNode, initialStatePath, proxyR
         });
         var spec = node.getSpec();
         if (spec.valueProp) {
-          return $$state.props[spec.valueProp];
+          return $$state.env.$props[spec.valueProp];
         } else if (!node.hasState(path) && spec.initFunc) {
           node.createStateCell(path);
           return initializeStateValue($$state, node, path, proxyRoot);
@@ -2641,19 +2641,23 @@ function initializeStateValue($$state, initialSpecNode, initialStatePath, proxyR
     var node = _ref.node,
       path = _ref.path;
     node.addListener(path, function () {
-      var newValue = initialSpecNode.getSpec().initFunc($$state.props, $state, $$state.ctx);
+      var newValue = initialSpecNode.getSpec().initFunc(_extends({
+        $state: $state
+      }, $$state.env));
       set(proxyRoot, initialStatePath, newValue);
     });
   });
-  var initialValue = initialSpecNode.getInitFunc(initialSpecNode.getState(initialStatePath))($$state.props, $state, $$state.ctx);
+  var initialValue = initialSpecNode.getInitFunc(initialSpecNode.getState(initialStatePath))(_extends({
+    $state: $state
+  }, $$state.env));
   initialSpecNode.setInitialValue(initialStatePath, clone(initialValue));
   var initialSpec = initialSpecNode.getSpec();
   var value = initialSpec.isImmutable ? mkUntrackedValue(initialValue) : clone(initialValue);
   set(proxyRoot, initialStatePath, value);
   //immediately fire onChange
   if (initialSpec.onChangeProp) {
-    var _$$state$props$initia, _$$state$props;
-    (_$$state$props$initia = (_$$state$props = $$state.props)[initialSpec.onChangeProp]) == null ? void 0 : _$$state$props$initia.call(_$$state$props, initialValue);
+    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);
   }
   return initialValue;
 }
@@ -2671,11 +2675,11 @@ function create$StateProxy($$state, leafHandlers) {
         }
         delete _get($$state.stateValues, currPath)[property];
         if (spec.onChangeProp) {
-          var _$$state$props$spec$o, _$$state$props2;
+          var _$$state$env$$props$s, _$$state$env$$props2;
           //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$props$spec$o = (_$$state$props2 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o.call(_$$state$props2, _get(proxyRoot, currPath.slice(spec.pathObj.length)));
+          (_$$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)));
         }
         var nextPath = getNextPath(property);
         var nextNode = currNode.makeTransition(property);
@@ -2739,12 +2743,19 @@ function create$StateProxy($$state, leafHandlers) {
         } else {
           Reflect.set(target, property, value, receiver);
         }
-        nextNode.getAllSpecs().forEach(function (spec) {
+        if (currNode.isLeaf()) {
           if (spec.onChangeProp) {
-            var _$$state$props$spec$o2, _$$state$props3;
-            (_$$state$props$spec$o2 = (_$$state$props3 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o2.call(_$$state$props3, value);
+            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);
+            }
+          });
+        }
         var newValue = (isOutside || currNode.isLeaf()) && currNode.getSpec().isImmutable ? mkUntrackedValue(value) : value;
         set($$state.stateValues, nextPath, newValue);
         return true;
@@ -2772,22 +2783,65 @@ function create$StateProxy($$state, leafHandlers) {
 var mkUntrackedValue = function mkUntrackedValue(o) {
   return o != null && typeof o === "object" ? valtio.ref(o) : o;
 };
-function useDollarState(specs, props, $ctx, opts) {
+var envFieldsAreNonNill = function envFieldsAreNonNill(env) {
+  var _env$$ctx, _env$$queries;
+  return {
+    $props: env.$props,
+    $ctx: (_env$$ctx = env.$ctx) != null ? _env$$ctx : {},
+    $queries: (_env$$queries = env.$queries) != null ? _env$$queries : {}
+  };
+};
+/**
+ * We need to support two versions with different parameters to be backward compatible
+ *    {
+ *       specs: $StateSpec<any>[],
+ *       props: Record<string, any>,
+ *       $ctx?: Record<string, any>,
+ *       opts?: { inCanvas: boolean; }
+ *    }
+ *    {
+ *       specs: $StateSpec<any>[],
+ *       env: { $props; $queries; $ctx },
+ *       opts?: { inCanvas: boolean }
+ *    }
+ */
+function extractDollarStateParametersBackwardCompatible() {
+  if ("$props" in (arguments.length <= 0 ? undefined : arguments[0])) {
+    // latest version
+    return {
+      env: arguments.length <= 0 ? undefined : arguments[0],
+      opts: arguments.length <= 1 ? undefined : arguments[1]
+    };
+  } else {
+    return {
+      env: {
+        $props: arguments.length <= 0 ? undefined : arguments[0],
+        $ctx: arguments.length <= 1 ? undefined : arguments[1],
+        $queries: {}
+      },
+      opts: arguments.length <= 2 ? undefined : arguments[2]
+    };
+  }
+}
+function useDollarState(specs) {
+  for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    rest[_key - 1] = arguments[_key];
+  }
+  var _extractDollarStatePa = extractDollarStateParametersBackwardCompatible.apply(void 0, rest),
+    env = _extractDollarStatePa.env,
+    opts = _extractDollarStatePa.opts;
   var $$state = React__default.useRef(function () {
     var rootSpecTree = buildTree(specs);
     return {
       rootSpecTree: rootSpecTree,
       specTreeLeaves: getStateCells(rootSpecTree),
       stateValues: valtio.proxy({}),
-      props: {},
-      ctx: {},
+      env: envFieldsAreNonNill(env),
       specs: [],
       registrationsQueue: valtio.proxy([])
     };
   }()).current;
-  $$state.props = props;
-  $$state.ctx = $ctx != null ? $ctx : {};
-  $$state.specs = specs;
+  $$state.env = envFieldsAreNonNill(env), $$state.specs = specs;
   var create$State = function create$State() {
     var $state = Object.assign(create$StateProxy($$state, function (node, path) {
       if (!node.hasState(path)) {
@@ -2803,7 +2857,7 @@ function useDollarState(specs, props, $ctx, opts) {
         get: function get(target, property, receiver) {
           var spec = node.getSpec();
           if (spec.valueProp) {
-            return $$state.props[spec.valueProp];
+            return $$state.env.$props[spec.valueProp];
           } else {
             return Reflect.get(target, property, receiver);
           }
@@ -2817,7 +2871,9 @@ function useDollarState(specs, props, $ctx, opts) {
         if (!node.hasState(realPath)) {
           node.createStateCell(realPath);
         }
-        if (!deepEqual(node.getState(realPath).initialValue, f($$state.props, $state, $$state.ctx))) {
+        if (!deepEqual(node.getState(realPath).initialValue, f(_extends({
+          $state: $state
+        }, $$state.env)))) {
           $$state.registrationsQueue.push(mkUntrackedValue({
             node: node,
             path: realPath,
@@ -2854,7 +2910,7 @@ function useDollarState(specs, props, $ctx, opts) {
         return;
       }
       node.createStateCell(spec.pathObj);
-      var init = spec.valueProp ? $$state.props[spec.valueProp] : spec.initFunc ? initializeStateValue($$state, node, spec.pathObj, $state) : spec.initVal;
+      var init = spec.valueProp ? $$state.env.$props[spec.valueProp] : spec.initFunc ? initializeStateValue($$state, node, spec.pathObj, $state) : spec.initVal;
       set($state, spec.pathObj, init);
     });
   }
@@ -2873,7 +2929,9 @@ function useDollarState(specs, props, $ctx, opts) {
       stateCell = _ref3.stateCell;
     var initFunc = node.getInitFunc(stateCell);
     if (initFunc) {
-      var newInit = initFunc(props, $state, $ctx != null ? $ctx : {});
+      var newInit = initFunc(_extends({
+        $state: $state
+      }, envFieldsAreNonNill(env)));
       if (!deepEqual(newInit, stateCell.initialValue)) {
         resetSpecs.push({
           stateCell: stateCell,
@@ -2886,8 +2944,8 @@ function useDollarState(specs, props, $ctx, opts) {
     var newInit = initializeStateValue($$state, node, stateCell.path, $state);
     var spec = node.getSpec();
     if (spec.onChangeProp) {
-      var _$$state$props$spec$o3, _$$state$props4;
-      (_$$state$props$spec$o3 = (_$$state$props4 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o3.call(_$$state$props4, newInit);
+      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);
     }
   };
   useIsomorphicLayoutEffect$1(function () {
@@ -2896,7 +2954,7 @@ function useDollarState(specs, props, $ctx, opts) {
         node = _ref4.node;
       reInitializeState(node, stateCell);
     });
-  }, [props, resetSpecs]);
+  }, [env.$props, resetSpecs]);
   useIsomorphicLayoutEffect$1(function () {
     while ($$state.registrationsQueue.length) {
       var _$$state$registration = $$state.registrationsQueue.shift(),