bunja 0.0.3 → 0.0.5

package/README.md

@@ -25,7 +25,7 @@ You can typically use jotai or something, and when lifetime management becomes n
 
 ## How to use
 
-Bunja provides two functions: `bunja` and `useBunja`.\
+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
@@ -33,15 +33,18 @@ 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 clean up resources when the bunja's lifetime ends, you can use the `Symbol.dispose` field.
+If you want to trigger effects when the lifetime of a bunja starts and ends, you can use the `Bunja.effect` field.
 
 ```ts
+import { bunja, Bunja, useBunja } from "bunja";
+
 const countBunja = bunja([], () => {
   const countAtom = atom(0);
   return {
     countAtom,
-    [Symbol.dispose]() {
-      console.log("disposed");
+    [Bunja.effect]() {
+      console.log("mounted");
+      return () => console.log("unmounted");
     },
   };
 });
@@ -53,7 +56,4 @@ function MyComponent() {
 }
 ```
 
-This code snippet defines a bunja that creates a `countAtom`.\
-The `Symbol.dispose` method is used when the bunja instance is no longer referenced by any component in the render tree, allowing you to clean up resources appropriately.
-
 TODO: context

package/bunja.ts

@@ -1,34 +1,55 @@
 import * as React from "react";
 
-disposePolyfill: {
-  (Symbol as any).dispose ??= Symbol("Symbol.dispose");
-}
-
-type Dep<T> = React.Context<T> | Bunja<T>;
+export type Dep<T> = React.Context<T> | Bunja<T>;
 
-class Bunja<T> {
+export class Bunja<T> {
   constructor(
     public id: number,
     public deps: Dep<any>[],
     public contexts: React.Context<any>[],
-    public init: (...args: any[]) => T
+    public init: (...args: any[]) => T & BunjaValue
   ) {}
+  static readonly effect = Symbol("Bunja.effect");
+}
+
+export class BunjaStore {
+  #bunjas: Record<string, BunjaInstance> = {};
+  get(bunja: Bunja<any>, biid: string, args: any[]) {
+    return (this.#bunjas[biid] ??= new BunjaInstance(
+      this,
+      biid,
+      bunja.init(...args)
+    ));
+  }
+  delete(biid: string) {
+    delete this.#bunjas[biid];
+  }
 }
 
-const bunjas: Record<string, BunjaInstance<any>> = {};
-export function bunja<T>(deps: [], init: () => T): Bunja<T>;
-export function bunja<T, U>(deps: [Dep<U>], init: (u: U) => T): Bunja<T>;
+export const createBunjaStore = () => new BunjaStore();
+export const BunjaStoreContext = React.createContext(createBunjaStore());
+
+export type BunjaEffectFn = () => () => void;
+export interface BunjaValue {
+  [Bunja.effect]?: BunjaEffectFn;
+}
+
+export function bunja<T>(deps: [], init: () => T & BunjaValue): Bunja<T>;
+export function bunja<T, U>(
+  deps: [Dep<U>],
+  init: (u: U) => T & BunjaValue
+): Bunja<T>;
 export function bunja<T, U, V>(
   deps: [Dep<U>, Dep<V>],
-  init: (u: U, v: V) => T
+  init: (u: U, v: V) => T & BunjaValue
 ): Bunja<T>;
 export function bunja<T, U, V, W>(
   deps: [Dep<U>, Dep<V>, Dep<W>],
-  init: (u: U, v: V, w: W) => T
+  init: (u: U, v: V, w: W) => T & BunjaValue
 ): Bunja<T>;
 export function bunja<T, const U extends any[]>(
   deps: { [K in keyof U]: Dep<U[K]> },
-  init: (...args: U) => T
+  init: (...args: U) => T & BunjaValue
 ): Bunja<T> {
   const contexts = deps.filter(
     (dep) => !(dep instanceof Bunja)
@@ -42,7 +63,8 @@ export function bunja<T, const U extends any[]>(
 bunja.counter = 0;
 
 export function useBunja<T>(bunja: Bunja<T>): T {
-  const { id, deps, contexts, init } = bunja;
+  const { id, deps, contexts } = bunja;
+  const store = React.useContext(BunjaStoreContext);
   const rid = useRid();
   const tuples = contexts.map((c) => [c, React.useContext(c)] as const);
   const scopes = tuples.map(([context, value]) => getScope(context, value));
@@ -55,7 +77,7 @@ export function useBunja<T>(bunja: Bunja<T>): T {
     .map(({ id }) => id)
     .sort()
     .join(",")}`;
-  const instance = (bunjas[biid] ??= new BunjaInstance(biid, init(...args)));
+  const instance = store.get(bunja, biid, args);
   React.useEffect(() => {
     instance.reg(rid);
     return () => instance.dereg(rid);
@@ -64,7 +86,7 @@ export function useBunja<T>(bunja: Bunja<T>): T {
     scopes.forEach((scope) => scope.reg(rid));
     return () => scopes.forEach((scope) => scope.dereg(rid));
   }, [rid, ...scopes]);
-  return instance.value;
+  return instance.value as T;
 }
 
 const useRid = () => React.useState(() => useRid.counter++)[0];
@@ -79,7 +101,7 @@ function getScope(context: React.Context<any>, value: any) {
 }
 getScope.counter = 0;
 
-class RefCounter<T = number> {
+abstract class RefCounter<T = number> {
   #disposed = false;
   refs = new Set<T>();
   reg(reference: T) {
@@ -91,30 +113,40 @@ class RefCounter<T = number> {
       if (this.#disposed) return;
       if (this.refs.size < 1) {
         this.#disposed = true;
-        this[Symbol.dispose]();
+        this.dispose();
       }
     });
   }
+  abstract dispose: () => void;
 }
 
-class BunjaInstance<T> extends RefCounter {
-  constructor(public biid: string, public value: T) {
+const noop = () => {};
+class BunjaInstance extends RefCounter {
+  #cleanup: (() => void) | undefined;
+  constructor(
+    public store: BunjaStore,
+    public biid: string,
+    public value: BunjaValue
+  ) {
     super();
   }
-  [Symbol.dispose]() {
-    delete bunjas[this.biid];
-    this.value[Symbol.dispose]?.();
+  reg(reference: number) {
+    this.#cleanup ??= this.value[Bunja.effect]?.() ?? noop;
+    super.reg(reference);
   }
+  dispose = () => {
+    this.#cleanup?.();
+    this.store.delete(this.biid);
+  };
 }
 
 class Scope extends RefCounter {
   constructor(
-    dispose: () => void,
+    public dispose: () => void,
     public context: React.Context<any>,
     public value: any,
     public id: number
   ) {
     super();
-    this[Symbol.dispose] = dispose;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bunja",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "State Lifetime Manager for React",
   "main": "bunja.ts",
   "scripts": {},
@@ -16,6 +16,12 @@
     "react": "^18"
   },
   "peerDependencies": {
+    "@types/react": "*",
     "react": ">=17"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
   }
 }

package/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ESNext"
+    "target": "ESNext",
+    "strict": true
   }
 }