@plasmicapp/react-web 0.2.158 → 0.2.160

package/dist/states/types.d.ts

@@ -1,4 +1,14 @@
-export declare type InitFunc<T> = ($props: Record<string, any>, $state: $State, $ctx: Record<string, any>, indexes?: number[]) => T;
+export declare type InitFuncEnv = {
+    $props: Record<string, any>;
+    $state: Record<string, any>;
+    $queries?: Record<string, any>;
+    $ctx?: Record<string, any>;
+};
+export declare type DollarStateEnv = Omit<InitFuncEnv, "$state">;
+export declare type NoUndefinedField<T> = {
+    [P in keyof T]-?: T[P];
+};
+export declare type InitFunc<T> = (env: NoUndefinedField<InitFuncEnv>) => T;
 export declare type ObjectPath = (string | number)[];
 export interface $StateSpec<T> {
     path: string;

package/dist/states/valtio.d.ts

@@ -1,5 +1,3 @@
 import { $State, $StateSpec } from "./types";
-export declare function useDollarState(specs: $StateSpec<any>[], props: Record<string, any>, $ctx?: Record<string, any>, opts?: {
-    inCanvas: boolean;
-}): $State;
+export declare function useDollarState(specs: $StateSpec<any>[], ...rest: any[]): $State;
 export default useDollarState;

package/dist/stories/UseDollarState.stories.d.ts

@@ -58,6 +58,9 @@ interface Person {
 export declare const FormBuilder: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, {
     people: Person[];
 }>;
+export declare const FormBuilderImplicitStates: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, {
+    people: Person[];
+}>;
 export declare const StateCellIsArray: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, {
     people: Person[];
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/react-web",
-  "version": "0.2.158",
+  "version": "0.2.160",
   "description": "plasmic library for rendering in the presentational style",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -40,9 +40,9 @@
   },
   "prettier": {},
   "dependencies": {
-    "@plasmicapp/data-sources": "0.1.37",
+    "@plasmicapp/data-sources": "0.1.38",
     "@plasmicapp/data-sources-context": "0.1.6",
-    "@plasmicapp/host": "1.0.106",
+    "@plasmicapp/host": "1.0.107",
     "@plasmicapp/query": "0.1.61",
     "@react-aria/checkbox": "^3.5.0",
     "@react-aria/focus": "^3.7.0",
@@ -109,5 +109,5 @@
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "gitHead": "647b3037c147e62e938c8a796ebc138c05e31601"
+  "gitHead": "fe1acf49f45a1c6f14418cd4f3ff62efddb5183d"
 }

package/skinny/dist/index.js

@@ -1075,7 +1075,7 @@ function initializeStateValue($$state, initialSpecNode, initialStatePath, proxyR
             stateAccess.add({ path: path, node: node });
             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);
@@ -1090,11 +1090,11 @@ function initializeStateValue($$state, initialSpecNode, initialStatePath, proxyR
     stateAccess.forEach(function (_a) {
         var node = _a.node, path = _a.path;
         node.addListener(path, function () {
-            var newValue = initialSpecNode.getSpec().initFunc($$state.props, $state, $$state.ctx);
+            var newValue = initialSpecNode.getSpec().initFunc(__assign({ $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))(__assign({ $state: $state }, $$state.env));
     initialSpecNode.setInitialValue(initialStatePath, clone(initialValue));
     var initialSpec = initialSpecNode.getSpec();
     var value = initialSpec.isImmutable
@@ -1103,7 +1103,7 @@ function initializeStateValue($$state, initialSpecNode, initialStatePath, proxyR
     set(proxyRoot, initialStatePath, value);
     //immediately fire onChange
     if (initialSpec.onChangeProp) {
-        (_b = (_a = $$state.props)[initialSpec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, initialValue);
+        (_b = (_a = $$state.env.$props)[initialSpec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, initialValue);
     }
     return initialValue;
 }
@@ -1128,7 +1128,7 @@ function create$StateProxy($$state, leafHandlers) {
                     //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
-                    (_b = (_a = $$state.props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, get(proxyRoot, currPath.slice(spec.pathObj.length)));
+                    (_b = (_a = $$state.env.$props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, get(proxyRoot, currPath.slice(spec.pathObj.length)));
                 }
                 var nextPath = getNextPath(property);
                 var nextNode = currNode.makeTransition(property);
@@ -1162,7 +1162,7 @@ function create$StateProxy($$state, leafHandlers) {
                 return Reflect.get(target, property, receiver);
             },
             set: function (target, property, value, receiver) {
-                var _a, _b;
+                var _a, _b, _c, _d;
                 var nextPath = getNextPath(property);
                 var nextNode = currNode.makeTransition(property);
                 if (property === "registerInitFunc" && currPath.length === 0) {
@@ -1194,12 +1194,19 @@ function create$StateProxy($$state, leafHandlers) {
                 else {
                     Reflect.set(target, property, value, receiver);
                 }
-                nextNode.getAllSpecs().forEach(function (spec) {
-                    var _a, _b;
+                if (currNode.isLeaf()) {
                     if (spec.onChangeProp) {
-                        (_b = (_a = $$state.props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+                        (_d = (_c = $$state.env.$props)[spec.onChangeProp]) === null || _d === void 0 ? void 0 : _d.call(_c, target);
                     }
-                });
+                }
+                else {
+                    nextNode.getAllSpecs().forEach(function (spec) {
+                        var _a, _b;
+                        if (spec.onChangeProp) {
+                            (_b = (_a = $$state.env.$props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+                        }
+                    });
+                }
                 var newValue = (isOutside || currNode.isLeaf()) && currNode.getSpec().isImmutable
                     ? mkUntrackedValue(value)
                     : value;
@@ -1236,22 +1243,69 @@ function create$StateProxy($$state, leafHandlers) {
 var mkUntrackedValue = function (o) {
     return o != null && typeof o === "object" ? ref(o) : o;
 };
-function useDollarState(specs, props, $ctx, opts) {
+var envFieldsAreNonNill = function (env) {
+    var _a, _b;
+    return ({
+        $props: env.$props,
+        $ctx: (_a = env.$ctx) !== null && _a !== void 0 ? _a : {},
+        $queries: (_b = env.$queries) !== null && _b !== void 0 ? _b : {}
+    });
+};
+/**
+ * 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() {
+    var rest = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        rest[_i] = arguments[_i];
+    }
+    if ("$props" in rest[0]) {
+        // latest version
+        return {
+            env: rest[0],
+            opts: rest[1]
+        };
+    }
+    else {
+        return {
+            env: {
+                $props: rest[0],
+                $ctx: rest[1],
+                $queries: {}
+            },
+            opts: rest[2]
+        };
+    }
+}
+function useDollarState(specs) {
+    var rest = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        rest[_i - 1] = arguments[_i];
+    }
+    var _a = extractDollarStateParametersBackwardCompatible.apply(void 0, __spreadArray([], __read(rest), false)), env = _a.env, opts = _a.opts;
     var $$state = React__default.useRef((function () {
         var rootSpecTree = buildTree(specs);
         return {
             rootSpecTree: rootSpecTree,
             specTreeLeaves: getStateCells(rootSpecTree),
             stateValues: proxy({}),
-            props: {},
-            ctx: {},
+            env: envFieldsAreNonNill(env),
             specs: [],
             registrationsQueue: proxy([])
         };
     })()).current;
-    $$state.props = props;
-    $$state.ctx = $ctx !== null && $ctx !== void 0 ? $ctx : {};
-    $$state.specs = specs;
+    ($$state.env = envFieldsAreNonNill(env)), ($$state.specs = specs);
     var create$State = function () {
         var $state = Object.assign(create$StateProxy($$state, function (node, path) {
             if (!node.hasState(path)) {
@@ -1268,7 +1322,7 @@ function useDollarState(specs, props, $ctx, opts) {
                 get: function (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);
@@ -1281,7 +1335,7 @@ 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(__assign({ $state: $state }, $$state.env)))) {
                     $$state.registrationsQueue.push(mkUntrackedValue({ node: node, path: realPath, f: f }));
                 }
             }
@@ -1315,7 +1369,7 @@ function useDollarState(specs, props, $ctx, opts) {
             }
             node.createStateCell(spec.pathObj);
             var init = spec.valueProp
-                ? $$state.props[spec.valueProp]
+                ? $$state.env.$props[spec.valueProp]
                 : spec.initFunc
                     ? initializeStateValue($$state, node, spec.pathObj, $state)
                     : spec.initVal;
@@ -1331,7 +1385,7 @@ function useDollarState(specs, props, $ctx, opts) {
         var node = _a.node, stateCell = _a.stateCell;
         var initFunc = node.getInitFunc(stateCell);
         if (initFunc) {
-            var newInit = initFunc(props, $state, $ctx !== null && $ctx !== void 0 ? $ctx : {});
+            var newInit = initFunc(__assign({ $state: $state }, envFieldsAreNonNill(env)));
             if (!deepEqual(newInit, stateCell.initialValue)) {
                 resetSpecs.push({ stateCell: stateCell, node: node });
             }
@@ -1342,7 +1396,7 @@ function useDollarState(specs, props, $ctx, opts) {
         var newInit = initializeStateValue($$state, node, stateCell.path, $state);
         var spec = node.getSpec();
         if (spec.onChangeProp) {
-            (_b = (_a = $$state.props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, newInit);
+            (_b = (_a = $$state.env.$props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, newInit);
         }
     };
     useIsomorphicLayoutEffect(function () {
@@ -1350,7 +1404,7 @@ function useDollarState(specs, props, $ctx, opts) {
             var stateCell = _a.stateCell, node = _a.node;
             reInitializeState(node, stateCell);
         });
-    }, [props, resetSpecs]);
+    }, [env.$props, resetSpecs]);
     useIsomorphicLayoutEffect(function () {
         while ($$state.registrationsQueue.length) {
             var _a = $$state.registrationsQueue.shift(), node = _a.node, path = _a.path, f = _a.f;