diff --git a/CHANGELOG.md b/CHANGELOG.md index dd4568b..542d40c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -59,9 +59,9 @@ ### 🩹 Fixes -- Dispose molcule instances synchronously ([1f202e9](https://github.com/sigrea/react/commit/1f202e9)) -- Defer molcule disposal until post-rerender ([49cacc7](https://github.com/sigrea/react/commit/49cacc7)) -- Defer useMolcule disposal until rerender completes ([#6](https://github.com/sigrea/react/pull/6)) +- Dispose molecule instances synchronously ([1f202e9](https://github.com/sigrea/react/commit/1f202e9)) +- Defer molecule disposal until post-rerender ([49cacc7](https://github.com/sigrea/react/commit/49cacc7)) +- Defer useMolecule disposal until rerender completes ([#6](https://github.com/sigrea/react/pull/6)) ### 📖 Documentation @@ -80,11 +80,11 @@ ### ✅ Tests -- Cover useMolcule rerender and strict mode replay ([5aa1c34](https://github.com/sigrea/react/commit/5aa1c34)) +- Cover useMolecule rerender and strict mode replay ([5aa1c34](https://github.com/sigrea/react/commit/5aa1c34)) ### 🎨 Styles -- Format strict-mode useMolcule test ([ec918fb](https://github.com/sigrea/react/commit/ec918fb)) +- Format strict-mode useMolecule test ([ec918fb](https://github.com/sigrea/react/commit/ec918fb)) ### ❤️ Contributors @@ -95,4 +95,4 @@ ### Minor Changes -- e7fa75e: Introduce the initial React adapter hooks for Sigrea molcules and signals, including playground scaffolding for manual verification. +- e7fa75e: Introduce the initial React adapter hooks for Sigrea molecules and signals, including playground scaffolding for manual verification. diff --git a/README.md b/README.md index ae6ad1a..0f1e634 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ - **Signal subscriptions.** `useSignal` subscribes to signals and computed values, triggering re-renders when they change. - **Computed subscriptions.** `useComputed` subscribes to computed values and memoizes them per component instance. - **Deep signal subscriptions.** `useDeepSignal` subscribes to deep signal objects and exposes them for direct mutation. -- **Molecule lifecycles.** `useMolcule` mounts molecule factories and binds their lifecycles to React components. +- **Molecule lifecycles.** `useMolecule` mounts molecule factories and binds their lifecycles to React components. ## Table of Contents @@ -18,7 +18,7 @@ - [useSignal](#usesignal) - [useComputed](#usecomputed) - [useDeepSignal](#usedeepsignal) - - [useMolcule](#usemolcule) + - [useMolecule](#usemolecule) - [Testing](#testing) - [Handling Scope Cleanup Errors](#handling-scope-cleanup-errors) - [Development](#development) @@ -52,7 +52,7 @@ export function CounterLabel() { ```tsx import { molecule, signal } from "@sigrea/core"; -import { useMolcule, useSignal } from "@sigrea/react"; +import { useMolecule, useSignal } from "@sigrea/react"; const CounterMolecule = molecule((props: { initialCount: number }) => { const count = signal(props.initialCount); @@ -69,7 +69,7 @@ const CounterMolecule = molecule((props: { initialCount: number }) => { }); export function Counter(props: { initialCount: number }) { - const counter = useMolcule(CounterMolecule, props); + const counter = useMolecule(CounterMolecule, props); const value = useSignal(counter.count); return ( @@ -133,10 +133,10 @@ function useDeepSignal(signal: DeepSignal): T Exposes a deep signal object for direct mutation within the component. Updates to nested properties trigger re-renders, and the subscription is cleaned up when the component unmounts. -### useMolcule +### useMolecule ```tsx -function useMolcule( +function useMolecule( molecule: MoleculeFactory, props?: TProps ): TReturn diff --git a/package.json b/package.json index d4c436c..774b022 100644 --- a/package.json +++ b/package.json @@ -29,16 +29,8 @@ }, "main": "./dist/index.cjs", "types": "./dist/index.d.ts", - "files": [ - "dist" - ], - "keywords": [ - "signals", - "reactivity", - "react", - "molecule", - "typescript" - ], + "files": ["dist"], + "keywords": ["signals", "reactivity", "react", "molecule", "typescript"], "scripts": { "dev": "vite --config playground/vite.config.ts", "build": "unbuild", @@ -75,9 +67,6 @@ "jsdom": "^24.1.3" }, "pnpm": { - "onlyBuiltDependencies": [ - "lefthook", - "@biomejs/biome" - ] + "onlyBuiltDependencies": ["lefthook", "@biomejs/biome"] } } diff --git a/packages/__tests__/useMolcule.strict-mode.test.ts b/packages/__tests__/useMolecule.strict-mode.test.ts similarity index 84% rename from packages/__tests__/useMolcule.strict-mode.test.ts rename to packages/__tests__/useMolecule.strict-mode.test.ts index d54d319..3aad738 100644 --- a/packages/__tests__/useMolcule.strict-mode.test.ts +++ b/packages/__tests__/useMolecule.strict-mode.test.ts @@ -3,10 +3,10 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; import { disposeTrackedMolecules, molecule, onUnmount } from "@sigrea/core"; -import { useMolcule } from "../useMolcule"; +import { useMolecule } from "../useMolecule"; import { createTestRoot, flushMicrotasks } from "./testUtils"; -describe("useMolcule in StrictMode", () => { +describe("useMolecule in StrictMode", () => { let root: ReturnType; beforeEach(() => { @@ -20,13 +20,13 @@ describe("useMolcule in StrictMode", () => { it("keeps the molecule instance alive across StrictMode effect replays", async () => { const cleanup = vi.fn(); - const counterMolcule = molecule((value: number) => { + const counterMolecule = molecule((value: number) => { onUnmount(() => cleanup(value)); return { value }; }); function TestComponent() { - useMolcule(counterMolcule, 1); + useMolecule(counterMolecule, 1); return null; } diff --git a/packages/__tests__/useMolcule.test.ts b/packages/__tests__/useMolecule.test.ts similarity index 87% rename from packages/__tests__/useMolcule.test.ts rename to packages/__tests__/useMolecule.test.ts index 11d090c..2ce3de2 100644 --- a/packages/__tests__/useMolcule.test.ts +++ b/packages/__tests__/useMolecule.test.ts @@ -8,10 +8,10 @@ import { onUnmount, } from "@sigrea/core"; -import { useMolcule } from "../useMolcule"; +import { useMolecule } from "../useMolecule"; import { createTestRoot, flushMicrotasks } from "./testUtils"; -describe("useMolcule", () => { +describe("useMolecule", () => { let root: ReturnType; beforeEach(() => { @@ -25,7 +25,7 @@ describe("useMolcule", () => { it("does not dispose when re-rendered with identical props", async () => { const cleanup = vi.fn(); - const counterMolcule = molecule((value: number) => { + const counterMolecule = molecule((value: number) => { onUnmount(() => cleanup(value)); return { value }; }); @@ -33,7 +33,7 @@ describe("useMolcule", () => { const observed: Array> = []; function TestComponent({ value }: { value: number }) { - const instance = useMolcule(counterMolcule, value); + const instance = useMolecule(counterMolecule, value); observed.push(instance); return null; } @@ -56,7 +56,7 @@ describe("useMolcule", () => { it("mounts molecule and cleans up on unmount", async () => { const cleanup = vi.fn(); - const makeMolcule = molecule((value: number) => { + const makeMolecule = molecule((value: number) => { onUnmount(() => cleanup(value)); return { value }; }); @@ -64,7 +64,7 @@ describe("useMolcule", () => { const observed: Array> = []; function TestComponent() { - const instance = useMolcule(makeMolcule, 1); + const instance = useMolecule(makeMolecule, 1); observed.push(instance); return null; } @@ -86,14 +86,14 @@ describe("useMolcule", () => { const mounts = vi.fn(); const cleanups = vi.fn(); - const counterMolcule = molecule((value: number) => { + const counterMolecule = molecule((value: number) => { mounts(value); onUnmount(() => cleanups(value)); return {}; }); function TestComponent({ value }: { value: number }) { - useMolcule(counterMolcule, value); + useMolecule(counterMolecule, value); return null; } diff --git a/packages/index.ts b/packages/index.ts index d6dc942..80ec3d3 100644 --- a/packages/index.ts +++ b/packages/index.ts @@ -4,7 +4,7 @@ * ================================================== */ -export { useMolcule } from "./useMolcule"; +export { useMolecule } from "./useMolecule"; /** * ================================================== diff --git a/packages/useMolcule.ts b/packages/useMolecule.ts similarity index 95% rename from packages/useMolcule.ts rename to packages/useMolecule.ts index 9f72993..10a3f0d 100644 --- a/packages/useMolcule.ts +++ b/packages/useMolecule.ts @@ -16,7 +16,7 @@ interface MoleculeState { pendingDisposeToken: symbol | null; } -export function useMolcule( +export function useMolecule( molecule: MoleculeFactory, ...args: MoleculeArgs ): MoleculeInstance { @@ -56,7 +56,7 @@ export function useMolcule( const state = stateRef.current; if (state === undefined) { throw new Error( - "useMolcule failed to mount the requested molecule instance.", + "useMolecule failed to mount the requested molecule instance.", ); } diff --git a/playground/src/Counter.tsx b/playground/src/Counter.tsx index fb00f60..dcbd4c8 100644 --- a/playground/src/Counter.tsx +++ b/playground/src/Counter.tsx @@ -1,6 +1,6 @@ import { useMemo } from "react"; -import { useMolcule, useSignal } from "@sigrea/react"; +import { useMolecule, useSignal } from "@sigrea/react"; import { CounterMolecule, type CounterProps } from "./CounterMolecule"; export function Counter(props: CounterProps) { @@ -10,7 +10,7 @@ export function Counter(props: CounterProps) { [initialCount, step], ); - const counter = useMolcule(CounterMolecule, moleculeProps); + const counter = useMolecule(CounterMolecule, moleculeProps); const count = useSignal(counter.count); return (