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

ez-flux

v0.14.7

Published

an easy to use flux implementation

Downloads

77

Readme

ezFlux

ezFlux is a simple, tiny and focused flux implementation.

At its center is the application state, guarded by one or more stores.
A store implements a minimal event emitter that may be subscribed to.
Stores may be nested, seamlessly reporting children changing.

The resulting benefits are immense:

  • minimal file size: 1kb gzipped, no dependencies
  • minimal brain load: no reducers, no dispatchers
  • minimal boiler plate: no unnecessary ceremony

With improved run time, design time and decreased package size, ezFlux turns state management into a truely elegant, easy and fun experience!

Install

NPM:

$ npm install ez-flux --save

Yarn:

$ yarn add ez-flux

Usage

Getting Started

A store saveguards a given state with getters/setter.
If a new value is assigned to the store, it will emit a change event. Stores are sealed by default - thus, adding new keys after creation, is not permitted.

import { createStore } from 'ez-flux';

const user = createStore({
  state: { name: 'John Doe' },
});

user.$on('change', () => console.log(user.name));

user.$assign({ name: 'Jane Doe'});

// console outs 'Jane Doe';

Mutable Store

Direct value assignment may be activated with the mutable option.
This works great in small encapsulations, where maintainability is of little concern.

import { createStore } from 'ez-flux';

const user = createStore({
  state: { name: 'John Doe' },
  mutable: true,
});

user.$on('change', () => console.log(user.name));

user.name = 'Jane Doe';

// console outs 'Jane Doe';

Computed State

Getters and/or setters may be defined directly.

import { createStore } from 'ez-flux';

const user = createStore({
  state: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    name: {
      get() {
        return `${this.firstName} ${this.lastName}`;
      },
      set(name) {
        const [firstName, lastName] = name.split(' ');

        this.$assign({ firstName, lastName });
      },
    },
  },
});

user.$on('change', () => console.log(user.name));

user.$assign({ name: 'Jane Doe' });

// console outs 'Jane Doe';

Store Methods

While methods do seem alot like actions, there is no obligation to use $assign within them.

import { createStore } from 'ez-flux';

const user = createStore({
  state: {
    name: 'John Doe',
  },
  methods: {
    safelySetName(name) {
      if (typeof name === 'string') this.$assign({ name });
    },
  },
});

user.$on('change', () => console.log(user.name));

user.safelySetName('Jane Doe');

// console outs 'Jane Doe';

Store Nesting

Stores may be nested useing the children option.
If a child changes, both the child and the parent will emit a change.
If the parent changes, only it will emit a change.

import { createStore } from 'ez-flux';

const user = createStore({
  state: { name: 'John Doe' },
});
const session = createStore({
  state: { sessionId: 0 },
  children: { user },
});

session.$on('change', () => console.log('session changed'));
user.$on('change', () => console.log('user changed'));

session.$assign({ sessionId: 1 });

// console outs 'session changed'

// You may access the user store through session as well
session.user.$assign({ name: 'Jane Doe' });

// console outs 'user changed'
// console outs 'session changed'

Please note that a store's children will be impacted by methods called on the parent:

  • parent.$assign: will call $assign on any child that is mentionend in the object assigned to the parent.
  • parent.$copy: will invoke $copy on all children in order to return a full copy.
    Attention: It will not deep clone any other nested states.
  • parent.$reset: will invoke $reset on all children.

Plugins and Addons

Plugins

Plugins are an array of functions which is directly exported for you to edit.
They will be looped and executed after options have been handled and before store and state are sealed.
As a result, plugins may extend or limit the scope of the created store.

debug

The debug plugin is created by passing a callback to createDebugger.

import { plugins } from 'ez-flux';
import { createDebugger } from 'ez-flux/plugins/debug';

const debug = createDebugger(payload => console.log(payload));

plugins.push(debug);

Now, the given callback will be called on specific interactions:

type DebugPayload = {
  eventType: 'state change' | 'child change' | 'method called',
  storeName: string,
  childName?: string,
  methodName?: string,
  store: Store,
  state: Object,
};

Addons

ezReact

Useful if you wish to use ezFlux with React, Inferno, Preact or any other react-compatible library:

API Documentation

createStore

The store save-guards the state which consists of state-option and computed-option.
In addition to its own API and the state keys, a store will hold all keys from the methods-option and children-option on the top level.

parameters

  • StoreOptions
      type StoreOptions = {
        state?: Object,
        computed?: { [string]: { get?: Function, set?: Function } },
        methods?: { [string]: Function },
        children?: { [string]: Store },
        mutable?: boolen,
        afterCreation: Function,
      };

returns

  • Store
      type Store = {
        $assign: (Object, ...args: Object[]) => Store,
        $copy: () => Object,
        $keys: () => string[],
        $values: () => any[],
        $entries: () => [string, any][],
        $reset: () => Store,
        $on: (eventName: string, eventListener: Function) => Store,
        $once: (eventName: string, eventListener: Function) => Store,
        $off: (eventName: string, eventListener: Function) => Store,
        $emit: (name: string, ...payload?: any[]) => Store,
      };

Plugins

The Plugins array is exported for direct manipulation.

type Plugin = (State, Store, Options) => void;
type Plugins = Plugin[];

Contributing

Contributions of any kind are always welcome!

To run Linter, Flow, Bable and Mocha and have them watch src and test folders respectively:

$ npm start

To run Babel once:

$ npm run build

To autofix eslint issues

$ npm eslint:fix