bunja 0.1.0 → 2.0.0-alpha.1

package/README.md

@@ -1,3 +1,10 @@
+> [!WARNING]
+> You are viewing the `v2` branch.
+>
+> The current stable version is `1.x.x`.\
+> If you want to view the code for that version,
+> please [switch to the `v1` branch](https://github.com/disjukr/bunja/tree/v1).
+
 # Bunja
 
 Bunja is lightweight State Lifetime Manager.\
@@ -33,21 +40,21 @@ You can use `bunja` to define a state with a finite lifetime and use the `useBun
 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` field.
+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 countBunja = bunja(() => {
   const countAtom = atom(0);
-  return {
-    countAtom,
-    [bunja.effect]() {
-      console.log("mounted");
-      return () => console.log("unmounted");
-    },
-  };
+
+  bunja.effect(() => {
+    console.log("mounted");
+    return () => console.log("unmounted");
+  });
+
+  return { countAtom };
 });
 
 function MyComponent() {
@@ -67,7 +74,7 @@ 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([], () => {
+const websocketBunja = bunja(() => {
   let socket;
   const send = (message) => socket.send(JSON.stringify(message));
 
@@ -77,35 +84,35 @@ const websocketBunja = bunja([], () => {
     return () => emitter.off("message", handler);
   };
 
-  return {
-    send,
-    on,
-    [bunja.effect]() {
-      socket = new WebSocket("...");
-      socket.onmessage = (e) => emitter.emit("message", JSON.parse(e.data));
-      return () => socket.close();
-    },
-  };
+  bunja.effect(() => {
+    socket = new WebSocket("...");
+    socket.onmessage = (e) => emitter.emit("message", JSON.parse(e.data));
+    return () => socket.close();
+  });
+
+  return { send, on };
 });
 
-const resourceFooBunja = bunja([websocketBunja], ({ send, on }) => {
+const resourceFooBunja = bunja(() => {
+  const { send, on } = bunja.use(websocketBunja);
   const resourceFooAtom = atom();
-  return {
-    resourceFooAtom,
-    [bunja.effect]() {
-      const off = on((message) => {
-        if (message.type === "foo") store.set(resourceAtom, message.value);
-      });
-      send("subscribe-foo");
-      return () => {
-        send("unsubscribe-foo");
-        off();
-      };
-    },
-  };
+
+  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([websocketBunja], ({ send, on }) => {
+const resourceBarBunja = bunja(() => {
+  const { send, on } = bunja.use(websocketBunja);
   const resourceBarAtom = atom();
   // ...
 });
@@ -144,11 +151,14 @@ import { bunja, createScope } from "bunja";
 
 const UrlScope = createScope();
 
-const fetchBunja = bunja([UrlScope], (url) => {
+const fetchBunja = bunja(() => {
+  const url = bunja.use(UrlScope);
+
   const queryAtom = atomWithQuery((get) => ({
     queryKey: [url],
     queryFn: async () => (await fetch(url)).json(),
   }));
+
   return { queryAtom };
 });
 ```
@@ -168,23 +178,26 @@ const UrlContext = createContext("https://example.com/");
 const UrlScope = createScope();
 bindScope(UrlScope, UrlContext);
 
-const fetchBunja = bunja([UrlScope], (url) => {
+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.Provider value="https://example.com/foo">
+      <UrlContext value="https://example.com/foo">
         <ChildComponent />
-      </UrlContext.Provider>
-      <UrlContext.Provider value="https://example.com/bar">
+      </UrlContext>
+      <UrlContext value="https://example.com/bar">
         <ChildComponent />
-      </UrlContext.Provider>
+      </UrlContext>
     </>
   );
 }

package/bunja.ts

@@ -1,231 +1,353 @@
-export type Dep<T> = Bunja<T> | Scope<T>;
+export interface BunjaFn {
+  <T>(init: () => T): Bunja<T>;
+  use: BunjaUseFn;
+  effect: BunjaEffectFn;
+}
+export const bunja: BunjaFn = bunjaFn;
+function bunjaFn<T>(init: () => T): Bunja<T> {
+  return new Bunja(init);
+}
+bunjaFn.use = invalidUse as BunjaUseFn;
+bunjaFn.effect = invalidEffect as BunjaEffectFn;
 
-const bunjaEffectSymbol: unique symbol = Symbol("Bunja.effect");
-type BunjaEffectSymbol = typeof bunjaEffectSymbol;
+export type BunjaUseFn = <T>(dep: Dep<T>) => T;
+export type BunjaEffectFn = (callback: BunjaEffectCallback) => void;
+export type BunjaEffectCallback = () => (() => void) | void;
 
-export class Bunja<T> {
-  public static readonly bunjas: Bunja<any>[] = [];
-  public readonly id: number;
-  public debugLabel: string = "";
-  constructor(
-    public deps: Dep<any>[], // one depth dependencies
-    public parents: Bunja<any>[], // one depth parents
-    public relatedBunjas: Bunja<any>[], // toposorted parents without self
-    public relatedScopes: Scope<any>[], // deduped
-    public init: (...args: any[]) => T & BunjaValue,
-  ) {
-    this.id = Bunja.bunjas.length;
-    Bunja.bunjas.push(this);
-  }
-  static readonly effect: BunjaEffectSymbol = bunjaEffectSymbol;
-  toString(): string {
-    const { id, debugLabel } = this;
-    return `[Bunja:${id}${debugLabel && ` - ${debugLabel}`}]`;
-  }
+export function createScope<T>(hash?: HashFn<T>): Scope<T> {
+  return new Scope(hash);
 }
 
-export class Scope<T> {
-  public static readonly scopes: Scope<any>[] = [];
-  public readonly id: number;
-  public debugLabel: string = "";
-  constructor() {
-    this.id = Scope.scopes.length;
-    Scope.scopes.push(this);
-  }
-  toString(): string {
-    const { id, debugLabel } = this;
-    return `[Scope:${id}${debugLabel && ` - ${debugLabel}`}]`;
-  }
+export function createBunjaStore(): BunjaStore {
+  return new BunjaStore();
 }
 
-export type ReadScope = <T>(scope: Scope<T>) => T;
+export type Dep<T> = Bunja<T> | Scope<T>;
+
+function invalidUse() {
+  throw new Error(
+    "`bunja.use` can only be used inside a bunja init function.",
+  );
+}
+function invalidEffect() {
+  throw new Error(
+    "`bunja.effect` can only be used inside a bunja init function.",
+  );
+}
+
+interface BunjaStoreGetContext {
+  bunjaInstance: BunjaInstance;
+  bunjaInstanceMap: BunjaInstanceMap;
+  scopeInstanceMap: ScopeInstanceMap;
+}
+
+type BunjaInstanceMap = Map<Bunja<unknown>, BunjaInstance>;
+type ScopeInstanceMap = Map<Scope<unknown>, ScopeInstance>;
+
+interface BunjaBakingContext {
+  currentBunja: Bunja<unknown>;
+}
 
 export class BunjaStore {
   #bunjas: Record<string, BunjaInstance> = {};
-  #scopes: Map<Scope<any>, Map<any, ScopeInstance>> = new Map();
-  get<T>(
-    bunja: Bunja<T>,
-    readScope: ReadScope,
-  ): {
-    value: T;
-    mount: () => void;
-    deps: any[];
-  } {
+  #scopes: Map<Scope<unknown>, Map<unknown, ScopeInstance>> = new Map();
+  #bakingContext: BunjaBakingContext | undefined;
+  dispose(): void {
+    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 = new Map();
+  }
+  get<T>(bunja: Bunja<T>, readScope: ReadScope): BunjaStoreGetResult<T> {
+    const originalUse = bunjaFn.use;
+    try {
+      const { bunjaInstance, bunjaInstanceMap, scopeInstanceMap } = bunja.baked
+        ? this.#getBaked(bunja, readScope)
+        : this.#getUnbaked(bunja, readScope);
+      return {
+        value: bunjaInstance.value as T,
+        mount: () => {
+          bunjaInstanceMap.forEach((instance) => instance.add());
+          bunjaInstance.add();
+          scopeInstanceMap.forEach((instance) => instance.add());
+          const unmount = () => {
+            setTimeout(() => {
+              bunjaInstanceMap.forEach((instance) => instance.sub());
+              bunjaInstance.sub();
+              scopeInstanceMap.forEach((instance) => instance.sub());
+            });
+          };
+          return unmount;
+        },
+        deps: Array.from(scopeInstanceMap.values()).map(({ value }) => value),
+      };
+    } finally {
+      bunjaFn.use = originalUse;
+    }
+  }
+  #getBaked<T>(bunja: Bunja<T>, readScope: ReadScope): BunjaStoreGetContext {
     const scopeInstanceMap = new Map(
       bunja.relatedScopes.map((scope) => [
         scope,
         this.#getScopeInstance(scope, readScope(scope)),
       ]),
     );
-    const bunjaInstance = this.#getBunjaInstance(bunja, scopeInstanceMap);
-    const { relatedBunjaInstanceMap } = bunjaInstance; // toposorted
-    return {
-      value: bunjaInstance.value as T,
-      mount() {
-        relatedBunjaInstanceMap.forEach((related) => related.add());
-        bunjaInstance.add();
-        scopeInstanceMap.forEach((scope) => scope.add());
-        return function unmount(): void {
-          // concern: reverse order?
-          relatedBunjaInstanceMap.forEach((related) => related.sub());
-          bunjaInstance.sub();
-          scopeInstanceMap.forEach((scope) => scope.sub());
-        };
-      },
-      deps: Array.from(scopeInstanceMap.values()).map(({ value }) => value),
-    };
-  }
-  #getBunjaInstance(
-    bunja: Bunja<any>,
-    scopeInstanceMap: Map<Scope<any>, ScopeInstance>,
-  ): BunjaInstance {
-    const localScopeInstanceMap = new Map(
-      bunja.relatedScopes.map((scope) => [scope, scopeInstanceMap.get(scope)!]),
-    );
-    const scopeInstanceIds = Array.from(localScopeInstanceMap.values())
-      .map(({ instanceId }) => instanceId)
-      .sort((a, b) => a - b);
-    const bunjaInstanceId = `${bunja.id}:${scopeInstanceIds.join(",")}`;
-    if (this.#bunjas[bunjaInstanceId]) return this.#bunjas[bunjaInstanceId];
-    const relatedBunjaInstanceMap = new Map(
+    const bunjaInstanceMap = new Map(
       bunja.relatedBunjas.map((relatedBunja) => [
         relatedBunja,
         this.#getBunjaInstance(relatedBunja, scopeInstanceMap),
       ]),
     );
-    const args = bunja.deps.map((dep) => {
-      if (dep instanceof Bunja) return relatedBunjaInstanceMap.get(dep)!.value;
-      if (dep instanceof Scope) return localScopeInstanceMap.get(dep)!.value;
-      throw new Error("Invalid dependency");
-    });
-    const bunjaInstance = new BunjaInstance(
-      () => delete this.#bunjas[bunjaInstanceId],
-      bunjaInstanceId,
-      relatedBunjaInstanceMap,
-      bunja.init.apply(bunja, args),
+    bunjaFn.use = <T>(dep: Dep<T>) => {
+      if (dep instanceof Bunja) {
+        return bunjaInstanceMap.get(dep as Bunja<unknown>)!.value as T;
+      }
+      if (dep instanceof Scope) {
+        return scopeInstanceMap.get(dep as Scope<unknown>)!.value as T;
+      }
+      throw new Error("`bunja.use` can only be used with Bunja or Scope.");
+    };
+    const bunjaInstance = this.#getBunjaInstance(bunja, scopeInstanceMap);
+    return { bunjaInstance, bunjaInstanceMap, scopeInstanceMap };
+  }
+  #getUnbaked<T>(bunja: Bunja<T>, readScope: ReadScope): BunjaStoreGetContext {
+    const bunjaInstanceMap: BunjaInstanceMap = new Map();
+    const scopeInstanceMap: ScopeInstanceMap = new Map();
+    function getUse<D extends Dep<unknown>, I extends { value: unknown }>(
+      map: Map<D, I>,
+      addDep: (D: D) => void,
+      getInstance: (dep: D) => I,
+    ) {
+      return ((dep) => {
+        const d = dep as D;
+        addDep(d);
+        if (map.has(d)) return map.get(d)!.value as T;
+        const instance = getInstance(d);
+        map.set(d, instance);
+        return instance.value as T;
+      }) as <T>(dep: Dep<T>) => T;
+    }
+    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) => {
+        if (dep.baked) {
+          for (const scope of dep.relatedScopes) useScope(scope);
+        }
+        return this.#getBunjaInstance(dep, scopeInstanceMap);
+      },
     );
-    this.#bunjas[bunjaInstanceId] = bunjaInstance;
-    return bunjaInstance;
+    bunjaFn.use = <T>(dep: Dep<T>) => {
+      if (dep instanceof Bunja) return useBunja(dep) as T;
+      if (dep instanceof Scope) return useScope(dep) as T;
+      throw new Error("`bunja.use` can only be used with Bunja or Scope.");
+    };
+    try {
+      this.#bakingContext = { currentBunja: bunja };
+      const bunjaInstance = this.#getBunjaInstance(bunja, scopeInstanceMap);
+      return { bunjaInstance, bunjaInstanceMap, scopeInstanceMap };
+    } finally {
+      this.#bakingContext = undefined;
+    }
+  }
+  #getBunjaInstance<T>(
+    bunja: Bunja<T>,
+    scopeInstanceMap: ScopeInstanceMap,
+  ): BunjaInstance {
+    const originalEffect = bunjaFn.effect;
+    const prevBunja = this.#bakingContext?.currentBunja;
+    try {
+      const effects: BunjaEffectCallback[] = [];
+      bunjaFn.effect = (callback: BunjaEffectCallback) => {
+        effects.push(callback);
+      };
+      if (this.#bakingContext) this.#bakingContext.currentBunja = bunja;
+      if (bunja.baked) {
+        const id = bunja.calcInstanceId(scopeInstanceMap);
+        if (id in this.#bunjas) return this.#bunjas[id];
+        const bunjaInstanceValue = bunja.init();
+        return this.#createBunjaInstance(id, bunjaInstanceValue, effects);
+      } else {
+        const bunjaInstanceValue = bunja.init();
+        bunja.bake();
+        const id = bunja.calcInstanceId(scopeInstanceMap);
+        return this.#createBunjaInstance(id, bunjaInstanceValue, effects);
+      }
+    } finally {
+      bunjaFn.effect = originalEffect;
+      if (this.#bakingContext) this.#bakingContext.currentBunja = prevBunja!;
+    }
   }
-  #getScopeInstance(scope: Scope<any>, value: any): ScopeInstance {
-    const scopeInstanceMap = this.#scopes.get(scope) ??
+  #getScopeInstance(scope: Scope<unknown>, value: unknown): ScopeInstance {
+    const key = scope.hash(value);
+    const instanceMap = this.#scopes.get(scope) ??
       this.#scopes.set(scope, new Map()).get(scope)!;
-    const init = () =>
-      new ScopeInstance(
-        () => scopeInstanceMap.delete(value),
-        ScopeInstance.counter++,
-        scope,
-        value,
-      );
-    return (
-      scopeInstanceMap.get(value) ??
-        scopeInstanceMap.set(value, init()).get(value)!
+    return instanceMap.get(key) ??
+      instanceMap.set(
+        key,
+        new ScopeInstance(value, () => instanceMap.delete(key)),
+      ).get(key)!;
+  }
+  #createBunjaInstance(
+    id: string,
+    value: unknown,
+    effects: BunjaEffectCallback[],
+  ): BunjaInstance {
+    const effect = () => {
+      const cleanups = effects
+        .map((effect) => effect())
+        .filter(Boolean) as (() => void)[];
+      return () => cleanups.forEach((cleanup) => cleanup());
+    };
+    const dispose = () => delete this.#bunjas[id];
+    const bunjaInstance = new BunjaInstance(id, value, effect, dispose);
+    this.#bunjas[id] = bunjaInstance;
+    return bunjaInstance;
+  }
+}
+
+export type ReadScope = <T>(scope: Scope<T>) => T;
+
+export interface BunjaStoreGetResult<T> {
+  value: T;
+  mount: () => () => void;
+  deps: unknown[];
+}
+
+export class Bunja<T> {
+  private static counter: number = 0;
+  readonly id: string = String(Bunja.counter++);
+  debugLabel: string = "";
+  #phase: BunjaPhase = { baked: false, parents: new Set(), scopes: new Set() };
+  constructor(public init: () => T) {}
+  get baked(): boolean {
+    return this.#phase.baked;
+  }
+  get parents(): Bunja<unknown>[] {
+    if (this.#phase.baked) return this.#phase.parents;
+    return Array.from(this.#phase.parents);
+  }
+  get relatedBunjas(): Bunja<unknown>[] {
+    if (!this.#phase.baked) throw new Error("Bunja is not baked yet.");
+    return this.#phase.relatedBunjas;
+  }
+  get relatedScopes(): Scope<unknown>[] {
+    if (!this.#phase.baked) throw new Error("Bunja is not baked yet.");
+    return this.#phase.relatedScopes;
+  }
+  addParent(bunja: Bunja<unknown>): void {
+    if (this.#phase.baked) return;
+    this.#phase.parents.add(bunja);
+  }
+  addScope(scope: Scope<unknown>): void {
+    if (this.#phase.baked) return;
+    this.#phase.scopes.add(scope);
+  }
+  bake(): void {
+    if (this.#phase.baked) throw new Error("Bunja is already baked.");
+    const scopes = this.#phase.scopes;
+    const parents = this.parents;
+    const relatedBunjas = toposort(parents);
+    const relatedScopes = Array.from(
+      new Set([
+        ...relatedBunjas.flatMap((bunja) => bunja.relatedScopes),
+        ...scopes,
+      ]),
+    );
+    this.#phase = { baked: true, parents, relatedBunjas, relatedScopes };
+  }
+  calcInstanceId(scopeInstanceMap: Map<Scope<unknown>, ScopeInstance>): string {
+    const scopeInstanceIds = this.relatedScopes.map(
+      (scope) => scopeInstanceMap.get(scope)!.id,
     );
+    return `${this.id}:${scopeInstanceIds.join(",")}`;
+  }
+  toString(): string {
+    const { id, debugLabel } = this;
+    return `[Bunja:${id}${debugLabel && ` - ${debugLabel}`}]`;
   }
 }
 
-export const createBunjaStore = (): BunjaStore => new BunjaStore();
+type BunjaPhase = BunjaPhaseUnbaked | BunjaPhaseBaked;
 
-export type BunjaEffectFn = () => () => void;
-export interface BunjaValue {
-  [Bunja.effect]?: BunjaEffectFn;
+interface BunjaPhaseUnbaked {
+  readonly baked: false;
+  readonly parents: Set<Bunja<unknown>>;
+  readonly scopes: Set<Scope<unknown>>;
 }
 
-function bunjaImpl<T, const U extends any[]>(
-  deps: { [K in keyof U]: Dep<U[K]> },
-  init: (...args: U) => T & BunjaValue,
-): Bunja<T> {
-  const parents = deps.filter((dep) => dep instanceof Bunja) as Bunja<any>[];
-  const scopes = deps.filter((dep) => dep instanceof Scope) as Scope<any>[];
-  const relatedBunjas = toposort(parents);
-  const relatedScopes = Array.from(
-    new Set([...scopes, ...parents.flatMap((parent) => parent.relatedScopes)]),
-  );
-  return new Bunja(deps, parents, relatedBunjas, relatedScopes, init as any);
-}
-bunjaImpl.effect = Bunja.effect;
-
-export const bunja: {
-  <T>(deps: [], init: () => T & BunjaValue): Bunja<T>;
-  <T, U>(deps: [Dep<U>], init: (u: U) => T & BunjaValue): Bunja<T>;
-  <T, U, V>(
-    deps: [Dep<U>, Dep<V>],
-    init: (u: U, v: V) => T & BunjaValue,
-  ): Bunja<T>;
-  <T, U, V, W>(
-    deps: [Dep<U>, Dep<V>, Dep<W>],
-    init: (u: U, v: V, w: W) => T & BunjaValue,
-  ): Bunja<T>;
-  <T, U, V, W, X>(
-    deps: [Dep<U>, Dep<V>, Dep<W>, Dep<X>],
-    init: (u: U, v: V, w: W, x: X) => T & BunjaValue,
-  ): Bunja<T>;
-  <T, U, V, W, X, Y>(
-    deps: [Dep<U>, Dep<V>, Dep<W>, Dep<X>, Dep<Y>],
-    init: (u: U, v: V, w: W, x: X, y: Y) => T & BunjaValue,
-  ): Bunja<T>;
-  <T, U, V, W, X, Y, Z>(
-    deps: [Dep<U>, Dep<V>, Dep<W>, Dep<X>, Dep<Y>, Dep<Z>],
-    init: (u: U, v: V, w: W, x: X, y: Y, z: Z) => T & BunjaValue,
-  ): Bunja<T>;
-  readonly effect: BunjaEffectSymbol;
-} = bunjaImpl;
-
-export function createScope<T>(): Scope<T> {
-  return new Scope();
+interface BunjaPhaseBaked {
+  readonly baked: true;
+  readonly parents: Bunja<unknown>[];
+  readonly relatedBunjas: Bunja<unknown>[];
+  readonly relatedScopes: Scope<unknown>[];
 }
 
-abstract class RefCounter {
-  #disposed = false;
-  #count = 0;
-  add() {
-    this.#count++;
-  }
-  sub() {
-    this.#count--;
-    setTimeout(() => {
-      if (this.#disposed) return;
-      if (this.#count < 1) {
-        this.#disposed = true;
-        this.dispose();
-      }
-    });
+export class Scope<T> {
+  private static counter: number = 0;
+  readonly id: string = String(Scope.counter++);
+  debugLabel: string = "";
+  constructor(public readonly hash: HashFn<T> = Scope.identity) {}
+  private static identity<T>(x: T): T {
+    return x;
+  }
+  toString(): string {
+    const { id, debugLabel } = this;
+    return `[Scope:${id}${debugLabel && ` - ${debugLabel}`}]`;
   }
-  abstract dispose(): void;
 }
 
+export type HashFn<T> = (value: T) => unknown;
+
 const noop = () => {};
+abstract class RefCounter {
+  #count: number = 0;
+  abstract dispose(): void;
+  add(): void {
+    ++this.#count;
+  }
+  sub(): void {
+    --this.#count;
+    if (this.#count < 1) {
+      this.dispose();
+      this.dispose = noop;
+    }
+  }
+}
+
 class BunjaInstance extends RefCounter {
   #cleanup: (() => void) | undefined;
-  #dispose: () => void;
   constructor(
-    dispose: () => void,
-    public instanceId: string,
-    public relatedBunjaInstanceMap: Map<Bunja<any>, BunjaInstance>,
-    public value: BunjaValue,
+    public readonly id: string,
+    public readonly value: unknown,
+    public readonly effect: BunjaEffectCallback,
+    private readonly _dispose: () => void,
   ) {
     super();
-    this.#dispose = () => {
-      this.#cleanup?.();
-      dispose();
-    };
   }
-  override add() {
-    this.#cleanup ??= this.value[Bunja.effect]?.() ?? noop;
-    super.add();
+  override dispose(): void {
+    this.#cleanup?.();
+    this._dispose();
   }
-  dispose() {
-    this.#dispose();
+  override add(): void {
+    this.#cleanup ??= this.effect() ?? noop;
+    super.add();
   }
 }
 
 class ScopeInstance extends RefCounter {
-  public static counter = 0;
+  private static counter: number = 0;
+  readonly id: string = String(ScopeInstance.counter++);
   constructor(
-    public dispose: () => void,
-    public instanceId: number,
-    public scope: Scope<any>,
-    public value: any,
+    public readonly value: unknown,
+    public readonly dispose: () => void,
   ) {
     super();
   }