arkflows
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.0 • Public • Published

    Arkflows

    Light-weight state container for JavaScript app.

    Store which doesn't hurt.

    Arkflows is very light-weight state container for JavaScript app. It contain shared state for JavaScript create( to access on any piece of code.
    Arkflows is inspired by Redux but with only a simple and handy logic. Under the hood, it use a simple collection of JavaScript API which supported since IE 9.

    Arkflows feature:

    • A very light-weight storage: 0.7KB (gzipped).
    • Very high performance operation.
    • Middleware support.
    • Readable error message, easier to debug.
    • As simple as LocalStorage.
    • Get realtime storage change.
    • TypeScript support.
    • Support on every browser even IE 10.

    Readable error

    One thing people most hate about, unreadable error by human. It's very annoying yet not productive to anyone.
    Arkflows error is readable by human and suggested a way to resolve.

    let store = new Store()
     
    // Create "sugar" store with initial value of { amount: 0 }
     
    store.create("sugar", { amount: 0 }) // { amount: 0 }
    store.create("sugar", { amount: 0 }) // sugar is already existed.

    A simple way to create store

    Arkflows is very easy to be created, maintained, and debugged. It's just a collection of simple API under the hood.

    Create Store

    Let's create a simple store with Arkflows.
    Arkflows is created with class to contain reusable collection of function.

    import Store from "arkflows"
     
    let store = new Store()

    create() will handle storage creation. It require name and initial storage value.

    let store = new Store()
     
    store.create("sugar", { amount: 0 })

    This will create a store name "sugar" with initial value of { amount: 0 }.

    Get data

    get() is introduced here, to retrieve data in the storage.

    let store = new Store()
     
    store.create("sugar", { amount: 0 })
     
    store.get("sugar")         // { amount: 0 }
    store.get("sugar").amount  // 0

    If you get data from storage which isn't existed, it'll return error.

    let store = new Store()
     
    store.get("sugar") // sugar isn't existed. Please create it with create("sugar")
     
    store.create("sugar", { amount: 0 })
    store.get("sugar") // { amount: 0 }
     
    store.get("salt") // salt isn't existed. Please create it with create("sugar")

    Update store

    Mutate storage data, doesn't overwrite existed value if new value is not provided.

    let store = new Store()
     
    store.create("sugar", { amount: 0 })
    store.get("sugar") // { amount: 0 }
     
    store.update("sugar", { amount: 1 })
    store.get("sugar") // { amount: 1 }

    Set store

    Overwrite a storage. Store's value will be overwriten. It take store name and value.

    let store = new Store()
     
    store.create("sugar", { ingredient: "sugar", amount: 0 })
    store.get("sugar") // { ingredient: "sugar", amount: 0 }
     
    store.set("sugar", { amount: 0 })
    store.get("sugar") // { amount: 0 }

    Subscribe to the storage

    Arkflows is able to subscribe to the storage change in real-time.

    import Store from "arkflows"
     
    let store = new Store()
     
    store.create("sugar", { amount: 0 })
     
    // Trigger when store is updated.
    store.subscribe("sugar", data => {
        console.log(data) // Get current value of sugar. eg. { amount: 1 }
    })
     
    store.update("sugar", { amount: 1 })
     
    // Support multiple listener at once.
    store.subscribe(["sugar", "milk"], data => {
        console.log(data) // Get current value of sugar. eg. { amount: 1 }
    })

    Middleware

    A function which invoked before operation succeed. Mutate store data is recommended here.

    import Store from "./purple.ts"
     
    let store = new Store()
     
    store.applyMiddleware((store, process) => {
      console.log(store, `Process: ${process}`) // { amount: 0 } Process: create(
      return store
    })
     
    store.create("sugar", { amount: 0 })
    • list - Get every store name.

      store.create("sugar", {})
      store.list() // ["sugar"]
    • model - Get collection of store's model. An equivalent to Object.entries()

      store.create("sugar", {
        amount: 0
      })
      store.model() // [
        [
          0"sugar",
          1{ amount: 0 }
        ]
      ]

    Keywords

    none

    Install

    npm i arkflows

    DownloadsWeekly Downloads

    8

    Version

    0.4.0

    License

    MIT

    Unpacked Size

    22.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • aomkirby123