@plasmicapp/react-web 0.2.123 → 0.2.125

package/dist/states/helpers.d.ts

@@ -1,4 +1,5 @@
 import get from "dlv";
+import { useLayoutEffect } from "react";
 import { $State } from ".";
 export declare function generateStateOnChangeProp($state: $State, stateName: string, dataReps: number[]): (val: any, path: (string | number)[]) => void;
 /**
@@ -13,4 +14,5 @@ export declare function generateStateValueProp($state: $State, path: (string | n
  * Changes: fixed setting a deep value to a proxy object
  */
 export declare function set(obj: any, keys: any, val: any): void;
+export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
 export { get };

package/dist/states/valtio.d.ts

@@ -1,4 +1,4 @@
-declare type InitFunc<T> = ($props: Record<string, any>, $state: $State, indexes: number[]) => T;
+declare type InitFunc<T> = ($props: Record<string, any>, $state: $State, $ctx: Record<string, any>, indexes: number[]) => T;
 export interface $State {
     [key: string]: any;
     registerInitFunc?: (path: string, f: InitFunc<any>) => any;
@@ -12,6 +12,6 @@ export interface $StateSpec<T> {
     onChangeProp?: string;
     isArray?: boolean;
 }
-export declare function useDollarState(specs: $StateSpec<any>[], props: Record<string, any>): any;
+export declare function useDollarState(specs: $StateSpec<any>[], props: Record<string, any>, $ctx?: Record<string, any>): any;
 export default useDollarState;
-export declare function useCanvasDollarState(specs: $StateSpec<any>[], props: Record<string, any>): any;
+export declare function useCanvasDollarState(specs: $StateSpec<any>[], props: Record<string, any>, $ctx?: Record<string, any>): any;

package/dist/stories/UseDollarState.stories.d.ts

@@ -31,7 +31,13 @@ export declare const RepeatedStates: import("@storybook/csf").AnnotatedStoryFn<i
 }>;
 export declare const NestedRepeatedCounter: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, {}>;
 export declare const MatrixRepeatedCounter: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, {}>;
-export declare const InitFuncFromContextData: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, {
+export declare const InitFuncFromInternalContextData: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, {
+    products: {
+        price: number;
+        name: string;
+    }[];
+}>;
+export declare const InitFuncFromRootContextData: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, {
     products: {
         price: number;
         name: string;

package/lib/data-sources/index.cjs.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dataSources = require('@plasmicapp/data-sources');
+
+
+
+Object.keys(dataSources).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () {
+			return dataSources[k];
+		}
+	});
+});
+//# sourceMappingURL=index.cjs.js.map

package/lib/data-sources/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/lib/data-sources/package.json

@@ -1,4 +1,7 @@
 {
   "type": "module",
-  "module": "index.js"
+  "exports": {
+    "import": "./index.js",
+    "require": "./index.cjs.js"
+  }
 }

package/lib/host/index.cjs.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var host = require('@plasmicapp/host');
+
+
+
+Object.keys(host).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () {
+			return host[k];
+		}
+	});
+});
+//# sourceMappingURL=index.cjs.js.map

package/lib/host/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/lib/host/package.json

@@ -1,4 +1,7 @@
 {
   "type": "module",
-  "module": "index.js"
+  "exports": {
+    "import": "./index.js",
+    "require": "./index.cjs.js"
+  }
 }

package/lib/query/index.cjs.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var query = require('@plasmicapp/query');
+
+
+
+Object.keys(query).forEach(function (k) {
+	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () {
+			return query[k];
+		}
+	});
+});
+//# sourceMappingURL=index.cjs.js.map

package/lib/query/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/lib/query/package.json

@@ -1,4 +1,7 @@
 {
   "type": "module",
-  "module": "index.js"
+  "exports": {
+    "import": "./index.js",
+    "require": "./index.cjs.js"
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/react-web",
-  "version": "0.2.123",
+  "version": "0.2.125",
   "description": "plasmic library for rendering in the presentational style",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -40,9 +40,9 @@
   },
   "prettier": {},
   "dependencies": {
-    "@plasmicapp/data-sources": "0.1.13",
+    "@plasmicapp/data-sources": "0.1.14",
     "@plasmicapp/data-sources-context": "0.1.2",
-    "@plasmicapp/host": "1.0.84",
+    "@plasmicapp/host": "1.0.85",
     "@plasmicapp/query": "0.1.55",
     "@react-aria/checkbox": "^3.5.0",
     "@react-aria/focus": "^3.7.0",
@@ -108,5 +108,5 @@
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "gitHead": "fe8ebae44fdf80156a58149a7d7781525a939252"
+  "gitHead": "b53e96d1eae801c0774e7e51c5217c3416d5ba47"
 }

package/skinny/dist/index.js

@@ -2,8 +2,8 @@ import classNames$1 from 'classnames';
 import get from 'dlv';
 export { default as get } from 'dlv';
 import * as React from 'react';
-import React__default from 'react';
-import { c as createElementWithChildren, m as mergeProps, e as ensureNotArray, N as NONE, a as mergePropVals, i as isReactNode, b as isBrowser, u as useIsomorphicLayoutEffect } from './react-utils-7bc53870.js';
+import React__default, { useLayoutEffect, useEffect } from 'react';
+import { c as createElementWithChildren, m as mergeProps, e as ensureNotArray, N as NONE, a as mergePropVals, i as isReactNode, b as isBrowser, u as useIsomorphicLayoutEffect$1 } from './react-utils-7bc53870.js';
 import { _ as __rest, a as __assign, b as __spreadArray, c as __read, o as omit, p as pick, d as __values, i as isSubset, e as chainSingleArgFuncs, n as notNil } from './common-9ebe374e.js';
 export { o as omit, p as pick } from './common-9ebe374e.js';
 export { PlasmicHead, plasmicHeadMeta } from './render/PlasmicHead/index.js';
@@ -537,7 +537,7 @@ function createUseScreenVariants(isMulti, screenQueries) {
         // register our forceUpdate. This ensures that if there was
         // a window resize event between render and effects, that the
         // listener will be registered in time
-        useIsomorphicLayoutEffect(function () {
+        useIsomorphicLayoutEffect$1(function () {
             var updateIfChanged = function () {
                 if (curScreenVariants &&
                     lastScreenVariantsRef.current.join("") !== curScreenVariants.join("")) {
@@ -679,9 +679,12 @@ function set(obj, keys, val) {
             }
         }
     }
-}
+}
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 
-var mkUntrackedValue = function (o) { return (typeof o === "object" ? ref(o) : o); };
+var mkUntrackedValue = function (o) {
+    return o != null && typeof o === "object" ? ref(o) : o;
+};
 var transformPathStringToObj = function (str) {
     var splitStatePathPart = function (state) {
         return state.endsWith("[]")
@@ -878,11 +881,11 @@ function initializeStateValue($$state, initialStatePath, initialSpec) {
     stateAccess.forEach(function (_a) {
         var path = _a.path, spec = _a.spec;
         var unsubscribe = subscribeKey(get($$state.stateValues, path.slice(-1)), path.slice(-1)[0], function () {
-            return set($$state.stateValues, initialStatePath, mkUntrackedValue(initialSpec.initFunc($$state.props, $state, getIndexes(path, spec))));
+            return set($$state.stateValues, initialStatePath, mkUntrackedValue(initialSpec.initFunc($$state.props, $state, $$state.ctx, getIndexes(path, spec))));
         });
         $$state.unsubscriptionsByState[initialStateKey].push(unsubscribe);
     });
-    var initialValue = initialSpec.initFunc($$state.props, $state, getIndexes(initialStatePath, initialSpec));
+    var initialValue = initialSpec.initFunc($$state.props, $state, $$state.ctx, getIndexes(initialStatePath, initialSpec));
     saveStateInitialValue($$state, initialStatePath, initialSpec, initialValue);
     return initialValue;
 }
@@ -904,7 +907,7 @@ function saveStateInitialValue($$state, path, spec, initialValue) {
         set($$state.initStateValues, path, untrackedValue);
     }
 }
-function useDollarState(specs, props) {
+function useDollarState(specs, props, $ctx) {
     var $$state = React__default.useRef(proxy({
         stateValues: {},
         initStateValues: {},
@@ -917,10 +920,12 @@ function useDollarState(specs, props) {
         statesInstanceBySpec: new Map(),
         existingStates: new Map(),
         unsubscriptionsByState: {},
-        props: undefined,
+        props: {},
+        ctx: {},
         registrationsQueue: []
     })).current;
     $$state.props = mkUntrackedValue(props);
+    $$state.ctx = mkUntrackedValue($ctx !== null && $ctx !== void 0 ? $ctx : {});
     var $state = React__default.useRef(Object.assign(create$StateProxy($$state, function (path, spec) {
         var _a;
         var key = JSON.stringify(path);
@@ -958,7 +963,7 @@ function useDollarState(specs, props) {
             if ((_a = $$state.statesInstanceBySpec
                 .get(pathStr)) === null || _a === void 0 ? void 0 : _a.some(function (_a) {
                 var path = _a.path, specKey = _a.specKey;
-                return !deepEqual(get($$state.initStateValues, path), f(props, $state, getIndexes(path, $$state.specsByKey[specKey])));
+                return !deepEqual(get($$state.initStateValues, path), f(props, $state, $ctx !== null && $ctx !== void 0 ? $ctx : {}, getIndexes(path, $$state.specsByKey[specKey])));
             })) {
                 $$state.registrationsQueue.push({ pathStr: pathStr, f: f });
             }
@@ -971,13 +976,13 @@ function useDollarState(specs, props) {
         var path = _a.path, specKey = _a.specKey;
         var spec = $$state.specsByKey[specKey];
         if (spec.initFunc) {
-            var newInit = spec.initFunc(props, $state, getIndexes(path, spec));
+            var newInit = spec.initFunc(props, $state, $ctx !== null && $ctx !== void 0 ? $ctx : {}, getIndexes(path, spec));
             if (!deepEqual(newInit, get($$state.initStateValues, path))) {
                 resetSpecs.push({ path: path, spec: spec });
             }
         }
     });
-    React__default.useLayoutEffect(function () {
+    useIsomorphicLayoutEffect(function () {
         resetSpecs.forEach(function (_a) {
             var _b, _c;
             var path = _a.path, spec = _a.spec;
@@ -987,7 +992,7 @@ function useDollarState(specs, props) {
             }
         });
     }, [props, resetSpecs]);
-    React__default.useLayoutEffect(function () {
+    useIsomorphicLayoutEffect(function () {
         $$state.registrationsQueue.forEach(function (_a) {
             var f = _a.f, pathStr = _a.pathStr;
             $$state.specsByKey[pathStr].initFunc = f;
@@ -1000,7 +1005,7 @@ function useDollarState(specs, props) {
     return $state;
 }
 // Simple version of $state useDollarState for read-only
-function useCanvasDollarState(specs, props) {
+function useCanvasDollarState(specs, props, $ctx) {
     var e_2, _a;
     var $$state = proxy({
         stateValues: {},
@@ -1012,10 +1017,12 @@ function useCanvasDollarState(specs, props) {
         statesInstanceBySpec: new Map(),
         existingStates: new Map(),
         unsubscriptionsByState: {},
-        props: undefined,
+        props: {},
+        ctx: {},
         registrationsQueue: []
     });
     $$state.props = mkUntrackedValue(props);
+    $$state.ctx = mkUntrackedValue($ctx);
     var $state = create$StateProxy($$state, function (path, spec) {
         return {
             get: function () {
@@ -1058,5 +1065,5 @@ function useCanvasDollarState(specs, props) {
 // Utilities used by generated code
 var classNames = classNames$1;
 
-export { PlasmicIcon, PlasmicLink, PlasmicSlot, Stack, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, generateStateOnChangeProp, generateStateValueProp, hasVariant, makeFragment, mergeVariantsWithStates, renderPlasmicSlot, set, useCanvasDollarState, useDollarState, useTrigger, wrapWithClassName };
+export { PlasmicIcon, PlasmicLink, PlasmicSlot, Stack, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, generateStateOnChangeProp, generateStateValueProp, hasVariant, makeFragment, mergeVariantsWithStates, renderPlasmicSlot, set, useCanvasDollarState, useDollarState, useIsomorphicLayoutEffect, useTrigger, wrapWithClassName };
 //# sourceMappingURL=index.js.map