@plasmicapp/react-web 0.2.138 → 0.2.140

package/dist/states/helpers.d.ts

@@ -9,6 +9,7 @@ export declare function generateStateOnChangeProp($state: $State, stateName: str
  */
 export declare function generateStateValueProp($state: $State, path: (string | number)[]): any;
 export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+export declare function isPlasmicStateProxy(obj: any): any;
 export declare function shallowEqual<T>(a1: T[], a2: T[]): boolean;
 export declare function isNum(value: string | number | symbol): value is number;
 declare type StringGen = string | (() => string);

package/dist/states/index.d.ts

@@ -1,4 +1,4 @@
 export { default as get } from "dlv";
-export { generateStateOnChangeProp, generateStateValueProp, set, } from "./helpers";
+export { generateStateOnChangeProp, generateStateValueProp, isPlasmicStateProxy, set, } from "./helpers";
 export { $State } from "./types";
 export { useDollarState } from "./valtio";

package/dist/states/types.d.ts

@@ -14,6 +14,7 @@ export interface $State {
     registerInitFunc?: (path: string, f: InitFunc<any>, repetitonIndex?: number[]) => any;
 }
 export declare const ARRAY_SYMBOL: unique symbol;
+export declare const PLASMIC_STATE_PROXY_SYMBOL: unique symbol;
 export interface Internal$StateSpec<T> extends $StateSpec<T> {
     isRepeated: boolean;
     pathObj: (string | symbol)[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/react-web",
-  "version": "0.2.138",
+  "version": "0.2.140",
   "description": "plasmic library for rendering in the presentational style",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -40,10 +40,10 @@
   },
   "prettier": {},
   "dependencies": {
-    "@plasmicapp/data-sources": "0.1.23",
-    "@plasmicapp/data-sources-context": "0.1.3",
-    "@plasmicapp/host": "1.0.93",
-    "@plasmicapp/query": "0.1.58",
+    "@plasmicapp/data-sources": "0.1.24",
+    "@plasmicapp/data-sources-context": "0.1.4",
+    "@plasmicapp/host": "1.0.94",
+    "@plasmicapp/query": "0.1.59",
     "@react-aria/checkbox": "^3.5.0",
     "@react-aria/focus": "^3.7.0",
     "@react-aria/interactions": "^3.10.0",
@@ -109,5 +109,5 @@
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "gitHead": "29e95851972acf14bf3ff15462022d322f4c6b57"
+  "gitHead": "2ddf7320f54e314e4f44d3df3c50468d2740ddbf"
 }

package/skinny/dist/index.js

@@ -494,10 +494,17 @@ 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;
@@ -660,6 +667,9 @@ function useTrigger(trigger, opts) {
     return TRIGGER_TO_HOOK[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); };
 }
@@ -674,6 +684,9 @@ function generateStateValueProp($state, path // ["parent", 0, 1, "counter"]
     return get($state, path);
 }
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : 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;
@@ -747,8 +760,6 @@ function assignValue(object, key, value) {
     }
 }
 
-var ARRAY_SYMBOL = Symbol("[]");
-
 var UNINITIALIZED = Symbol("plasmic.unitialized");
 var StateSpecNode = /** @class */ (function () {
     function StateSpecNode(specs) {
@@ -980,6 +991,9 @@ function create$StateProxy($$state, leafHandlers) {
             },
             get: function (target, property, receiver) {
                 var _a, _b;
+                if (property === PLASMIC_STATE_PROXY_SYMBOL) {
+                    return true;
+                }
                 proxyRoot = proxyRoot == null ? receiver : proxyRoot;
                 var nextPath = getNextPath(property);
                 if (isOutside || currNode.isLeaf()) {
@@ -1047,7 +1061,7 @@ function create$StateProxy($$state, leafHandlers) {
                 : {}
             : Array.isArray(initialObject)
                 ? []
-                : Object.create(Object.getPrototypeOf(initialObject));
+                : Object.create(Object.getPrototypeOf(initialObject !== null && initialObject !== void 0 ? initialObject : {}));
         var proxyObj = new Proxy(baseObject, handlers);
         if (initialObject) {
             Reflect.ownKeys(initialObject).forEach(function (key) {
@@ -1081,42 +1095,39 @@ function useDollarState(specs, props, $ctx) {
     })()).current;
     $$state.props = props;
     $$state.ctx = $ctx !== null && $ctx !== void 0 ? $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 (target, property, receiver) {
                 var spec = node.getSpec();
-                if (spec.initFunc) {
-                    initializeStateValue($$state, node, path, proxyRoot);
+                if (spec.valueProp) {
+                    return $$state.props[spec.valueProp];
                 }
-                else if (!spec.valueProp) {
-                    set(proxyRoot, path, spec.initVal);
+                else {
+                    return Reflect.get(target, property, receiver);
                 }
             }
-            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, useRef$state, $$state.ctx))) {
-                    $$state.registrationsQueue.push({ node: node, path: realPath, f: f });
-                }
+        };
+    }), {
+        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);
             }
-        });
-        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 = [];
@@ -1172,5 +1183,5 @@ function useDollarState(specs, props, $ctx) {
 // Utilities used by generated code
 var classNames = classNames$1;
 
-export { PlasmicIcon, PlasmicLink, PlasmicPageGuard, PlasmicSlot, Stack, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, generateStateOnChangeProp, generateStateValueProp, hasVariant, makeFragment, mergeVariantsWithStates, renderPlasmicSlot, set, useDollarState, useTrigger, wrapWithClassName };
+export { PlasmicIcon, PlasmicLink, PlasmicPageGuard, PlasmicSlot, Stack, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, generateStateOnChangeProp, generateStateValueProp, hasVariant, isPlasmicStateProxy, makeFragment, mergeVariantsWithStates, renderPlasmicSlot, set, useDollarState, useTrigger, wrapWithClassName };
 //# sourceMappingURL=index.js.map