@plasmicapp/react-web 0.2.133 → 0.2.135

package/dist/render/elements.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { $State } from "../states/valtio";
+import { $State } from "../states";
 interface Variants {
     [vg: string]: any;
 }

package/dist/states/graph.d.ts

@@ -0,0 +1,15 @@
+import { $StateSpec, Internal$StateSpec } from ".";
+export declare class StateSpecNode<T> {
+    private specs;
+    private edges;
+    constructor(specs: Internal$StateSpec<T>[]);
+    hasEdge(key: string | symbol): boolean;
+    addEdge(key: string | symbol, node: StateSpecNode<any>): void;
+    makeTransition(key: string | symbol | number): StateSpecNode<any> | undefined;
+    isLeaf(): boolean;
+    hasArrayTransition(): boolean;
+    getSpec(): Internal$StateSpec<T>;
+    getAllSpecs(): Internal$StateSpec<T>[];
+}
+export declare const transformPathStringToObj: (str: string) => (string | symbol)[];
+export declare function buildGraph(specs: $StateSpec<any>[]): StateSpecNode<any>;

package/dist/states/helpers.d.ts

@@ -15,4 +15,6 @@ export declare function generateStateValueProp($state: $State, path: (string | n
  */
 export declare function set(obj: any, keys: any, val: any): void;
 export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+export declare function shallowEqual<T>(a1: T[], a2: T[]): boolean;
+export declare function isNum(value: string | number | symbol): value is number;
 export { get };

package/dist/states/index.d.ts

@@ -1,8 +1,5 @@
-declare type InitFunc<T> = ($props: Record<string, any>, $state: $State) => T;
-export interface $State {
-    [key: string]: any;
-    registerInitFunc?: (path: string, f: InitFunc<any>) => any;
-}
+export declare type InitFunc<T> = ($props: Record<string, any>, $state: $State, $ctx: Record<string, any>, indexes?: number[]) => T;
+export declare type ObjectPath = (string | number)[];
 export interface $StateSpec<T> {
     path: string;
     initFunc?: InitFunc<T>;
@@ -10,6 +7,18 @@ export interface $StateSpec<T> {
     type: "private" | "readonly" | "writable";
     valueProp?: string;
     onChangeProp?: string;
+    isImmutable?: boolean;
+}
+export interface $State {
+    [key: string]: any;
+    registerInitFunc?: (path: string, f: InitFunc<any>) => any;
+}
+export declare const ARRAY_SYMBOL: unique symbol;
+export interface Internal$StateSpec<T> extends $StateSpec<T> {
+    isRepeated: boolean;
+    pathObj: (string | symbol)[];
+}
+export interface Internal$StateInstance {
+    path: ObjectPath;
+    specKey: string;
 }
-declare function useVanillaDollarState(_specs: $StateSpec<any>[], props: Record<string, any>): $State;
-export default useVanillaDollarState;

package/dist/states/valtio.d.ts

@@ -1,17 +1,4 @@
-declare type InitFunc<T> = ($props: Record<string, any>, $state: $State, $ctx: Record<string, any>, indexes: number[]) => T;
-export interface $State {
-    [key: string]: any;
-    registerInitFunc?: (path: string, f: InitFunc<any>) => any;
-}
-export interface $StateSpec<T> {
-    path: string;
-    initFunc?: InitFunc<T>;
-    initVal?: T;
-    type: "private" | "readonly" | "writable";
-    valueProp?: string;
-    onChangeProp?: string;
-    isArray?: boolean;
-}
+import { $StateSpec } from ".";
 export declare function useDollarState(specs: $StateSpec<any>[], props: Record<string, any>, $ctx?: Record<string, any>): any;
 export default useDollarState;
-export declare function useCanvasDollarState(specs: $StateSpec<any>[], props: Record<string, any>, $ctx?: Record<string, any>): any;
+export declare function useCanvasDollarState(specs: $StateSpec<any>[], props: Record<string, any>, $ctx?: Record<string, any>): {};

package/dist/states/vanilla.d.ts

@@ -0,0 +1,3 @@
+import { $State, $StateSpec } from ".";
+declare function useVanillaDollarState(_specs: $StateSpec<any>[], props: Record<string, any>): $State;
+export default useVanillaDollarState;

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

@@ -52,9 +52,12 @@ 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, {
+export declare const StateCellIsArray: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, {
     people: Person[];
 }>;
-export declare const VariableCellIsArray: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, {
+export declare const StateCellIsMatrix: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, {
+    board: number[][];
+}>;
+export declare const ImmutableStateCells: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, {
     people: Person[];
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/react-web",
-  "version": "0.2.133",
+  "version": "0.2.135",
   "description": "plasmic library for rendering in the presentational style",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -40,10 +40,10 @@
   },
   "prettier": {},
   "dependencies": {
-    "@plasmicapp/data-sources": "0.1.21",
+    "@plasmicapp/data-sources": "0.1.22",
     "@plasmicapp/data-sources-context": "0.1.2",
-    "@plasmicapp/host": "1.0.91",
-    "@plasmicapp/query": "0.1.57",
+    "@plasmicapp/host": "1.0.92",
+    "@plasmicapp/query": "0.1.58",
     "@react-aria/checkbox": "^3.5.0",
     "@react-aria/focus": "^3.7.0",
     "@react-aria/interactions": "^3.10.0",
@@ -63,6 +63,7 @@
     "@react-stately/toggle": "^3.4.0",
     "@react-stately/tree": "^3.3.2",
     "classnames": "^2.2.6",
+    "clone": "^2.1.2",
     "dlv": "^1.1.3",
     "dset": "^3.1.2",
     "fast-deep-equal": "^3.1.3",
@@ -86,6 +87,7 @@
     "@storybook/test-runner": "^0.5.0",
     "@storybook/testing-library": "^0.0.13",
     "@types/classnames": "^2.2.9",
+    "@types/clone": "^2.1.1",
     "@types/dlv": "^1.1.2",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
@@ -108,5 +110,5 @@
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "gitHead": "2c34343c228b8b1eea911d030db0e02c811ea70c"
+  "gitHead": "d714c8c2cb1245a3f3c763e96a082c8c78929997"
 }

package/skinny/dist/index-common.d.ts

@@ -13,6 +13,7 @@ export { PlasmicDataSourceContextProvider, PlasmicRootProvider, useCurrentUser,
 export { Stack } from "./render/Stack";
 export { genTranslatableString, Trans } from "./render/translation";
 export { useTrigger } from "./render/triggers";
+export { $State } from "./states";
 export * from "./states/helpers";
-export { $State, default as useDollarState, useCanvasDollarState, } from "./states/valtio";
+export { default as useDollarState, useCanvasDollarState, } from "./states/valtio";
 export declare const classNames: typeof _classNames;

package/skinny/dist/index.js

@@ -12,6 +12,7 @@ import { T as Trans } from './ssr-b16a1854.js';
 export { P as PlasmicRootProvider, T as Trans, g as genTranslatableString, u as useIsSSR } from './ssr-b16a1854.js';
 import ReactDOM__default from 'react-dom';
 import { useFocusRing } from '@react-aria/focus';
+import clone from 'clone';
 import deepEqual from 'fast-deep-equal';
 import { proxy, ref, useSnapshot } from 'valtio';
 import { subscribeKey } from 'valtio/utils';
@@ -680,18 +681,84 @@ function set(obj, keys, val) {
         }
     }
 }
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+function shallowEqual$1(a1, a2) {
+    if (a1.length !== a2.length) {
+        return false;
+    }
+    for (var i = 0; i < a1.length; i++) {
+        if (a1[i] !== a2[i]) {
+            return false;
+        }
+    }
+    return true;
+}
+function isNum$1(value) {
+    return typeof value === "symbol" ? false : !isNaN(+value);
+}
 
-var mkUntrackedValue = function (o) {
-    return o != null && typeof o === "object" ? ref(o) : o;
-};
+var ARRAY_SYMBOL = Symbol("[]");
+
+var StateSpecNode = /** @class */ (function () {
+    function StateSpecNode(specs) {
+        this.specs = specs;
+        this.edges = new Map();
+    }
+    StateSpecNode.prototype.hasEdge = function (key) {
+        return this.edges.has(key);
+    };
+    StateSpecNode.prototype.addEdge = function (key, node) {
+        this.edges.set(key, node);
+    };
+    StateSpecNode.prototype.makeTransition = function (key) {
+        key = isNum$1(key) ? ARRAY_SYMBOL : key;
+        return this.edges.get(key);
+    };
+    StateSpecNode.prototype.isLeaf = function () {
+        return this.edges.size === 0;
+    };
+    StateSpecNode.prototype.hasArrayTransition = function () {
+        return this.edges.has(ARRAY_SYMBOL);
+    };
+    StateSpecNode.prototype.getSpec = function () {
+        return this.specs[0];
+    };
+    StateSpecNode.prototype.getAllSpecs = function () {
+        return this.specs;
+    };
+    return StateSpecNode;
+}());
 var transformPathStringToObj = function (str) {
     var splitStatePathPart = function (state) {
         return state.endsWith("[]")
-            ? __spreadArray(__spreadArray([], __read(splitStatePathPart(state.slice(0, -2))), false), ["[]"], false) : [state];
+            ? __spreadArray(__spreadArray([], __read(splitStatePathPart(state.slice(0, -2))), false), [ARRAY_SYMBOL], false) : [state];
     };
     return str.split(".").flatMap(splitStatePathPart);
 };
+function buildGraph(specs) {
+    var internalSpec = specs.map(function (spec) {
+        return (__assign(__assign({}, spec), { pathObj: transformPathStringToObj(spec.path), isRepeated: spec.path.split(".").some(function (part) { return part.endsWith("[]"); }) }));
+    });
+    var rec = function (currentPath) {
+        var node = new StateSpecNode(internalSpec.filter(function (spec) {
+            return shallowEqual$1(currentPath, spec.pathObj.slice(0, currentPath.length));
+        }));
+        node.getAllSpecs().forEach(function (spec) {
+            if (spec.pathObj.length > currentPath.length) {
+                var nextKey = spec.pathObj[currentPath.length];
+                if (!node.hasEdge(nextKey)) {
+                    node.addEdge(nextKey, rec(__spreadArray(__spreadArray([], __read(currentPath), false), [nextKey], false)));
+                }
+            }
+        });
+        return node;
+    };
+    return rec([]);
+}
+
+var mkUntrackedValue = function (o) {
+    return o != null && typeof o === "object" ? ref(o) : o;
+};
 function shallowEqual(a1, a2) {
     if (a1.length !== a2.length) {
         return false;
@@ -717,34 +784,11 @@ function saveNewState($$state, path, spec) {
         .push({ path: path, specKey: spec.path });
 }
 function create$StateProxy($$state, handlers) {
-    var getNextKeyToSpecMap = function (currPath) {
-        return new Map(Object.entries(Object.values($$state.specsByKey)
-            .filter(function (spec) {
-            return shallowEqual(currPath.map(function (p) { return (isNum(p) ? "[]" : p); }), spec.pathObj.slice(0, currPath.length));
-        })
-            .reduce(function (agg, spec) {
-            var nextKey = spec.pathObj[currPath.length];
-            if (!(nextKey in agg)) {
-                agg[nextKey] = [];
-            }
-            agg[nextKey].push(spec);
-            return agg;
-        }, {})));
-    };
-    var rec = function (currPath) {
-        var nextKeyToSpecs = getNextKeyToSpecMap(currPath);
-        var getSpecForProperty = function (property) {
-            var _a, _b;
-            return nextKeyToSpecs.has("[]") && isNum(property)
-                ? (_a = nextKeyToSpecs.get("[]")) === null || _a === void 0 ? void 0 : _a[0]
-                : typeof property === "string" && nextKeyToSpecs.has(property)
-                    ? (_b = nextKeyToSpecs.get(property)) === null || _b === void 0 ? void 0 : _b[0]
-                    : undefined;
-        };
+    var rec = function (currPath, currNode) {
         var getNextPath = function (property) { return __spreadArray(__spreadArray([], __read(currPath), false), [
             isNum(property) ? +property : property,
         ], false); };
-        return new Proxy(nextKeyToSpecs.has("[]") ? [] : {}, {
+        return new Proxy(currNode.hasArrayTransition() ? [] : {}, {
             deleteProperty: function (target, property) {
                 var prefixPath = getNextPath(property);
                 var specKeysToUpdate = new Set();
@@ -767,42 +811,41 @@ function create$StateProxy($$state, handlers) {
             },
             get: function (target, property, receiver) {
                 var _a, _b;
-                var spec = getSpecForProperty(property);
-                if (spec && typeof property !== "symbol") {
-                    var nextPath = getNextPath(property);
-                    if (spec.pathObj.length === currPath.length + 1) {
-                        // reached the end of the spec
-                        target[property] = (_b = (_a = handlers(nextPath, spec)).get) === null || _b === void 0 ? void 0 : _b.call(_a, target, property, receiver);
+                var nextPath = getNextPath(property);
+                var nextNode = currNode.makeTransition(property);
+                if (nextNode) {
+                    if (nextNode.isLeaf()) {
+                        target[property] = (_b = (_a = handlers(nextPath, nextNode.getSpec())).get) === null || _b === void 0 ? void 0 : _b.call(_a, target, property, receiver);
                     }
                     else if (!(property in target)) {
-                        target[property] = rec(nextPath);
+                        target[property] = rec(nextPath, nextNode);
                     }
                 }
                 return Reflect.get(target, property, receiver);
             },
             set: function (target, property, value, receiver) {
                 var e_1, _a;
-                var _b, _c, _d;
-                var spec = getSpecForProperty(property);
+                var _b, _c, _d, _e;
                 var nextPath = getNextPath(property);
-                if (spec && typeof property !== "symbol") {
-                    if (spec.pathObj.length === currPath.length + 1) {
+                var nextNode = currNode.makeTransition(property);
+                if (nextNode && typeof property !== "symbol") {
+                    if (nextNode.isLeaf()) {
                         // reached the end of the spec
-                        target[property] = (_c = (_b = handlers(nextPath, spec)).set) === null || _c === void 0 ? void 0 : _c.call(_b, target, property, value, receiver);
+                        target[property] = (_c = (_b = handlers(nextPath, nextNode.getSpec())).set) === null || _c === void 0 ? void 0 : _c.call(_b, target, property, value, receiver);
                         return Reflect.set(target, property, value, receiver);
                     }
                     else if (typeof value === "object") {
-                        target[property] = rec(nextPath);
+                        target[property] = rec(nextPath, nextNode);
                         try {
-                            for (var _e = __values(Object.keys(value)), _f = _e.next(); !_f.done; _f = _e.next()) {
-                                var key = _f.value;
+                            for (var _f = __values(Object.keys(value)), _g = _f.next(); !_g.done; _g = _f.next()) {
+                                var key = _g.value;
                                 target[property][key] = value[key];
                             }
                         }
                         catch (e_1_1) { e_1 = { error: e_1_1 }; }
                         finally {
                             try {
-                                if (_f && !_f.done && (_a = _e["return"])) _a.call(_e);
+                                if (_g && !_g.done && (_a = _f["return"])) _a.call(_f);
                             }
                             finally { if (e_1) throw e_1.error; }
                         }
@@ -812,11 +855,12 @@ function create$StateProxy($$state, handlers) {
                 if (property === "registerInitFunc" && currPath.length === 0) {
                     return Reflect.set(target, property, value, receiver);
                 }
-                if (nextKeyToSpecs.has("[]")) {
+                if (currNode.hasArrayTransition()) {
                     set($$state.stateValues, nextPath, value);
-                    (_d = nextKeyToSpecs.get("[]")) === null || _d === void 0 ? void 0 : _d.forEach(function (spec) {
+                    (_e = (_d = currNode
+                        .makeTransition(ARRAY_SYMBOL)) === null || _d === void 0 ? void 0 : _d.getAllSpecs()) === null || _e === void 0 ? void 0 : _e.forEach(function (spec) {
                         var _a, _b;
-                        if (spec === null || spec === void 0 ? void 0 : spec.onChangeProp) {
+                        if (spec.onChangeProp) {
                             (_b = (_a = $$state.props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, value, nextPath);
                         }
                     });
@@ -827,7 +871,7 @@ function create$StateProxy($$state, handlers) {
             }
         });
     };
-    return rec([]);
+    return rec([], $$state.rootStateSpec);
 }
 var deleteState = function ($$state, path) {
     var _a;
@@ -881,7 +925,7 @@ function initializeStateValue($$state, initialStatePath, initialSpec) {
     stateAccess.forEach(function (_a) {
         var path = _a.path, spec = _a.spec;
         var unsubscribe = subscribeKey(get($$state.stateValues, path.slice(-1)), path.slice(-1)[0], function () {
-            return set($$state.stateValues, initialStatePath, mkUntrackedValue(initialSpec.initFunc($$state.props, $state, $$state.ctx, getIndexes(path, spec))));
+            return saveValue($$state, initialStatePath, initialSpec, initialSpec.initFunc($$state.props, $state, $$state.ctx, getIndexes(path, spec)));
         });
         $$state.unsubscriptionsByState[initialStateKey].push(unsubscribe);
     });
@@ -889,22 +933,23 @@ function initializeStateValue($$state, initialStatePath, initialSpec) {
     saveStateInitialValue($$state, initialStatePath, initialSpec, initialValue);
     return initialValue;
 }
-function saveStateInitialValue($$state, path, spec, initialValue) {
-    // array states are a special case.Wwe listen for changes in the array and in the array cells.
-    // for example: $state.people.push(...), $state.people.splice(...), $state.people[0] = ...
-    // that's why we need to track the array object
-    if (spec.isArray && Array.isArray(initialValue)) {
-        var array = initialValue.map(function (val) { return mkUntrackedValue(val); });
-        set($$state.stateValues, path, array);
-        // we need to make the array untracked for initStateValues
-        // so we can distinguish between stateValue and initStateValue.
-        // otherwise they would reference the same array.
-        set($$state.initStateValues, path, mkUntrackedValue(array));
+function saveValue($$state, path, spec, value) {
+    if (spec.isImmutable) {
+        set($$state.stateValues, path, mkUntrackedValue(value));
     }
     else {
+        set($$state.stateValues, path, value);
+    }
+}
+function saveStateInitialValue($$state, path, spec, initialValue) {
+    if (spec.isImmutable) {
         var untrackedValue = mkUntrackedValue(initialValue);
         set($$state.stateValues, path, untrackedValue);
-        set($$state.initStateValues, path, untrackedValue);
+        set($$state.initStateValues, path, clone(untrackedValue));
+    }
+    else {
+        set($$state.stateValues, path, clone(initialValue));
+        set($$state.initStateValues, path, clone(initialValue));
     }
 }
 function useDollarState(specs, props, $ctx) {
@@ -922,7 +967,8 @@ function useDollarState(specs, props, $ctx) {
         unsubscriptionsByState: {},
         props: {},
         ctx: {},
-        registrationsQueue: []
+        registrationsQueue: [],
+        rootStateSpec: buildGraph(specs)
     })).current;
     $$state.props = mkUntrackedValue(props);
     $$state.ctx = mkUntrackedValue($ctx !== null && $ctx !== void 0 ? $ctx : {});
@@ -950,7 +996,7 @@ function useDollarState(specs, props, $ctx) {
             },
             set: function (_t, _p, value) {
                 var _a, _b;
-                set($$state.stateValues, path, mkUntrackedValue(value));
+                saveValue($$state, path, spec, value);
                 if (spec.onChangeProp) {
                     (_b = (_a = $$state.props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, value, path);
                 }
@@ -1019,25 +1065,12 @@ function useCanvasDollarState(specs, props, $ctx) {
         unsubscriptionsByState: {},
         props: {},
         ctx: {},
-        registrationsQueue: []
+        registrationsQueue: [],
+        rootStateSpec: buildGraph(specs)
     });
     $$state.props = mkUntrackedValue(props);
     $$state.ctx = mkUntrackedValue($ctx);
-    var $state = create$StateProxy($$state, function (path, spec) {
-        return {
-            get: function () {
-                return get($$state.stateValues, path);
-            },
-            set: function (_t, _p, value) {
-                var _a, _b;
-                set($$state.stateValues, path, mkUntrackedValue(value));
-                if (spec.onChangeProp) {
-                    (_b = (_a = $$state.props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, value, path);
-                }
-                return true;
-            }
-        };
-    });
+    var $state = {};
     try {
         for (var specs_1 = __values(specs), specs_1_1 = specs_1.next(); !specs_1_1.done; specs_1_1 = specs_1.next()) {
             var spec = specs_1_1.value;
@@ -1065,5 +1098,5 @@ function useCanvasDollarState(specs, props, $ctx) {
 // Utilities used by generated code
 var classNames = classNames$1;
 
-export { PlasmicIcon, PlasmicLink, PlasmicSlot, Stack, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, generateStateOnChangeProp, generateStateValueProp, hasVariant, makeFragment, mergeVariantsWithStates, renderPlasmicSlot, set, useCanvasDollarState, useDollarState, useIsomorphicLayoutEffect, useTrigger, wrapWithClassName };
+export { PlasmicIcon, PlasmicLink, PlasmicSlot, Stack, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, generateStateOnChangeProp, generateStateValueProp, hasVariant, isNum$1 as isNum, makeFragment, mergeVariantsWithStates, renderPlasmicSlot, set, shallowEqual$1 as shallowEqual, useCanvasDollarState, useDollarState, useIsomorphicLayoutEffect, useTrigger, wrapWithClassName };
 //# sourceMappingURL=index.js.map