Skip to content

broofa/pek

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

47 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Pek Logo

JavaScript data structures with immutable state events.

Install

npm install pek

Then:

const pek = require('pek');

Quick Start

To get started, create a data model for your application using the same data types as you would with JSON (String, Number, Boolean, Object, Array, and null):

const APP_STATE = {
  name: 'Todo List',
  lists: [
    {name: 'Shopping', items: ['Milk', 'Bananas']},
  ]
};

Next, create a Pēk model by passing this data model to pek():

const model = pek(APP_STATE); // ⇨ 
  // {
  //   name: 'Todo List',
  //   lists: [ { name: 'Shopping', items: [ 'Milk', 'Bananas' ] } ]
  // }

That's pretty much all there is to it. Your Pēk model looks and feels just like the original:

model.lists[0].name = 'Zoo Supplies';
model.lists[0].items.push('Monkeys');

model.lists[0]; // ⇨ { name: 'Zoo Supplies', items: [ 'Milk', 'Bananas', 'Monkeys' ] }

... with one important difference - you can subscribe to state changes:

const unsubscribe = model.__.on(state => console.log(state));

model.name = 'Pek Example';

Anytime your Pēk model changes, all listeners are notified. Moreover, the state listeners receive is immutable:

model.__.on(state => {
  state.name = 'Nopity nope nope';
  state.name; // ⇨ 'Pek Example 2'
});

model.name = '\Pek Example 2';

In non-strict mode, changing the state will fail silently, as above. In strict mode, changing the state will throw an exception:

model.__.on(state => {
  'use strict';
  try {
    state.name = 'Nopity nope nope';
  } catch (err) {
    console.log(err.message);
  }
});

model.name = '\Pek Example 3';
 Cannot assign to read only property 'name' of object '[object Object]'

API

pek(initialState)

Creates a new Pēk model

  • initialState - Object or Array holding your initial model state
  • Returns a Pēk model (a Proxy-wrapped version of initialState)

E.g.

const model = pek({a: 'hello', b: ['world']}); // ⇨ { a: 'hello', b: [ 'world' ] }

model. ... __.on(callback)

Listen for changes to model state.

  • callback - Function to call any time the target object or any of it's subordinate objects change state. This function takes the following arguments:
    • state - An immutable copy of the object state. Attempting to modify
  • Returns unsubscriber Function.
const unsubscribe = model.__.on(immutableState => console.log(immutableState));

model.a = 'Hello';
 { a: 'Hello', b: [ 'world' ] }

To unsubscribe, call the returned unsubscriber Function:

unsubscribe();

Markdown generated from src/README_js.md by RunMD Logo

About

A modern data model for UI rendering

Resources

Stars

Watchers

Forks

Packages

No packages published