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

fluids

v0.3.0

Published

Glue layer for reactivity

Downloads

69,072

Readme

fluids

This library is a tiny glue layer for observable events.

  • Create a tree of observable values
  • Let parent nodes send arbitrary events to children (for maximum flexibility)
  • Stay small yet provide helpers for easier integration

 

Observe a value

Any object can be observed, but FluidValue objects have strongly typed events. Observed objects are basically event emitters whose listeners receive every event, and they typically represent a single value.

To start observing:

import { addFluidObserver } from 'fluids'

// You can pass a function:
let observer = addFluidObserver(target, (event) => {
  console.log(event)
})

// or pass an object:
observer = addFluidObserver(target, {
  eventObserved(event) {
    console.log(event)
  },
})

To stop observing:

import { removeFluidObserver } from 'fluids'

removeFluidObserver(target, observer)

Create an observed object

You can extend the FluidValue class for automatic TypeScript support with fluids-compatible libraries.

import { FluidValue, FluidObservable, callFluidObservers } from 'fluids'

// Your class can have multiple event types.
// The `type` and `parent` properties are required.
type RefEvent<T> = { type: 'change'; value: T; parent: Ref<T> }

// Use "interface merging" to attach the event types.
interface Ref<T> extends FluidObservable<RefEvent<T>> {}

// This example is an observable React ref.
class Ref<T> extends FluidValue<T> {
  private _current: T
  constructor(initialValue: T) {
    // Passing a getter to super is only required
    // if your class has no "get" method.
    super(() => this._current)

    this._current = initialValue
  }
  get current() {
    return this._current
  }
  set current(value: T) {
    this._current = value

    // Send the change to all observers.
    callFluidObservers(this, {
      type: 'change',
      value,
      parent: this,
    })
  }
  //
  // These methods are completely optional.
  //
  protected observerAdded(count: number) {
    if (count == 1) {
      // Do something when the first observer is added.
    }
  }
  protected observerRemoved(count: number) {
    if (count == 0) {
      // Do something when the last observer is removed.
    }
  }
}

If extending FluidValue isn't an option, you can outfit an object or prototype with the setFluidGetter function:

import { setFluidGetter, callFluidObservers } from 'fluids'

// This example augments an existing React ref.
let { current } = ref
let get = () => current
setFluidGetter(ref, get)
Object.defineProperty(ref, 'current', {
  get,
  set(value) {
    current = value

    // Remember to notify any observers.
    callFluidObservers(ref, {
      type: 'change',
      value,
      parent: ref,
    })
  },
})

For libraries

The remaining functions are useful when making a fluids-compatible library.

import {
  hasFluidValue,
  getFluidValue,
  getFluidObservers,
  callFluidObserver,
} from 'fluids'

// Check if a value is observable.
hasFluidValue(target)

// Get the current value. Returns `target` if not observable.
getFluidValue(target)

// Get the current observers (or null if none exist).
getFluidObservers(target)

// Call a single observer. Useful for special observation, like waterfalls.
callFluidObserver(observer, event)