Skip to content
The KISS, write-less do more, elegant, plugin-extensible way to handle state with diverse origins.
JavaScript TypeScript CSS HTML Shell
Branch: master
Clone or download
Latest commit be177f9 Nov 10, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
CI plugin fast Oct 22, 2019
assets jsdoc Oct 17, 2019
codingChallenges sync Nov 1, 2019
dist afterRefetch exported Nov 10, 2019
docs afterRefetch added. and renamed beforeRefresh to beforeRefetch Nov 10, 2019
examples sync Nov 1, 2019
src afterRefetch exported Nov 10, 2019
tutorials afterRefetch added. and renamed beforeRefresh to beforeRefetch Nov 10, 2019
.babelrc new build system Sep 29, 2019
.doc.md . Nov 5, 2019
.eslintrc.json improved examples Oct 22, 2019
.gitignore preparing to publish Oct 18, 2019
LICENCIA license added Sep 28, 2019
LICENSE license added Sep 28, 2019
README.md 2.0.0 Nov 3, 2019
jest.config.js 2.0.1 Oct 23, 2019
jsdoc.config.json 2.0.0 Nov 3, 2019
livejsdocs.sh 2.0.0.rc Oct 20, 2019
package-lock.json sync Nov 2, 2019
package.json afterRefetch exported Nov 10, 2019
rollup.config.js spell corrections Oct 16, 2019

README.md

onGet

The KISS, write-less do more, elegant, scalable, and plugin-extensible way to deal with state in modern applications is a Client-side virtual API.

Why

Because It does not feel right when you end up with a lot of bloat code, a lot of unnecessary complexity, a big lack of liberty and too much trouble.

Reactive State shared across your components should be as fun to work with as possible.

A virtual client-side API feels so natural that you will end up with a more understandable and scalable and mantainable code.

Documentation

documentation

Characteristics

  1. It allows you to design a sort of client-side CRUDy API that organize your application state as url-accessible resources.
  2. Then your application can access, change, and subscribe to this resources through urls.
  3. It follows a "Batteries included" Philosophy, to help you deal with undoable histories, deep states, remote APIs, localStorage and fast.
  4. It is extensible through plugins, so you can add a new kind of resources to fit your needs.
  5. You can add transformations and validations to the values you set to the resources.
  6. You use expressjs-like paths to add more functionality to your API
  7. If you do server-side rendering or prerendering, you can use serialize the state and share it with the client.
  8. You can also serialize and deserialize client-side, to store your state in any client-side storage you want, like localstorage or indexedDB

Basic Usage. Examples

Set and get the value of a resource

import { get, set } from 'onget'

get('fast://foo') // undefined

set('fast://foo', 'bar')

get('fast://foo') // 'bar'

Subscribe to a resource

import { onGet, set } from 'onget'

const unsubscribe = onGet('fast://hello', value => { // handler
  console.log(value)
}, {
  first: 'word' // Optionally set a first value only if the response has no value yet
})

set('fast://hello', 'Earth') // The handler will be executed

unsubscribe() // You can unsubscribe

set('fast://hello', 'Mars') // The handler will not be executed

React hook

import React from 'react'
import { useOnGet } from 'onget'

export function MyComponent () {
  const myValue = useOnGet('fast://myResource')

  return (
    <p>{myValue}</p>
  )
}

Modify the behavior of set

import { beforeSet, set } from 'onget'

beforeSet('fast://day', context => {
  if (![
    'monday',
    'tuesday',
    'wednesday',
    'thursday',
    'friday',
    'saturday',
    'sunday'
  ].includes(value)) {
    context.preventSet = true // prevent the set
  }
})
set('fast://day', 'monday')
// get('fast://day') -> 'monday'
set('fast://day', 'fooday')
// get('fast://day') -> 'monday'


beforeSet('fast://count/:item', context => {
  context.value = parseInt(context.value) // modify the value to be set
})
set('fast://count/happyness', '42')
// get('fast://count/happyness') -> 42
set('fast://count/life', 12.3) // 12
// get('fast://count/life') -> 12

Execute some function after the set

import { afterSet, set } from 'onget'

afterSet('/api/name', context => {
  fetch('/api/name', {
    method: 'POST',
    body: JSON.stringify({
      name: context.value
    }),
    headers: {
      'Content-Type': 'application/json'
    }
  })
})

set('/api/name', 'johndoe') // a HTTP POST request will be done

Examples

Forked from https://github.com/reduxjs/redux/tree/master/examples

Realworld Code challenges

Other framework tutorial redone the onGet way

You can’t perform that action at this time.