@plasmicapp/react-web 0.2.101 → 0.2.104

package/dist/react-web.esm.js

@@ -18,6 +18,8 @@ import { useListBox, useOption, useListBoxSection } from '@react-aria/listbox';
 import { useSelectState } from '@react-stately/select';
 import { useSwitch as useSwitch$1 } from '@react-aria/switch';
 import { useOverlay, useOverlayPosition, DismissButton } from '@react-aria/overlays';
+import _get from 'dlv';
+import { dset } from 'dset';
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -1197,6 +1199,96 @@ function isInternalHref(href) {
   return /^\/(?!\/)/.test(href);
 }
 
+var PlasmicTranslatorContext = /*#__PURE__*/React__default.createContext(undefined);
+
+function isIterable(val) {
+  return val != null && typeof val[Symbol.iterator] === "function";
+}
+
+function genTranslatableString(elt) {
+  var components = {};
+  var componentsCount = 0;
+
+  var getText = function getText(node) {
+    if (!node) {
+      return "";
+    }
+
+    if (typeof node === "number" || typeof node === "boolean" || typeof node === "string") {
+      return node.toString();
+    }
+
+    if (typeof node !== "object") {
+      return "";
+    }
+
+    if (Array.isArray(node) || isIterable(node)) {
+      return Array.from(node).map(function (child) {
+        return getText(child);
+      }).filter(function (child) {
+        return !!child;
+      }).join("");
+    }
+
+    var nodeChildren = hasKey(node, "props") && hasKey(node.props, "children") && node.props.children || hasKey(node, "children") && node.children || [];
+    var contents = "" + React__default.Children.toArray(nodeChildren).map(function (child) {
+      return getText(child);
+    }).filter(function (child) {
+      return !!child;
+    }).join("");
+
+    if (React__default.isValidElement(node) && node.type === React__default.Fragment) {
+      return contents;
+    }
+
+    var componentId = componentsCount + 1;
+    componentsCount++;
+    components[componentId] = React__default.isValidElement(node) ? React__default.cloneElement(node, {
+      key: componentId,
+      children: undefined
+    }) : node;
+    return "<" + componentId + ">" + contents + "</" + componentId + ">";
+  };
+
+  var str = getText(elt);
+  return {
+    str: str,
+    components: components,
+    componentsCount: componentsCount
+  };
+}
+function Trans(_ref) {
+  var children = _ref.children;
+
+  var _t = React__default.useContext(PlasmicTranslatorContext);
+
+  if (!_t) {
+    warnNoTranslationFunctionAtMostOnce();
+    return children;
+  }
+
+  var _genTranslatableStrin = genTranslatableString(children),
+      str = _genTranslatableStrin.str,
+      components = _genTranslatableStrin.components,
+      componentsCount = _genTranslatableStrin.componentsCount;
+
+  return _t(str, componentsCount > 0 ? {
+    components: components
+  } : undefined);
+}
+var hasWarned = false;
+
+function warnNoTranslationFunctionAtMostOnce() {
+  if (!hasWarned) {
+    console.warn("Using Plasmic Translation but no translation function has been provided");
+    hasWarned = true;
+  }
+}
+
+function hasKey(v, key) {
+  return typeof v === "object" && v !== null && key in v;
+}
+
 function PlasmicSlot(props) {
   return renderPlasmicSlot(props);
 }
@@ -1240,7 +1332,8 @@ function renderPlasmicSlot(opts) {
 
 function maybeAsString(node) {
   // Unwrap fragments
-  if (isValidElement(node) && node.type === Fragment) {
+  if (isValidElement(node) && ( // Fragment and Trans don't render DOM elements
+  node.type === Fragment || node.type === Trans)) {
     return maybeAsString(node.props.children);
   }
 
@@ -1351,96 +1444,6 @@ function createUseScreenVariants(isMulti, screenQueries) {
   };
 }
 
-var PlasmicTranslatorContext = /*#__PURE__*/React__default.createContext(undefined);
-
-function isIterable(val) {
-  return val != null && typeof val[Symbol.iterator] === "function";
-}
-
-function genTranslatableString(elt) {
-  var components = {};
-  var componentsCount = 0;
-
-  var getText = function getText(node) {
-    if (!node) {
-      return "";
-    }
-
-    if (typeof node === "number" || typeof node === "boolean" || typeof node === "string") {
-      return node.toString();
-    }
-
-    if (typeof node !== "object") {
-      return "";
-    }
-
-    if (Array.isArray(node) || isIterable(node)) {
-      return Array.from(node).map(function (child) {
-        return getText(child);
-      }).filter(function (child) {
-        return !!child;
-      }).join("");
-    }
-
-    var nodeChildren = hasKey(node, "props") && hasKey(node.props, "children") && node.props.children || hasKey(node, "children") && node.children || [];
-    var contents = "" + React__default.Children.toArray(nodeChildren).map(function (child) {
-      return getText(child);
-    }).filter(function (child) {
-      return !!child;
-    }).join("");
-
-    if (React__default.isValidElement(node) && node.type === React__default.Fragment) {
-      return contents;
-    }
-
-    var componentId = componentsCount + 1;
-    componentsCount++;
-    components[componentId] = React__default.isValidElement(node) ? React__default.cloneElement(node, {
-      key: componentId,
-      children: undefined
-    }) : node;
-    return "<" + componentId + ">" + contents + "</" + componentId + ">";
-  };
-
-  var str = getText(elt);
-  return {
-    str: str,
-    components: components,
-    componentsCount: componentsCount
-  };
-}
-function Trans(_ref) {
-  var children = _ref.children;
-
-  var _t = React__default.useContext(PlasmicTranslatorContext);
-
-  if (!_t) {
-    warnNoTranslationFunctionAtMostOnce();
-    return children;
-  }
-
-  var _genTranslatableStrin = genTranslatableString(children),
-      str = _genTranslatableStrin.str,
-      components = _genTranslatableStrin.components,
-      componentsCount = _genTranslatableStrin.componentsCount;
-
-  return _t(str, componentsCount > 0 ? {
-    components: components
-  } : undefined);
-}
-var hasWarned = false;
-
-function warnNoTranslationFunctionAtMostOnce() {
-  if (!hasWarned) {
-    console.warn("Using Plasmic Translation but no translation function has been provided");
-    hasWarned = true;
-  }
-}
-
-function hasKey(v, key) {
-  return typeof v === "object" && v !== null && key in v;
-}
-
 var PlasmicRootContext = /*#__PURE__*/createContext(undefined);
 function PlasmicRootProvider(props) {
   var platform = props.platform,
@@ -3115,5 +3118,474 @@ function useTriggeredOverlay(plasmicClass, props, config, outerRef) {
   };
 }
 
-export { DropdownMenu, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicRootProvider, PlasmicSlot, Stack, Trans, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, getDataProps, hasVariant, makeFragment, omit, pick, renderPlasmicSlot, setPlumeStrictMode, useButton, useCheckbox, useIsSSR, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, wrapWithClassName };
+function generateStateOnChangeProp($state, stateName, dataReps) {
+  return function (val, path) {
+    return dset($state, [stateName].concat(dataReps, 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"]
+) {
+  return _get($state, path);
+}
+
+var UNINITIALIZED = /*#__PURE__*/Symbol("plasmic.unitialized");
+
+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;
+}
+
+var isNum = function isNum(value) {
+  return typeof value === "symbol" ? false : !isNaN(+value);
+};
+
+function mkProxy(specs, maybeHandlers) {
+  var handlers = maybeHandlers != null ? maybeHandlers : function () {
+    return {
+      get: function get(target, property) {
+        return target[property];
+      },
+      set: function set(target, property, value) {
+        return (target[property] = value) || true;
+      }
+    };
+  };
+
+  var getNextParts = function getNextParts(currPath) {
+    return Object.fromEntries(Object.values(specs).filter(function (spec) {
+      return shallowEqual(currPath.map(function (p) {
+        return isNum(p) ? "[]" : p;
+      }), spec.path.slice(0, currPath.length));
+    }).map(function (spec) {
+      var nextPart = spec.path[currPath.length];
+
+      if (spec.path.length === currPath.length + 1) {
+        return [nextPart, {
+          isLast: true,
+          specKey: spec.pathStr
+        }];
+      } else {
+        return [nextPart, {
+          isLast: false,
+          specKey: spec.pathStr
+        }];
+      }
+    }));
+  };
+  /**
+   * We use this function when we're setting a value in the middle of the state path.
+   * We can't just set the value, because we need to keep the proxy properties, so
+   * we use the specs to walk through the object and just set the value in the end of the path
+   **/
+
+
+  var cloneValue = function cloneValue(target, currPath, value) {
+    if (typeof value !== "object") {
+      return;
+    }
+
+    var nextParts = getNextParts(currPath);
+
+    for (var _i = 0, _Object$entries = Object.entries(nextParts); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = _Object$entries[_i],
+          nextPart = _Object$entries$_i[0],
+          _Object$entries$_i$ = _Object$entries$_i[1],
+          isLast = _Object$entries$_i$.isLast,
+          specKey = _Object$entries$_i$.specKey;
+
+      if (nextPart === "[]" && Array.isArray(value)) {
+        for (var i = 0; i < value.length; i++) {
+          cloneValue(target[i], [].concat(currPath, [i]), value[i]);
+        }
+      } else if (nextPart in value) {
+        if (isLast) {
+          var _handlers$set, _handlers;
+
+          handlers == null ? void 0 : (_handlers$set = (_handlers = handlers({
+            specKey: specKey,
+            path: [].concat(currPath, [nextPart])
+          })).set) == null ? void 0 : _handlers$set.call(_handlers, target, nextPart, value[nextPart], undefined);
+        } else {
+          cloneValue(target[nextPart], [].concat(currPath, [nextPart]), value[nextPart]);
+        }
+      }
+    }
+  };
+
+  var rec = function rec(currPath) {
+    var nextParts = getNextParts(currPath);
+    return new Proxy("[]" in nextParts ? [] : {}, {
+      deleteProperty: function deleteProperty(target, property) {
+        if ("[]" in nextParts && isNum(property)) {
+          var _handlers$deletePrope, _handlers2;
+
+          delete target[property];
+          handlers == null ? void 0 : (_handlers$deletePrope = (_handlers2 = handlers({
+            path: [].concat(currPath, [+property]),
+            specKey: nextParts["[]"].specKey
+          })).deleteProperty) == null ? void 0 : _handlers$deletePrope.call(_handlers2, target, property);
+        } else {
+          throw new Error("You can't delete a non-repeated property in the middle of the path");
+        }
+
+        return true;
+      },
+      get: function get(target, property, receiver) {
+        if ("[]" in nextParts && isNum(property)) {
+          if (!(property in target)) {
+            target[property] = rec([].concat(currPath, [+property]));
+          }
+        } else if (property in nextParts) {
+          if (nextParts[property].isLast) {
+            var _handlers$get, _handlers3;
+
+            return target[property] = handlers == null ? void 0 : (_handlers$get = (_handlers3 = handlers({
+              path: [].concat(currPath, [property]),
+              specKey: nextParts[property].specKey
+            })).get) == null ? void 0 : _handlers$get.call(_handlers3, target, property, receiver);
+          } else if (!(property in target)) {
+            target[property] = rec([].concat(currPath, [property]));
+          }
+        }
+
+        return target[property];
+      },
+      set: function set(target, property, value, receiver) {
+        if ("[]" in nextParts && isNum(property)) {
+          if (!(property in target)) {
+            target[property] = rec([].concat(currPath, [+property]));
+          }
+        } else if (property in nextParts) {
+          if (nextParts[property].isLast) {
+            var _handlers$set2, _handlers$set3, _handlers4;
+
+            target[property] = value;
+            return (_handlers$set2 = (_handlers$set3 = (_handlers4 = handlers({
+              path: [].concat(currPath, [property]),
+              specKey: nextParts[property].specKey
+            })).set) == null ? void 0 : _handlers$set3.call(_handlers4, target, property, value, receiver)) != null ? _handlers$set2 : false;
+          }
+        }
+
+        if (property === "registerInitFunc") {
+          target[property] = value;
+        } else if (typeof value === "object") {
+          cloneValue(target[property], [].concat(currPath, [isNum(property) ? +property : property]), value);
+        }
+
+        return true;
+      }
+    });
+  };
+
+  return rec([]);
+}
+
+function cloneProxy(specs, states, obj) {
+  var newObj = mkProxy(specs);
+  Object.values(states).forEach(function (_ref) {
+    var path = _ref.path;
+
+    dset(newObj, path, _get(obj, path));
+  });
+  return newObj;
+}
+
+function saveState(state, states) {
+  states[JSON.stringify(state.path)] = state;
+}
+
+function hasState(state, states) {
+  return JSON.stringify(state.path) in states;
+}
+
+var transformPathStringToObj = function transformPathStringToObj(str) {
+  // "c[][]" -> ["c", "[]", "[]"]
+  var splitStatePathPart = function splitStatePathPart(state) {
+    return state.endsWith("[]") ? [].concat(splitStatePathPart(state.slice(0, -2)), ["[]"]) : [state];
+  };
+
+  return str.split(".").flatMap(splitStatePathPart);
+};
+
+function useVanillaDollarState(_specs, props) {
+  var forceRender = React__default.useState(0)[1];
+  var $$state = React__default.useMemo(function () {
+    var specs = Object.fromEntries(_specs.map(function (_ref2) {
+      var pathStr = _ref2.path,
+          spec = _objectWithoutPropertiesLoose(_ref2, ["path"]);
+
+      return [pathStr, _extends({}, spec, {
+        pathStr: pathStr,
+        path: transformPathStringToObj(pathStr),
+        isRepeated: pathStr.split(".").some(function (part) {
+          return part.endsWith("[]");
+        })
+      })];
+    }));
+    return {
+      stateValues: mkProxy(specs),
+      initStateDeps: {},
+      initStateValues: mkProxy(specs),
+      states: {},
+      specs: specs
+    };
+  }, []);
+  var $state = Object.assign(mkProxy($$state.specs, function (state) {
+    return {
+      deleteProperty: function deleteProperty(_target, _property) {
+        var prefixPath = state.path;
+
+        for (var _i2 = 0, _Object$entries2 = Object.entries($$state.states); _i2 < _Object$entries2.length; _i2++) {
+          var _Object$entries2$_i = _Object$entries2[_i2],
+              key = _Object$entries2$_i[0],
+              existingState = _Object$entries2$_i[1];
+
+          if (existingState.path.length >= prefixPath.length && shallowEqual(existingState.path.slice(0, prefixPath.length), prefixPath)) {
+            delete $$state.states[key];
+          }
+        }
+
+        forceRender(function (r) {
+          return r + 1;
+        });
+        return true;
+      },
+      get: function get(_target, _property) {
+        var spec = $$state.specs[state.specKey];
+
+        if (spec.valueProp) {
+          if (!spec.isRepeated) {
+            return props[spec.valueProp];
+          } else {
+            return _get(props[spec.valueProp], state.path.slice(1));
+          }
+        }
+
+        if (!hasState(state, $$state.states)) {
+          var _spec$initVal;
+
+          saveState(state, $$state.states);
+
+          dset($$state.stateValues, state.path, spec.initFunc ? UNINITIALIZED : (_spec$initVal = spec.initVal) != null ? _spec$initVal : undefined);
+
+          var deps = spec.initFunc ? fillUninitializedStateValues($$state.specs, props, $$state.stateValues, $$state.states) : {};
+
+          dset($$state.initStateValues, state.path, _get($$state.stateValues, state.path));
+
+          $$state.initStateDeps = _extends({}, $$state.initStateDeps, deps);
+          forceRender(function (r) {
+            return r + 1;
+          });
+          return spec.initFunc ? spec.initFunc(props, $state) : spec.initVal;
+        }
+
+        return _get($$state.stateValues, state.path);
+      },
+      set: function set(_target, _property, newValue) {
+        if (newValue !== _get($$state.stateValues, state.path)) {
+          saveState(state, $$state.states);
+
+          dset($$state.stateValues, state.path, newValue);
+
+          for (var _i3 = 0, _Object$entries3 = Object.entries($$state.initStateDeps); _i3 < _Object$entries3.length; _i3++) {
+            var _Object$entries3$_i = _Object$entries3[_i3],
+                key = _Object$entries3$_i[0],
+                deps = _Object$entries3$_i[1];
+
+            if (deps.includes(JSON.stringify(state.path))) {
+              dset($$state.stateValues, JSON.parse(key), UNINITIALIZED);
+            }
+          }
+
+          var newDeps = fillUninitializedStateValues($$state.specs, props, $$state.stateValues, $$state.states);
+          $$state.initStateDeps = _extends({}, $$state.initStateDeps, newDeps);
+          forceRender(function (r) {
+            return r + 1;
+          });
+        }
+
+        var spec = $$state.specs[state.specKey];
+
+        if (spec.onChangeProp) {
+          var _props$spec$onChangeP;
+
+          (_props$spec$onChangeP = props[spec.onChangeProp]) == null ? void 0 : _props$spec$onChangeP.call(props, newValue, state.path);
+        }
+
+        return true;
+      }
+    };
+  }), {
+    registerInitFunc: function registerInitFunc(pathStr, f) {
+      if (Object.values($$state.states).filter(function (_ref3) {
+        var specKey = _ref3.specKey;
+        return specKey === pathStr;
+      }).some(function (_ref4) {
+        var path = _ref4.path;
+        return _get($$state.stateValues, path) !== f(props, $state);
+      })) {
+        $$state.specs[pathStr] = _extends({}, $$state.specs[pathStr], {
+          initFunc: f
+        });
+        forceRender(function (r) {
+          return r + 1;
+        });
+      }
+    }
+  }); // For each spec with an initFunc, evaluate it and see if
+  // the init value has changed. If so, reset its state.
+
+  var newStateValues = undefined;
+  var resetSpecs = [];
+
+  for (var _i4 = 0, _Object$values = Object.values($$state.states); _i4 < _Object$values.length; _i4++) {
+    var _Object$values$_i = _Object$values[_i4],
+        path = _Object$values$_i.path,
+        specKey = _Object$values$_i.specKey;
+    var spec = $$state.specs[specKey];
+
+    if (spec.initFunc) {
+      var newInit = spec.initFunc(props, $state);
+
+      if (newInit !== _get($$state.initStateValues, path)) {
+        console.log("init changed for " + JSON.stringify(path) + " from " + _get($$state.initStateValues, path) + " to " + newInit + "; resetting state");
+        resetSpecs.push({
+          path: path,
+          specKey: specKey
+        });
+
+        if (!newStateValues) {
+          newStateValues = cloneProxy($$state.specs, $$state.states, $$state.stateValues);
+        }
+
+        dset(newStateValues, path, UNINITIALIZED);
+      }
+    }
+  }
+
+  React__default.useLayoutEffect(function () {
+    if (newStateValues !== undefined) {
+      var newDeps = fillUninitializedStateValues($$state.specs, props, newStateValues, $$state.states);
+      var initStateValues = cloneProxy($$state.specs, $$state.states, $$state.initStateValues);
+      resetSpecs.forEach(function (_ref5) {
+        var path = _ref5.path;
+
+        dset(initStateValues, path, _get(newStateValues, path));
+      });
+      $$state.stateValues = cloneProxy($$state.specs, $$state.states, newStateValues);
+      $$state.initStateValues = initStateValues;
+      $$state.initStateDeps = _extends({}, $$state.initStateDeps, newDeps);
+      forceRender(function (r) {
+        return r + 1;
+      });
+
+      for (var _iterator = _createForOfIteratorHelperLoose(resetSpecs), _step; !(_step = _iterator()).done;) {
+        var _step$value = _step.value,
+            _path = _step$value.path,
+            _specKey = _step$value.specKey;
+        var _spec = $$state.specs[_specKey];
+
+        if (_spec.onChangeProp) {
+          var _props$_spec$onChange;
+
+          console.log("Firing onChange for reset init value: " + _spec.path, _get(newStateValues, _path));
+          (_props$_spec$onChange = props[_spec.onChangeProp]) == null ? void 0 : _props$_spec$onChange.call(props, _get(newStateValues, _path));
+        }
+      }
+    }
+  }, [newStateValues, props, resetSpecs, $$state.specs]);
+  /* *
+   * Initialize all known states. (we need to do it for repeated states
+   * because they're created only after the first get/set operation)
+   * If we don't initialize them, we won't be able to consume the repeated states properly.
+   * For example, let's say the consumer is just mapping the repeated states. The first operation
+   * is to get the length of the array which will always be 0 because the existing states
+   * weren't allocated yet -- they're only stored in internal state)
+   * */
+
+  for (var _i5 = 0, _Object$values2 = Object.values($$state.states); _i5 < _Object$values2.length; _i5++) {
+    var _path2 = _Object$values2[_i5].path;
+
+    _get($state, _path2);
+  }
+
+  return $state;
+}
+
+function fillUninitializedStateValues(specs, props, stateValues, states) {
+  var stateAccessStack = [new Set()];
+  var initFuncDeps = {};
+  var $state = Object.assign(mkProxy(specs, function (state) {
+    return {
+      get: function get(_target, _property) {
+        var spec = specs[state.specKey];
+
+        if (spec.valueProp) {
+          if (!spec.isRepeated) {
+            return props[spec.valueProp];
+          } else {
+            return _get(props[spec.valueProp], state.path.slice(1));
+          }
+        }
+
+        var value = _get(stateValues, state.path);
+
+        if (value === UNINITIALIZED) {
+          // This value has a init expression; need to be evaluated.
+          value = tracked(state);
+
+          dset(stateValues, state.path, value);
+        } // Record that this field had just been accessed; for
+        // trackInit() to know what fields were used to compute
+        // the init value
+
+
+        stateAccessStack[stateAccessStack.length - 1].add(JSON.stringify(state.path));
+        return value;
+      },
+      set: function set() {
+        throw new Error("Cannot update state values during initialization");
+      }
+    };
+  }), {
+    registerInitFunc: function registerInitFunc() {}
+  });
+
+  function tracked(state) {
+    stateAccessStack.push(new Set());
+    var res = specs[state.specKey].initFunc(props, $state);
+    var deps = stateAccessStack.pop();
+    initFuncDeps[JSON.stringify(state.path)] = [].concat(deps.values());
+    return res;
+  }
+
+  for (var _i6 = 0, _Object$values3 = Object.values(states); _i6 < _Object$values3.length; _i6++) {
+    var path = _Object$values3[_i6].path;
+
+    if (_get(stateValues, path) === UNINITIALIZED) {
+      _get($state, path);
+    }
+  }
+
+  return initFuncDeps;
+}
+
+export { DropdownMenu, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicRootProvider, PlasmicSlot, Stack, Trans, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, generateStateOnChangeProp, generateStateValueProp, getDataProps, hasVariant, makeFragment, omit, pick, renderPlasmicSlot, setPlumeStrictMode, useButton, useCheckbox, useVanillaDollarState as useDollarState, useIsSSR, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, wrapWithClassName };
 //# sourceMappingURL=react-web.esm.js.map