@plasmicapp/react-web 0.2.155 → 0.2.157

package/dist/states/graph.d.ts

@@ -28,6 +28,7 @@ export declare class StateSpecNode<T> {
     states(): StateCell<T>[];
     hasState(path: ObjectPath): boolean;
     createStateCell(path: ObjectPath): void;
+    deleteStateCell(prefixPath: ObjectPath): void;
     setInitialValue(path: ObjectPath, value: any): void;
     getInitialValue(path: ObjectPath): Symbol | T | undefined;
     addListener(path: ObjectPath, f: () => void): void;

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,5 @@
-import { $State, $StateSpec } from "./types";
-export declare function useDollarState(specs: $StateSpec<any>[], props: Record<string, any>, $ctx?: Record<string, any>, opts?: {
+import { $State, $StateSpec, DollarStateEnv } from "./types";
+export declare function useDollarState(specs: $StateSpec<any>[], env: DollarStateEnv, opts?: {
     inCanvas: boolean;
 }): $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.155",
+  "version": "0.2.157",
   "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.35",
+    "@plasmicapp/data-sources": "0.1.37",
     "@plasmicapp/data-sources-context": "0.1.6",
-    "@plasmicapp/host": "1.0.104",
+    "@plasmicapp/host": "1.0.106",
     "@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": "ad015d481e656aa9235c5ac30cd83d184a8a11a9"
+  "gitHead": "64f5e28630820046b17012ad59e544061dade419"
 }

package/skinny/dist/index.js

@@ -802,6 +802,15 @@ var StateSpecNode = /** @class */ (function () {
             path: path
         };
     };
+    StateSpecNode.prototype.deleteStateCell = function (prefixPath) {
+        var _this = this;
+        __spreadArray([], __read(Object.keys(this._state)), false).forEach(function (key) {
+            var path = JSON.parse(key);
+            if (shallowEqual(prefixPath, path.slice(0, prefixPath.length))) {
+                delete _this._state[key];
+            }
+        });
+    };
     StateSpecNode.prototype.setInitialValue = function (path, value) {
         var key = JSON.stringify(path);
         this._state[key].initialValue = value;
@@ -1063,7 +1072,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);
@@ -1078,11 +1087,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
@@ -1091,7 +1100,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;
 }
@@ -1116,7 +1125,14 @@ 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);
+                if (nextNode) {
+                    getStateCells(nextNode).forEach(function (node) {
+                        node.deleteStateCell(nextPath);
+                    });
                 }
                 return Reflect.deleteProperty(target, property);
             },
@@ -1143,7 +1159,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) {
@@ -1175,12 +1191,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;
@@ -1217,22 +1240,27 @@ 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 : {}
+    });
+};
+function useDollarState(specs, env, 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)) {
@@ -1249,7 +1277,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);
@@ -1262,7 +1290,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 }));
                 }
             }
@@ -1296,7 +1324,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;
@@ -1312,7 +1340,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 });
             }
@@ -1323,7 +1351,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 () {
@@ -1331,7 +1359,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;