@virentia/react 0.2.2 → 0.2.3

package/dist/index.cjs

@@ -200,6 +200,9 @@ function useModelInstance(factory, props, scope, options) {
 }
 function useModelInstanceLifecycle(instance, props, options) {
 	const scope = instance.scope;
+	const mountCountsRef = (0, react.useRef)(null);
+	if (mountCountsRef.current === null) mountCountsRef.current = /* @__PURE__ */ new WeakMap();
+	const mountCounts = mountCountsRef.current;
 	useIsomorphicLayoutEffect(() => {
 		writeStore(instance.props, props, scope);
 	}, [
@@ -208,21 +211,26 @@ function useModelInstanceLifecycle(instance, props, options) {
 		scope
 	]);
 	(0, react.useEffect)(() => {
+		mountCounts.set(instance, (mountCounts.get(instance) ?? 0) + 1);
 		(0, _virentia_core.scoped)(scope, () => {
 			instance.mounts.value += 1;
 			instance.mounted();
 		});
 		return () => {
+			mountCounts.set(instance, Math.max(0, (mountCounts.get(instance) ?? 1) - 1));
 			(0, _virentia_core.scoped)(scope, () => {
 				instance.mounts.value = Math.max(0, instance.mounts.value - 1);
 				instance.unmounted();
 			});
-			if (options.disposeOnUnmount) instance.dispose();
+			if (options.disposeOnUnmount) queueMicrotask(() => {
+				if ((mountCounts.get(instance) ?? 0) === 0) instance.dispose();
+			});
 		};
 	}, [
 		instance,
 		options.disposeOnUnmount,
-		scope
+		scope,
+		mountCounts
 	]);
 }
 function createModelInstance(factory, props, scope, key) {
@@ -230,7 +238,7 @@ function createModelInstance(factory, props, scope, key) {
 		const context = {
 			scope,
 			owner: modelOwner,
-			props: (0, _virentia_core.store)(props),
+			props: (0, _virentia_core.reactive)(props),
 			mounted: (0, _virentia_core.event)(),
 			unmounted: (0, _virentia_core.event)(),
 			mounts: (0, _virentia_core.store)(0),

package/dist/index.d.cts

@@ -1,15 +1,16 @@
-import { DisposableOwner, Effect, EffectCallArgs, EventCallable, EventPayload, Owner, Scope, Store, StoreWritable } from "@virentia/core";
+import { DisposableOwner, Effect, EffectCallArgs, EventCallable, EventPayload, Owner, Reactive, ReactiveWritable, Scope, Store, StoreWritable } from "@virentia/core";
 import { ComponentType, FC, ReactNode } from "react";
 
 //#region lib/types.d.ts
-type UnitLike = Store<any> | StoreWritable<any> | EventCallable<any> | Effect<any, any, any>;
+type AnyStore<State = any> = Store<State> | StoreWritable<State> | Reactive<State> | ReactiveWritable<State>;
+type UnitLike = AnyStore | EventCallable<any> | Effect<any, any, any>;
 declare const componentModelBrand: unique symbol;
-type UnitValue<Unit> = Unit extends Store<infer State> | StoreWritable<infer State> ? State : Unit extends EventCallable<infer Payload> ? (...payload: EventPayload<Payload>) => Promise<void> : Unit extends Effect<infer Params, infer Done, any> ? (...args: EffectCallArgs<Params>) => Promise<Done> : never;
+type UnitValue<Unit> = Unit extends AnyStore<infer State> ? State : Unit extends EventCallable<infer Payload> ? (...payload: EventPayload<Payload>) => Promise<void> : Unit extends Effect<infer Params, infer Done, any> ? (...args: EffectCallArgs<Params>) => Promise<Done> : never;
 type ReactiveModel<Model> = { readonly [Key in keyof Model as Key extends "dispose" ? never : Key]: Model[Key] extends ComponentModel<infer ChildModel> ? ComponentModel<ChildModel> : Model[Key] extends UnitLike ? UnitValue<Model[Key]> : Model[Key] extends ((...args: any[]) => any) ? Model[Key] : Model[Key] extends object ? ReactiveModel<Model[Key]> : Model[Key] };
 interface ModelContext<Props, Key = undefined> {
   readonly scope: Scope;
   readonly owner: Owner;
-  readonly props: StoreWritable<Props>;
+  readonly props: ReactiveWritable<Props>;
   readonly mounted: EventCallable<void>;
   readonly unmounted: EventCallable<void>;
   readonly mounts: StoreWritable<number>;
@@ -81,6 +82,8 @@ declare function useModel<Props, Key, Model extends object>(factory: ModelFactor
 //#region lib/use-unit.d.ts
 declare function useUnit<State>(unit: StoreWritable<State>): State;
 declare function useUnit<State>(unit: Store<State>): State;
+declare function useUnit<State>(unit: ReactiveWritable<State>): State;
+declare function useUnit<State>(unit: Reactive<State>): State;
 declare function useUnit<Payload>(unit: EventCallable<Payload>): UnitValue<EventCallable<Payload>>;
 declare function useUnit<Params, Done, Fail>(unit: Effect<Params, Done, Fail>): UnitValue<Effect<Params, Done, Fail>>;
 declare function useUnit<const Shape extends readonly UnitLike[]>(shape: Shape): UnitShape<Shape>;

package/dist/index.d.mts

@@ -1,15 +1,16 @@
-import { DisposableOwner, Effect, EffectCallArgs, EventCallable, EventPayload, Owner, Scope, Store, StoreWritable } from "@virentia/core";
+import { DisposableOwner, Effect, EffectCallArgs, EventCallable, EventPayload, Owner, Reactive, ReactiveWritable, Scope, Store, StoreWritable } from "@virentia/core";
 import { ComponentType, FC, ReactNode } from "react";
 
 //#region lib/types.d.ts
-type UnitLike = Store<any> | StoreWritable<any> | EventCallable<any> | Effect<any, any, any>;
+type AnyStore<State = any> = Store<State> | StoreWritable<State> | Reactive<State> | ReactiveWritable<State>;
+type UnitLike = AnyStore | EventCallable<any> | Effect<any, any, any>;
 declare const componentModelBrand: unique symbol;
-type UnitValue<Unit> = Unit extends Store<infer State> | StoreWritable<infer State> ? State : Unit extends EventCallable<infer Payload> ? (...payload: EventPayload<Payload>) => Promise<void> : Unit extends Effect<infer Params, infer Done, any> ? (...args: EffectCallArgs<Params>) => Promise<Done> : never;
+type UnitValue<Unit> = Unit extends AnyStore<infer State> ? State : Unit extends EventCallable<infer Payload> ? (...payload: EventPayload<Payload>) => Promise<void> : Unit extends Effect<infer Params, infer Done, any> ? (...args: EffectCallArgs<Params>) => Promise<Done> : never;
 type ReactiveModel<Model> = { readonly [Key in keyof Model as Key extends "dispose" ? never : Key]: Model[Key] extends ComponentModel<infer ChildModel> ? ComponentModel<ChildModel> : Model[Key] extends UnitLike ? UnitValue<Model[Key]> : Model[Key] extends ((...args: any[]) => any) ? Model[Key] : Model[Key] extends object ? ReactiveModel<Model[Key]> : Model[Key] };
 interface ModelContext<Props, Key = undefined> {
   readonly scope: Scope;
   readonly owner: Owner;
-  readonly props: StoreWritable<Props>;
+  readonly props: ReactiveWritable<Props>;
   readonly mounted: EventCallable<void>;
   readonly unmounted: EventCallable<void>;
   readonly mounts: StoreWritable<number>;
@@ -81,6 +82,8 @@ declare function useModel<Props, Key, Model extends object>(factory: ModelFactor
 //#region lib/use-unit.d.ts
 declare function useUnit<State>(unit: StoreWritable<State>): State;
 declare function useUnit<State>(unit: Store<State>): State;
+declare function useUnit<State>(unit: ReactiveWritable<State>): State;
+declare function useUnit<State>(unit: Reactive<State>): State;
 declare function useUnit<Payload>(unit: EventCallable<Payload>): UnitValue<EventCallable<Payload>>;
 declare function useUnit<Params, Done, Fail>(unit: Effect<Params, Done, Fail>): UnitValue<Effect<Params, Done, Fail>>;
 declare function useUnit<const Shape extends readonly UnitLike[]>(shape: Shape): UnitShape<Shape>;

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { event, getCurrentScope, owner, run, scoped, store } from "@virentia/core";
+import { event, getCurrentScope, owner, reactive, run, scoped, store } from "@virentia/core";
 import { createContext, createElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useSyncExternalStore } from "react";
 //#region lib/model-cache.ts
 function createModelCache() {
@@ -199,6 +199,9 @@ function useModelInstance(factory, props, scope, options) {
 }
 function useModelInstanceLifecycle(instance, props, options) {
 	const scope = instance.scope;
+	const mountCountsRef = useRef(null);
+	if (mountCountsRef.current === null) mountCountsRef.current = /* @__PURE__ */ new WeakMap();
+	const mountCounts = mountCountsRef.current;
 	useIsomorphicLayoutEffect(() => {
 		writeStore(instance.props, props, scope);
 	}, [
@@ -207,21 +210,26 @@ function useModelInstanceLifecycle(instance, props, options) {
 		scope
 	]);
 	useEffect(() => {
+		mountCounts.set(instance, (mountCounts.get(instance) ?? 0) + 1);
 		scoped(scope, () => {
 			instance.mounts.value += 1;
 			instance.mounted();
 		});
 		return () => {
+			mountCounts.set(instance, Math.max(0, (mountCounts.get(instance) ?? 1) - 1));
 			scoped(scope, () => {
 				instance.mounts.value = Math.max(0, instance.mounts.value - 1);
 				instance.unmounted();
 			});
-			if (options.disposeOnUnmount) instance.dispose();
+			if (options.disposeOnUnmount) queueMicrotask(() => {
+				if ((mountCounts.get(instance) ?? 0) === 0) instance.dispose();
+			});
 		};
 	}, [
 		instance,
 		options.disposeOnUnmount,
-		scope
+		scope,
+		mountCounts
 	]);
 }
 function createModelInstance(factory, props, scope, key) {
@@ -229,7 +237,7 @@ function createModelInstance(factory, props, scope, key) {
 		const context = {
 			scope,
 			owner: modelOwner,
-			props: store(props),
+			props: reactive(props),
 			mounted: event(),
 			unmounted: event(),
 			mounts: store(0),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@virentia/react",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "",
   "keywords": [],
   "homepage": "https://movpushmov.dev/virentia/react/",
@@ -32,7 +32,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@virentia/core": "0.3.0"
+    "@virentia/core": "0.3.1"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",