Skip to main content

Built and signed on GitHub Actions

A lightweight global state management library inspired by Recoil and Jotai, specifically designed for use in Fresh on Deno. Ideal for Edge-Native Application.

This package works with Deno, BrowsersIt is unknown whether this package works with Cloudflare Workers, Node.js, Bun
It is unknown whether this package works with Cloudflare Workers
It is unknown whether this package works with Node.js
This package works with Deno
It is unknown whether this package works with Bun
This package works with Browsers
JSR Score
100%
Published
2 months ago (1.0.0)

@elsoul/fresh-atom

@elsoul/fresh-atom is a lightweight global state management library inspired by Recoil and Jotai, specifically designed for use in Deno's Fresh framework.

Leveraging Preact's signal under the hood, it enables efficient state updates and reactivity, ideal for edge-native applications.

Features

  • Lightweight: Minimal API surface with atom and useAtom, similar to Jotai.
  • Preact Integration: Powered by Preact's signal for performance-optimized reactivity.
  • Edge-Native: Designed to run on Deno, providing TypeScript-first development with modern performance standards.

Installation

To install and use @elsoul/fresh-atom in your project, you can import it directly from the JavaScript Standard Registry (JSR) or from the Deno land:

Using JSR

import { atom, useAtom } from 'jsr:@elsoul/fresh-atom'

Using Deno Land

import { atom, useAtom } from 'https://deno.land/x/fresh_atom/mod.ts'

Usage

@elsoul/fresh-atom allows you to create shared state in your Fresh application with minimal effort. Here's how you can create and use atoms.

Creating an Atom

Atoms hold a single piece of state. You can define an atom like this:

import { atom } from '@elsoul/fresh-atom'

const countAtom = atom(0) // Create an atom with an initial value of 0

Using an Atom in a Component

To read and modify the atom's value inside a component, you can use useAtom:

import { useAtom } from '@elsoul/fresh-atom'

export default function Counter() {
  const [count, setCount] = useAtom(countAtom)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

The state will automatically update whenever the atom's value changes, ensuring efficient re-rendering.

Advanced: Async Atom

You can also define an asynchronous atom that resolves after some operation:

import { atom } from '@elsoul/fresh-atom'

const asyncAtom = atom(async () => {
  const data = await fetchData()
  return data
})

You can then use useAtom in the same way to handle asynchronous state.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/elsoul/fresh-atom This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

License

The package is available as open source under the terms of the Apache-2.0 License.

Code of Conduct

Everyone interacting in the SKEET project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the code of conduct.

Built and signed on
GitHub Actions
View transparency log

Add Package

deno add jsr:@elsoul/fresh-atom

Import symbol

import * as fresh_atom from "@elsoul/fresh-atom";

---- OR ----

Import directly with a jsr specifier

import * as fresh_atom from "jsr:@elsoul/fresh-atom";

Add Package

npx jsr add @elsoul/fresh-atom

Import symbol

import * as fresh_atom from "@elsoul/fresh-atom";

Add Package

yarn dlx jsr add @elsoul/fresh-atom

Import symbol

import * as fresh_atom from "@elsoul/fresh-atom";

Add Package

pnpm dlx jsr add @elsoul/fresh-atom

Import symbol

import * as fresh_atom from "@elsoul/fresh-atom";

Add Package

bunx jsr add @elsoul/fresh-atom

Import symbol

import * as fresh_atom from "@elsoul/fresh-atom";