@plasmicapp/react-web 0.2.139 → 0.2.141

package/dist/all.d.ts

@@ -52,6 +52,7 @@ declare type HTMLElementRefOf<T extends keyof JSX.IntrinsicElements> = Exclude<R
 declare function dlv(object: object, key: string | Array<string | number>, defaultValue?: any): any;
 
 declare type InitFunc<T> = ($props: Record<string, any>, $state: $State, $ctx: Record<string, any>, indexes?: number[]) => T;
+declare type ObjectPath = (string | number)[];
 interface $StateSpec<T> {
     path: string;
     initFunc?: InitFunc<T>;
@@ -66,14 +67,8 @@ interface $State {
     registerInitFunc?: (path: string, f: InitFunc<any>, repetitonIndex?: number[]) => 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
- * Example:
- *   - parent[][].counter[].count
- * We need to pass `parent[index1][index2].counter to the child component
- */
-declare function generateStateValueProp($state: $State, path: (string | number)[]): any;
+declare function generateStateOnChangeProp($state: $State, path: ObjectPath): (val: any) => void;
+declare function generateStateValueProp($state: $State, path: ObjectPath): any;
 declare function isPlasmicStateProxy(obj: any): any;
 /**
  * Forked from https://github.com/lukeed/dset
@@ -81,7 +76,9 @@ declare function isPlasmicStateProxy(obj: any): any;
  */
 declare function set(obj: any, keys: any, val: any): void;
 
-declare function useDollarState(specs: $StateSpec<any>[], props: Record<string, any>, $ctx?: Record<string, any>): $State;
+declare function useDollarState(specs: $StateSpec<any>[], props: Record<string, any>, $ctx?: Record<string, any>, opts?: {
+    inCanvas: boolean;
+}): $State;
 
 interface Variants {
     [vg: string]: any;

package/dist/react-web.cjs.development.js

@@ -1285,10 +1285,16 @@ function renderPlasmicSlot(opts) {
 }
 function maybeAsString(node) {
   // Unwrap fragments
-  if (React.isValidElement(node) && (
-  // Fragment and Trans don't render DOM elements
-  node.type === React.Fragment || node.type === Trans)) {
-    return maybeAsString(node.props.children);
+  if (React.isValidElement(node)) {
+    // Fragment doesn't render DOM elements
+    if (node.type === React.Fragment) {
+      return maybeAsString(node.props.children);
+    } else if (node.type === Trans) {
+      // Trans also doesn't render DOM elements. But we don't want to just render
+      // its content string, because we want to keep the <Trans/> for the localization.
+      // So we render the same node, to be wrapped into __wab_slot-string-wrapper.
+      return node;
+    }
   }
   if (typeof node === "string") {
     return node;
@@ -1511,19 +1517,12 @@ function useTrigger(trigger, opts) {
 var ARRAY_SYMBOL = /*#__PURE__*/Symbol("[]");
 var PLASMIC_STATE_PROXY_SYMBOL = /*#__PURE__*/Symbol("plasmic.state.proxy");
 
-function generateStateOnChangeProp($state, stateName, dataReps) {
-  return function (val, path) {
-    return set($state, [stateName].concat(dataReps, path), 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$1 = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
@@ -1541,6 +1540,14 @@ 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(value) {
   return typeof value === "symbol" ? false : !isNaN(+value);
 }
@@ -1603,69 +1610,84 @@ function assignValue(object, key, value) {
 var UNINITIALIZED = /*#__PURE__*/Symbol("plasmic.unitialized");
 var StateSpecNode = /*#__PURE__*/function () {
   function StateSpecNode(specs) {
-    this.specs = specs;
-    this.edges = new Map();
-    this.state = {};
+    this._specs = specs;
+    this._edges = new Map();
+    this._state = {};
   }
   var _proto = StateSpecNode.prototype;
+  _proto.setSpecs = function setSpecs(specs) {
+    this._specs = specs;
+  };
+  _proto.edges = function edges() {
+    return this._edges;
+  };
+  _proto.state = function state() {
+    return this._state;
+  };
   _proto.hasEdge = function hasEdge(key) {
-    return this.edges.has(key);
+    return this._edges.has(key);
   };
   _proto.addEdge = function addEdge(key, node) {
-    this.edges.set(key, node);
+    this._edges.set(key, node);
+  };
+  _proto.clearEdges = function clearEdges() {
+    this._edges = new Map();
   };
   _proto.children = function children() {
-    return this.edges.values();
+    return this._edges.values();
   };
   _proto.makeTransition = function makeTransition(key) {
     key = isNum(key) ? ARRAY_SYMBOL : key;
-    return this.edges.get(key);
+    return this._edges.get(key);
   };
   _proto.isLeaf = function isLeaf() {
-    return this.edges.size === 0;
+    return this._edges.size === 0;
   };
   _proto.hasArrayTransition = function hasArrayTransition() {
-    return this.edges.has(ARRAY_SYMBOL);
+    return this._edges.has(ARRAY_SYMBOL);
   };
   _proto.getSpec = function getSpec() {
-    return this.specs[0];
+    return this._specs[0];
   };
   _proto.getAllSpecs = function getAllSpecs() {
-    return this.specs;
+    return this._specs;
   };
   _proto.getState = function getState(path) {
-    return this.state[JSON.stringify(path)];
+    return this._state[JSON.stringify(path)];
+  };
+  _proto.getInitFunc = function getInitFunc(stateCell) {
+    var _stateCell$registered;
+    return (_stateCell$registered = stateCell.registeredInitFunc) != null ? _stateCell$registered : this.getSpec().initFunc;
   };
   _proto.clearStates = function clearStates() {
-    this.state = {};
+    this._state = {};
   };
   _proto.states = function states() {
-    return Object.values(this.state);
+    return Object.values(this._state);
   };
   _proto.hasState = function hasState(path) {
     var key = JSON.stringify(path);
-    return key in this.state;
+    return key in this._state;
   };
   _proto.createStateCell = function createStateCell(path) {
     var key = JSON.stringify(path);
-    this.state[key] = {
+    this._state[key] = {
       listeners: [],
       initialValue: UNINITIALIZED,
-      registeredInitFunc: this.getSpec().initFunc,
       path: path
     };
   };
   _proto.setInitialValue = function setInitialValue(path, value) {
     var key = JSON.stringify(path);
-    this.state[key].initialValue = value;
+    this._state[key].initialValue = value;
   };
   _proto.getInitialValue = function getInitialValue(path) {
     var key = JSON.stringify(path);
-    return this.state[key].initialValue;
+    return this._state[key].initialValue;
   };
   _proto.addListener = function addListener(path, f) {
     var key = JSON.stringify(path);
-    this.state[key].listeners.push(f);
+    this._state[key].listeners.push(f);
   };
   return StateSpecNode;
 }();
@@ -1700,14 +1722,43 @@ function buildTree(specs) {
   };
   return rec([]);
 }
-function getLeaves(root) {
+function updateTree(root, specs) {
+  var internalSpec = specs.map(function (spec) {
+    return _extends({}, spec, {
+      pathObj: transformPathStringToObj(spec.path),
+      isRepeated: spec.path.split(".").some(function (part) {
+        return part.endsWith("[]");
+      })
+    });
+  });
+  var rec = function rec(oldNode, currentPath) {
+    var nodeSpecs = internalSpec.filter(function (spec) {
+      return shallowEqual(currentPath, spec.pathObj.slice(0, currentPath.length));
+    });
+    var node = oldNode != null ? oldNode : new StateSpecNode(nodeSpecs);
+    node.setSpecs(nodeSpecs);
+    var oldEdges = oldNode == null ? 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 ? void 0 : oldEdges.get(nextKey), [].concat(currentPath, [nextKey])));
+        }
+      }
+    });
+    return node;
+  };
+  return rec(root, []);
+}
+function getStateCells(root) {
   var leaves = [];
   var rec = function rec(node) {
     for (var _iterator = _createForOfIteratorHelperLoose(node.children()), _step; !(_step = _iterator()).done;) {
       var child = _step.value;
       rec(child);
     }
-    if (node.isLeaf()) {
+    if (node.isLeaf() && node.getAllSpecs().length > 0) {
       leaves.push(node);
     }
   };
@@ -1722,7 +1773,6 @@ function findStateCell(root, pathStr, repetitionIndex) {
     var part = _step2.value;
     if (typeof part === "symbol") {
       if (!root.hasArrayTransition() || !repetitionIndex || currRepIndex > repetitionIndex.length) {
-        console.log(root);
         throw new Error("transition not found: pathStr " + pathStr + " part " + (typeof part === "symbol" ? "[]" : part));
       }
       realPath.push(repetitionIndex[currRepIndex++]);
@@ -1777,7 +1827,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 ? mkUntrackedValue(initialValue) : clone(initialValue);
@@ -1790,7 +1840,8 @@ function initializeStateValue($$state, initialSpecNode, initialStatePath, proxyR
   return initialValue;
 }
 function create$StateProxy($$state, leafHandlers) {
-  var rec = function rec(currPath, currNode, isOutside, proxyRoot, initialObject) {
+  var proxyRoot;
+  var rec = function rec(currPath, currNode, isOutside, initialObject) {
     var getNextPath = function getNextPath(property) {
       return [].concat(currPath, [isNum$1(property) ? +property : property]);
     };
@@ -1806,7 +1857,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
-          (_$$state$props$spec$o = (_$$state$props2 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o.call(_$$state$props2, _get($$state.stateValues, currPath.slice(spec.pathObj.length)));
+          (_$$state$props$spec$o = (_$$state$props2 = $$state.props)[spec.onChangeProp]) == null ? void 0 : _$$state$props$spec$o.call(_$$state$props2, _get(proxyRoot, currPath.slice(spec.pathObj.length)));
         }
         return Reflect.deleteProperty(target, property);
       },
@@ -1814,7 +1865,6 @@ 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);
@@ -1822,15 +1872,14 @@ function create$StateProxy($$state, leafHandlers) {
         var nextNode = currNode.makeTransition(property);
         if (nextNode != null && nextNode.isLeaf()) {
           var _leafHandlers$get, _leafHandlers;
-          return (_leafHandlers$get = (_leafHandlers = leafHandlers(nextNode, nextPath, proxyRoot)).get) == null ? void 0 : _leafHandlers$get.call(_leafHandlers, target, property, receiver);
+          return (_leafHandlers$get = (_leafHandlers = leafHandlers(nextNode, nextPath)).get) == null ? void 0 : _leafHandlers$get.call(_leafHandlers, 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 set$1(target, property, value, receiver) {
         var _nextNode, _nextNode2;
-        proxyRoot = proxyRoot == null ? receiver : proxyRoot;
         var nextPath = getNextPath(property);
         var nextNode = currNode.makeTransition(property);
         if (property === "registerInitFunc" && currPath.length === 0) {
@@ -1843,7 +1892,7 @@ function create$StateProxy($$state, leafHandlers) {
         }
         if ((_nextNode = nextNode) != null && _nextNode.isLeaf()) {
           var _leafHandlers$set, _leafHandlers2;
-          (_leafHandlers$set = (_leafHandlers2 = leafHandlers(nextNode, nextPath, proxyRoot)).set) == null ? void 0 : _leafHandlers$set.call(_leafHandlers2, target, property, value, receiver);
+          (_leafHandlers$set = (_leafHandlers2 = leafHandlers(nextNode, nextPath)).set) == null ? void 0 : _leafHandlers$set.call(_leafHandlers2, target, property, value, receiver);
         }
         if (!isOutside && !currNode.isLeaf() && !nextNode) {
           // can't set an unknown field in $state
@@ -1855,7 +1904,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() && !((_nextNode2 = nextNode) != null && _nextNode2.isLeaf())) {
           throw new Error("inserting a primitive value into a non-leaf");
         } else {
@@ -1872,8 +1921,11 @@ function create$StateProxy($$state, leafHandlers) {
         return true;
       }
     };
-    var baseObject = !isOutside && !currNode.isLeaf() ? currNode.hasArrayTransition() ? [] : {} : Array.isArray(initialObject) ? [] : Object.create(Object.getPrototypeOf(initialObject));
+    var baseObject = !isOutside && !currNode.isLeaf() ? currNode.hasArrayTransition() ? [] : {} : Array.isArray(initialObject) ? [] : Object.create(Object.getPrototypeOf(initialObject != null ? 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);
@@ -1886,34 +1938,36 @@ function create$StateProxy($$state, leafHandlers) {
     }
     return proxyObj;
   };
-  return rec([], $$state.rootSpecTree, false, undefined, undefined);
+  return rec([], $$state.rootSpecTree, false, undefined);
 }
 var mkUntrackedValue = function mkUntrackedValue(o) {
   return o != null && typeof o === "object" ? valtio.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: valtio.proxy({}),
       props: {},
       ctx: {},
-      registrationsQueue: []
+      specs: [],
+      registrationsQueue: valtio.proxy([])
     };
   }()).current;
   $$state.props = props;
   $$state.ctx = $ctx != null ? $ctx : {};
-  var $state = React__default.useRef(function () {
-    var useRef$state = Object.assign(create$StateProxy($$state, function (node, path, proxyRoot) {
+  $$state.specs = specs;
+  var create$State = function create$State() {
+    var $state = Object.assign(create$StateProxy($$state, function (node, path) {
       if (!node.hasState(path)) {
         node.createStateCell(path);
         var spec = node.getSpec();
         if (spec.initFunc) {
-          initializeStateValue($$state, node, path, proxyRoot);
+          initializeStateValue($$state, node, path, $state);
         } else if (!spec.valueProp) {
-          set(proxyRoot, path, spec.initVal);
+          set($state, path, spec.initVal);
         }
       }
       return {
@@ -1934,17 +1988,40 @@ function useDollarState(specs, props, $ctx) {
         if (!node.hasState(realPath)) {
           node.createStateCell(realPath);
         }
-        if (!deepEqual(node.getState(realPath).initialValue, f($$state.props, useRef$state, $$state.ctx))) {
-          $$state.registrationsQueue.push({
+        if (!deepEqual(node.getState(realPath).initialValue, f($$state.props, $state, $$state.ctx))) {
+          $$state.registrationsQueue.push(mkUntrackedValue({
             node: node,
             path: realPath,
             f: f
-          });
+          }));
         }
       }
     });
-    return useRef$state;
-  }()).current;
+    return $state;
+  };
+  var ref = React__default.useRef(undefined);
+  if (!ref.current) {
+    ref.current = create$State();
+  }
+  var $state = ref.current;
+  if (opts != null && 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;
+    }
+    // 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 = [];
@@ -1956,10 +2033,11 @@ function useDollarState(specs, props, $ctx) {
       };
     });
   }).forEach(function (_ref2) {
-    var stateCell = _ref2.stateCell,
-      node = _ref2.node;
-    if (stateCell.registeredInitFunc) {
-      var newInit = stateCell.registeredInitFunc(props, $state, $ctx != null ? $ctx : {});
+    var node = _ref2.node,
+      stateCell = _ref2.stateCell;
+    var initFunc = node.getInitFunc(stateCell);
+    if (initFunc) {
+      var newInit = initFunc(props, $state, $ctx != null ? $ctx : {});
       if (!deepEqual(newInit, stateCell.initialValue)) {
         resetSpecs.push({
           stateCell: stateCell,
@@ -1984,16 +2062,16 @@ function useDollarState(specs, props, $ctx) {
     });
   }, [props, resetSpecs]);
   useIsomorphicLayoutEffect$1(function () {
-    $$state.registrationsQueue.forEach(function (_ref4) {
-      var node = _ref4.node,
-        path = _ref4.path,
-        f = _ref4.f;
+    while ($$state.registrationsQueue.length) {
+      var _$$state$registration = $$state.registrationsQueue.shift(),
+        node = _$$state$registration.node,
+        path = _$$state$registration.path,
+        f = _$$state$registration.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$1(function () {
     $$state.specTreeLeaves.forEach(function (node) {
@@ -2008,6 +2086,7 @@ function useDollarState(specs, props, $ctx) {
   valtio.useSnapshot($$state.stateValues, {
     sync: true
   });
+  valtio.useSnapshot($$state.registrationsQueue);
   return $state;
 }