fix: correct useMolecule spelling in React adapter

Author: aose-yuu

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.

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<T extends object>(signal: DeepSignal<T>): 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<TProps, TReturn>(
+function useMolecule<TProps, TReturn>(
   molecule: MoleculeFactory<TProps, TReturn>,
   props?: TProps
 ): TReturn

…__tests__/useMolcule.strict-mode.test.ts …_tests__/useMolecule.strict-mode.test.tspackages/__tests__/useMolcule.strict-mode.test.ts renamed to packages/__tests__/useMolecule.strict-mode.test.ts packages/__tests__/useMolcule.strict-mode.test.ts renamed to 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<typeof createTestRoot>;
 
 	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;
 		}
 

packages/__tests__/useMolcule.test.ts packages/__tests__/useMolecule.test.tspackages/__tests__/useMolcule.test.ts renamed to 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<typeof createTestRoot>;
 
 	beforeEach(() => {
@@ -25,15 +25,15 @@ 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 };
 		});
 
 		const observed: Array<MoleculeInstance<{ value: number }>> = [];
 
 		function TestComponent({ value }: { value: number }) {
-			const instance = useMolcule(counterMolcule, value);
+			const instance = useMolecule(counterMolecule, value);
 			observed.push(instance);
 			return null;
 		}
@@ -56,15 +56,15 @@ 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 };
 		});
 
 		const observed: Array<MoleculeInstance<{ value: number }>> = [];
 
 		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;
 		}
 

packages/index.ts

@@ -4,7 +4,7 @@
  * ==================================================
  */
 
-export { useMolcule } from "./useMolcule";
+export { useMolecule } from "./useMolecule";
 
 /**
  * ==================================================

packages/useMolcule.ts packages/useMolecule.tspackages/useMolcule.ts renamed to packages/useMolecule.ts

@@ -16,7 +16,7 @@ interface MoleculeState<TReturn extends object, TProps> {
 	pendingDisposeToken: symbol | null;
 }
 
-export function useMolcule<TReturn extends object, TProps = void>(
+export function useMolecule<TReturn extends object, TProps = void>(
 	molecule: MoleculeFactory<TReturn, TProps>,
 	...args: MoleculeArgs<TProps>
 ): MoleculeInstance<TReturn> {
@@ -56,7 +56,7 @@ export function useMolcule<TReturn extends object, TProps = void>(
 	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.",
 		);
 	}
 

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 (