Skip to content

Commit

Permalink
chore: bump version to 0.2.1 and simplify README documentation
Browse files Browse the repository at this point in the history 
The changes include:
- Incrementing package version to 0.2.1
- Removing sections about Async Signals and Computed Collections from README
- Streamlining code examples and feature descriptions
- Removing some advanced/unstable features from documentation
  • Loading branch information
@Rajaniraiyn
Rajaniraiyn committed Feb 23, 2025
1 parent 84414ca commit e55d1ce
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 129 deletions.
159 changes: 31 additions & 128 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,6 @@ React Alien Signals is a **TypeScript** library that provides hooks built on top
- [Basic Signals](#basic-signals)
- [Computed Signals](#computed-signals)
- [Effects & Effect Scopes](#effects--effect-scopes)
- [Async Signals](#async-signals)
- [Computed Collections](#computed-collections)
- [React Hooks](#react-hooks)
- [Contributing](#contributing)
- [License](#license)
Expand All @@ -28,14 +26,11 @@ React Alien Signals is a **TypeScript** library that provides hooks built on top

## Features

- **Basic Signals**: Create and manage reactive state with `createSignal`.
- **Computed Signals**: Derive reactive values based on other signals using `createComputed`.
- **Effects & Effect Scopes**: Run side effects in response to state changes with `createEffect` and manage multiple effects with `createSignalScope`.
- **Async Signals**: Handle asynchronous state with `createAsyncComputed` and `createAsyncEffect`.
- **Computed Collections**: Manage reactive arrays and sets with `createComputedArray` and `createComputedSet`.
- **Equality Computed**: Optimize re-renders with `createEqualityComputed`.
- **React Integration**: Utilize React hooks like `useSignal`, `useSignalValue`, and `useSetSignal` for seamless state management.
- **TypeScript Support**: Fully typed APIs for type safety and IntelliSense.
- **Basic Signals**: Create and manage reactive state with `createSignal`
- **Computed Signals**: Derive reactive values based on other signals using `createComputed`
- **Effects & Effect Scopes**: Run side effects in response to state changes with `createEffect` and manage multiple effects with `createSignalScope`
- **React Integration**: Utilize hooks like `useSignal`, `useSignalValue`, and `useSetSignal` for seamless state management
- **TypeScript Support**: Fully typed APIs for type safety and IntelliSense

## Installation

Expand All @@ -49,161 +44,70 @@ npm install react-alien-signals alien-signals

### Basic Signals

Create a writable signal and use it within your components.
Create a writable signal and use it within your components:

```tsx
import React from "react";
import { createSignal, useSignal } from "react-alien-signals";

const countSignal = createSignal(0);
const count = createSignal(0);

function Counter() {
const [count, setCount] = useSignal(countSignal);

const [value, setValue] = useSignal(count);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
<button onClick={() => setValue(value + 1)}>
Count: {value}
</button>
);
}

export default Counter;
```

### Computed Signals

Derive reactive values based on other signals.
Create derived state that automatically updates:

```tsx
import React from "react";
import {
createSignal,
createComputed,
useSignalValue,
} from "react-alien-signals";
import { createSignal, createComputed, useSignalValue } from "react-alien-signals";

const countSignal = createSignal(1);
const doubleCount = createComputed(() => countSignal.get() * 2);
const count = createSignal(1);
const double = createComputed(() => count() * 2);

function Display() {
const double = useSignalValue(doubleCount);

return <div>Double Count: {double}</div>;
const doubleValue = useSignalValue(double);
return <div>Double: {doubleValue}</div>;
}

export default Display;
```

### Effects & Effect Scopes

Run side effects in response to state changes and manage multiple effects.
Run side effects in response to signal changes:

```tsx
import React from "react";
import {
createSignal,
createEffect,
useSignalScope,
} from "react-alien-signals";
import { createSignal, createEffect, useSignalScope } from "react-alien-signals";

const countSignal = createSignal(0);
const count = createSignal(0);

function Logger() {
const scope = useSignalScope();

scope.run(() => {
useSignalScope(() => {
createEffect(() => {
console.log("Count changed:", countSignal.get());
console.log('Count changed:', count());
});
});

return null;
}

export default Logger;
```

### Async Signals

Handle asynchronous state with async computed signals and effects.

```tsx
import React from "react";
import {
createSignal,
unstable_createAsyncComputed,
unstable_useAsyncComputedValue,
} from "react-alien-signals";

const dataSignal = createSignal("initial");

const asyncData = unstable_createAsyncComputed<string>(async function* () {
yield dataSignal;
const response = await fetch(
`https://api.example.com/data?query=${dataSignal.get()}`,
);
const data = await response.text();
return data;
});

function AsyncDisplay() {
const data = unstable_useAsyncComputedValue(asyncData);

return <div>Async Data: {data ?? "Loading..."}</div>;
}

export default AsyncDisplay;
```

### Computed Collections

Manage reactive arrays and sets.

```tsx
import React from "react";
import {
createSignal,
unstable_createComputedArray,
unstable_createComputedSet,
useSignalValue,
} from "react-alien-signals";

const numbersSignal = createSignal([1, 2, 3]);
const doubledNumbers = unstable_createComputedArray(
numbersSignal,
(itemSignal) => () => itemSignal.get() * 2,
);

const numberSetSignal = createSignal(new Set([1, 2]));
const doubledSet = unstable_createComputedSet(numberSetSignal);

function CollectionsDisplay() {
const doubled = useSignalValue(doubledNumbers);
const doubledSetValue = useSignalValue(doubledSet);

return (
<div>
<p>Doubled Numbers: {doubled.join(", ")}</p>
<p>Doubled Set: {[...doubledSetValue].join(", ")}</p>
</div>
);
}

export default CollectionsDisplay;
```

## React Hooks

React Alien Signals provides several hooks to interact with signals:

- `useSignal(signal)`: Returns `[value, setValue]`.
- `useSignalValue(signal)`: Returns the current value (read-only).
- `useSetSignal(signal)`: Returns a setter function (write-only).
- `useSignalEffect(effectFn)`: Runs a side effect based on signal changes.
- `useSignalScope()`: Manages effect scopes within a component.
- `unstable_useAsyncComputedValue(asyncComputed)`: Retrieves the value from an async computed signal.
- `unstable_useAsyncEffect(asyncEffectFn)`: Runs an asynchronous effect.
- `useSignal(signal)`: Returns `[value, setValue]` tuple for reading and writing
- `useSignalValue(signal)`: Returns the current value (read-only)
- `useSetSignal(signal)`: Returns a setter function (write-only)
- `useSignalEffect(effectFn)`: Runs a side effect based on signal changes
- `useSignalScope(callback)`: Manages effect scopes within a component
- `useComputed(getter)`: Creates and subscribes to a computed signal

## Contributing

Expand All @@ -215,5 +119,4 @@ Contributions are welcome! Please read the [Contributing Guidelines](CONTRIBUTIN

## Acknowledgements

- [Alien Signals](https://github.com/stackblitz/alien-signals) by [StackBlitz](https://stackblitz.com) for the foundational signal implementation.
- [Jotai](https://github.com/pmndrs/jotai) for inspiring the API design.
- [Alien Signals](https://github.com/stackblitz/alien-signals) by [StackBlitz](https://stackblitz.com) for the foundational signal implementation
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-alien-signals",
"version": "0.2.0",
"version": "0.2.1",
"type": "module",
"types": "./dist/index.d.ts",
"module": "./dist/index.js",
Expand Down

0 comments on commit e55d1ce

Please sign in to comment.