@plasmicapp/react-web 0.2.182 → 0.2.184

package/dist/states/helpers.d.ts

@@ -15,6 +15,7 @@ export declare function generateStateOnChangePropForCodeComponents($state: $Stat
 export declare function generateStateValueProp($state: $State, path: ObjectPath): any;
 export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
 export declare function isPlasmicStateProxy(obj: any): boolean;
+export declare function is$StateProxy(obj: any): number | boolean | undefined;
 export declare function getStateCells($state: $State, root: StateSpecNode<any>): StateCell<any>[];
 export declare function getStateCellsInPlasmicProxy(obj: any): {
     realPath: ObjectPath;

package/dist/states/index.d.ts

@@ -1,4 +1,4 @@
 export { default as get } from "dlv";
-export { generateStateOnChangeProp, generateStateOnChangePropForCodeComponents, generateStateValueProp, getCurrentInitialValue, getStateCellsInPlasmicProxy, getStateSpecInPlasmicProxy, initializeCodeComponentStates, initializePlasmicStates, isPlasmicStateProxy, resetToInitialValue, set, } from "./helpers";
+export { generateStateOnChangeProp, generateStateOnChangePropForCodeComponents, generateStateValueProp, getCurrentInitialValue, getStateCellsInPlasmicProxy, getStateSpecInPlasmicProxy, initializeCodeComponentStates, initializePlasmicStates, is$StateProxy, isPlasmicStateProxy, resetToInitialValue, set, } from "./helpers";
 export { $State, $StateSpec } from "./types";
 export { useDollarState } from "./valtio";

package/dist/states/valtio.d.ts

@@ -1,6 +1,10 @@
-import { $State, $StateSpec, ObjectPath, StateCell } from "./types";
+import { StateSpecNode } from "./graph";
+import { $State, $StateSpec, Internal$State, ObjectPath, StateCell } from "./types";
 export declare const proxyObjToStateCell: WeakMap<object, Record<string | number | symbol, StateCell<any>>>;
+export declare const valtioSubscriptions: WeakMap<object, (() => boolean)[]>;
 export declare function tryGetStateCellFrom$StateRoot($state: $State, path: ObjectPath): StateCell<any> | undefined;
 export declare function getStateCellFrom$StateRoot($state: $State, path: ObjectPath): StateCell<any>;
+export declare function unsubscribeToValtio($$state: Internal$State, statePath: ObjectPath): void;
+export declare function subscribeToValtio($$state: Internal$State, statePath: ObjectPath, node: StateSpecNode<any>): void;
 export declare function useDollarState(specs: $StateSpec<any>[], ...rest: any[]): $State;
 export default useDollarState;

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

@@ -72,5 +72,6 @@ export declare const ImmutableStateCells: import("@storybook/csf").AnnotatedStor
     people: Person[];
 }>;
 export declare const InCanvasDollarState: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, {}>;
+export declare const AddDeleteSpecsInCanvas: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, {}>;
 export declare const TodoApp: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, {}>;
 export declare const CycleInStateInitialization: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, {}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/react-web",
-  "version": "0.2.182",
+  "version": "0.2.184",
   "description": "plasmic library for rendering in the presentational style",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -102,7 +102,7 @@
   },
   "prettier": {},
   "dependencies": {
-    "@plasmicapp/data-sources": "0.1.54",
+    "@plasmicapp/data-sources": "0.1.55",
     "@plasmicapp/data-sources-context": "0.1.7",
     "@plasmicapp/host": "1.0.120",
     "@plasmicapp/query": "0.1.61",
@@ -171,5 +171,5 @@
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "gitHead": "dff00ecdf8a21a7e4744bcfd80efc4d5478fd00d"
+  "gitHead": "9eeaff2cc90823316469cbf70122b0c5c650a594"
 }

package/skinny/dist/index.js

@@ -14,9 +14,9 @@ import { T as Trans } from './ssr-08aff522.js';
 export { P as PlasmicRootProvider, T as Trans, g as genTranslatableString, u as useIsSSR } from './ssr-08aff522.js';
 import ReactDOM__default from 'react-dom';
 import { useFocusRing } 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 '@react-aria/ssr';
 
 // https://stackoverflow.com/a/2117523
@@ -945,6 +945,7 @@ function canProxy(value) {
     return typeof value === "object" && value != null;
 }
 var proxyObjToStateCell = new WeakMap();
+var valtioSubscriptions = new WeakMap();
 function ensureStateCell(target, property, path, node) {
     var _a;
     if (!proxyObjToStateCell.has(target)) {
@@ -978,6 +979,32 @@ function tryGetStateCellFrom$StateRoot($state, path) {
 function getStateCellFrom$StateRoot($state, path) {
     return ensure(tryGetStateCellFrom$StateRoot($state, path));
 }
+function unsubscribeToValtio($$state, statePath) {
+    var _a;
+    var oldValue = get($$state.stateValues, statePath);
+    if (getVersion(oldValue)) {
+        (_a = valtioSubscriptions.get(oldValue)) === null || _a === void 0 ? void 0 : _a.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 _a, _b;
+            (_b = (_a = $$state.env.$props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, 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 _a, _b, _c;
     var initialStateName = initialStateCell.node.getSpec().path;
@@ -1041,7 +1068,7 @@ function initializeStateValue($$state, initialStateCell, proxyRoot) {
 }
 function create$StateProxy($$state, leafHandlers) {
     var proxyRoot;
-    var rec = function (currPath, currNode, isOutside, initialObject) {
+    var rec = function (currPath, currNode) {
         var getNextPath = function (property) { return __spreadArray(__spreadArray([], __read(currPath), false), [
             isNum$1(property) ? +property : property,
         ], false); };
@@ -1049,8 +1076,7 @@ function create$StateProxy($$state, leafHandlers) {
         var handlers = {
             deleteProperty: function (target, property) {
                 var _a, _b;
-                if (!isOutside &&
-                    !currNode.isLeaf() &&
+                if (!currNode.isLeaf() &&
                     !currNode.hasArrayTransition() &&
                     !isNum$1(property)) {
                     throw new InvalidOperation("Can't delete a property in the middle of the state spec");
@@ -1069,20 +1095,16 @@ 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 === void 0 ? void 0 : nextNode.isLeaf()) {
                     return (_b = (_a = leafHandlers(ensureStateCell(receiver, property, nextPath, nextNode))).get) === null || _b === void 0 ? void 0 : _b.call(_a, 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);
             },
@@ -1090,6 +1112,7 @@ function create$StateProxy($$state, leafHandlers) {
                 var _a, _b, _c, _d;
                 var nextPath = getNextPath(property);
                 var nextNode = currNode.makeTransition(property);
+                var nextSpec = nextNode === null || nextNode === void 0 ? void 0 : nextNode.getSpec();
                 if (property === "registerInitFunc" && currPath.length === 0) {
                     return Reflect.set(target, property, value, receiver);
                 }
@@ -1100,70 +1123,41 @@ function create$StateProxy($$state, leafHandlers) {
                 }
                 if (nextNode === null || nextNode === void 0 ? void 0 : nextNode.isLeaf()) {
                     (_b = (_a = leafHandlers(ensureStateCell(receiver, property, nextPath, nextNode))).set) === null || _b === void 0 ? void 0 : _b.call(_a, target, property, value, receiver);
+                    Reflect.set(target, property, value, receiver);
+                    if (nextSpec === null || nextSpec === void 0 ? void 0 : nextSpec.onChangeProp) {
+                        (_d = (_c = $$state.env.$props)[nextSpec.onChangeProp]) === null || _d === void 0 ? void 0 : _d.call(_c, 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);
+                if (canProxy(value) && !nextNode.isLeaf()) {
+                    target[property] = rec(nextPath, nextNode);
+                    Reflect.ownKeys(value).forEach(function (key) {
+                        target[property][key] = value[key];
+                    });
                 }
-                else if (!isOutside && !currNode.isLeaf() && !(nextNode === null || nextNode === void 0 ? void 0 : nextNode.isLeaf())) {
+                else if (!nextNode.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) {
-                        (_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
+                var newValue = nextNode.isLeaf() && (nextSpec === null || nextSpec === void 0 ? void 0 : 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 !== void 0 ? 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 (o) {
     return o != null && typeof o === "object" ? ref(o) : o;
@@ -1253,13 +1247,15 @@ function useDollarState(specs) {
                 set($state, stateCell.path, spec.initVal);
             }
             return {
-                get: function (target, property, receiver) {
+                get: function () {
                     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);
                     }
                 }
             };
@@ -1296,11 +1292,13 @@ function useDollarState(specs) {
             var old$state_1 = $state;
             $state = ref.current = create$State();
             $$state.specTreeLeaves = newLeaves;
-            getStateCells(newLeaves, $$state.rootSpecTree).forEach(function (_a) {
+            getStateCells(old$state_1, $$state.rootSpecTree).forEach(function (_a) {
                 var path = _a.path;
                 var oldStateCell = tryGetStateCellFrom$StateRoot(old$state_1, path);
                 if (oldStateCell) {
                     set($state, path, get(old$state_1, path));
+                    var newStateCell = getStateCellFrom$StateRoot($state, path);
+                    newStateCell.initialValue = oldStateCell.initialValue;
                 }
             });
         }
@@ -1313,7 +1311,9 @@ function useDollarState(specs) {
             }
             var stateCell = getStateCellFrom$StateRoot($state, spec.pathObj);
             var newSpec = specs.find(function (sp) { return sp.path === spec.path; });
-            if (!newSpec || stateCell.initFuncHash === (newSpec === null || newSpec === void 0 ? void 0 : newSpec.initFuncHash)) {
+            if (!newSpec ||
+                stateCell.initFuncHash === (newSpec === null || newSpec === void 0 ? void 0 : newSpec.initFuncHash) ||
+                stateCell.initialValue !== UNINITIALIZED) {
                 return;
             }
             stateCell.initFunc = newSpec.initFunc;
@@ -1445,28 +1445,33 @@ var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect
 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) {
     var e_3, _a;
     var _b;
     if ($state == null || typeof $state !== "object") {
         return [];
     }
-    var stateCells = Object.values((_b = proxyObjToStateCell.get($state)) !== null && _b !== void 0 ? _b : {});
-    if (root.isLeaf()) {
-        return stateCells;
-    }
     if (root.hasArrayTransition()) {
-        return __spreadArray(__spreadArray([], __read(stateCells), false), __read(Object.keys($state).flatMap(function (key) {
+        return Object.keys($state).flatMap(function (key) {
             return getStateCells($state[key], ensure(root.makeTransition(ARRAY_SYMBOL)));
-        })), false);
+        });
     }
     else {
-        var childrenStateCells = [];
+        var stateCell = (_b = proxyObjToStateCell.get($state)) !== null && _b !== void 0 ? _b : {};
+        var stateCells = [];
         try {
             for (var _c = __values(root.edges().entries()), _d = _c.next(); !_d.done; _d = _c.next()) {
                 var _e = __read(_d.value, 2), key = _e[0], child = _e[1];
                 if (typeof key === "string" && key in $state) {
-                    childrenStateCells.push.apply(childrenStateCells, __spreadArray([], __read(getStateCells($state[key], child)), false));
+                    stateCells.push.apply(stateCells, __spreadArray([], __read(getStateCells($state[key], child)), false));
+                    if (key in stateCell) {
+                        stateCells.push(stateCell[key]);
+                    }
                 }
             }
         }
@@ -1477,7 +1482,7 @@ function getStateCells($state, root) {
             }
             finally { if (e_3) throw e_3.error; }
         }
-        return __spreadArray(__spreadArray([], __read(stateCells), false), __read(childrenStateCells), false);
+        return stateCells;
     }
 }
 function getStateCellsInPlasmicProxy(obj) {
@@ -1498,9 +1503,9 @@ function getStateSpecInPlasmicProxy(obj, path) {
     if (!isPlasmicStateProxy(obj)) {
         return undefined;
     }
-    var _a = obj[PLASMIC_STATE_PROXY_SYMBOL], node = _a.node, isOutside = _a.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 {
@@ -1541,16 +1546,6 @@ function arrayEq(xs, ys) {
 function isNum(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
@@ -1603,5 +1598,5 @@ function assignValue(object, key, value) {
 // Utilities used by generated code
 var classNames = classNames$1;
 
-export { PlasmicIcon, PlasmicLink, PlasmicPageGuard, PlasmicSlot, Stack, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, generateStateOnChangeProp, generateStateOnChangePropForCodeComponents, generateStateValueProp, getCurrentInitialValue, getStateCellsInPlasmicProxy, getStateSpecInPlasmicProxy, hasVariant, initializeCodeComponentStates, initializePlasmicStates, isPlasmicStateProxy, makeFragment, mergeVariantsWithStates, renderPlasmicSlot, resetToInitialValue, set, useDollarState, useTrigger, wrapWithClassName };
+export { PlasmicIcon, PlasmicLink, PlasmicPageGuard, PlasmicSlot, Stack, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, generateStateOnChangeProp, generateStateOnChangePropForCodeComponents, generateStateValueProp, getCurrentInitialValue, getStateCellsInPlasmicProxy, getStateSpecInPlasmicProxy, hasVariant, initializeCodeComponentStates, initializePlasmicStates, is$StateProxy, isPlasmicStateProxy, makeFragment, mergeVariantsWithStates, renderPlasmicSlot, resetToInitialValue, set, useDollarState, useTrigger, wrapWithClassName };
 //# sourceMappingURL=index.js.map