@plasmicapp/react-web 0.2.140 → 0.2.142

package/skinny/dist/index.js

@@ -1,11 +1,13 @@
 import classNames$1 from 'classnames';
+import { usePlasmicDataSourceContext } from '@plasmicapp/data-sources-context';
+export { PlasmicDataSourceContextProvider, useCurrentUser } from '@plasmicapp/data-sources-context';
 import * as React from 'react';
 import React__default, { useLayoutEffect, useEffect } from 'react';
 import get from 'dlv';
 export { default as get } from 'dlv';
-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$1 } from './react-utils-7bc53870.js';
-import { _ as __rest, a as __assign, b as __spreadArray, c as __read, o as omit, p as pick, d as __values, i as isSubset, e as chainSingleArgFuncs, n as notNil } from './common-9ebe374e.js';
-export { o as omit, p as pick } from './common-9ebe374e.js';
+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$1 } from './react-utils-76d05959.js';
+import { _ as __awaiter, a as __generator, b as __rest, c as __assign, d as __spreadArray, e as __read, o as omit, p as pick, f as __values, i as isSubset, g as chainSingleArgFuncs, n as notNil } from './common-c2744215.js';
+export { o as omit, p as pick } from './common-c2744215.js';
 export { PlasmicHead, plasmicHeadMeta } from './render/PlasmicHead/index.js';
 export { PlasmicImg } from './render/PlasmicImg/index.js';
 import { T as Trans } from './ssr-f6caec06.js';
@@ -15,14 +17,65 @@ import { useFocusRing } from '@react-aria/focus';
 import clone from 'clone';
 import deepEqual from 'fast-deep-equal';
 import { proxy, useSnapshot, ref } from 'valtio';
-export { PlasmicDataSourceContextProvider, useCurrentUser } from '@plasmicapp/data-sources-context';
 import '@react-aria/ssr';
 
+function triggerLogin(appId, authorizeEndpoint) {
+    return __awaiter(this, void 0, void 0, function () {
+        function sha256(text) {
+            return __awaiter(this, void 0, void 0, function () {
+                var encoder, data, hashBuffer, hashArray, hashHex;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            encoder = new TextEncoder();
+                            data = encoder.encode(text);
+                            return [4 /*yield*/, crypto.subtle.digest("SHA-256", data)];
+                        case 1:
+                            hashBuffer = _a.sent();
+                            hashArray = Array.from(new Uint8Array(hashBuffer));
+                            hashHex = hashArray
+                                .map(function (b) { return b.toString(16).padStart(2, "0"); })
+                                .join("");
+                            return [2 /*return*/, hashHex];
+                    }
+                });
+            });
+        }
+        var continueTo, state, code_verifier, code_challenge, params, url;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    continueTo = window.location.href;
+                    state = JSON.stringify({ continueTo: continueTo });
+                    code_verifier = crypto.randomUUID();
+                    localStorage.setItem("code_verifier", code_verifier);
+                    return [4 /*yield*/, sha256(code_verifier)];
+                case 1:
+                    code_challenge = _a.sent();
+                    params = new URLSearchParams();
+                    params.set("client_id", appId);
+                    params.set("state", state);
+                    params.set("response_type", "code");
+                    params.set("code_challenge", code_challenge);
+                    params.set("code_challenge_method", "S256");
+                    url = "".concat(authorizeEndpoint, "?").concat(params.toString());
+                    window.location.href = url;
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
 function PlasmicPageGuard(props) {
-    var children = props.children, dataSourceCtxValue = props.dataSourceCtxValue, validRoles = props.validRoles;
-    if (!dataSourceCtxValue || dataSourceCtxValue.isUserLoading) {
-        return null;
-    }
+    var appId = props.appId, authorizeEndpoint = props.authorizeEndpoint, validRoles = props.validRoles, children = props.children;
+    var dataSourceCtxValue = usePlasmicDataSourceContext();
+    React__default.useEffect(function () {
+        if (dataSourceCtxValue &&
+            "isUserLoading" in dataSourceCtxValue &&
+            !dataSourceCtxValue.isUserLoading &&
+            !dataSourceCtxValue.user) {
+            triggerLogin(appId, authorizeEndpoint);
+        }
+    }, [dataSourceCtxValue, appId, authorizeEndpoint]);
     function canUserViewPage() {
         if (!dataSourceCtxValue) {
             return false;
@@ -35,6 +88,11 @@ function PlasmicPageGuard(props) {
         }
         return validRoles.includes(dataSourceCtxValue.user.roleId);
     }
+    if (!dataSourceCtxValue ||
+        dataSourceCtxValue.isUserLoading ||
+        !dataSourceCtxValue.user) {
+        return null;
+    }
     if (!canUserViewPage()) {
         return React__default.createElement("div", null, "You don't have access to this page");
     }
@@ -670,17 +728,10 @@ function useTrigger(trigger, opts) {
 var ARRAY_SYMBOL = Symbol("[]");
 var PLASMIC_STATE_PROXY_SYMBOL = Symbol("plasmic.state.proxy");
 
-function generateStateOnChangeProp($state, stateName, dataReps) {
-    return function (val, path) { return set($state, __spreadArray(__spreadArray([stateName], __read(dataReps), false), __read(path), false), val); };
+function generateStateOnChangeProp($state, path) {
+    return function (val) { return set($state, path, 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"]
-) {
+function generateStateValueProp($state, path) {
     return get($state, path);
 }
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
@@ -698,6 +749,12 @@ function shallowEqual(a1, a2) {
     }
     return true;
 }
+/**
+ * Shallow comparison of arrays.
+ */
+function arrayEq(xs, ys) {
+    return (xs.length === ys.length && xs.every(function (_, index) { return xs[index] === ys[index]; }));
+}
 function isNum$1(value) {
     return typeof value === "symbol" ? false : !isNaN(+value);
 }
@@ -763,68 +820,83 @@ function assignValue(object, key, value) {
 var UNINITIALIZED = Symbol("plasmic.unitialized");
 var StateSpecNode = /** @class */ (function () {
     function StateSpecNode(specs) {
-        this.specs = specs;
-        this.edges = new Map();
-        this.state = {};
+        this._specs = specs;
+        this._edges = new Map();
+        this._state = {};
     }
+    StateSpecNode.prototype.setSpecs = function (specs) {
+        this._specs = specs;
+    };
+    StateSpecNode.prototype.edges = function () {
+        return this._edges;
+    };
+    StateSpecNode.prototype.state = function () {
+        return this._state;
+    };
     StateSpecNode.prototype.hasEdge = function (key) {
-        return this.edges.has(key);
+        return this._edges.has(key);
     };
     StateSpecNode.prototype.addEdge = function (key, node) {
-        this.edges.set(key, node);
+        this._edges.set(key, node);
+    };
+    StateSpecNode.prototype.clearEdges = function () {
+        this._edges = new Map();
     };
     StateSpecNode.prototype.children = function () {
-        return this.edges.values();
+        return this._edges.values();
     };
     StateSpecNode.prototype.makeTransition = function (key) {
         key = isNum$1(key) ? ARRAY_SYMBOL : key;
-        return this.edges.get(key);
+        return this._edges.get(key);
     };
     StateSpecNode.prototype.isLeaf = function () {
-        return this.edges.size === 0;
+        return this._edges.size === 0;
     };
     StateSpecNode.prototype.hasArrayTransition = function () {
-        return this.edges.has(ARRAY_SYMBOL);
+        return this._edges.has(ARRAY_SYMBOL);
     };
     StateSpecNode.prototype.getSpec = function () {
-        return this.specs[0];
+        return this._specs[0];
     };
     StateSpecNode.prototype.getAllSpecs = function () {
-        return this.specs;
+        return this._specs;
     };
     StateSpecNode.prototype.getState = function (path) {
-        return this.state[JSON.stringify(path)];
+        return this._state[JSON.stringify(path)];
+    };
+    StateSpecNode.prototype.getInitFunc = function (stateCell) {
+        var _a;
+        return (_a = stateCell.registeredInitFunc) !== null && _a !== void 0 ? _a : this.getSpec().initFunc;
     };
     StateSpecNode.prototype.clearStates = function () {
-        this.state = {};
+        this._state = {};
     };
     StateSpecNode.prototype.states = function () {
-        return Object.values(this.state);
+        return Object.values(this._state);
     };
     StateSpecNode.prototype.hasState = function (path) {
         var key = JSON.stringify(path);
-        return key in this.state;
+        return key in this._state;
     };
     StateSpecNode.prototype.createStateCell = function (path) {
         var key = JSON.stringify(path);
-        this.state[key] = {
+        this._state[key] = {
             listeners: [],
             initialValue: UNINITIALIZED,
-            registeredInitFunc: this.getSpec().initFunc,
             path: path
         };
     };
     StateSpecNode.prototype.setInitialValue = function (path, value) {
         var key = JSON.stringify(path);
-        this.state[key].initialValue = value;
+        this._state[key].initialValue = value;
     };
     StateSpecNode.prototype.getInitialValue = function (path) {
         var key = JSON.stringify(path);
-        return this.state[key].initialValue;
+        return this._state[key].initialValue;
     };
     StateSpecNode.prototype.addListener = function (path, f) {
         var key = JSON.stringify(path);
-        this.state[key].listeners.push(f);
+        this._state[key].listeners.push(f);
     };
     return StateSpecNode;
 }());
@@ -855,7 +927,31 @@ function buildTree(specs) {
     };
     return rec([]);
 }
-function getLeaves(root) {
+function updateTree(root, 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 (oldNode, currentPath) {
+        var nodeSpecs = internalSpec.filter(function (spec) {
+            return shallowEqual(currentPath, spec.pathObj.slice(0, currentPath.length));
+        });
+        var node = oldNode !== null && oldNode !== void 0 ? oldNode : new StateSpecNode(nodeSpecs);
+        node.setSpecs(nodeSpecs);
+        var oldEdges = oldNode === null || oldNode === void 0 ? void 0 : oldNode.edges();
+        node.clearEdges();
+        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(oldEdges === null || oldEdges === void 0 ? void 0 : oldEdges.get(nextKey), __spreadArray(__spreadArray([], __read(currentPath), false), [nextKey], false)));
+                }
+            }
+        });
+        return node;
+    };
+    return rec(root, []);
+}
+function getStateCells(root) {
     var leaves = [];
     var rec = function (node) {
         var e_1, _a;
@@ -872,7 +968,7 @@ function getLeaves(root) {
             }
             finally { if (e_1) throw e_1.error; }
         }
-        if (node.isLeaf()) {
+        if (node.isLeaf() && node.getAllSpecs().length > 0) {
             leaves.push(node);
         }
     };
@@ -891,7 +987,6 @@ function findStateCell(root, pathStr, repetitionIndex) {
                 if (!root.hasArrayTransition() ||
                     !repetitionIndex ||
                     currRepIndex > repetitionIndex.length) {
-                    console.log(root);
                     throw new Error("transition not found: pathStr ".concat(pathStr, " part ").concat(typeof part === "symbol" ? "[]" : part));
                 }
                 realPath.push(repetitionIndex[currRepIndex++]);
@@ -951,8 +1046,7 @@ function initializeStateValue($$state, initialSpecNode, initialStatePath, proxyR
             set(proxyRoot, initialStatePath, newValue);
         });
     });
-    var initialValue = initialSpecNode.getState(initialStatePath)
-        .registeredInitFunc($$state.props, $state, $$state.ctx);
+    var initialValue = initialSpecNode.getInitFunc(initialSpecNode.getState(initialStatePath))($$state.props, $state, $$state.ctx);
     initialSpecNode.setInitialValue(initialStatePath, clone(initialValue));
     var initialSpec = initialSpecNode.getSpec();
     var value = initialSpec.isImmutable
@@ -966,7 +1060,8 @@ function initializeStateValue($$state, initialSpecNode, initialStatePath, proxyR
     return initialValue;
 }
 function create$StateProxy($$state, leafHandlers) {
-    var rec = function (currPath, currNode, isOutside, proxyRoot, initialObject) {
+    var proxyRoot;
+    var rec = function (currPath, currNode, isOutside, initialObject) {
         var getNextPath = function (property) { return __spreadArray(__spreadArray([], __read(currPath), false), [
             isNum(property) ? +property : property,
         ], false); };
@@ -985,7 +1080,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($$state.stateValues, currPath.slice(spec.pathObj.length)));
+                    (_b = (_a = $$state.props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, get(proxyRoot, currPath.slice(spec.pathObj.length)));
                 }
                 return Reflect.deleteProperty(target, property);
             },
@@ -994,23 +1089,21 @@ function create$StateProxy($$state, leafHandlers) {
                 if (property === PLASMIC_STATE_PROXY_SYMBOL) {
                     return true;
                 }
-                proxyRoot = proxyRoot == null ? receiver : proxyRoot;
                 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(nextNode, nextPath, proxyRoot)).get) === null || _b === void 0 ? void 0 : _b.call(_a, target, property, receiver);
+                    return (_b = (_a = leafHandlers(nextNode, nextPath)).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, proxyRoot, undefined);
+                    target[property] = rec(nextPath, nextNode, false, undefined);
                 }
                 return Reflect.get(target, property, receiver);
             },
             set: function (target, property, value, receiver) {
                 var _a, _b;
-                proxyRoot = proxyRoot == null ? receiver : proxyRoot;
                 var nextPath = getNextPath(property);
                 var nextNode = currNode.makeTransition(property);
                 if (property === "registerInitFunc" && currPath.length === 0) {
@@ -1022,7 +1115,7 @@ function create$StateProxy($$state, leafHandlers) {
                     return Reflect.set(target, property, value, receiver);
                 }
                 if (nextNode === null || nextNode === void 0 ? void 0 : nextNode.isLeaf()) {
-                    (_b = (_a = leafHandlers(nextNode, nextPath, proxyRoot)).set) === null || _b === void 0 ? void 0 : _b.call(_a, target, property, value, receiver);
+                    (_b = (_a = leafHandlers(nextNode, nextPath)).set) === null || _b === void 0 ? void 0 : _b.call(_a, target, property, value, receiver);
                 }
                 if (!isOutside && !currNode.isLeaf() && !nextNode) {
                     // can't set an unknown field in $state
@@ -1034,7 +1127,7 @@ function create$StateProxy($$state, leafHandlers) {
                     nextNode = currNode;
                 }
                 if (canProxy(value)) {
-                    target[property] = rec(nextPath, nextNode, isOutside || currNode.isLeaf(), proxyRoot, value);
+                    target[property] = rec(nextPath, nextNode, isOutside || currNode.isLeaf(), value);
                 }
                 else if (!isOutside && !currNode.isLeaf() && !(nextNode === null || nextNode === void 0 ? void 0 : nextNode.isLeaf())) {
                     throw new Error("inserting a primitive value into a non-leaf");
@@ -1063,6 +1156,9 @@ function create$StateProxy($$state, leafHandlers) {
                 ? []
                 : Object.create(Object.getPrototypeOf(initialObject !== null && initialObject !== void 0 ? initialObject : {}));
         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);
@@ -1076,67 +1172,100 @@ function create$StateProxy($$state, leafHandlers) {
         }
         return proxyObj;
     };
-    return rec([], $$state.rootSpecTree, false, undefined, undefined);
+    return rec([], $$state.rootSpecTree, false, undefined);
 }
 var mkUntrackedValue = function (o) {
     return o != null && typeof o === "object" ? ref(o) : o;
 };
-function useDollarState(specs, props, $ctx) {
+function useDollarState(specs, props, $ctx, opts) {
     var $$state = React__default.useRef((function () {
         var rootSpecTree = buildTree(specs);
         return {
             rootSpecTree: rootSpecTree,
-            specTreeLeaves: getLeaves(rootSpecTree),
+            specTreeLeaves: getStateCells(rootSpecTree),
             stateValues: proxy({}),
             props: {},
             ctx: {},
-            registrationsQueue: []
+            specs: [],
+            registrationsQueue: proxy([])
         };
     })()).current;
     $$state.props = props;
     $$state.ctx = $ctx !== null && $ctx !== void 0 ? $ctx : {};
-    var $state = React__default.useRef(Object.assign(create$StateProxy($$state, function (node, path, proxyRoot) {
-        if (!node.hasState(path)) {
-            node.createStateCell(path);
-            var spec = node.getSpec();
-            if (spec.initFunc) {
-                initializeStateValue($$state, node, path, proxyRoot);
-            }
-            else if (!spec.valueProp) {
-                set(proxyRoot, path, spec.initVal);
-            }
-        }
-        return {
-            get: function (target, property, receiver) {
+    $$state.specs = specs;
+    var create$State = function () {
+        var $state = Object.assign(create$StateProxy($$state, function (node, path) {
+            if (!node.hasState(path)) {
+                node.createStateCell(path);
                 var spec = node.getSpec();
-                if (spec.valueProp) {
-                    return $$state.props[spec.valueProp];
+                if (spec.initFunc) {
+                    initializeStateValue($$state, node, path, $state);
                 }
-                else {
-                    return Reflect.get(target, property, receiver);
+                else if (!spec.valueProp) {
+                    set($state, path, spec.initVal);
                 }
             }
-        };
-    }), {
-        registerInitFunc: function (pathStr, f, repetitionIndex) {
-            var _a = findStateCell($$state.rootSpecTree, pathStr, repetitionIndex), node = _a.node, realPath = _a.realPath;
-            if (!node.hasState(realPath)) {
-                node.createStateCell(realPath);
-            }
-            if (!deepEqual(node.getState(realPath).initialValue, f($$state.props, $state, $$state.ctx))) {
-                $$state.registrationsQueue.push({ node: node, path: realPath, f: f });
+            return {
+                get: function (target, property, receiver) {
+                    var spec = node.getSpec();
+                    if (spec.valueProp) {
+                        return $$state.props[spec.valueProp];
+                    }
+                    else {
+                        return Reflect.get(target, property, receiver);
+                    }
+                }
+            };
+        }), {
+            registerInitFunc: function (pathStr, f, repetitionIndex) {
+                var _a = findStateCell($$state.rootSpecTree, pathStr, repetitionIndex), node = _a.node, realPath = _a.realPath;
+                if (!node.hasState(realPath)) {
+                    node.createStateCell(realPath);
+                }
+                if (!deepEqual(node.getState(realPath).initialValue, f($$state.props, $state, $$state.ctx))) {
+                    $$state.registrationsQueue.push(mkUntrackedValue({ node: node, path: realPath, f: f }));
+                }
             }
+        });
+        return $state;
+    };
+    var ref = React__default.useRef(undefined);
+    if (!ref.current) {
+        ref.current = create$State();
+    }
+    var $state = ref.current;
+    if (opts === null || opts === void 0 ? void 0 : opts.inCanvas) {
+        $$state.rootSpecTree = updateTree($$state.rootSpecTree, specs);
+        var newLeaves = getStateCells($$state.rootSpecTree);
+        if (!arrayEq(newLeaves, $$state.specTreeLeaves)) {
+            $state = ref.current = create$State();
+            $$state.specTreeLeaves = newLeaves;
         }
-    })).current;
+        // we need to eager initialize all states in canvas to populate the data picker
+        $$state.specTreeLeaves.forEach(function (node) {
+            var spec = node.getSpec();
+            if (spec.isRepeated || node.hasState(spec.pathObj)) {
+                return;
+            }
+            node.createStateCell(spec.pathObj);
+            var init = spec.valueProp
+                ? $$state.props[spec.valueProp]
+                : spec.initFunc
+                    ? initializeStateValue($$state, node, spec.pathObj, $state)
+                    : spec.initVal;
+            set($state, spec.pathObj, init);
+        });
+    }
     // For each spec with an initFunc, evaluate it and see if
     // the init value has changed. If so, reset its state.
     var resetSpecs = [];
     $$state.specTreeLeaves
         .flatMap(function (node) { return node.states().map(function (stateCell) { return ({ stateCell: stateCell, node: node }); }); })
         .forEach(function (_a) {
-        var stateCell = _a.stateCell, node = _a.node;
-        if (stateCell.registeredInitFunc) {
-            var newInit = stateCell.registeredInitFunc(props, $state, $ctx !== null && $ctx !== void 0 ? $ctx : {});
+        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 : {});
             if (!deepEqual(newInit, stateCell.initialValue)) {
                 resetSpecs.push({ stateCell: stateCell, node: node });
             }
@@ -1157,14 +1286,13 @@ function useDollarState(specs, props, $ctx) {
         });
     }, [props, resetSpecs]);
     useIsomorphicLayoutEffect(function () {
-        $$state.registrationsQueue.forEach(function (_a) {
-            var node = _a.node, path = _a.path, f = _a.f;
+        while ($$state.registrationsQueue.length) {
+            var _a = $$state.registrationsQueue.shift(), node = _a.node, path = _a.path, f = _a.f;
             var stateCell = node.getState(path);
             stateCell.registeredInitFunc = f;
             reInitializeState(node, stateCell);
-        });
-        $$state.registrationsQueue = [];
-    }, [$$state.registrationsQueue]);
+        }
+    }, [$$state.registrationsQueue.length]);
     // immediately initialize exposed non-private states
     useIsomorphicLayoutEffect(function () {
         $$state.specTreeLeaves.forEach(function (node) {
@@ -1177,6 +1305,7 @@ function useDollarState(specs, props, $ctx) {
     }, []);
     // Re-render if any value changed in one of these objects
     useSnapshot($$state.stateValues, { sync: true });
+    useSnapshot($$state.registrationsQueue);
     return $state;
 }