@plasmicapp/react-web 0.2.115 → 0.2.117

package/dist/states/valtio.d.ts

@@ -10,6 +10,7 @@ export interface $StateSpec<T> {
     type: "private" | "readonly" | "writable";
     valueProp?: string;
     onChangeProp?: string;
+    isArray?: boolean;
 }
 export declare function useDollarState(specs: $StateSpec<any>[], props: Record<string, any>): any;
 export default useDollarState;

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

@@ -49,3 +49,6 @@ export declare const FormBuilder: import("@storybook/csf").AnnotatedStoryFn<impo
 export declare const FormBuilderImplicitStates: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, {
     people: Person[];
 }>;
+export declare const VariableCellIsArray: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, {
+    people: Person[];
+}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/react-web",
-  "version": "0.2.115",
+  "version": "0.2.117",
   "description": "plasmic library for rendering in the presentational style",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -105,5 +105,5 @@
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "gitHead": "22f6daf77a6ec05e118513807ef2319143f2bff8"
+  "gitHead": "87a321aeb0d3ffcf66ac60e84319bbe32859f5e6"
 }

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

@@ -14,3 +14,5 @@ export { PlasmicDataSourceContextProvider, PlasmicRootProvider, useCurrentUser,
 export { Stack } from "./render/Stack";
 export { genTranslatableString, Trans } from "./render/translation";
 export { useTrigger } from "./render/triggers";
+export * from "./states/helpers";
+export { $State, default as useDollarState, useCanvasDollarState, } from "./states/valtio";

package/skinny/dist/index.d.ts

@@ -9,5 +9,3 @@ export * from "./plume/select";
 export * from "./plume/switch";
 export * from "./plume/text-input";
 export * from "./plume/triggered-overlay";
-export * from "./states/helpers";
-export { $State, default as useDollarState, useCanvasDollarState, } from "./states/valtio";

package/skinny/dist/index.js

@@ -1,5 +1,6 @@
 import classNames$1 from 'classnames';
 import get from 'dlv';
+export { default as get } from 'dlv';
 import * as React from 'react';
 import React__default from 'react';
 import { c as createElementWithChildren, m as mergeProps, e as ensureNotArray, N as NONE, a as mergePropVals, i as isReactNode, b as isBrowser, u as useIsomorphicLayoutEffect } from './react-utils-7bc53870.js';
@@ -11,6 +12,9 @@ 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 deepEqual from 'fast-deep-equal';
+import { proxy, ref, useSnapshot } from 'valtio';
+import { subscribeKey } from 'valtio/utils';
 export { PlasmicDataSourceContextProvider, useCurrentUser } from '@plasmicapp/data-sources-context';
 import '@react-aria/ssr';
 
@@ -633,8 +637,426 @@ function useTrigger(trigger, opts) {
     return TRIGGER_TO_HOOK[trigger](opts);
 }
 
+function generateStateOnChangeProp($state, stateName, dataReps) {
+    return function (val, path) { return set($state, __spreadArray(__spreadArray([stateName], __read(dataReps), false), __read(path), false), val); };
+}
+/**
+ * This function generate the state value prop for repeated states
+ * Example:
+ *   - parent[][].counter[].count
+ * We need to pass `parent[index1][index2].counter to the child component
+ */
+function generateStateValueProp($state, path // ["parent", 0, 1, "counter"]
+) {
+    return get($state, path);
+}
+/**
+ * Forked from https://github.com/lukeed/dset
+ * Changes: fixed setting a deep value to a proxy object
+ */
+function set(obj, keys, val) {
+    keys = keys.split ? keys.split(".") : keys;
+    var i = 0, l = keys.length, t = obj, x, k;
+    while (i < l) {
+        k = keys[i++];
+        if (k === "__proto__" || k === "constructor" || k === "prototype")
+            break;
+        if (i === l) {
+            t[k] = val;
+            t = t[k];
+        }
+        else {
+            if (typeof (x = t[k]) === typeof keys) {
+                t = t[k] = x;
+            }
+            else if (keys[i] * 0 !== 0 || !!~("" + keys[i]).indexOf(".")) {
+                t[k] = {};
+                t = t[k];
+            }
+            else {
+                t[k] = [];
+                t = t[k];
+            }
+        }
+    }
+}
+
+var mkUntrackedValue = function (o) { return (typeof o === "object" ? ref(o) : o); };
+var transformPathStringToObj = function (str) {
+    var splitStatePathPart = function (state) {
+        return state.endsWith("[]")
+            ? __spreadArray(__spreadArray([], __read(splitStatePathPart(state.slice(0, -2))), false), ["[]"], false) : [state];
+    };
+    return str.split(".").flatMap(splitStatePathPart);
+};
+function shallowEqual(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(value) {
+    return typeof value === "symbol" ? false : !isNaN(+value);
+}
+function saveNewState($$state, path, spec) {
+    var key = JSON.stringify(path);
+    $$state.existingStates.set(key, { path: path, specKey: spec.path });
+    if (!$$state.statesInstanceBySpec.has(spec.path)) {
+        $$state.statesInstanceBySpec.set(spec.path, []);
+    }
+    $$state.statesInstanceBySpec
+        .get(spec.path)
+        .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 getNextPath = function (property) { return __spreadArray(__spreadArray([], __read(currPath), false), [
+            isNum(property) ? +property : property,
+        ], false); };
+        return new Proxy(nextKeyToSpecs.has("[]") ? [] : {}, {
+            deleteProperty: function (target, property) {
+                var prefixPath = getNextPath(property);
+                var specKeysToUpdate = new Set();
+                $$state.existingStates.forEach(function (_a) {
+                    var path = _a.path, specKey = _a.specKey;
+                    if (path.length >= prefixPath.length &&
+                        shallowEqual(path.slice(0, prefixPath.length), prefixPath)) {
+                        deleteState($$state, path);
+                        specKeysToUpdate.add(specKey);
+                    }
+                });
+                specKeysToUpdate.forEach(function (specKey) {
+                    var _a, _b;
+                    var spec = $$state.specsByKey[specKey];
+                    if (spec.onChangeProp) {
+                        (_b = (_a = $$state.props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, get($$state.stateValues, currPath), currPath);
+                    }
+                });
+                return Reflect.deleteProperty(target, property);
+            },
+            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);
+                    }
+                    else if (!(property in target)) {
+                        target[property] = rec(nextPath);
+                    }
+                }
+                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 nextPath = getNextPath(property);
+                if (spec && typeof property !== "symbol") {
+                    if (spec.pathObj.length === currPath.length + 1) {
+                        // 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);
+                        return Reflect.set(target, property, value, receiver);
+                    }
+                    else if (typeof value === "object") {
+                        target[property] = rec(nextPath);
+                        try {
+                            for (var _e = __values(Object.keys(value)), _f = _e.next(); !_f.done; _f = _e.next()) {
+                                var key = _f.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);
+                            }
+                            finally { if (e_1) throw e_1.error; }
+                        }
+                        return true;
+                    }
+                }
+                if (property === "registerInitFunc" && currPath.length === 0) {
+                    return Reflect.set(target, property, value, receiver);
+                }
+                if (nextKeyToSpecs.has("[]")) {
+                    set($$state.stateValues, nextPath, value);
+                    (_d = nextKeyToSpecs.get("[]")) === null || _d === void 0 ? void 0 : _d.forEach(function (spec) {
+                        var _a, _b;
+                        if (spec === null || spec === void 0 ? void 0 : spec.onChangeProp) {
+                            (_b = (_a = $$state.props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, value, nextPath);
+                        }
+                    });
+                    return Reflect.set(target, property, value, receiver);
+                }
+                // invalid setting a value that doesn't make part of the spec
+                return false;
+            }
+        });
+    };
+    return rec([]);
+}
+var deleteState = function ($$state, path) {
+    var _a;
+    var key = JSON.stringify(path);
+    (_a = $$state.unsubscriptionsByState[key]) === null || _a === void 0 ? void 0 : _a.forEach(function (f) { return f(); });
+    delete $$state.unsubscriptionsByState[key];
+    $$state.existingStates["delete"](key);
+    // delete get($$state.stateValues, path.slice(-1))[path.slice(-1)[0]];
+    // delete get($$state.initStateValues, path.slice(-1))[path.slice(-1)[0]];
+};
+var getIndexes = function (path, spec) {
+    var indexes = [];
+    if (path.length !== spec.pathObj.length) {
+        throw new Error("Unexpected error: state path and spec path have different lengths");
+    }
+    for (var i = 0; i < spec.pathObj.length; i++) {
+        if (spec.pathObj[i] === "[]") {
+            indexes.push(path[i]);
+        }
+    }
+    return indexes;
+};
+function initializeStateValue($$state, initialStatePath, initialSpec) {
+    var _a;
+    var initialStateKey = JSON.stringify(initialStatePath);
+    var stateAccess = new Set();
+    var $state = create$StateProxy($$state, function (path, spec) { return ({
+        get: function () {
+            var key = JSON.stringify(path);
+            stateAccess.add({ path: path, spec: spec });
+            if (spec.valueProp) {
+                return !spec.isRepeated
+                    ? $$state.props[spec.valueProp]
+                    : get($$state.props[spec.valueProp], path.slice(1));
+            }
+            if ($$state.existingStates.has(key)) {
+                // is already initialized
+                return get($$state.stateValues, path);
+            }
+            else if (spec.initFunc) {
+                initializeStateValue($$state, path, spec);
+            }
+            return get($$state.stateValues, path);
+        },
+        set: function () {
+            throw new Error("Cannot update state values during initialization");
+        }
+    }); });
+    (_a = $$state.unsubscriptionsByState[initialStateKey]) === null || _a === void 0 ? void 0 : _a.forEach(function (f) { return f(); });
+    $$state.unsubscriptionsByState[initialStateKey] = [];
+    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, getIndexes(path, spec))));
+        });
+        $$state.unsubscriptionsByState[initialStateKey].push(unsubscribe);
+    });
+    var initialValue = initialSpec.initFunc($$state.props, $state, getIndexes(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));
+    }
+    else {
+        var untrackedValue = mkUntrackedValue(initialValue);
+        set($$state.stateValues, path, untrackedValue);
+        set($$state.initStateValues, path, untrackedValue);
+    }
+}
+function useDollarState(specs, props) {
+    var $$state = React__default.useRef(proxy({
+        stateValues: {},
+        initStateValues: {},
+        specsByKey: Object.fromEntries(specs.map(function (spec) { return [
+            spec.path,
+            __assign(__assign({}, spec), { pathObj: transformPathStringToObj(spec.path), isRepeated: spec.path
+                    .split(".")
+                    .some(function (part) { return part.endsWith("[]"); }) }),
+        ]; })),
+        statesInstanceBySpec: new Map(),
+        existingStates: new Map(),
+        unsubscriptionsByState: {},
+        props: undefined,
+        registrationsQueue: []
+    })).current;
+    $$state.props = mkUntrackedValue(props);
+    var $state = React__default.useRef(Object.assign(create$StateProxy($$state, function (path, spec) {
+        var _a;
+        var key = JSON.stringify(path);
+        if (!$$state.existingStates.has(key)) {
+            saveNewState($$state, path, spec);
+            var initialValue = !spec.initFunc
+                ? (_a = spec.initVal) !== null && _a !== void 0 ? _a : undefined
+                : initializeStateValue($$state, path, spec);
+            saveStateInitialValue($$state, path, spec, initialValue);
+        }
+        return {
+            get: function () {
+                if (spec.valueProp) {
+                    var value = !spec.isRepeated
+                        ? $$state.props[spec.valueProp]
+                        : get($$state.props[spec.valueProp], path.slice(1));
+                    return value;
+                }
+                else {
+                    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;
+            }
+        };
+    }), {
+        registerInitFunc: function (pathStr, f) {
+            var _a;
+            if ((_a = $$state.statesInstanceBySpec
+                .get(pathStr)) === null || _a === void 0 ? void 0 : _a.some(function (_a) {
+                var path = _a.path, specKey = _a.specKey;
+                return !deepEqual(get($$state.initStateValues, path), f(props, $state, getIndexes(path, $$state.specsByKey[specKey])));
+            })) {
+                $$state.registrationsQueue.push({ pathStr: pathStr, f: f });
+            }
+        }
+    })).current;
+    // For each spec with an initFunc, evaluate it and see if
+    // the init value has changed. If so, reset its state.
+    var resetSpecs = [];
+    $$state.existingStates.forEach(function (_a) {
+        var path = _a.path, specKey = _a.specKey;
+        var spec = $$state.specsByKey[specKey];
+        if (spec.initFunc) {
+            var newInit = spec.initFunc(props, $state, getIndexes(path, spec));
+            if (!deepEqual(newInit, get($$state.initStateValues, path))) {
+                resetSpecs.push({ path: path, spec: spec });
+            }
+        }
+    });
+    React__default.useLayoutEffect(function () {
+        resetSpecs.forEach(function (_a) {
+            var _b, _c;
+            var path = _a.path, spec = _a.spec;
+            var newInit = initializeStateValue($$state, path, spec);
+            if (spec.onChangeProp) {
+                (_c = (_b = $$state.props)[spec.onChangeProp]) === null || _c === void 0 ? void 0 : _c.call(_b, newInit, path);
+            }
+        });
+    }, [props, resetSpecs]);
+    React__default.useLayoutEffect(function () {
+        $$state.registrationsQueue.forEach(function (_a) {
+            var f = _a.f, pathStr = _a.pathStr;
+            $$state.specsByKey[pathStr].initFunc = f;
+        });
+        $$state.registrationsQueue = [];
+    }, [$$state.registrationsQueue]);
+    // Re-render if any value changed in one of these objects
+    useSnapshot($$state.stateValues, { sync: true });
+    useSnapshot($$state.specsByKey, { sync: true });
+    return $state;
+}
+// Simple version of $state useDollarState for read-only
+function useCanvasDollarState(specs, props) {
+    var e_2, _a;
+    var $$state = proxy({
+        stateValues: {},
+        initStateValues: {},
+        specsByKey: Object.fromEntries(specs.map(function (spec) { return [
+            spec.path,
+            __assign(__assign({}, spec), { pathObj: transformPathStringToObj(spec.path), isRepeated: spec.path.split(".").some(function (part) { return part.endsWith("[]"); }) }),
+        ]; })),
+        statesInstanceBySpec: new Map(),
+        existingStates: new Map(),
+        unsubscriptionsByState: {},
+        props: undefined,
+        registrationsQueue: []
+    });
+    $$state.props = mkUntrackedValue(props);
+    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;
+            }
+        };
+    });
+    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;
+            var path = transformPathStringToObj(spec.path);
+            var init = spec.valueProp
+                ? $$state.props[spec.valueProp]
+                : spec.initVal
+                    ? spec.initVal
+                    : spec.initFunc
+                        ? initializeStateValue($$state, path, $$state.specsByKey[spec.path])
+                        : undefined;
+            set($state, path, init);
+        }
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (specs_1_1 && !specs_1_1.done && (_a = specs_1["return"])) _a.call(specs_1);
+        }
+        finally { if (e_2) throw e_2.error; }
+    }
+    return $state;
+}
+
 // Utilities used by generated code
 var classNames = classNames$1;
 
-export { PlasmicIcon, PlasmicLink, PlasmicSlot, Stack, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, hasVariant, makeFragment, mergeVariantsWithStates, renderPlasmicSlot, useTrigger, wrapWithClassName };
+export { PlasmicIcon, PlasmicLink, PlasmicSlot, Stack, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, generateStateOnChangeProp, generateStateValueProp, hasVariant, makeFragment, mergeVariantsWithStates, renderPlasmicSlot, set, useCanvasDollarState, useDollarState, useTrigger, wrapWithClassName };
 //# sourceMappingURL=index.js.map