@plasmicapp/react-web 1.0.37 → 1.0.39

package/dist/states/helpers.d.ts

@@ -25,6 +25,10 @@ export declare function getStateSpecInPlasmicProxy(obj: any, path: ObjectPath):
     isImplicitStateArray: boolean;
 } | undefined;
 export declare function getCurrentInitialValue(obj: any, path: ObjectPath): any;
+/** Whether the runtime guard has detected instability in this initializer.
+ * Canvas edits clear the diagnostic when the initializer hash changes.
+ */
+export declare function hasUnstableStateInitializer(obj: any, path: ObjectPath): boolean;
 export declare function resetToInitialValue(obj: any, path: ObjectPath): void;
 export declare function shallowEqual<T>(a1: T[], a2: T[]): boolean;
 /**

package/dist/states/index.d.ts

@@ -1,4 +1,4 @@
 export { default as get } from "dlv";
-export { generateOnMutateForSpec, generateStateOnChangeProp, generateStateOnChangePropForCodeComponents, generateStateValueProp, getCurrentInitialValue, getStateCellsInPlasmicProxy, getStateSpecInPlasmicProxy, initializeCodeComponentStates, initializePlasmicStates, is$StateProxy, isPlasmicStateProxy, resetToInitialValue, set, } from "./helpers";
+export { generateOnMutateForSpec, generateStateOnChangeProp, generateStateOnChangePropForCodeComponents, generateStateValueProp, getCurrentInitialValue, getStateCellsInPlasmicProxy, getStateSpecInPlasmicProxy, hasUnstableStateInitializer, initializeCodeComponentStates, initializePlasmicStates, is$StateProxy, isPlasmicStateProxy, resetToInitialValue, set, } from "./helpers";
 export { $State, $StateSpec, InitFunc } from "./types";
 export { useDollarState } from "./valtio";

package/dist/states/types.d.ts

@@ -46,22 +46,20 @@ export interface StateCell<T> {
     node: StateSpecNode<any>;
     path: ObjectPath;
     initFunc?: InitFunc<T>;
-    listeners: (() => void)[];
     initFuncHash: string;
     overrideEnv?: NoUndefinedField<DollarStateEnv>;
+    pendingInit?: boolean;
+    unsettledResetCount?: number;
+    rejectedInitProbe?: {
+        value: T;
+    };
+    warnedUnstableInitFunc?: boolean;
 }
 export interface Internal$State {
-    registrationsQueue: {
-        node: StateSpecNode<any>;
-        path: ObjectPath;
-        f: InitFunc<any>;
-        overrideEnv?: NoUndefinedField<DollarStateEnv>;
-    }[];
     stateValues: Record<string, any>;
     env: NoUndefinedField<DollarStateEnv>;
     rootSpecTree: StateSpecNode<any>;
     specTreeLeaves: StateSpecNode<any>[];
-    specs: $StateSpec<any>[];
     stateInitializationEnv: {
         stack: string[];
         visited: Set<string>;

package/dist/states/valtio.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/react-web",
-  "version": "1.0.37",
+  "version": "1.0.39",
   "description": "Runtime library for rendering Plasmic-generated React components — variants, slots, overrides, and styling.",
   "homepage": "https://www.plasmic.app",
   "repository": {
@@ -102,13 +102,13 @@
     "clone": "^2.1.2",
     "dlv": "^1.1.3",
     "valtio": "^1.6.4",
-    "@plasmicapp/auth-react": "0.0.33",
-    "@plasmicapp/data-sources": "1.0.28",
-    "@plasmicapp/data-sources-context": "0.1.25",
-    "@plasmicapp/host": "2.0.18",
-    "@plasmicapp/loader-splits": "1.0.78",
-    "@plasmicapp/prepass": "1.0.29",
-    "@plasmicapp/query": "0.1.87"
+    "@plasmicapp/auth-react": "0.0.34",
+    "@plasmicapp/data-sources": "1.0.29",
+    "@plasmicapp/data-sources-context": "0.1.26",
+    "@plasmicapp/host": "2.0.19",
+    "@plasmicapp/loader-splits": "1.0.79",
+    "@plasmicapp/prepass": "1.0.30",
+    "@plasmicapp/query": "0.1.88"
   },
   "devDependencies": {
     "@babel/core": "^7.29.0",
@@ -121,11 +121,10 @@
     "@rollup/plugin-commonjs": "^25.0.2",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.1.0",
-    "@types/classnames": "^2.3.4",
     "@types/clone": "^2.1.4",
     "@types/dlv": "^1.1.5",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "18.3.27",
+    "@types/react-dom": "18.3.7",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "rollup": "^3.26.1",

package/skinny/dist/index.js

@@ -1110,7 +1110,6 @@ function ensureStateCell(target, property, path, node) {
     var stateCell = proxyObjToStateCell.get(target);
     if (!(property in stateCell)) {
         stateCell[property] = {
-            listeners: [],
             initialValue: UNINITIALIZED,
             path: path,
             node: node,
@@ -1168,7 +1167,6 @@ function subscribeToValtio($$state, statePath, node) {
 function initializeStateValue($$state, initialStateCell, proxyRoot) {
     var _a;
     var initialStateName = initialStateCell.node.getSpec().path;
-    var stateAccess = new Set();
     $$state.stateInitializationEnv.visited.add(initialStateName);
     $$state.stateInitializationEnv.stack.push(initialStateName);
     var $state = create$StateProxy($$state, function (internalStateCell) { return ({
@@ -1190,7 +1188,6 @@ function initializeStateValue($$state, initialStateCell, proxyRoot) {
                 throw new UnknownError("Internal error: cycle not found");
             }
             var stateCell = getStateCellFrom$StateRoot(proxyRoot, internalStateCell.path);
-            stateAccess.add({ stateCell: stateCell });
             if (spec.valueProp) {
                 return $$state.env.$props[spec.valueProp];
             }
@@ -1203,14 +1200,6 @@ function initializeStateValue($$state, initialStateCell, proxyRoot) {
             throw new InvalidOperation("Cannot update state values during initialization");
         },
     }); });
-    stateAccess.forEach(function (_a) {
-        var stateCell = _a.stateCell;
-        stateCell.listeners.push(function () {
-            var _a;
-            var newValue = invokeInitFunc(initialStateCell.node.getSpec().initFunc, __assign({ $state: $state }, ((_a = initialStateCell.overrideEnv) !== null && _a !== void 0 ? _a : $$state.env)));
-            set(proxyRoot, initialStateCell.path, newValue);
-        });
-    });
     var initialValue = invokeInitFunc(initialStateCell.initFunc, __assign({ $state: $state }, ((_a = initialStateCell.overrideEnv) !== null && _a !== void 0 ? _a : $$state.env)));
     var initialSpec = initialStateCell.node.getSpec();
     // Try to clone initialValue. It can fail if it's a PlasmicUndefinedDataProxy
@@ -1395,6 +1384,83 @@ function extractDollarStateParametersBackwardCompatible() {
 function invokeInitFunc(initFunc, env) {
     return initFunc(env);
 }
+function initFuncEnv($$state, stateCell, $state) {
+    var _a;
+    return __assign({ $state: $state }, ((_a = stateCell.overrideEnv) !== null && _a !== void 0 ? _a : $$state.env));
+}
+// Pure check with no effect on the reset budget; the layout scan decides.
+function initValueChanged($$state, stateCell, $state) {
+    try {
+        return !deepEqual(invokeInitFunc(stateCell.initFunc, initFuncEnv($$state, stateCell, $state)), stateCell.initialValue);
+    }
+    catch (_a) {
+        return false;
+    }
+}
+// Bound consecutive resets without a settled evaluation, even on slow renders.
+var MAX_UNSETTLED_RESETS = 5;
+function warnUnstableInitFunc(stateCell, reason) {
+    if (stateCell.warnedUnstableInitFunc) {
+        return;
+    }
+    stateCell.warnedUnstableInitFunc = true;
+    console.warn("Plasmic: the initial value of state \"".concat(stateCell.path.join("."), "\" ").concat(reason, ", so it is kept at its current value instead of being reset. To set a random or time-based value, run an interaction from a Side Effect component instead."));
+}
+/**
+ * Whether `stateCell` should be reset to what `initFunc` now returns. An
+ * initFunc that returns a new value every time it runs would reset on every
+ * render, and each reset renders again, so the loop never ends. We refuse to
+ * reset in two cases:
+ *
+ * - Two back-to-back calls disagree, indicating an unstable initializer.
+ * - Too many resets occur without a settled evaluation. This also catches
+ *   values that are stable within a render but drift between renders.
+ *
+ * This is a circuit breaker, not a proof of determinism: legitimate feedback
+ * chains can also exceed the budget, and unstable functions can return equal
+ * values by chance. Initializers must be pure and deterministic for fixed inputs.
+ *
+ * Rejected probes never change the installed initial value used by preview
+ * reset. A rejected value that repeats on a later render can reopen the budget.
+ */
+function shouldReInitialize(stateCell, initFunc, env) {
+    var _a;
+    var newInit;
+    var repeats;
+    try {
+        newInit = invokeInitFunc(initFunc, env);
+        if (deepEqual(newInit, stateCell.initialValue)) {
+            stateCell.unsettledResetCount = undefined;
+            stateCell.rejectedInitProbe = undefined;
+            return false;
+        }
+        repeats = deepEqual(invokeInitFunc(initFunc, env), newInit);
+    }
+    catch (_b) {
+        // initFunc can throw, e.g. if it tries to access loading $queries. Swallow here
+        // since we only care whether the init value changed, not error handling.
+        return false;
+    }
+    var reason;
+    if (!repeats) {
+        reason = "is not deterministic";
+    }
+    else {
+        var rejectedInitProbe = stateCell.rejectedInitProbe;
+        var reopened = rejectedInitProbe && deepEqual(newInit, rejectedInitProbe.value);
+        stateCell.unsettledResetCount = reopened
+            ? 1
+            : ((_a = stateCell.unsettledResetCount) !== null && _a !== void 0 ? _a : 0) + 1;
+        if (stateCell.unsettledResetCount > MAX_UNSETTLED_RESETS) {
+            reason = "keeps changing";
+        }
+    }
+    stateCell.rejectedInitProbe = reason ? { value: newInit } : undefined;
+    if (reason) {
+        warnUnstableInitFunc(stateCell, reason);
+    }
+    return !reason;
+}
 function useDollarState(specs) {
     var rest = [];
     for (var _i = 1; _i < arguments.length; _i++) {
@@ -1402,6 +1468,10 @@ function useDollarState(specs) {
     }
     var _a = extractDollarStateParametersBackwardCompatible.apply(void 0, __spreadArray([], __read(rest), false)), env = _a.env, opts = _a.opts;
     var _b = __read(React__default.useState(), 2), setState = _b[1];
+    // Set for the whole render pass and cleared by the layout effect, which applies
+    // registrations. One that arrives outside a render must schedule a render to be applied.
+    var rendering = React__default.useRef(false);
+    rendering.current = true;
     var mountedRef = React__default.useRef(false);
     var isMounted = React__default.useCallback(function () { return mountedRef.current; }, []);
     React__default.useEffect(function () {
@@ -1426,14 +1496,11 @@ function useDollarState(specs) {
             specTreeLeaves: getSpecTreeLeaves(rootSpecTree),
             stateValues: proxy({}),
             env: envFieldsAreNonNill(env),
-            specs: [],
-            registrationsQueue: [],
             stateInitializationEnv: { stack: [], visited: new Set() },
             initializedLeafPaths: new Set(),
         };
     })()).current;
     $$state.env = envFieldsAreNonNill(env);
-    $$state.specs = specs;
     var create$State = React__default.useCallback(function () {
         var $state = Object.assign(create$StateProxy($$state, function (stateCell) {
             var spec = stateCell.node.getSpec();
@@ -1459,24 +1526,21 @@ function useDollarState(specs) {
                 },
             };
         }), __assign({ registerInitFunc: function (pathStr, f, repetitionIndex, overrideEnv) {
-                var _a = findStateCell($$state.rootSpecTree, pathStr, repetitionIndex), node = _a.node, realPath = _a.realPath;
+                var realPath = findStateCell($$state.rootSpecTree, pathStr, repetitionIndex).realPath;
                 var stateCell = getStateCellFrom$StateRoot($state, realPath);
-                var innerEnv = overrideEnv
+                // The first initializer always applies, even if unstable, like the
+                // lazy initialization of a spec initFunc.
+                stateCell.pendingInit || (stateCell.pendingInit = !stateCell.initFunc);
+                stateCell.initFunc = f;
+                stateCell.overrideEnv = overrideEnv
                     ? envFieldsAreNonNill(overrideEnv)
-                    : $$state.env;
-                if (!deepEqual(stateCell.initialValue, f(__assign({ $state: $state }, innerEnv)))) {
-                    $$state.registrationsQueue.push({
-                        node: node,
-                        path: realPath,
-                        f: f,
-                        overrideEnv: overrideEnv
-                            ? envFieldsAreNonNill(overrideEnv)
-                            : undefined,
-                    });
-                    if (!pendingUpdate.current) {
-                        pendingUpdate.current = true;
-                        forceUpdate();
-                    }
+                    : undefined;
+                if (!rendering.current &&
+                    !pendingUpdate.current &&
+                    (stateCell.pendingInit ||
+                        initValueChanged($$state, stateCell, $state))) {
+                    pendingUpdate.current = true;
+                    forceUpdate();
                 }
             } }, ((opts === null || opts === void 0 ? void 0 : opts.inCanvas)
             ? {
@@ -1497,6 +1561,9 @@ function useDollarState(specs) {
                         }
                         stateCell.initFunc = newSpec.initFunc;
                         stateCell.initFuncHash = (_b = newSpec.initFuncHash) !== null && _b !== void 0 ? _b : "";
+                        stateCell.unsettledResetCount = undefined;
+                        stateCell.warnedUnstableInitFunc = undefined;
+                        stateCell.rejectedInitProbe = undefined;
                         var init = spec.valueProp
                             ? $$state.env.$props[spec.valueProp]
                             : spec.initFunc
@@ -1532,47 +1599,24 @@ function useDollarState(specs) {
             });
         }
     }
-    var reInitializeState = function (stateCell) {
-        var _a, _b;
-        var newInit = initializeStateValue($$state, stateCell, $state);
-        var spec = stateCell.node.getSpec();
-        if (spec.onChangeProp) {
-            (_b = (_a = $$state.env.$props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, newInit);
-        }
-    };
     useIsomorphicLayoutEffect(function () {
-        // For each spec with an initFunc, evaluate it and see if
-        // the init value has changed. If so, reset its state.
-        var resetSpecs = [];
-        getStateCells($state, $$state.rootSpecTree).forEach(function (stateCell) {
-            var _a;
-            if (stateCell.initFunc) {
-                try {
-                    var newInit = invokeInitFunc(stateCell.initFunc, __assign({ $state: $state }, ((_a = stateCell.overrideEnv) !== null && _a !== void 0 ? _a : envFieldsAreNonNill(env))));
-                    if (!deepEqual(newInit, stateCell.initialValue)) {
-                        resetSpecs.push({ stateCell: stateCell });
-                    }
-                }
-                catch (_b) {
-                    // Exception may be thrown from initFunc -- for example, if it tries to access $queries
-                    // that are still loading. We swallow those here, since we're only interested in
-                    // checking if the init value has changed, not in handling these errors.
-                }
-            }
+        rendering.current = false;
+        // Scan every cell before resetting any, so each initFunc sees the same
+        // pre-reset state.
+        var resetCells = getStateCells($state, $$state.rootSpecTree).filter(function (stateCell) {
+            return stateCell.pendingInit ||
+                (stateCell.initFunc &&
+                    shouldReInitialize(stateCell, stateCell.initFunc, initFuncEnv($$state, stateCell, $state)));
         });
-        resetSpecs.forEach(function (_a) {
-            var stateCell = _a.stateCell;
-            reInitializeState(stateCell);
+        resetCells.forEach(function (stateCell) {
+            var _a, _b;
+            stateCell.pendingInit = undefined;
+            var newInit = initializeStateValue($$state, stateCell, $state);
+            var spec = stateCell.node.getSpec();
+            if (spec.onChangeProp) {
+                (_b = (_a = $$state.env.$props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, newInit);
+            }
         });
-    }, [env.$props, $state, $$state, reInitializeState]);
-    useIsomorphicLayoutEffect(function () {
-        while ($$state.registrationsQueue.length) {
-            var _a = $$state.registrationsQueue.shift(), path = _a.path, f = _a.f, overrideEnv = _a.overrideEnv;
-            var stateCell = getStateCellFrom$StateRoot($state, path);
-            stateCell.initFunc = f;
-            stateCell.overrideEnv = overrideEnv;
-            reInitializeState(stateCell);
-        }
     });
     // immediately initialize exposed non-private states
     useIsomorphicLayoutEffect(function () {
@@ -1683,11 +1727,15 @@ function getStateCells($state, root) {
         try {
             for (var _c = __values(root.edges().entries()), _d = _c.next(); !_d.done; _d = _c.next()) {
                 var _e = __read(_d.value, 2), key = _e[0], child = _e[1];
-                if (typeof key === "string" && key in $state) {
+                if (typeof key !== "string") {
+                    continue;
+                }
+                // A leaf cell can exist without a local value, e.g. a valueProp state.
+                if (key in stateCell) {
+                    stateCells.push(stateCell[key]);
+                }
+                else if (key in $state) {
                     stateCells.push.apply(stateCells, __spreadArray([], __read(getStateCells($state[key], child)), false));
-                    if (key in stateCell) {
-                        stateCells.push(stateCell[key]);
-                    }
                 }
             }
         }
@@ -1736,6 +1784,16 @@ function getCurrentInitialValue(obj, path) {
     }
     return (_a = tryGetStateCellFrom$StateRoot(obj, path)) === null || _a === void 0 ? void 0 : _a.initialValue;
 }
+/** Whether the runtime guard has detected instability in this initializer.
+ * Canvas edits clear the diagnostic when the initializer hash changes.
+ */
+function hasUnstableStateInitializer(obj, path) {
+    var _a;
+    if (!isPlasmicStateProxy(obj)) {
+        return false;
+    }
+    return !!((_a = tryGetStateCellFrom$StateRoot(obj, path)) === null || _a === void 0 ? void 0 : _a.warnedUnstableInitFunc);
+}
 function resetToInitialValue(obj, path) {
     var stateCell = tryGetStateCellFrom$StateRoot(obj, path);
     if (stateCell) {
@@ -1956,5 +2014,5 @@ function deepEqual(a, b) {
 // Using any while classnames package is not updated to have the correct types exported
 var classNames = classNames$1;
 
-export { PlasmicIcon, PlasmicPageGuard, PlasmicSlot, Stack, Trans, classNames, createPlasmicElementProxy, createStyleTokensProvider, createUseGlobalVariants, createUseScreenVariants, createUseStyleTokens, deriveRenderOpts, ensureGlobalVariants, generateOnMutateForSpec, generateStateOnChangeProp, generateStateOnChangePropForCodeComponents, generateStateValueProp, getCurrentInitialValue, getStateCellsInPlasmicProxy, getStateSpecInPlasmicProxy, hasVariant, initializeCodeComponentStates, initializePlasmicStates, is$StateProxy, isPlasmicStateProxy, makeFragment, mergeVariantsWithStates, omit, pick, renderPlasmicSlot, resetToInitialValue, set, useDollarState, useTrigger, withPlasmicPageGuard, wrapWithClassName };
+export { PlasmicIcon, PlasmicPageGuard, PlasmicSlot, Stack, Trans, classNames, createPlasmicElementProxy, createStyleTokensProvider, createUseGlobalVariants, createUseScreenVariants, createUseStyleTokens, deriveRenderOpts, ensureGlobalVariants, generateOnMutateForSpec, generateStateOnChangeProp, generateStateOnChangePropForCodeComponents, generateStateValueProp, getCurrentInitialValue, getStateCellsInPlasmicProxy, getStateSpecInPlasmicProxy, hasUnstableStateInitializer, hasVariant, initializeCodeComponentStates, initializePlasmicStates, is$StateProxy, isPlasmicStateProxy, makeFragment, mergeVariantsWithStates, omit, pick, renderPlasmicSlot, resetToInitialValue, set, useDollarState, useTrigger, withPlasmicPageGuard, wrapWithClassName };
 //# sourceMappingURL=index.js.map