@plasmicapp/react-web 0.2.138 → 0.2.140

package/dist/all.d.ts

@@ -74,6 +74,7 @@ declare function generateStateOnChangeProp($state: $State, stateName: string, da
  * We need to pass `parent[index1][index2].counter to the child component
  */
 declare function generateStateValueProp($state: $State, path: (string | number)[]): any;
+declare function isPlasmicStateProxy(obj: any): any;
 /**
  * Forked from https://github.com/lukeed/dset
  * Changes: fixed setting a deep value to a proxy object
@@ -1638,4 +1639,4 @@ interface TriggeredOverlayContextValue {
 }
 declare const TriggeredOverlayContext: React.Context<TriggeredOverlayContextValue | undefined>;
 
-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, PlasmicPageGuard, 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, useCheckbox, useCurrentUser, useDollarState, useIsSSR, 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, PlasmicPageGuard, 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, isPlasmicStateProxy, makeFragment, mergeVariantsWithStates, omit, pick, plasmicHeadMeta, renderPlasmicSlot, set, setPlumeStrictMode, useButton, useCheckbox, useCurrentUser, useDollarState, useIsSSR, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, wrapWithClassName };

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;
@@ -1508,6 +1514,9 @@ function useTrigger(trigger, opts) {
   return TRIGGER_TO_HOOK[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);
@@ -1524,6 +1533,9 @@ function generateStateValueProp($state, path // ["parent", 0, 1, "counter"]
   return _get($state, path);
 }
 var useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+function isPlasmicStateProxy(obj) {
+  return obj != null && typeof obj === "object" && obj[PLASMIC_STATE_PROXY_SYMBOL];
+}
 function shallowEqual(a1, a2) {
   if (a1.length !== a2.length) {
     return false;
@@ -1594,8 +1606,6 @@ function assignValue(object, key, value) {
   }
 }
 
-var ARRAY_SYMBOL = /*#__PURE__*/Symbol("[]");
-
 var UNINITIALIZED = /*#__PURE__*/Symbol("plasmic.unitialized");
 var StateSpecNode = /*#__PURE__*/function () {
   function StateSpecNode(specs) {
@@ -1807,6 +1817,9 @@ function create$StateProxy($$state, leafHandlers) {
         return Reflect.deleteProperty(target, property);
       },
       get: function get(target, property, receiver) {
+        if (property === PLASMIC_STATE_PROXY_SYMBOL) {
+          return true;
+        }
         proxyRoot = proxyRoot == null ? receiver : proxyRoot;
         var nextPath = getNextPath(property);
         if (isOutside || currNode.isLeaf()) {
@@ -1865,7 +1878,7 @@ 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 (initialObject) {
       Reflect.ownKeys(initialObject).forEach(function (key) {
@@ -1898,46 +1911,43 @@ function useDollarState(specs, props, $ctx) {
   }()).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) {
-      if (!node.hasState(path)) {
-        node.createStateCell(path);
+  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 get(target, property, receiver) {
         var spec = node.getSpec();
-        if (spec.initFunc) {
-          initializeStateValue($$state, node, path, proxyRoot);
-        } else if (!spec.valueProp) {
-          set(proxyRoot, path, spec.initVal);
+        if (spec.valueProp) {
+          return $$state.props[spec.valueProp];
+        } else {
+          return Reflect.get(target, property, receiver);
         }
       }
-      return {
-        get: function get(target, property, receiver) {
-          var spec = node.getSpec();
-          if (spec.valueProp) {
-            return $$state.props[spec.valueProp];
-          } else {
-            return Reflect.get(target, property, receiver);
-          }
-        }
-      };
-    }), {
-      registerInitFunc: function registerInitFunc(pathStr, f, repetitionIndex) {
-        var _findStateCell = findStateCell($$state.rootSpecTree, pathStr, repetitionIndex),
-          node = _findStateCell.node,
-          realPath = _findStateCell.realPath;
-        if (!node.hasState(realPath)) {
-          node.createStateCell(realPath);
-        }
-        if (!deepEqual(node.getState(realPath).initialValue, f($$state.props, useRef$state, $$state.ctx))) {
-          $$state.registrationsQueue.push({
-            node: node,
-            path: realPath,
-            f: f
-          });
-        }
+    };
+  }), {
+    registerInitFunc: function registerInitFunc(pathStr, f, repetitionIndex) {
+      var _findStateCell = findStateCell($$state.rootSpecTree, pathStr, repetitionIndex),
+        node = _findStateCell.node,
+        realPath = _findStateCell.realPath;
+      if (!node.hasState(realPath)) {
+        node.createStateCell(realPath);
       }
-    });
-    return useRef$state;
-  }()).current;
+      if (!deepEqual(node.getState(realPath).initialValue, f($$state.props, $state, $$state.ctx))) {
+        $$state.registrationsQueue.push({
+          node: node,
+          path: realPath,
+          f: f
+        });
+      }
+    }
+  })).current;
   // For each spec with an initFunc, evaluate it and see if
   // the init value has changed. If so, reset its state.
   var resetSpecs = [];
@@ -3435,6 +3445,7 @@ exports.generateStateOnChangeProp = generateStateOnChangeProp;
 exports.generateStateValueProp = generateStateValueProp;
 exports.getDataProps = getDataProps;
 exports.hasVariant = hasVariant;
+exports.isPlasmicStateProxy = isPlasmicStateProxy;
 exports.makeFragment = makeFragment;
 exports.mergeVariantsWithStates = mergeVariantsWithStates;
 exports.omit = omit;