r-state-tree 0.8.0 → 0.8.1

package/README.md

@@ -139,7 +139,7 @@ app.todo.title;
 
 - Always create with `createStore()` and attach with `mount()`. Stores cannot be constructed with `new` directly.
 - Prefer no custom constructor. Type stores as `Store<Props>` and access props via `this.props`.
-- Constructors may register framework-owned reactions and effects after `super(props)`. Gate external resource acquisition on `isMounted` and return cleanup from effects.
+- Constructors may register framework-owned reactions and effects after `super(props)`. Store registrations activate when mounting and are disposed with the store; return cleanup from effects to release resources.
 - Do not shadow or re-declare `props` as a class field; `props` is read-only. Use the generic `Store<{ ... }>` for typing.
 
 ```ts
@@ -212,7 +212,6 @@ class TodoStore extends Store {
 	constructor(props) {
 		super(props);
 		this.effect(() => {
-			if (!this.isMounted) return;
 			const connection = connect();
 			return () => connection.close();
 		});
@@ -243,6 +242,10 @@ class TodoStore extends Store {
 }
 ```
 
+`Store.effect()` and `Store.reaction()` register mount-scoped behavior. Mounting first links the complete store tree and marks it mounted bottom-up in one transaction. Registrations then activate bottom-up, so even a grandchild's initial effect observes every ancestor and descendant as mounted. A reaction establishes its initial value at activation and still skips its initial callback. Calling the disposer returned during construction cancels the pending registration; after mount, it disposes the live subscription. All registrations are disposed automatically with the store.
+
+Use the exported standalone `effect()` or `reaction()` when observing a store from outside its owned lifetime—for example, to observe the public reactive `isMounted` transition to `false`.
+
 ### Context
 
 Share data across the store tree without prop drilling:
@@ -1217,7 +1220,8 @@ class S extends Store {
 	constructor(props) {
 		super(props);
 		this.effect(() => {
-			if (!this.isMounted) return;
+			const resource = acquireResource();
+			return () => resource.dispose();
 		});
 	}
 }
@@ -1281,7 +1285,7 @@ When child stores are created during mount with `models` that point back into th
 - Core: `createStore`, `mount`, `Symbol.dispose`, `updateStore`
 - Snapshots: `onSnapshot`, `toSnapshot`, `applySnapshot`, `onSnapshotDiff`
 - Lifecycle: reactive `Store.isMounted`, reactive `Model.parent`, and owned `reaction`/`effect`
-- Best practices: domain in Models; delegate from Stores; stable keys for `@child`; gate resources on lifecycle state; don’t shadow `props`.
+- Best practices: domain in Models; delegate from Stores; stable keys for `@child`; return cleanup from store effects; don’t shadow `props`.
 
 ## Testing
 

package/dist/r-state-tree.cjs

@@ -2036,7 +2036,7 @@ class StoreAdministration extends PreactObjectAdministration {
   disposed = false;
   contextCache = /* @__PURE__ */ new Map();
   childStoreDataMap = /* @__PURE__ */ new Map();
-  ownedDisposers = /* @__PURE__ */ new Set();
+  reactiveRegistrations = /* @__PURE__ */ new Set();
   configurationGetter;
   setConfiguration(configurationGetter) {
     this.configurationGetter = configurationGetter;
@@ -2060,7 +2060,9 @@ class StoreAdministration extends PreactObjectAdministration {
         }
       });
       childStoreData.value.set(stores);
-      stores.forEach((s) => getStoreAdm(s).mount(this, name));
+      if (this.isMounted) {
+        stores.forEach((s) => getStoreAdm(s).mount(this, name));
+      }
       return stores;
     }
     const newStores = /* @__PURE__ */ new Set();
@@ -2111,7 +2113,9 @@ class StoreAdministration extends PreactObjectAdministration {
       signalsCore.batch(() => childStoreData.value.set(stores));
     }
     removedStores.forEach((s) => getStoreAdm(s).dispose(true));
-    newStores.forEach((s) => getStoreAdm(s).mount(this, name));
+    if (this.isMounted) {
+      newStores.forEach((s) => getStoreAdm(s).mount(this, name));
+    }
     return stores;
   }
   setSingleStore(name, element) {
@@ -2130,7 +2134,9 @@ class StoreAdministration extends PreactObjectAdministration {
       }
       const childStore = this.createChildStore(element);
       signalsCore.batch(() => childStoreData.value.set(childStore));
-      getStoreAdm(childStore).mount(this, name);
+      if (this.isMounted) {
+        getStoreAdm(childStore).mount(this, name);
+      }
       return childStore;
     } else {
       signalsCore.batch(() => updateProps(oldStore.props, props));
@@ -2223,31 +2229,37 @@ class StoreAdministration extends PreactObjectAdministration {
     }
     return void 0;
   }
-  own(disposer) {
+  register(start) {
     if (this.disposed) {
-      disposer();
       throw new Error(
         "r-state-tree: cannot register reactive resources on a disposed store"
       );
     }
-    let active = true;
-    const wrapped = () => {
-      if (!active) return;
-      active = false;
-      this.ownedDisposers.delete(wrapped);
-      disposer();
+    const registration = { start, disposed: false };
+    this.reactiveRegistrations.add(registration);
+    if (this.isMounted) registration.stop = registration.start();
+    return () => {
+      if (registration.disposed) return;
+      registration.disposed = true;
+      this.reactiveRegistrations.delete(registration);
+      registration.stop?.();
+      registration.stop = void 0;
     };
-    this.ownedDisposers.add(wrapped);
-    return wrapped;
+  }
+  startReactiveRegistrations() {
+    this.reactiveRegistrations.forEach((registration) => {
+      if (!registration.disposed && !registration.stop) {
+        registration.stop = registration.start();
+      }
+    });
   }
   reaction(track, callback) {
-    const unsub = reaction(track, callback);
-    return this.own(unsub);
+    return this.register(() => reaction(track, callback));
   }
   effect(callback) {
-    return this.own(signalsCore.effect(callback));
+    return this.register(() => signalsCore.effect(callback));
   }
-  mount(parent = null, childName) {
+  mount(parent = null, childName, activationQueue) {
     if (this.disposed) {
       throw new Error("r-state-tree: cannot mount a disposed store");
     }
@@ -2263,19 +2275,29 @@ class StoreAdministration extends PreactObjectAdministration {
       throw createCircularMountError(frame);
     }
     mountingStack.push(frame);
+    const isOutermostMount = activationQueue === void 0;
+    const registrationsToStart = activationQueue ?? [];
     try {
       signalsCore.batch(() => {
         this.parent = parent || null;
         this.childStoreDataMap.forEach(({ value }, name) => {
           const stores = value.get();
           if (Array.isArray(stores)) {
-            stores?.forEach((s) => getStoreAdm(s)?.mount(this, name));
+            stores?.forEach(
+              (s) => getStoreAdm(s)?.mount(this, name, registrationsToStart)
+            );
           } else if (stores) {
-            getStoreAdm(stores)?.mount(this, name);
+            getStoreAdm(stores)?.mount(this, name, registrationsToStart);
           }
         });
         this.mountedSignal.set(true);
+        registrationsToStart.push(this);
       });
+      if (isOutermostMount) {
+        registrationsToStart.forEach(
+          (store) => store.startReactiveRegistrations()
+        );
+      }
     } catch (error) {
       if (error instanceof Error && (error instanceof RangeError && /call stack/i.test(error.message) || /cycle detected/i.test(error.message))) {
         throw createCircularMountError(frame);
@@ -2307,9 +2329,14 @@ class StoreAdministration extends PreactObjectAdministration {
       this.contextCache.clear();
       this.parent = null;
     });
-    this.mountedSignal.set(false);
     this.disposed = true;
-    Array.from(this.ownedDisposers).forEach((dispose) => dispose());
+    this.reactiveRegistrations.forEach((registration) => {
+      registration.disposed = true;
+      registration.stop?.();
+      registration.stop = void 0;
+    });
+    this.reactiveRegistrations.clear();
+    this.mountedSignal.set(false);
   }
 }
 let initEnabled$1 = false;

package/dist/r-state-tree.js

@@ -2035,7 +2035,7 @@ class StoreAdministration extends PreactObjectAdministration {
   disposed = false;
   contextCache = /* @__PURE__ */ new Map();
   childStoreDataMap = /* @__PURE__ */ new Map();
-  ownedDisposers = /* @__PURE__ */ new Set();
+  reactiveRegistrations = /* @__PURE__ */ new Set();
   configurationGetter;
   setConfiguration(configurationGetter) {
     this.configurationGetter = configurationGetter;
@@ -2059,7 +2059,9 @@ class StoreAdministration extends PreactObjectAdministration {
         }
       });
       childStoreData.value.set(stores);
-      stores.forEach((s) => getStoreAdm(s).mount(this, name));
+      if (this.isMounted) {
+        stores.forEach((s) => getStoreAdm(s).mount(this, name));
+      }
       return stores;
     }
     const newStores = /* @__PURE__ */ new Set();
@@ -2110,7 +2112,9 @@ class StoreAdministration extends PreactObjectAdministration {
       batch(() => childStoreData.value.set(stores));
     }
     removedStores.forEach((s) => getStoreAdm(s).dispose(true));
-    newStores.forEach((s) => getStoreAdm(s).mount(this, name));
+    if (this.isMounted) {
+      newStores.forEach((s) => getStoreAdm(s).mount(this, name));
+    }
     return stores;
   }
   setSingleStore(name, element) {
@@ -2129,7 +2133,9 @@ class StoreAdministration extends PreactObjectAdministration {
       }
       const childStore = this.createChildStore(element);
       batch(() => childStoreData.value.set(childStore));
-      getStoreAdm(childStore).mount(this, name);
+      if (this.isMounted) {
+        getStoreAdm(childStore).mount(this, name);
+      }
       return childStore;
     } else {
       batch(() => updateProps(oldStore.props, props));
@@ -2222,31 +2228,37 @@ class StoreAdministration extends PreactObjectAdministration {
     }
     return void 0;
   }
-  own(disposer) {
+  register(start) {
     if (this.disposed) {
-      disposer();
       throw new Error(
         "r-state-tree: cannot register reactive resources on a disposed store"
       );
     }
-    let active = true;
-    const wrapped = () => {
-      if (!active) return;
-      active = false;
-      this.ownedDisposers.delete(wrapped);
-      disposer();
+    const registration = { start, disposed: false };
+    this.reactiveRegistrations.add(registration);
+    if (this.isMounted) registration.stop = registration.start();
+    return () => {
+      if (registration.disposed) return;
+      registration.disposed = true;
+      this.reactiveRegistrations.delete(registration);
+      registration.stop?.();
+      registration.stop = void 0;
     };
-    this.ownedDisposers.add(wrapped);
-    return wrapped;
+  }
+  startReactiveRegistrations() {
+    this.reactiveRegistrations.forEach((registration) => {
+      if (!registration.disposed && !registration.stop) {
+        registration.stop = registration.start();
+      }
+    });
   }
   reaction(track, callback) {
-    const unsub = reaction(track, callback);
-    return this.own(unsub);
+    return this.register(() => reaction(track, callback));
   }
   effect(callback) {
-    return this.own(effect(callback));
+    return this.register(() => effect(callback));
   }
-  mount(parent = null, childName) {
+  mount(parent = null, childName, activationQueue) {
     if (this.disposed) {
       throw new Error("r-state-tree: cannot mount a disposed store");
     }
@@ -2262,19 +2274,29 @@ class StoreAdministration extends PreactObjectAdministration {
       throw createCircularMountError(frame);
     }
     mountingStack.push(frame);
+    const isOutermostMount = activationQueue === void 0;
+    const registrationsToStart = activationQueue ?? [];
     try {
       batch(() => {
         this.parent = parent || null;
         this.childStoreDataMap.forEach(({ value }, name) => {
           const stores = value.get();
           if (Array.isArray(stores)) {
-            stores?.forEach((s) => getStoreAdm(s)?.mount(this, name));
+            stores?.forEach(
+              (s) => getStoreAdm(s)?.mount(this, name, registrationsToStart)
+            );
           } else if (stores) {
-            getStoreAdm(stores)?.mount(this, name);
+            getStoreAdm(stores)?.mount(this, name, registrationsToStart);
           }
         });
         this.mountedSignal.set(true);
+        registrationsToStart.push(this);
       });
+      if (isOutermostMount) {
+        registrationsToStart.forEach(
+          (store) => store.startReactiveRegistrations()
+        );
+      }
     } catch (error) {
       if (error instanceof Error && (error instanceof RangeError && /call stack/i.test(error.message) || /cycle detected/i.test(error.message))) {
         throw createCircularMountError(frame);
@@ -2306,9 +2328,14 @@ class StoreAdministration extends PreactObjectAdministration {
       this.contextCache.clear();
       this.parent = null;
     });
-    this.mountedSignal.set(false);
     this.disposed = true;
-    Array.from(this.ownedDisposers).forEach((dispose) => dispose());
+    this.reactiveRegistrations.forEach((registration) => {
+      registration.disposed = true;
+      registration.stop?.();
+      registration.stop = void 0;
+    });
+    this.reactiveRegistrations.clear();
+    this.mountedSignal.set(false);
   }
 }
 let initEnabled$1 = false;

package/dist/store/StoreAdministration.d.ts

@@ -10,7 +10,7 @@ export declare class StoreAdministration<StoreType extends Store = Store> extend
     private disposed;
     private contextCache;
     private childStoreDataMap;
-    private ownedDisposers;
+    private reactiveRegistrations;
     private configurationGetter?;
     setConfiguration(configurationGetter: () => StoreConfiguration<StoreType>): void;
     private get configuration();
@@ -26,9 +26,10 @@ export declare class StoreAdministration<StoreType extends Store = Store> extend
     get isMounted(): boolean;
     getContextValue<T>(contextId: symbol, provideSymbol: symbol, defaultValue: T | undefined, hasDefault: boolean): T;
     private lookupContextValue;
-    private own;
+    private register;
+    private startReactiveRegistrations;
     reaction<T>(track: () => T, callback: (value: T, previousValue: T) => void): () => void;
     effect(callback: () => void | (() => void)): () => void;
-    mount(parent?: StoreAdministration | null, childName?: PropertyKey): void;
+    mount(parent?: StoreAdministration | null, childName?: PropertyKey, activationQueue?: StoreAdministration[]): void;
     dispose(internal?: boolean): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "r-state-tree",
-	"version": "0.8.0",
+	"version": "0.8.1",
 	"description": "reactive state management library",
 	"main": "dist/r-state-tree.cjs",
 	"module": "dist/r-state-tree.js",