npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@dhmk/atom

v1.0.6

Published

Lightweight mobx-like observable values, computed values and side-effects

Downloads

10

Readme

@dhmk-atom

Mobx-like observable atoms, computeds and observers.

Install: npm install @dhmk/atom

Atom types

type Atom<T> = {
  (): T;
};
type WritableAtom<T> = {
  (): T;
  set(value: T): boolean; // true - if `value` differs from previous one
};
type AtomOptions = {
  eq: (oldValue, newValue) => boolean;
  onBecomeObserved: () => void;
  onBecomeUnobserved: () => void;
  setter: (originalSetter: Setter<T>) => Setter<T>;
};

type Setter<T> = (value: T) => ValueChanged | ValueNotChanged;

type ValueChanged = true;
type ValueNotChanged = false;

atom(value: T, opts?: AtomOptions): WritableAtom<T>

Creates a value atom which is very similar to MobX observable.box(value, { deep: false }). The only difference is that the .get() is replaced by calling () directly.

atom(fn: () => T, opts?: AtomOptions): Atom<T>

Creates a computed atom which is like Mobx computed(fn).

Observer types

type Observer = {
  (): void; // dispose
  invalidate(forceThroughBatches = false): void;
  readonly isInitial: boolean;
  readonly isDisposed: boolean;
};
type ObserverOptions = {
  attachToParent: boolean = true;
  checkStale: boolean = true;
  scheduler: (run: Function) => void;
};

observe(fn: (self: Observer) => void, opts?: ObserverOptions): Observer

Creates an observer which is like Mobx autorun(fn). Whenever an atom which was read during fn execution changes, the observer schedules fn for execution once again.

Observer.invalidate(force?)

Schedules fn for execution even if no tracked atoms were changed. If force is true also ignores any current transactions.

ObserverOptions.attachToParent

When true created observer will be tracked by parent observer if exists. Whenever the parent observer fn re-executes it will dispose this tracked child observer. If there is no parent observer you must dispose created observer manually.

When false, you must dispose created observer manually.

ObserverOptions.checkStale

When true throws an error if no atoms were read during fn execution. Because in this case observer will become stale and will not call its fn until you invalidate it manually.

Transactions (batches)

Transactions are similar to MobX transactions. During a transaction no observers are run automatically (though you can run one by calling observer.invalidate(true)). Also, no atoms are tracked (untracked(fn) is applied).

untracked(fn: () => T): T

Runs fn without tracking any atoms which are read during its execution. Returns fn result. Doesn't apply transaction.

runInAction(fn: () => T): T

Runs fn in transaction. Returns fn result. Also applies untracked.

runInFlow(flow)

Runs flow in transaction. Returns its result. See @dhmk/utils for more info about flow.

atTransactionEnd(fn)

Runs fn at the end of the outermost transaction or immediately if is not in transaction.

Helpers

keepAlive(computed: Atom<T>): Atom<T> & { dispose() }

Similar to MobX, if a computed atom isn't observed by anyone, its value is recomputed on every access. This function is a shorcut to observe(computed).

objectAtom()

arrayAtom()

mapAtom()

setAtom()

asyncAtom()

debouncedEvents()