@plasmicapp/react-web 0.2.133 → 0.2.135

package/dist/all.d.ts

@@ -23,23 +23,20 @@ declare function omit<T extends {}>(obj: T, ...keys: (keyof T)[]): Partial<T>;
 declare type StrictProps<T, TExpected> = Exclude<keyof T, keyof TExpected> extends never ? {} : Partial<"Unexpected extraneous props">;
 declare type HTMLElementRefOf<T extends keyof JSX.IntrinsicElements> = Exclude<React__default.ComponentProps<T>["ref"], string>;
 
-declare type InitFunc$1<T> = ($props: Record<string, any>, $state: $State$1, $ctx: Record<string, any>, indexes: number[]) => T;
-interface $State$1 {
-    [key: string]: any;
-    registerInitFunc?: (path: string, f: InitFunc$1<any>) => any;
-}
+declare type InitFunc<T> = ($props: Record<string, any>, $state: $State, $ctx: Record<string, any>, indexes?: number[]) => T;
 interface $StateSpec<T> {
     path: string;
-    initFunc?: InitFunc$1<T>;
+    initFunc?: InitFunc<T>;
     initVal?: T;
     type: "private" | "readonly" | "writable";
     valueProp?: string;
     onChangeProp?: string;
-    isArray?: boolean;
+    isImmutable?: boolean;
 }
-declare function useDollarState(specs: $StateSpec<any>[], props: Record<string, any>, $ctx?: Record<string, any>): any;
-
-declare function useCanvasDollarState(specs: $StateSpec<any>[], props: Record<string, any>, $ctx?: Record<string, any>): any;
+interface $State {
+    [key: string]: any;
+    registerInitFunc?: (path: string, f: InitFunc<any>) => any;
+}
 
 interface Variants {
     [vg: string]: any;
@@ -89,7 +86,7 @@ declare function wrapWithClassName(element: React.ReactNode, className: string):
         display: "grid";
     };
 }, HTMLElement>;
-declare function mergeVariantsWithStates(variants: Variants, $state: $State$1, linkedStates: {
+declare function mergeVariantsWithStates(variants: Variants, $state: $State, linkedStates: {
     variantGroup: string;
     statePath: (string | number)[];
 }[]): Variants;
@@ -565,9 +562,7 @@ interface Node<T> {
 // Event bubbling can be problematic in real-world applications, so the default for React Spectrum components
 // is not to propagate. This can be overridden by calling continuePropagation() on the event.
 type BaseEvent<T extends SyntheticEvent> = T & {
-  /**
-   * Use continuePropagation.
-   * @deprecated */
+  /** @deprecated Use continuePropagation. */
   stopPropagation(): void,
   continuePropagation(): void
 }
@@ -661,12 +656,6 @@ declare function useTrigger(trigger: TriggerType, opts: TriggerOpts): [boolean,
 
 declare function dlv(object: object, key: string | Array<string | number>, defaultValue?: any): any;
 
-declare type InitFunc<T> = ($props: Record<string, any>, $state: $State) => T;
-interface $State {
-    [key: string]: any;
-    registerInitFunc?: (path: string, f: InitFunc<any>) => any;
-}
-
 declare function generateStateOnChangeProp($state: $State, stateName: string, dataReps: number[]): (val: any, path: (string | number)[]) => void;
 /**
  * This function generate the state value prop for repeated states
@@ -680,7 +669,13 @@ declare function generateStateValueProp($state: $State, path: (string | number)[
  * Changes: fixed setting a deep value to a proxy object
  */
 declare function set(obj: any, keys: any, val: any): void;
-declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+declare function shallowEqual<T>(a1: T[], a2: T[]): boolean;
+declare function isNum(value: string | number | symbol): value is number;
+
+declare function useDollarState(specs: $StateSpec<any>[], props: Record<string, any>, $ctx?: Record<string, any>): any;
+
+declare function useCanvasDollarState(specs: $StateSpec<any>[], props: Record<string, any>, $ctx?: Record<string, any>): {};
 
 declare const classNames: typeof classNames$1;
 
@@ -1640,4 +1635,4 @@ interface TriggeredOverlayContextValue {
 }
 declare const TriggeredOverlayContext: React.Context<TriggeredOverlayContextValue | undefined>;
 
-export { $State$1 as $State, BaseButtonProps, BaseMenuButtonProps, BaseMenuGroupProps, BaseMenuItemProps, BaseMenuProps, BaseSelectOptionGroupProps, BaseSelectOptionProps, BaseSelectProps, BaseTextInputProps, BaseTriggeredOverlayProps, ButtonRef, CheckboxProps, CheckboxRef, CheckboxRefValue, DropdownMenu, Flex, HTMLElementRefOf, HtmlAnchorOnlyProps, HtmlButtonOnlyProps, MenuButtonRef, MenuButtonRefValue, MenuRef, MenuRefValue, MultiChoiceArg, PlasmicDataSourceContextProvider, PlasmicHead, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicRootProvider, PlasmicSlot, SelectContext, SelectOptionRef, SelectRef, SelectRefValue, SingleBooleanChoiceArg, SingleChoiceArg, Stack, StrictProps, SwitchProps, SwitchRef, SwitchRefValue, TextInputRef, TextInputRefValue, Trans, TriggeredOverlayConfig, TriggeredOverlayContext, TriggeredOverlayRef, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, generateStateOnChangeProp, generateStateValueProp, dlv as get, getDataProps, hasVariant, makeFragment, mergeVariantsWithStates, omit, pick, plasmicHeadMeta, renderPlasmicSlot, set, setPlumeStrictMode, useButton, useCanvasDollarState, useCheckbox, useCurrentUser, useDollarState, useIsSSR, useIsomorphicLayoutEffect, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, wrapWithClassName };
+export { $State, BaseButtonProps, BaseMenuButtonProps, BaseMenuGroupProps, BaseMenuItemProps, BaseMenuProps, BaseSelectOptionGroupProps, BaseSelectOptionProps, BaseSelectProps, BaseTextInputProps, BaseTriggeredOverlayProps, ButtonRef, CheckboxProps, CheckboxRef, CheckboxRefValue, DropdownMenu, Flex, HTMLElementRefOf, HtmlAnchorOnlyProps, HtmlButtonOnlyProps, MenuButtonRef, MenuButtonRefValue, MenuRef, MenuRefValue, MultiChoiceArg, PlasmicDataSourceContextProvider, PlasmicHead, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicRootProvider, PlasmicSlot, SelectContext, SelectOptionRef, SelectRef, SelectRefValue, SingleBooleanChoiceArg, SingleChoiceArg, Stack, StrictProps, SwitchProps, SwitchRef, SwitchRefValue, TextInputRef, TextInputRefValue, Trans, TriggeredOverlayConfig, TriggeredOverlayContext, TriggeredOverlayRef, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, generateStateOnChangeProp, generateStateValueProp, dlv as get, getDataProps, hasVariant, isNum, makeFragment, mergeVariantsWithStates, omit, pick, plasmicHeadMeta, renderPlasmicSlot, set, setPlumeStrictMode, shallowEqual, useButton, useCanvasDollarState, useCheckbox, useCurrentUser, useDollarState, useIsSSR, useIsomorphicLayoutEffect, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, wrapWithClassName };

package/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/dist/react-web.cjs.development.js

@@ -13,6 +13,7 @@ var ReactDOM__default = _interopDefault(ReactDOM);
 var dataSourcesContext = require('@plasmicapp/data-sources-context');
 var ssr = require('@react-aria/ssr');
 var focus = require('@react-aria/focus');
+var clone = _interopDefault(require('clone'));
 var deepEqual = _interopDefault(require('fast-deep-equal'));
 var valtio = require('valtio');
 var utils = require('valtio/utils');
@@ -1739,20 +1740,105 @@ function set(obj, keys, val) {
   }
 }
 var useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+function shallowEqual(a1, a2) {
+  if (a1.length !== a2.length) {
+    return false;
+  }
 
-var mkUntrackedValue = function mkUntrackedValue(o) {
-  return o != null && typeof o === "object" ? valtio.ref(o) : o;
-};
+  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);
+}
+
+var ARRAY_SYMBOL = /*#__PURE__*/Symbol("[]");
+
+var StateSpecNode = /*#__PURE__*/function () {
+  function StateSpecNode(specs) {
+    this.specs = specs;
+    this.edges = new Map();
+  }
+
+  var _proto = StateSpecNode.prototype;
+
+  _proto.hasEdge = function hasEdge(key) {
+    return this.edges.has(key);
+  };
+
+  _proto.addEdge = function addEdge(key, node) {
+    this.edges.set(key, node);
+  };
+
+  _proto.makeTransition = function makeTransition(key) {
+    key = isNum(key) ? ARRAY_SYMBOL : key;
+    return this.edges.get(key);
+  };
+
+  _proto.isLeaf = function isLeaf() {
+    return this.edges.size === 0;
+  };
+
+  _proto.hasArrayTransition = function hasArrayTransition() {
+    return this.edges.has(ARRAY_SYMBOL);
+  };
 
+  _proto.getSpec = function getSpec() {
+    return this.specs[0];
+  };
+
+  _proto.getAllSpecs = function getAllSpecs() {
+    return this.specs;
+  };
+
+  return StateSpecNode;
+}();
 var transformPathStringToObj = function transformPathStringToObj(str) {
   var splitStatePathPart = function splitStatePathPart(state) {
-    return state.endsWith("[]") ? [].concat(splitStatePathPart(state.slice(0, -2)), ["[]"]) : [state];
+    return state.endsWith("[]") ? [].concat(splitStatePathPart(state.slice(0, -2)), [ARRAY_SYMBOL]) : [state];
   };
 
   return str.split(".").flatMap(splitStatePathPart);
 };
+function buildGraph(specs) {
+  var internalSpec = specs.map(function (spec) {
+    return _extends({}, spec, {
+      pathObj: transformPathStringToObj(spec.path),
+      isRepeated: spec.path.split(".").some(function (part) {
+        return part.endsWith("[]");
+      })
+    });
+  });
 
-function shallowEqual(a1, a2) {
+  var rec = function rec(currentPath) {
+    var node = new StateSpecNode(internalSpec.filter(function (spec) {
+      return shallowEqual(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([].concat(currentPath, [nextKey])));
+        }
+      }
+    });
+    return node;
+  };
+
+  return rec([]);
+}
+
+var mkUntrackedValue = function mkUntrackedValue(o) {
+  return o != null && typeof o === "object" ? valtio.ref(o) : o;
+};
+
+function shallowEqual$1(a1, a2) {
   if (a1.length !== a2.length) {
     return false;
   }
@@ -1766,7 +1852,7 @@ function shallowEqual(a1, a2) {
   return true;
 }
 
-function isNum(value) {
+function isNum$1(value) {
   return typeof value === "symbol" ? false : !isNaN(+value);
 }
 
@@ -1788,37 +1874,12 @@ function saveNewState($$state, path, spec) {
 }
 
 function create$StateProxy($$state, handlers) {
-  var getNextKeyToSpecMap = function getNextKeyToSpecMap(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 rec(currPath) {
-    var nextKeyToSpecs = getNextKeyToSpecMap(currPath);
-
-    var getSpecForProperty = function getSpecForProperty(property) {
-      var _nextKeyToSpecs$get, _nextKeyToSpecs$get2;
-
-      return nextKeyToSpecs.has("[]") && isNum(property) ? (_nextKeyToSpecs$get = nextKeyToSpecs.get("[]")) == null ? void 0 : _nextKeyToSpecs$get[0] : typeof property === "string" && nextKeyToSpecs.has(property) ? (_nextKeyToSpecs$get2 = nextKeyToSpecs.get(property)) == null ? void 0 : _nextKeyToSpecs$get2[0] : undefined;
-    };
-
+  var rec = function rec(currPath, currNode) {
     var getNextPath = function getNextPath(property) {
-      return [].concat(currPath, [isNum(property) ? +property : property]);
+      return [].concat(currPath, [isNum$1(property) ? +property : property]);
     };
 
-    return new Proxy(nextKeyToSpecs.has("[]") ? [] : {}, {
+    return new Proxy(currNode.hasArrayTransition() ? [] : {}, {
       deleteProperty: function deleteProperty(target, property) {
         var prefixPath = getNextPath(property);
         var specKeysToUpdate = new Set();
@@ -1826,7 +1887,7 @@ function create$StateProxy($$state, handlers) {
           var path = _ref.path,
               specKey = _ref.specKey;
 
-          if (path.length >= prefixPath.length && shallowEqual(path.slice(0, prefixPath.length), prefixPath)) {
+          if (path.length >= prefixPath.length && shallowEqual$1(path.slice(0, prefixPath.length), prefixPath)) {
             deleteState($$state, path);
             specKeysToUpdate.add(specKey);
           }
@@ -1843,36 +1904,34 @@ function create$StateProxy($$state, handlers) {
         return Reflect.deleteProperty(target, property);
       },
       get: function get(target, property, receiver) {
-        var spec = getSpecForProperty(property);
-
-        if (spec && typeof property !== "symbol") {
-          var nextPath = getNextPath(property);
+        var nextPath = getNextPath(property);
+        var nextNode = currNode.makeTransition(property);
 
-          if (spec.pathObj.length === currPath.length + 1) {
+        if (nextNode) {
+          if (nextNode.isLeaf()) {
             var _handlers$get, _handlers;
 
-            // reached the end of the spec
-            target[property] = (_handlers$get = (_handlers = handlers(nextPath, spec)).get) == null ? void 0 : _handlers$get.call(_handlers, target, property, receiver);
+            target[property] = (_handlers$get = (_handlers = handlers(nextPath, nextNode.getSpec())).get) == null ? void 0 : _handlers$get.call(_handlers, 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 set$1(target, property, value, receiver) {
-        var spec = getSpecForProperty(property);
         var nextPath = getNextPath(property);
+        var nextNode = currNode.makeTransition(property);
 
-        if (spec && typeof property !== "symbol") {
-          if (spec.pathObj.length === currPath.length + 1) {
+        if (nextNode && typeof property !== "symbol") {
+          if (nextNode.isLeaf()) {
             var _handlers$set, _handlers2;
 
             // reached the end of the spec
-            target[property] = (_handlers$set = (_handlers2 = handlers(nextPath, spec)).set) == null ? void 0 : _handlers$set.call(_handlers2, target, property, value, receiver);
+            target[property] = (_handlers$set = (_handlers2 = handlers(nextPath, nextNode.getSpec())).set) == null ? void 0 : _handlers$set.call(_handlers2, 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);
 
             for (var _i = 0, _Object$keys = Object.keys(value); _i < _Object$keys.length; _i++) {
               var key = _Object$keys[_i];
@@ -1887,13 +1946,13 @@ function create$StateProxy($$state, handlers) {
           return Reflect.set(target, property, value, receiver);
         }
 
-        if (nextKeyToSpecs.has("[]")) {
-          var _nextKeyToSpecs$get3;
+        if (currNode.hasArrayTransition()) {
+          var _currNode$makeTransit, _currNode$makeTransit2;
 
           set($$state.stateValues, nextPath, value);
 
-          (_nextKeyToSpecs$get3 = nextKeyToSpecs.get("[]")) == null ? void 0 : _nextKeyToSpecs$get3.forEach(function (spec) {
-            if (spec != null && spec.onChangeProp) {
+          (_currNode$makeTransit = currNode.makeTransition(ARRAY_SYMBOL)) == null ? void 0 : (_currNode$makeTransit2 = _currNode$makeTransit.getAllSpecs()) == null ? void 0 : _currNode$makeTransit2.forEach(function (spec) {
+            if (spec.onChangeProp) {
               var _$$state$props$spec$o2, _$$state$props2;
 
               (_$$state$props$spec$o2 = (_$$state$props2 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o2.call(_$$state$props2, value, nextPath);
@@ -1908,7 +1967,7 @@ function create$StateProxy($$state, handlers) {
     });
   };
 
-  return rec([]);
+  return rec([], $$state.rootStateSpec);
 }
 
 var deleteState = function deleteState($$state, path) {
@@ -1979,7 +2038,7 @@ function initializeStateValue($$state, initialStatePath, initialSpec) {
     var path = _ref2.path,
         spec = _ref2.spec;
     var unsubscribe = utils.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);
   });
@@ -1988,27 +2047,25 @@ function initializeStateValue($$state, initialStatePath, initialSpec) {
   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));
   }
 }
 
@@ -2029,7 +2086,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 : {});
@@ -2053,8 +2111,8 @@ function useDollarState(specs, props, $ctx) {
           return _get($$state.stateValues, path);
         }
       },
-      set: function set$1(_t, _p, value) {
-        set($$state.stateValues, path, mkUntrackedValue(value));
+      set: function set(_t, _p, value) {
+        saveValue($$state, path, spec, value);
 
         if (spec.onChangeProp) {
           var _$$state$props$spec$o3, _$$state$props3;
@@ -2148,28 +2206,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 get() {
-        return _get($$state.stateValues, path);
-      },
-      set: function set$1(_t, _p, value) {
-        set($$state.stateValues, path, mkUntrackedValue(value));
-
-        if (spec.onChangeProp) {
-          var _$$state$props$spec$o5, _$$state$props5;
-
-          (_$$state$props$spec$o5 = (_$$state$props5 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o5.call(_$$state$props5, value, path);
-        }
-
-        return true;
-      }
-    };
-  });
+  var $state = {};
 
   for (var _iterator = _createForOfIteratorHelperLoose(specs), _step; !(_step = _iterator()).done;) {
     var spec = _step.value;
@@ -3768,6 +3810,7 @@ exports.generateStateOnChangeProp = generateStateOnChangeProp;
 exports.generateStateValueProp = generateStateValueProp;
 exports.getDataProps = getDataProps;
 exports.hasVariant = hasVariant;
+exports.isNum = isNum;
 exports.makeFragment = makeFragment;
 exports.mergeVariantsWithStates = mergeVariantsWithStates;
 exports.omit = omit;
@@ -3776,6 +3819,7 @@ exports.plasmicHeadMeta = plasmicHeadMeta;
 exports.renderPlasmicSlot = renderPlasmicSlot;
 exports.set = set;
 exports.setPlumeStrictMode = setPlumeStrictMode;
+exports.shallowEqual = shallowEqual;
 exports.useButton = useButton;
 exports.useCanvasDollarState = useCanvasDollarState;
 exports.useCheckbox = useCheckbox;