Fine-grained reactivity with signals, computed values, and effects
npm install @jucie-reactive/coreFine-grained reactive programming with signals, computed values, and reactive surfaces.
- Signals: Simple reactive values with automatic dependency tracking
- Reactors: Computed values that update when dependencies change
- Surfaces: Component-like reactive contexts with state management
- Subscribers: Side effects that run when reactive values change
- Async Support: Native support for async computations
- Batched Updates: Efficient change propagation
``bash`
npm install @jucie-reactive/core
Reactive primitive values:
`javascript
import { createSignal } from '@jucie-reactive/core';
const count = createSignal(0);
console.log(count()); // 0
count(5);
console.log(count()); // 5
// Update based on current value
count(n => n + 1);
console.log(count()); // 6
`
Automatically computed values:
`javascript
import { createSignal, createComputed } from '@jucie-reactive/core';
const count = createSignal(0);
const doubled = createComputed(() => count() * 2);
console.log(doubled()); // 0
count(5);
console.log(doubled()); // 10
`
Declarative reactive components:
`javascript
import { defineSurface } from '@jucie-reactive/core';
const useCounter = defineSurface(({ value, computed, action }) => ({
count: value(0),
doubled: computed((ctx) => ctx.count * 2),
increment: action((ctx) => ctx.count++),
decrement: action((ctx) => ctx.count--)
}));
const counter = useCounter();
console.log(counter.count); // 0
console.log(counter.doubled); // 0
counter.increment();
console.log(counter.count); // 1
console.log(counter.doubled); // 2
`
Side effects for reactive values:
`javascript
import { createSignal, createSubscriber } from '@jucie-reactive/core';
const count = createSignal(0);
createSubscriber(
() => count(),
(value) => console.log('Count changed:', value)
);
count(1); // Logs: "Count changed: 1"
count(2); // Logs: "Count changed: 2"
`
`javascript
import { createSignal, createComputed } from '@jucie-reactive/core';
const userId = createSignal(1);
const userData = createComputed(async () => {
const response = await fetch(/api/users/${userId()});
return response.json();
});
// Returns a promise
const data = await userData();
`
`javascript
import { defineSurface } from '@jucie-reactive/core';
const useApp = defineSurface({
state: {
count: 0,
message: 'Hello'
},
computed: {
doubled(ctx) {
return ctx.count * 2;
}
},
actions: {
increment(ctx) {
ctx.count++;
}
},
onInit(ctx) {
console.log('Surface initialized');
},
onDestroy(ctx) {
console.log('Surface destroyed');
}
});
`
`javascript
import { createSignal, addEffect } from '@jucie-reactive/core';
const count = createSignal(0);
addEffect(count, (value) => {
console.log('Effect:', value);
});
count(1); // Logs: "Effect: 1"
`
- createSignal(initialValue) - Create a reactive signaldestroySignal(signal)
- - Destroy a signalisSignal(value)
- - Check if value is a signal
- createComputed(fn, config) - Create a computed valuedestroyComputed(computed)
- - Destroy a computedisComputed(value)
- - Check if value is a computed
- defineSurface(setupFn|config, options) - Create a reactive surfaceisSurface(value)
- - Check if value is a surfacerefreshSurface(surface)
- - Refresh a surface
- createSubscriber(getter, callback, config) - Create a subscriberdestroySubscriber(subscriber)
- - Destroy a subscriberisSubscriber(value)
- - Check if value is a subscriber
- addEffect(getter, callback) - Add effect to reactive valueremoveEffect(getter, callback)
- - Remove effectprovideContext(value)
- - Provide contextgetContext()
- - Get current context
`javascript`
{
debounce: 100, // Debounce updates (ms)
immediate: true, // Compute immediately
effects: [fn], // Initial effects
detatched: false, // Skip dependency tracking
onAccess: (value) => {} // Callback on access
}
`javascript``
{
mode: 'development' // Enable dev features
}
This software is provided under the MIT License with Commons Clause.
- Use this library freely in personal or commercial projects
- Include it in your paid products and applications
- Modify and fork for your own use
- View and learn from the source code
- Sell this library as a standalone product or competing state management solution
- Offer it as a paid service (SaaS) where the primary value is this library
- Create a commercial fork that competes with this project
This software is provided "as-is" without any warranty, support, or guarantees:
- No obligation to provide support or answer questions
- No obligation to accept or implement feature requests
- No obligation to review or merge pull requests
- No obligation to fix bugs or security issues
- No obligation to maintain or update the software
You are welcome to submit issues and pull requests, but there is no expectation they will be addressed. Use this software at your own risk.
See the LICENSE file for complete terms.
While contributions are welcome, please understand there is no obligation to review, accept, or merge them. This project is maintained at the discretion of the author.
---
Made with ⚡ by Adrian Miller