@vegajs/vortex
TypeScript icon, indicating that this package has built-in type declarations

1.0.3-beta.24Β β€’Β PublicΒ β€’Β Published

Vortex πŸŒ€βœ¨

A next-gen, lightweight state management library for JavaScript and TypeScript.


Latest version Downloads

Vortex Preview

Why Choose Vortex? πŸŒ€βœ¨

  • πŸ”’ Type-safe Excellence: Guarantees full type-safetyβ€”no any types lurking around.
  • ⚑ Minimized Re-renders: Only essential updates occur, keeping your app snappy.
  • 🌐 Framework Agnostic: Integrates effortlessly with React, Vue, and more.
  • πŸ”Œ Plugin Ready: Extend functionality easily with a rich plugin system.
  • πŸ”§ DevTools Support: Inspect and debug your state seamlessly with Vortex DevTools.
  • πŸ§ͺ Lightweight & Powerful: Just ~2.3kB, with zero dependencies.
  • 🀩 Developer Delight: Intuitive API that grows with your project's needs.


Installation

Install Vortex using your favorite package manager:

npm install @vegajs/vortex
# or
yarn add @vegajs/vortex
# or
pnpm add @vegajs/vortex

Quick Start: Creating a Store

Vortex makes creating a store type-safe, reactive, and straightforward.

import { defineStore } from '@vegajs/vortex';

export const counterStore = defineStore(({ reactive, computed, effect }) => {
  const count = reactive(0);
  const doubleCount = computed(() => count.value * 2);

  effect(() => {
    console.log(`Count is: ${count.value}`);
  });

  const increment = () => count.set(prev => prev + 1);

  return { count, doubleCount, increment };
});

Core API

defineStore(setup, options?)

Create a powerful store with reactive state, computed properties, and effects to keep your logic organized and streamlined.

  • setup: A function that initializes the state using helper functions.
  • options: Optional configurations like plugins, dependency injection, and store naming.

reactive(initialValue)

Define a reactive state that automatically updates as it changes.

computed(fn)

Define a computed property based on reactive dependencies.

effect(fn)

Create side effects that respond to changes in reactive state.

query(fn, options)

Set up asynchronous queries with built-in state tracking (isLoading, isError, etc.).

DIContainer

A simple dependency injection container for managing services and external dependencies.

Real-World Example

A simple counter with reactive state that increments on each click.

import { defineStore, useStore } from '@vegajs/vortex';

const counterStore = defineStore(({ reactive, computed }) => {
    const count = reactive(0);
    const doubleCount = computed(() => count.value * 2);
    const increment = () => count.set(prev => prev + 1);

    return { count, doubleCount, increment };
});

const Counter = () => {
    const { count, doubleCount, increment } = useStore(counterStore);

    return (
        <div>
            <p>count: {count}</p>
            <p>double count: {doubleCount}</p>
            <button onClick={increment}>Increment</button>
        </div>
    );
};

License

MIT

Package Sidebar

Install

npm i @vegajs/vortex

Weekly Downloads

0

Version

1.0.3-beta.24

License

MIT

Unpacked Size

70.4 kB

Total Files

66

Last publish

Collaborators

  • zlobin_andy