bunja 2.0.0-alpha.8 → 2.0.0

package/README.md

@@ -0,0 +1,277 @@
+# Bunja
+
+Bunja is lightweight State Lifetime Manager.\
+Heavily inspired by [Bunshi](https://github.com/saasquatch/bunshi).
+
+> Definition: Bunja (分子 / 분자) - Korean for molecule, member or element.
+
+## Why is managing the lifetime of state necessary?
+
+Global state managers like jotai or signals offer the advantage of declaratively
+describing state and effectively reducing render counts, but they lack suitable
+methods for managing resources with a defined start and end.\
+For example, consider establishing and closing a WebSocket connection or a modal
+form UI that appears temporarily and then disappears.
+
+Bunja is a library designed to address these weaknesses.\
+Each state defined with Bunja has a lifetime that begins when it is first
+depended on somewhere in the render tree and ends when all dependencies
+disappear.
+
+Therefore, when writing a state to manage a WebSocket, you only need to create a
+function that establishes the WebSocket connection and a disposal handler that
+terminates the connection.\
+The library automatically tracks the actual usage period and calls the init and
+dispose as needed.
+
+## So, do I no longer need jotai or other state management libraries?
+
+No. Bunja focuses solely on managing the lifetime of state, so jotai and other
+state management libraries are still valuable.\
+You can typically use jotai or something, and when lifetime management becomes
+necessary, you can wrap those states with bunja.
+
+## How to use
+
+Bunja basically provides two functions: `bunja` and `useBunja`.\
+You can use `bunja` to define a state with a finite lifetime and use the
+`useBunja` hook to access that state.
+
+### Defining a Bunja
+
+You can define a bunja using the `bunja` function. When you access the defined
+bunja with the `useBunja` hook, a bunja instance is created.\
+If all components in the render tree that refer to the bunja disappear, the
+bunja instance is automatically destroyed.
+
+If you want to trigger effects when the lifetime of a bunja starts and ends, you
+can use the `bunja.effect` function.
+
+```ts
+import { bunja } from "bunja";
+import { useBunja } from "bunja/react";
+
+const countBunja = bunja(() => {
+  const countAtom = atom(0);
+
+  bunja.effect(() => {
+    console.log("mounted");
+    return () => console.log("unmounted");
+  });
+
+  return { countAtom };
+});
+
+function MyComponent() {
+  const { countAtom } = useBunja(countBunja);
+  const [count, setCount] = useAtom(countAtom);
+  // Your component logic here
+}
+```
+
+### Defining a Bunja that relies on other Bunja
+
+If you want to manage a state with a broad lifetime and another state with a
+narrower lifetime, you can create a (narrower) bunja that depends on a (broader)
+bunja. For example, you can think of a bunja that manages the WebSocket
+connection and disconnection, and another bunja that subscribes to a specific
+resource over the connected WebSocket.
+
+In an application composed of multiple pages, you might want to subscribe to the
+Foo resource on page A and the Bar resource on page B, while using the same
+WebSocket connection regardless of which page you're on. In such a case, you can
+write the following code.
+
+```ts
+// To simplify the example, code for buffering and reconnection has been omitted.
+const websocketBunja = bunja(() => {
+  let socket;
+  const send = (message) => socket.send(JSON.stringify(message));
+
+  const emitter = new EventEmitter();
+  const on = (handler) => {
+    emitter.on("message", handler);
+    return () => emitter.off("message", handler);
+  };
+
+  bunja.effect(() => {
+    socket = new WebSocket("...");
+    socket.onmessage = (e) => emitter.emit("message", JSON.parse(e.data));
+    return () => socket.close();
+  });
+
+  return { send, on };
+});
+
+const resourceFooBunja = bunja(() => {
+  const { send, on } = bunja.use(websocketBunja);
+  const resourceFooAtom = atom();
+
+  bunja.effect(() => {
+    const off = on((message) => {
+      if (message.type === "foo") store.set(resourceAtom, message.value);
+    });
+    send("subscribe-foo");
+    return () => {
+      send("unsubscribe-foo");
+      off();
+    };
+  });
+
+  return { resourceFooAtom };
+});
+
+const resourceBarBunja = bunja(() => {
+  const { send, on } = bunja.use(websocketBunja);
+  const resourceBarAtom = atom();
+  // ...
+});
+
+function PageA() {
+  const { resourceFooAtom } = useBunja(resourceFooBunja);
+  const resourceFoo = useAtomValue(resourceFooAtom);
+  // ...
+}
+
+function PageB() {
+  const { resourceBarAtom } = useBunja(resourceBarBunja);
+  const resourceBar = useAtomValue(resourceBarAtom);
+  // ...
+}
+```
+
+Notice that `websocketBunja` is not directly `useBunja`-ed. When you `useBunja`
+either `resourceFooBunja` or `resourceBarBunja`, since they depend on
+`websocketBunja`, it has the same effect as if `websocketBunja` were also
+`useBunja`-ed.
+
+> [!NOTE]
+> When a bunja starts, the initialization effect of the bunja with a broader
+> lifetime is called first.\
+> Similarly, when a bunja ends, the cleanup effect of the bunja with the broader
+> lifetime is called first.\
+> This behavior is aligned with how React's `useEffect` cleanup function is
+> invoked, where the parent’s cleanup is executed before the child’s in the
+> render tree.
+>
+> See: <https://github.com/facebook/react/issues/16728>
+
+### Dependency injection using Scope
+
+You can use a bunja for local state management.\
+When you specify a scope as a dependency of the bunja, separate bunja instances
+are created based on the values injected into the scope.
+
+```ts
+import { bunja, createScope } from "bunja";
+
+const UrlScope = createScope();
+
+const fetchBunja = bunja(() => {
+  const url = bunja.use(UrlScope);
+
+  const queryAtom = atomWithQuery((get) => ({
+    queryKey: [url],
+    queryFn: async () => (await fetch(url)).json(),
+  }));
+
+  return { queryAtom };
+});
+```
+
+#### Injecting dependencies via React context
+
+If you bind a scope to a React context, bunjas that depend on the scope can
+retrieve values from the corresponding React context.
+
+In the example below, there are two React instances (`<ChildComponent />`) that
+reference the same `fetchBunja`, but since each looks at a different context
+value, two separate bunja instances are also created.
+
+```tsx
+import { createContext } from "react";
+import { bunja, createScope } from "bunja";
+import { bindScope } from "bunja/react";
+
+const UrlContext = createContext("https://example.com/");
+const UrlScope = createScope();
+bindScope(UrlScope, UrlContext);
+
+const fetchBunja = bunja(() => {
+  const url = bunja.use(UrlScope);
+
+  const queryAtom = atomWithQuery((get) => ({
+    queryKey: [url],
+    queryFn: async () => (await fetch(url)).json(),
+  }));
+
+  return { queryAtom };
+});
+
+function ParentComponent() {
+  return (
+    <>
+      <UrlContext value="https://example.com/foo">
+        <ChildComponent />
+      </UrlContext>
+      <UrlContext value="https://example.com/bar">
+        <ChildComponent />
+      </UrlContext>
+    </>
+  );
+}
+
+function ChildComponent() {
+  const { queryAtom } = useBunja(fetchBunja);
+  const { data, isPending, isError } = useAtomValue(queryAtom);
+  // Your component logic here
+}
+```
+
+You can use the `createScopeFromContext` function to handle both the creation of
+the scope and the binding to the context in one step.
+
+```ts
+import { createContext } from "react";
+import { createScopeFromContext } from "bunja/react";
+
+const UrlContext = createContext("https://example.com/");
+const UrlScope = createScopeFromContext(UrlContext);
+```
+
+#### Injecting dependencies directly into the scope
+
+You might want to use a bunja directly within a React component where the values
+to be injected into the scope are created.
+
+In such cases, you can use the second parameter of `useBunja` hook to inject
+values into the scope without wrapping the context separately.
+
+```tsx
+function MyComponent() {
+  const { queryAtom } = useBunja(
+    fetchBunja,
+    [UrlScope.bind("https://example.com/")],
+  );
+  const { data, isPending, isError } = useAtomValue(queryAtom);
+  // Your component logic here
+}
+```
+
+##### Doing the same thing inside a bunja
+
+You can use `bunja.fork` to inject scope values from within a bunja
+initialization function.
+
+```ts
+const myBunja = bunja(() => {
+  const fooData = bunja.fork(fetchBunja, [
+    UrlScope.bind("https://example.com/foo"),
+  ]);
+  const barData = bunja.fork(fetchBunja, [
+    UrlScope.bind("https://example.com/bar"),
+  ]);
+
+  return { fooData, barData };
+});
+```

package/bunja.ts

@@ -1,3 +1,7 @@
+// @ts-ignore dev
+// deno-lint-ignore no-process-global
+const __DEV__ = process.env.NODE_ENV !== "production";
+
 export interface BunjaFn {
   <T>(init: () => T): Bunja<T>;
   use: BunjaUseFn;
@@ -61,6 +65,11 @@ interface BunjaStoreGetContext {
 type BunjaInstanceMap = Map<Bunja<unknown>, BunjaInstance>;
 type ScopeInstanceMap = Map<Scope<unknown>, ScopeInstance>;
 
+interface InternalState {
+  bunjas: Record<string, BunjaInstance>;
+  scopes: Map<Scope<unknown>, Map<unknown, ScopeInstance>>;
+}
+
 interface BunjaBakingContext {
   currentBunja: Bunja<unknown>;
 }
@@ -69,10 +78,22 @@ export type WrapInstanceFn = <T>(fn: (dispose: () => void) => T) => T;
 const defaultWrapInstanceFn: WrapInstanceFn = (fn) => fn(noop);
 
 export class BunjaStore {
+  private static counter: number = 0;
+  readonly id: string = String(BunjaStore.counter++);
   #bunjas: Record<string, BunjaInstance> = {};
   #scopes: Map<Scope<unknown>, Map<unknown, ScopeInstance>> = new Map();
   #bakingContext: BunjaBakingContext | undefined;
   wrapInstance: WrapInstanceFn = defaultWrapInstanceFn;
+  constructor() {
+    if (__DEV__) {
+      devtoolsGlobalHook.stores[this.id] = this;
+      devtoolsGlobalHook.emit("storeCreated", { storeId: this.id });
+    }
+  }
+  get _internalState(): InternalState | undefined {
+    if (__DEV__) return { bunjas: this.#bunjas, scopes: this.#scopes };
+    return undefined;
+  }
   dispose(): void {
     for (const instance of Object.values(this.#bunjas)) instance.dispose();
     for (const instanceMap of Object.values(this.#scopes)) {
@@ -80,6 +101,10 @@ export class BunjaStore {
     }
     this.#bunjas = {};
     this.#scopes = new Map();
+    if (__DEV__) {
+      devtoolsGlobalHook.emit("storeDisposed", { storeId: this.id });
+      delete devtoolsGlobalHook.stores[this.id];
+    }
   }
   get<T>(bunja: Bunja<T>, readScope: ReadScope): BunjaStoreGetResult<T> {
     const originalUse = bunjaFn.use;
@@ -87,7 +112,7 @@ export class BunjaStore {
       const { bunjaInstance, bunjaInstanceMap, scopeInstanceMap } = bunja.baked
         ? this.#getBaked(bunja, readScope)
         : this.#getUnbaked(bunja, readScope);
-      return {
+      const result: BunjaStoreGetResult<T> = {
         value: bunjaInstance.value as T,
         mount: () => {
           bunjaInstanceMap.forEach((instance) => instance.add());
@@ -102,6 +127,14 @@ export class BunjaStore {
         },
         deps: Array.from(scopeInstanceMap.values()).map(({ value }) => value),
       };
+      if (__DEV__) {
+        result.bunjaInstance = bunjaInstance;
+        devtoolsGlobalHook.emit("getCalled", {
+          storeId: this.id,
+          bunjaInstanceId: bunjaInstance.id,
+        });
+      }
+      return result;
     } finally {
       bunjaFn.use = originalUse;
     }
@@ -225,7 +258,16 @@ export class BunjaStore {
     return instanceMap.get(key) ??
       instanceMap.set(
         key,
-        new ScopeInstance(value, () => instanceMap.delete(key)),
+        this.#createScopeInstance(scope, key, value, () => {
+          instanceMap.delete(key);
+          if (__DEV__) {
+            devtoolsGlobalHook.emit("scopeInstanceUnmounted", {
+              storeId: this.id,
+              scope,
+              key,
+            });
+          }
+        }),
       ).get(key)!;
   }
   #createBunjaInstance(
@@ -241,12 +283,39 @@ export class BunjaStore {
       return () => cleanups.forEach((cleanup) => cleanup());
     };
     const bunjaInstance = new BunjaInstance(id, value, effect, () => {
+      if (__DEV__) {
+        devtoolsGlobalHook.emit("bunjaInstanceUnmounted", {
+          storeId: this.id,
+          bunjaInstanceId: id,
+        });
+      }
       dispose();
       delete this.#bunjas[id];
     });
     this.#bunjas[id] = bunjaInstance;
+    if (__DEV__) {
+      devtoolsGlobalHook.emit("bunjaInstanceMounted", {
+        storeId: this.id,
+        bunjaInstanceId: id,
+      });
+    }
     return bunjaInstance;
   }
+  #createScopeInstance(
+    scope: Scope<unknown>,
+    key: unknown,
+    value: unknown,
+    dispose: () => void,
+  ): ScopeInstance {
+    if (__DEV__) {
+      devtoolsGlobalHook.emit("scopeInstanceMounted", {
+        storeId: this.id,
+        scope,
+        key,
+      });
+    }
+    return new ScopeInstance(value, dispose);
+  }
 }
 
 export type ReadScope = <T>(scope: Scope<T>) => T;
@@ -267,6 +336,7 @@ export interface BunjaStoreGetResult<T> {
   value: T;
   mount: () => () => void;
   deps: unknown[];
+  bunjaInstance?: BunjaInstance;
 }
 
 export function delayUnmount(
@@ -431,3 +501,64 @@ function toposort<T extends Toposortable>(nodes: T[]): T[] {
 }
 
 const noop = () => {};
+
+export interface BunjaDevtoolsGlobalHook {
+  stores: Record<string, BunjaStore>;
+  listeners: Record<
+    BunjaDevtoolsEventType,
+    Set<(event: any) => void>
+  >;
+  emit<T extends BunjaDevtoolsEventType>(
+    type: T,
+    event: BunjaDevtoolsEvent[T],
+  ): void;
+  on<T extends BunjaDevtoolsEventType>(
+    type: T,
+    listener: (event: BunjaDevtoolsEvent[T]) => void,
+  ): () => void;
+}
+export interface BunjaDevtoolsEvent {
+  storeCreated: { storeId: string };
+  storeDisposed: { storeId: string };
+  getCalled: { storeId: string; bunjaInstanceId: string };
+  bunjaInstanceMounted: { storeId: string; bunjaInstanceId: string };
+  bunjaInstanceUnmounted: { storeId: string; bunjaInstanceId: string };
+  scopeInstanceMounted: {
+    storeId: string;
+    scope: Scope<unknown>;
+    key: unknown;
+  };
+  scopeInstanceUnmounted: {
+    storeId: string;
+    scope: Scope<unknown>;
+    key: unknown;
+  };
+}
+export type BunjaDevtoolsEventType = keyof BunjaDevtoolsEvent;
+let devtoolsGlobalHook: BunjaDevtoolsGlobalHook;
+if (__DEV__) {
+  if ((globalThis as any).__BUNJA_DEVTOOLS_GLOBAL_HOOK__) {
+    devtoolsGlobalHook = (globalThis as any).__BUNJA_DEVTOOLS_GLOBAL_HOOK__;
+  } else {
+    devtoolsGlobalHook = {
+      stores: {},
+      listeners: {
+        storeCreated: new Set(),
+        storeDisposed: new Set(),
+        getCalled: new Set(),
+        bunjaInstanceMounted: new Set(),
+        bunjaInstanceUnmounted: new Set(),
+        scopeInstanceMounted: new Set(),
+        scopeInstanceUnmounted: new Set(),
+      },
+      emit: (type, event) => {
+        for (const fn of devtoolsGlobalHook.listeners[type]) fn(event);
+      },
+      on: (type, listener) => {
+        devtoolsGlobalHook.listeners[type].add(listener);
+        return () => devtoolsGlobalHook.listeners[type].delete(listener);
+      },
+    };
+    (globalThis as any).__BUNJA_DEVTOOLS_GLOBAL_HOOK__ = devtoolsGlobalHook;
+  }
+}

package/deno.json

@@ -1,6 +1,6 @@
 {
   "name": "@disjukr/bunja",
-  "version": "2.0.0-alpha.7",
+  "version": "2.0.0",
   "license": "Zlib",
   "exports": {
     ".": "./bunja.ts",

package/dist/{bunja-bhXTtuLY.cjs → bunja-CaephaLd.cjs}

@@ -1,5 +1,6 @@
 
 //#region bunja.ts
+const __DEV__ = process.env.NODE_ENV !== "production";
 const bunja = bunjaFn;
 function bunjaFn(init) {
 	return new Bunja(init);
@@ -26,22 +27,41 @@ function invalidEffect() {
 	throw new Error("`bunja.effect` can only be used inside a bunja init function.");
 }
 const defaultWrapInstanceFn = (fn) => fn(noop);
-var BunjaStore = class {
+var BunjaStore = class BunjaStore {
+	static counter = 0;
+	id = String(BunjaStore.counter++);
 	#bunjas = {};
 	#scopes = /* @__PURE__ */ new Map();
 	#bakingContext;
 	wrapInstance = defaultWrapInstanceFn;
+	constructor() {
+		if (__DEV__) {
+			devtoolsGlobalHook.stores[this.id] = this;
+			devtoolsGlobalHook.emit("storeCreated", { storeId: this.id });
+		}
+	}
+	get _internalState() {
+		if (__DEV__) return {
+			bunjas: this.#bunjas,
+			scopes: this.#scopes
+		};
+		return void 0;
+	}
 	dispose() {
 		for (const instance of Object.values(this.#bunjas)) instance.dispose();
 		for (const instanceMap of Object.values(this.#scopes)) for (const instance of instanceMap.values()) instance.dispose();
 		this.#bunjas = {};
 		this.#scopes = /* @__PURE__ */ new Map();
+		if (__DEV__) {
+			devtoolsGlobalHook.emit("storeDisposed", { storeId: this.id });
+			delete devtoolsGlobalHook.stores[this.id];
+		}
 	}
 	get(bunja$1, readScope) {
 		const originalUse = bunjaFn.use;
 		try {
 			const { bunjaInstance, bunjaInstanceMap, scopeInstanceMap } = bunja$1.baked ? this.#getBaked(bunja$1, readScope) : this.#getUnbaked(bunja$1, readScope);
-			return {
+			const result = {
 				value: bunjaInstance.value,
 				mount: () => {
 					bunjaInstanceMap.forEach((instance) => instance.add());
@@ -56,6 +76,14 @@ var BunjaStore = class {
 				},
 				deps: Array.from(scopeInstanceMap.values()).map(({ value }) => value)
 			};
+			if (__DEV__) {
+				result.bunjaInstance = bunjaInstance;
+				devtoolsGlobalHook.emit("getCalled", {
+					storeId: this.id,
+					bunjaInstanceId: bunjaInstance.id
+				});
+			}
+			return result;
 		} finally {
 			bunjaFn.use = originalUse;
 		}
@@ -80,14 +108,14 @@ var BunjaStore = class {
 		const bunjaInstanceMap = /* @__PURE__ */ new Map();
 		const scopeInstanceMap = /* @__PURE__ */ new Map();
 		function getUse(map, addDep, getInstance) {
-			return (dep) => {
+			return ((dep) => {
 				const d = dep;
 				addDep(d);
 				if (map.has(d)) return map.get(d).value;
 				const instance = getInstance(d);
 				map.set(d, instance);
 				return instance.value;
-			};
+			});
 		}
 		const useScope = getUse(scopeInstanceMap, (dep) => this.#bakingContext.currentBunja.addScope(dep), (dep) => this.#getScopeInstance(dep, readScope(dep)));
 		const useBunja = getUse(bunjaInstanceMap, (dep) => this.#bakingContext.currentBunja.addParent(dep), (dep) => {
@@ -150,7 +178,14 @@ var BunjaStore = class {
 	#getScopeInstance(scope, value) {
 		const key = scope.hash(value);
 		const instanceMap = this.#scopes.get(scope) ?? this.#scopes.set(scope, /* @__PURE__ */ new Map()).get(scope);
-		return instanceMap.get(key) ?? instanceMap.set(key, new ScopeInstance(value, () => instanceMap.delete(key))).get(key);
+		return instanceMap.get(key) ?? instanceMap.set(key, this.#createScopeInstance(scope, key, value, () => {
+			instanceMap.delete(key);
+			if (__DEV__) devtoolsGlobalHook.emit("scopeInstanceUnmounted", {
+				storeId: this.id,
+				scope,
+				key
+			});
+		})).get(key);
 	}
 	#createBunjaInstance(id, value, effects, dispose) {
 		const effect = () => {
@@ -158,12 +193,28 @@ var BunjaStore = class {
 			return () => cleanups.forEach((cleanup) => cleanup());
 		};
 		const bunjaInstance = new BunjaInstance(id, value, effect, () => {
+			if (__DEV__) devtoolsGlobalHook.emit("bunjaInstanceUnmounted", {
+				storeId: this.id,
+				bunjaInstanceId: id
+			});
 			dispose();
 			delete this.#bunjas[id];
 		});
 		this.#bunjas[id] = bunjaInstance;
+		if (__DEV__) devtoolsGlobalHook.emit("bunjaInstanceMounted", {
+			storeId: this.id,
+			bunjaInstanceId: id
+		});
 		return bunjaInstance;
 	}
+	#createScopeInstance(scope, key, value, dispose) {
+		if (__DEV__) devtoolsGlobalHook.emit("scopeInstanceMounted", {
+			storeId: this.id,
+			scope,
+			key
+		});
+		return new ScopeInstance(value, dispose);
+	}
 };
 function createReadScopeFn(scopeValuePairs, readScope) {
 	const map = new Map(scopeValuePairs);
@@ -306,6 +357,30 @@ function toposort(nodes) {
 	return result;
 }
 const noop = () => {};
+let devtoolsGlobalHook;
+if (__DEV__) if (globalThis.__BUNJA_DEVTOOLS_GLOBAL_HOOK__) devtoolsGlobalHook = globalThis.__BUNJA_DEVTOOLS_GLOBAL_HOOK__;
+else {
+	devtoolsGlobalHook = {
+		stores: {},
+		listeners: {
+			storeCreated: /* @__PURE__ */ new Set(),
+			storeDisposed: /* @__PURE__ */ new Set(),
+			getCalled: /* @__PURE__ */ new Set(),
+			bunjaInstanceMounted: /* @__PURE__ */ new Set(),
+			bunjaInstanceUnmounted: /* @__PURE__ */ new Set(),
+			scopeInstanceMounted: /* @__PURE__ */ new Set(),
+			scopeInstanceUnmounted: /* @__PURE__ */ new Set()
+		},
+		emit: (type, event) => {
+			for (const fn of devtoolsGlobalHook.listeners[type]) fn(event);
+		},
+		on: (type, listener) => {
+			devtoolsGlobalHook.listeners[type].add(listener);
+			return () => devtoolsGlobalHook.listeners[type].delete(listener);
+		}
+	};
+	globalThis.__BUNJA_DEVTOOLS_GLOBAL_HOOK__ = devtoolsGlobalHook;
+}
 
 //#endregion
 Object.defineProperty(exports, 'Bunja', {

package/dist/{bunja-CqyhNWOx.d.ts → bunja-DXtbhAmJ.d.cts}

@@ -16,10 +16,18 @@ interface CreateBunjaStoreConfig {
 }
 declare function createBunjaStore(config?: CreateBunjaStoreConfig): BunjaStore;
 type Dep<T> = Bunja<T> | Scope<T>;
+interface InternalState {
+  bunjas: Record<string, BunjaInstance>;
+  scopes: Map<Scope<unknown>, Map<unknown, ScopeInstance>>;
+}
 type WrapInstanceFn = <T>(fn: (dispose: () => void) => T) => T;
 declare class BunjaStore {
   #private;
+  private static counter;
+  readonly id: string;
   wrapInstance: WrapInstanceFn;
+  constructor();
+  get _internalState(): InternalState | undefined;
   dispose(): void;
   get<T>(bunja: Bunja<T>, readScope: ReadScope): BunjaStoreGetResult<T>;
 }
@@ -29,6 +37,7 @@ interface BunjaStoreGetResult<T> {
   value: T;
   mount: () => () => void;
   deps: unknown[];
+  bunjaInstance?: BunjaInstance;
 }
 declare function delayUnmount(mount: () => () => void, ms?: number): () => () => void;
 declare class Bunja<T> {
@@ -66,6 +75,16 @@ declare abstract class RefCounter {
   add(): void;
   sub(): void;
 }
+declare class BunjaInstance extends RefCounter {
+  #private;
+  readonly id: string;
+  readonly value: unknown;
+  readonly effect: BunjaEffectCallback;
+  private readonly _dispose;
+  constructor(id: string, value: unknown, effect: BunjaEffectCallback, _dispose: () => void);
+  dispose(): void;
+  add(): void;
+}
 declare class ScopeInstance extends RefCounter {
   readonly value: unknown;
   readonly dispose: () => void;
@@ -73,5 +92,42 @@ declare class ScopeInstance extends RefCounter {
   readonly id: string;
   constructor(value: unknown, dispose: () => void);
 }
+interface BunjaDevtoolsGlobalHook {
+  stores: Record<string, BunjaStore>;
+  listeners: Record<BunjaDevtoolsEventType, Set<(event: any) => void>>;
+  emit<T extends BunjaDevtoolsEventType>(type: T, event: BunjaDevtoolsEvent[T]): void;
+  on<T extends BunjaDevtoolsEventType>(type: T, listener: (event: BunjaDevtoolsEvent[T]) => void): () => void;
+}
+interface BunjaDevtoolsEvent {
+  storeCreated: {
+    storeId: string;
+  };
+  storeDisposed: {
+    storeId: string;
+  };
+  getCalled: {
+    storeId: string;
+    bunjaInstanceId: string;
+  };
+  bunjaInstanceMounted: {
+    storeId: string;
+    bunjaInstanceId: string;
+  };
+  bunjaInstanceUnmounted: {
+    storeId: string;
+    bunjaInstanceId: string;
+  };
+  scopeInstanceMounted: {
+    storeId: string;
+    scope: Scope<unknown>;
+    key: unknown;
+  };
+  scopeInstanceUnmounted: {
+    storeId: string;
+    scope: Scope<unknown>;
+    key: unknown;
+  };
+}
+type BunjaDevtoolsEventType = keyof BunjaDevtoolsEvent;
 //#endregion
-export { Bunja, BunjaEffectCallback, BunjaEffectFn, BunjaFn, BunjaForkFn, BunjaStore, BunjaStoreGetResult, BunjaUseFn, CreateBunjaStoreConfig, Dep, HashFn, ReadScope, Scope, ScopeValuePair, WrapInstanceFn, bunja, createBunjaStore, createReadScopeFn, createScope, delayUnmount };
+export { Bunja, BunjaDevtoolsEvent, BunjaDevtoolsEventType, BunjaDevtoolsGlobalHook, BunjaEffectCallback, BunjaEffectFn, BunjaFn, BunjaForkFn, BunjaStore, BunjaStoreGetResult, BunjaUseFn, CreateBunjaStoreConfig, Dep, HashFn, ReadScope, Scope, ScopeValuePair, WrapInstanceFn, bunja, createBunjaStore, createReadScopeFn, createScope, delayUnmount };

package/dist/{bunja-P0kiwZQC.d.cts → bunja-D_SKFBCD.d.ts}

@@ -16,10 +16,18 @@ interface CreateBunjaStoreConfig {
 }
 declare function createBunjaStore(config?: CreateBunjaStoreConfig): BunjaStore;
 type Dep<T> = Bunja<T> | Scope<T>;
+interface InternalState {
+  bunjas: Record<string, BunjaInstance>;
+  scopes: Map<Scope<unknown>, Map<unknown, ScopeInstance>>;
+}
 type WrapInstanceFn = <T>(fn: (dispose: () => void) => T) => T;
 declare class BunjaStore {
   #private;
+  private static counter;
+  readonly id: string;
   wrapInstance: WrapInstanceFn;
+  constructor();
+  get _internalState(): InternalState | undefined;
   dispose(): void;
   get<T>(bunja: Bunja<T>, readScope: ReadScope): BunjaStoreGetResult<T>;
 }
@@ -29,6 +37,7 @@ interface BunjaStoreGetResult<T> {
   value: T;
   mount: () => () => void;
   deps: unknown[];
+  bunjaInstance?: BunjaInstance;
 }
 declare function delayUnmount(mount: () => () => void, ms?: number): () => () => void;
 declare class Bunja<T> {
@@ -66,6 +75,16 @@ declare abstract class RefCounter {
   add(): void;
   sub(): void;
 }
+declare class BunjaInstance extends RefCounter {
+  #private;
+  readonly id: string;
+  readonly value: unknown;
+  readonly effect: BunjaEffectCallback;
+  private readonly _dispose;
+  constructor(id: string, value: unknown, effect: BunjaEffectCallback, _dispose: () => void);
+  dispose(): void;
+  add(): void;
+}
 declare class ScopeInstance extends RefCounter {
   readonly value: unknown;
   readonly dispose: () => void;
@@ -73,5 +92,42 @@ declare class ScopeInstance extends RefCounter {
   readonly id: string;
   constructor(value: unknown, dispose: () => void);
 }
+interface BunjaDevtoolsGlobalHook {
+  stores: Record<string, BunjaStore>;
+  listeners: Record<BunjaDevtoolsEventType, Set<(event: any) => void>>;
+  emit<T extends BunjaDevtoolsEventType>(type: T, event: BunjaDevtoolsEvent[T]): void;
+  on<T extends BunjaDevtoolsEventType>(type: T, listener: (event: BunjaDevtoolsEvent[T]) => void): () => void;
+}
+interface BunjaDevtoolsEvent {
+  storeCreated: {
+    storeId: string;
+  };
+  storeDisposed: {
+    storeId: string;
+  };
+  getCalled: {
+    storeId: string;
+    bunjaInstanceId: string;
+  };
+  bunjaInstanceMounted: {
+    storeId: string;
+    bunjaInstanceId: string;
+  };
+  bunjaInstanceUnmounted: {
+    storeId: string;
+    bunjaInstanceId: string;
+  };
+  scopeInstanceMounted: {
+    storeId: string;
+    scope: Scope<unknown>;
+    key: unknown;
+  };
+  scopeInstanceUnmounted: {
+    storeId: string;
+    scope: Scope<unknown>;
+    key: unknown;
+  };
+}
+type BunjaDevtoolsEventType = keyof BunjaDevtoolsEvent;
 //#endregion
-export { Bunja, BunjaEffectCallback, BunjaEffectFn, BunjaFn, BunjaForkFn, BunjaStore, BunjaStoreGetResult, BunjaUseFn, CreateBunjaStoreConfig, Dep, HashFn, ReadScope, Scope, ScopeValuePair, WrapInstanceFn, bunja, createBunjaStore, createReadScopeFn, createScope, delayUnmount };
+export { Bunja, BunjaDevtoolsEvent, BunjaDevtoolsEventType, BunjaDevtoolsGlobalHook, BunjaEffectCallback, BunjaEffectFn, BunjaFn, BunjaForkFn, BunjaStore, BunjaStoreGetResult, BunjaUseFn, CreateBunjaStoreConfig, Dep, HashFn, ReadScope, Scope, ScopeValuePair, WrapInstanceFn, bunja, createBunjaStore, createReadScopeFn, createScope, delayUnmount };

package/dist/{bunja-BB7ru8D0.js → bunja-EJqDbU0A.js}

@@ -1,4 +1,5 @@
 //#region bunja.ts
+const __DEV__ = process.env.NODE_ENV !== "production";
 const bunja = bunjaFn;
 function bunjaFn(init) {
 	return new Bunja(init);
@@ -25,22 +26,41 @@ function invalidEffect() {
 	throw new Error("`bunja.effect` can only be used inside a bunja init function.");
 }
 const defaultWrapInstanceFn = (fn) => fn(noop);
-var BunjaStore = class {
+var BunjaStore = class BunjaStore {
+	static counter = 0;
+	id = String(BunjaStore.counter++);
 	#bunjas = {};
 	#scopes = /* @__PURE__ */ new Map();
 	#bakingContext;
 	wrapInstance = defaultWrapInstanceFn;
+	constructor() {
+		if (__DEV__) {
+			devtoolsGlobalHook.stores[this.id] = this;
+			devtoolsGlobalHook.emit("storeCreated", { storeId: this.id });
+		}
+	}
+	get _internalState() {
+		if (__DEV__) return {
+			bunjas: this.#bunjas,
+			scopes: this.#scopes
+		};
+		return void 0;
+	}
 	dispose() {
 		for (const instance of Object.values(this.#bunjas)) instance.dispose();
 		for (const instanceMap of Object.values(this.#scopes)) for (const instance of instanceMap.values()) instance.dispose();
 		this.#bunjas = {};
 		this.#scopes = /* @__PURE__ */ new Map();
+		if (__DEV__) {
+			devtoolsGlobalHook.emit("storeDisposed", { storeId: this.id });
+			delete devtoolsGlobalHook.stores[this.id];
+		}
 	}
 	get(bunja$1, readScope) {
 		const originalUse = bunjaFn.use;
 		try {
 			const { bunjaInstance, bunjaInstanceMap, scopeInstanceMap } = bunja$1.baked ? this.#getBaked(bunja$1, readScope) : this.#getUnbaked(bunja$1, readScope);
-			return {
+			const result = {
 				value: bunjaInstance.value,
 				mount: () => {
 					bunjaInstanceMap.forEach((instance) => instance.add());
@@ -55,6 +75,14 @@ var BunjaStore = class {
 				},
 				deps: Array.from(scopeInstanceMap.values()).map(({ value }) => value)
 			};
+			if (__DEV__) {
+				result.bunjaInstance = bunjaInstance;
+				devtoolsGlobalHook.emit("getCalled", {
+					storeId: this.id,
+					bunjaInstanceId: bunjaInstance.id
+				});
+			}
+			return result;
 		} finally {
 			bunjaFn.use = originalUse;
 		}
@@ -79,14 +107,14 @@ var BunjaStore = class {
 		const bunjaInstanceMap = /* @__PURE__ */ new Map();
 		const scopeInstanceMap = /* @__PURE__ */ new Map();
 		function getUse(map, addDep, getInstance) {
-			return (dep) => {
+			return ((dep) => {
 				const d = dep;
 				addDep(d);
 				if (map.has(d)) return map.get(d).value;
 				const instance = getInstance(d);
 				map.set(d, instance);
 				return instance.value;
-			};
+			});
 		}
 		const useScope = getUse(scopeInstanceMap, (dep) => this.#bakingContext.currentBunja.addScope(dep), (dep) => this.#getScopeInstance(dep, readScope(dep)));
 		const useBunja = getUse(bunjaInstanceMap, (dep) => this.#bakingContext.currentBunja.addParent(dep), (dep) => {
@@ -149,7 +177,14 @@ var BunjaStore = class {
 	#getScopeInstance(scope, value) {
 		const key = scope.hash(value);
 		const instanceMap = this.#scopes.get(scope) ?? this.#scopes.set(scope, /* @__PURE__ */ new Map()).get(scope);
-		return instanceMap.get(key) ?? instanceMap.set(key, new ScopeInstance(value, () => instanceMap.delete(key))).get(key);
+		return instanceMap.get(key) ?? instanceMap.set(key, this.#createScopeInstance(scope, key, value, () => {
+			instanceMap.delete(key);
+			if (__DEV__) devtoolsGlobalHook.emit("scopeInstanceUnmounted", {
+				storeId: this.id,
+				scope,
+				key
+			});
+		})).get(key);
 	}
 	#createBunjaInstance(id, value, effects, dispose) {
 		const effect = () => {
@@ -157,12 +192,28 @@ var BunjaStore = class {
 			return () => cleanups.forEach((cleanup) => cleanup());
 		};
 		const bunjaInstance = new BunjaInstance(id, value, effect, () => {
+			if (__DEV__) devtoolsGlobalHook.emit("bunjaInstanceUnmounted", {
+				storeId: this.id,
+				bunjaInstanceId: id
+			});
 			dispose();
 			delete this.#bunjas[id];
 		});
 		this.#bunjas[id] = bunjaInstance;
+		if (__DEV__) devtoolsGlobalHook.emit("bunjaInstanceMounted", {
+			storeId: this.id,
+			bunjaInstanceId: id
+		});
 		return bunjaInstance;
 	}
+	#createScopeInstance(scope, key, value, dispose) {
+		if (__DEV__) devtoolsGlobalHook.emit("scopeInstanceMounted", {
+			storeId: this.id,
+			scope,
+			key
+		});
+		return new ScopeInstance(value, dispose);
+	}
 };
 function createReadScopeFn(scopeValuePairs, readScope) {
 	const map = new Map(scopeValuePairs);
@@ -305,6 +356,30 @@ function toposort(nodes) {
 	return result;
 }
 const noop = () => {};
+let devtoolsGlobalHook;
+if (__DEV__) if (globalThis.__BUNJA_DEVTOOLS_GLOBAL_HOOK__) devtoolsGlobalHook = globalThis.__BUNJA_DEVTOOLS_GLOBAL_HOOK__;
+else {
+	devtoolsGlobalHook = {
+		stores: {},
+		listeners: {
+			storeCreated: /* @__PURE__ */ new Set(),
+			storeDisposed: /* @__PURE__ */ new Set(),
+			getCalled: /* @__PURE__ */ new Set(),
+			bunjaInstanceMounted: /* @__PURE__ */ new Set(),
+			bunjaInstanceUnmounted: /* @__PURE__ */ new Set(),
+			scopeInstanceMounted: /* @__PURE__ */ new Set(),
+			scopeInstanceUnmounted: /* @__PURE__ */ new Set()
+		},
+		emit: (type, event) => {
+			for (const fn of devtoolsGlobalHook.listeners[type]) fn(event);
+		},
+		on: (type, listener) => {
+			devtoolsGlobalHook.listeners[type].add(listener);
+			return () => devtoolsGlobalHook.listeners[type].delete(listener);
+		}
+	};
+	globalThis.__BUNJA_DEVTOOLS_GLOBAL_HOOK__ = devtoolsGlobalHook;
+}
 
 //#endregion
 export { Bunja, BunjaStore, Scope, bunja, createBunjaStore, createReadScopeFn, createScope, delayUnmount };

package/dist/bunja.cjs

@@ -1,4 +1,4 @@
-const require_bunja = require('./bunja-bhXTtuLY.cjs');
+const require_bunja = require('./bunja-CaephaLd.cjs');
 
 exports.Bunja = require_bunja.Bunja;
 exports.BunjaStore = require_bunja.BunjaStore;

package/dist/bunja.d.cts

@@ -1,2 +1,2 @@
-import { Bunja, BunjaEffectCallback, BunjaEffectFn, BunjaFn, BunjaForkFn, BunjaStore, BunjaStoreGetResult, BunjaUseFn, CreateBunjaStoreConfig, Dep, HashFn, ReadScope, Scope, ScopeValuePair, WrapInstanceFn, bunja, createBunjaStore, createReadScopeFn, createScope, delayUnmount } from "./bunja-P0kiwZQC.cjs";
-export { Bunja, BunjaEffectCallback, BunjaEffectFn, BunjaFn, BunjaForkFn, BunjaStore, BunjaStoreGetResult, BunjaUseFn, CreateBunjaStoreConfig, Dep, HashFn, ReadScope, Scope, ScopeValuePair, WrapInstanceFn, bunja, createBunjaStore, createReadScopeFn, createScope, delayUnmount };
+import { Bunja, BunjaDevtoolsEvent, BunjaDevtoolsEventType, BunjaDevtoolsGlobalHook, BunjaEffectCallback, BunjaEffectFn, BunjaFn, BunjaForkFn, BunjaStore, BunjaStoreGetResult, BunjaUseFn, CreateBunjaStoreConfig, Dep, HashFn, ReadScope, Scope, ScopeValuePair, WrapInstanceFn, bunja, createBunjaStore, createReadScopeFn, createScope, delayUnmount } from "./bunja-DXtbhAmJ.cjs";
+export { Bunja, BunjaDevtoolsEvent, BunjaDevtoolsEventType, BunjaDevtoolsGlobalHook, BunjaEffectCallback, BunjaEffectFn, BunjaFn, BunjaForkFn, BunjaStore, BunjaStoreGetResult, BunjaUseFn, CreateBunjaStoreConfig, Dep, HashFn, ReadScope, Scope, ScopeValuePair, WrapInstanceFn, bunja, createBunjaStore, createReadScopeFn, createScope, delayUnmount };

package/dist/bunja.d.ts

@@ -1,2 +1,2 @@
-import { Bunja, BunjaEffectCallback, BunjaEffectFn, BunjaFn, BunjaForkFn, BunjaStore, BunjaStoreGetResult, BunjaUseFn, CreateBunjaStoreConfig, Dep, HashFn, ReadScope, Scope, ScopeValuePair, WrapInstanceFn, bunja, createBunjaStore, createReadScopeFn, createScope, delayUnmount } from "./bunja-CqyhNWOx.js";
-export { Bunja, BunjaEffectCallback, BunjaEffectFn, BunjaFn, BunjaForkFn, BunjaStore, BunjaStoreGetResult, BunjaUseFn, CreateBunjaStoreConfig, Dep, HashFn, ReadScope, Scope, ScopeValuePair, WrapInstanceFn, bunja, createBunjaStore, createReadScopeFn, createScope, delayUnmount };
+import { Bunja, BunjaDevtoolsEvent, BunjaDevtoolsEventType, BunjaDevtoolsGlobalHook, BunjaEffectCallback, BunjaEffectFn, BunjaFn, BunjaForkFn, BunjaStore, BunjaStoreGetResult, BunjaUseFn, CreateBunjaStoreConfig, Dep, HashFn, ReadScope, Scope, ScopeValuePair, WrapInstanceFn, bunja, createBunjaStore, createReadScopeFn, createScope, delayUnmount } from "./bunja-D_SKFBCD.js";
+export { Bunja, BunjaDevtoolsEvent, BunjaDevtoolsEventType, BunjaDevtoolsGlobalHook, BunjaEffectCallback, BunjaEffectFn, BunjaFn, BunjaForkFn, BunjaStore, BunjaStoreGetResult, BunjaUseFn, CreateBunjaStoreConfig, Dep, HashFn, ReadScope, Scope, ScopeValuePair, WrapInstanceFn, bunja, createBunjaStore, createReadScopeFn, createScope, delayUnmount };

package/dist/bunja.js

@@ -1,3 +1,3 @@
-import { Bunja, BunjaStore, Scope, bunja, createBunjaStore, createReadScopeFn, createScope, delayUnmount } from "./bunja-BB7ru8D0.js";
+import { Bunja, BunjaStore, Scope, bunja, createBunjaStore, createReadScopeFn, createScope, delayUnmount } from "./bunja-EJqDbU0A.js";
 
 export { Bunja, BunjaStore, Scope, bunja, createBunjaStore, createReadScopeFn, createScope, delayUnmount };

package/dist/react.cjs

@@ -2,10 +2,11 @@
 
 
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_bunja = require('./bunja-bhXTtuLY.cjs');
+const require_bunja = require('./bunja-CaephaLd.cjs');
 const react = require_chunk.__toESM(require("react"));
 
 //#region react.ts
+const __DEV__ = process.env.NODE_ENV !== "production";
 const BunjaStoreContext = (0, react.createContext)(require_bunja.createBunjaStore());
 function BunjaStoreProvider({ children }) {
 	const [value] = (0, react.useState)(require_bunja.createBunjaStore);
@@ -30,13 +31,25 @@ const defaultReadScope = (scope) => {
 };
 function useBunja(bunja, scopeValuePairs) {
 	const store = (0, react.use)(BunjaStoreContext);
-	const readScope = scopeValuePairs ? require_bunja.createReadScopeFn(scopeValuePairs, (scope) => {
-		const context = scopeContextMap.get(scope);
-		return (0, react.use)(context);
-	}) : defaultReadScope;
-	const { value, mount, deps } = store.get(bunja, readScope);
-	(0, react.useEffect)(require_bunja.delayUnmount(mount), deps);
-	return value;
+	const readScope = scopeValuePairs ? require_bunja.createReadScopeFn(scopeValuePairs, defaultReadScope) : defaultReadScope;
+	if (__DEV__) {
+		const { value, mount, deps, bunjaInstance } = store.get(bunja, readScope);
+		(0, react.useEffect)(require_bunja.delayUnmount(mount), deps);
+		(0, react.useMemo)(() => ({
+			bunja,
+			scopeValuePairs,
+			bunjaInstance
+		}), [
+			bunja,
+			scopeValuePairs,
+			bunjaInstance
+		]);
+		return value;
+	} else {
+		const { value, mount, deps } = store.get(bunja, readScope);
+		(0, react.useEffect)(require_bunja.delayUnmount(mount), deps);
+		return value;
+	}
 }
 
 //#endregion

package/dist/react.d.cts

@@ -1,4 +1,4 @@
-import { Bunja, BunjaStore, HashFn, Scope, ScopeValuePair } from "./bunja-P0kiwZQC.cjs";
+import { Bunja, BunjaStore, HashFn, Scope, ScopeValuePair } from "./bunja-DXtbhAmJ.cjs";
 import { Context, PropsWithChildren } from "react";
 
 //#region react.d.ts

package/dist/react.d.ts

@@ -1,4 +1,4 @@
-import { Bunja, BunjaStore, HashFn, Scope, ScopeValuePair } from "./bunja-CqyhNWOx.js";
+import { Bunja, BunjaStore, HashFn, Scope, ScopeValuePair } from "./bunja-D_SKFBCD.js";
 import { Context, PropsWithChildren } from "react";
 
 //#region react.d.ts

package/dist/react.js

@@ -1,10 +1,11 @@
 "use client";
 
 
-import { createBunjaStore, createReadScopeFn, createScope, delayUnmount } from "./bunja-BB7ru8D0.js";
-import { createContext, createElement, use, useEffect, useState } from "react";
+import { createBunjaStore, createReadScopeFn, createScope, delayUnmount } from "./bunja-EJqDbU0A.js";
+import { createContext, createElement, use, useEffect, useMemo, useState } from "react";
 
 //#region react.ts
+const __DEV__ = process.env.NODE_ENV !== "production";
 const BunjaStoreContext = createContext(createBunjaStore());
 function BunjaStoreProvider({ children }) {
 	const [value] = useState(createBunjaStore);
@@ -29,13 +30,25 @@ const defaultReadScope = (scope) => {
 };
 function useBunja(bunja, scopeValuePairs) {
 	const store = use(BunjaStoreContext);
-	const readScope = scopeValuePairs ? createReadScopeFn(scopeValuePairs, (scope) => {
-		const context = scopeContextMap.get(scope);
-		return use(context);
-	}) : defaultReadScope;
-	const { value, mount, deps } = store.get(bunja, readScope);
-	useEffect(delayUnmount(mount), deps);
-	return value;
+	const readScope = scopeValuePairs ? createReadScopeFn(scopeValuePairs, defaultReadScope) : defaultReadScope;
+	if (__DEV__) {
+		const { value, mount, deps, bunjaInstance } = store.get(bunja, readScope);
+		useEffect(delayUnmount(mount), deps);
+		useMemo(() => ({
+			bunja,
+			scopeValuePairs,
+			bunjaInstance
+		}), [
+			bunja,
+			scopeValuePairs,
+			bunjaInstance
+		]);
+		return value;
+	} else {
+		const { value, mount, deps } = store.get(bunja, readScope);
+		useEffect(delayUnmount(mount), deps);
+		return value;
+	}
 }
 
 //#endregion

package/dist/solid.cjs

@@ -1,5 +1,5 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_bunja = require('./bunja-bhXTtuLY.cjs');
+const require_bunja = require('./bunja-CaephaLd.cjs');
 const solid_js = require_chunk.__toESM(require("solid-js"));
 
 //#region solid.ts
@@ -36,11 +36,11 @@ const defaultReadScope = (scope) => {
 };
 function useBunja(bunja, scopeValuePairs) {
 	const store = (0, solid_js.useContext)(BunjaStoreContext);
-	const readScope = scopeValuePairs ? require_bunja.createReadScopeFn(scopeValuePairs, (scope) => {
-		const context = scopeContextMap.get(scope);
-		return access((0, solid_js.useContext)(context));
-	}) : defaultReadScope;
-	const entry = (0, solid_js.createMemo)(() => store.get(access(bunja), readScope));
+	const readScope = (0, solid_js.createMemo)(() => {
+		const pairs = access(scopeValuePairs);
+		return pairs ? require_bunja.createReadScopeFn(pairs, defaultReadScope) : defaultReadScope;
+	});
+	const entry = (0, solid_js.createMemo)(() => store.get(access(bunja), readScope()));
 	(0, solid_js.createEffect)(() => {
 		const cleanup = entry().mount();
 		(0, solid_js.onCleanup)(() => setTimeout(cleanup));

package/dist/solid.d.cts

@@ -1,4 +1,4 @@
-import { Bunja, BunjaStore, HashFn, Scope, ScopeValuePair } from "./bunja-P0kiwZQC.cjs";
+import { Bunja, BunjaStore, HashFn, Scope, ScopeValuePair } from "./bunja-DXtbhAmJ.cjs";
 import { Accessor, Context, JSX, ParentProps } from "solid-js";
 
 //#region solid.d.ts
@@ -9,6 +9,6 @@ declare function BunjaStoreProvider(props: ParentProps): JSX.Element;
 declare const scopeContextMap: Map<Scope<unknown>, Context<MaybeAccessor<unknown>>>;
 declare function bindScope<T>(scope: Scope<T>, context: Context<MaybeAccessor<T>>): void;
 declare function createScopeFromContext<T>(context: Context<T>, hash?: HashFn<AccessedValue<T>>): Scope<AccessedValue<T>>;
-declare function useBunja<T>(bunja: MaybeAccessor<Bunja<T>>, scopeValuePairs?: ScopeValuePair<any>[]): Accessor<T>;
+declare function useBunja<T>(bunja: MaybeAccessor<Bunja<T>>, scopeValuePairs?: MaybeAccessor<ScopeValuePair<any>[]>): Accessor<T>;
 //#endregion
 export { BunjaStoreContext, BunjaStoreProvider, bindScope, createScopeFromContext, scopeContextMap, useBunja };

package/dist/solid.d.ts

@@ -1,4 +1,4 @@
-import { Bunja, BunjaStore, HashFn, Scope, ScopeValuePair } from "./bunja-CqyhNWOx.js";
+import { Bunja, BunjaStore, HashFn, Scope, ScopeValuePair } from "./bunja-D_SKFBCD.js";
 import { Accessor, Context, JSX, ParentProps } from "solid-js";
 
 //#region solid.d.ts
@@ -9,6 +9,6 @@ declare function BunjaStoreProvider(props: ParentProps): JSX.Element;
 declare const scopeContextMap: Map<Scope<unknown>, Context<MaybeAccessor<unknown>>>;
 declare function bindScope<T>(scope: Scope<T>, context: Context<MaybeAccessor<T>>): void;
 declare function createScopeFromContext<T>(context: Context<T>, hash?: HashFn<AccessedValue<T>>): Scope<AccessedValue<T>>;
-declare function useBunja<T>(bunja: MaybeAccessor<Bunja<T>>, scopeValuePairs?: ScopeValuePair<any>[]): Accessor<T>;
+declare function useBunja<T>(bunja: MaybeAccessor<Bunja<T>>, scopeValuePairs?: MaybeAccessor<ScopeValuePair<any>[]>): Accessor<T>;
 //#endregion
 export { BunjaStoreContext, BunjaStoreProvider, bindScope, createScopeFromContext, scopeContextMap, useBunja };

package/dist/solid.js

@@ -1,4 +1,4 @@
-import { createBunjaStore, createReadScopeFn, createScope } from "./bunja-BB7ru8D0.js";
+import { createBunjaStore, createReadScopeFn, createScope } from "./bunja-EJqDbU0A.js";
 import { createComponent, createContext, createEffect, createMemo, createRoot, getOwner, onCleanup, useContext } from "solid-js";
 
 //#region solid.ts
@@ -35,11 +35,11 @@ const defaultReadScope = (scope) => {
 };
 function useBunja(bunja, scopeValuePairs) {
 	const store = useContext(BunjaStoreContext);
-	const readScope = scopeValuePairs ? createReadScopeFn(scopeValuePairs, (scope) => {
-		const context = scopeContextMap.get(scope);
-		return access(useContext(context));
-	}) : defaultReadScope;
-	const entry = createMemo(() => store.get(access(bunja), readScope));
+	const readScope = createMemo(() => {
+		const pairs = access(scopeValuePairs);
+		return pairs ? createReadScopeFn(pairs, defaultReadScope) : defaultReadScope;
+	});
+	const entry = createMemo(() => store.get(access(bunja), readScope()));
 	createEffect(() => {
 		const cleanup = entry().mount();
 		onCleanup(() => setTimeout(cleanup));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bunja",
   "type": "module",
-  "version": "2.0.0-alpha.8",
+  "version": "2.0.0",
   "description": "State Lifetime Manager",
   "main": "dist/bunja.cjs",
   "module": "dist/bunja.js",
@@ -52,6 +52,7 @@
     }
   },
   "scripts": {
+    "clean": "rm -rf ./dist",
     "build": "tsdown"
   },
   "keywords": [

package/react.ts

@@ -7,6 +7,7 @@ import {
   type PropsWithChildren,
   use,
   useEffect,
+  useMemo,
   useState,
 } from "react";
 import {
@@ -22,6 +23,10 @@ import {
   type ScopeValuePair,
 } from "./bunja.ts";
 
+// @ts-ignore dev
+// deno-lint-ignore no-process-global
+const __DEV__ = process.env.NODE_ENV !== "production";
+
 export const BunjaStoreContext: Context<BunjaStore> = createContext(
   createBunjaStore(),
 );
@@ -59,12 +64,19 @@ export function useBunja<T>(
 ): T {
   const store = use(BunjaStoreContext);
   const readScope = scopeValuePairs
-    ? createReadScopeFn(scopeValuePairs, <T>(scope: Scope<T>) => {
-      const context = scopeContextMap.get(scope as Scope<unknown>)!;
-      return use(context) as T;
-    })
+    ? createReadScopeFn(scopeValuePairs, defaultReadScope)
     : defaultReadScope;
-  const { value, mount, deps } = store.get(bunja, readScope);
-  useEffect(delayUnmount(mount), deps);
-  return value;
+  if (__DEV__) {
+    const { value, mount, deps, bunjaInstance } = store.get(bunja, readScope);
+    useEffect(delayUnmount(mount), deps);
+    useMemo(
+      () => ({ bunja, scopeValuePairs, bunjaInstance }),
+      [bunja, scopeValuePairs, bunjaInstance],
+    );
+    return value;
+  } else {
+    const { value, mount, deps } = store.get(bunja, readScope);
+    useEffect(delayUnmount(mount), deps);
+    return value;
+  }
 }

package/solid.ts

@@ -83,16 +83,16 @@ const defaultReadScope: ReadScope = <T>(scope: Scope<T>) => {
 
 export function useBunja<T>(
   bunja: MaybeAccessor<Bunja<T>>,
-  scopeValuePairs?: ScopeValuePair<any>[],
+  scopeValuePairs?: MaybeAccessor<ScopeValuePair<any>[]>,
 ): Accessor<T> {
   const store = useContext(BunjaStoreContext);
-  const readScope = scopeValuePairs
-    ? createReadScopeFn(scopeValuePairs, <T>(scope: Scope<T>) => {
-      const context = scopeContextMap.get(scope as Scope<unknown>)!;
-      return access(useContext(context)) as T;
-    })
-    : defaultReadScope;
-  const entry = createMemo(() => store.get(access(bunja), readScope));
+  const readScope = createMemo(() => {
+    const pairs = access(scopeValuePairs);
+    return pairs
+      ? createReadScopeFn(pairs, defaultReadScope)
+      : defaultReadScope;
+  });
+  const entry = createMemo(() => store.get(access(bunja), readScope()));
   createEffect(() => {
     const cleanup = entry().mount();
     onCleanup(() => setTimeout(cleanup));