Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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

Expand All @@ -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.
12 changes: 6 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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)
Expand Down Expand Up @@ -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);
Expand All @@ -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 (
Expand Down Expand Up @@ -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
Expand Down
17 changes: 3 additions & 14 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -75,9 +67,6 @@
"jsdom": "^24.1.3"
},
"pnpm": {
"onlyBuiltDependencies": [
"lefthook",
"@biomejs/biome"
]
"onlyBuiltDependencies": ["lefthook", "@biomejs/biome"]
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand All @@ -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;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand All @@ -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;
}
Expand All @@ -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;
}
Expand All @@ -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;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* ==================================================
*/

export { useMolcule } from "./useMolcule";
export { useMolecule } from "./useMolecule";

/**
* ==================================================
Expand Down
4 changes: 2 additions & 2 deletions packages/useMolcule.ts → packages/useMolecule.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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> {
Expand Down Expand Up @@ -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.",
);
}

Expand Down
4 changes: 2 additions & 2 deletions playground/src/Counter.tsx
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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 (
Expand Down