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

    0.3.3 • Public • Published

    Purple Tea

    Light-weight state container for JavaScript app.

    Store which doesn't hurt.

    Purple Tea is very light-weight state container for JavaScript app. It contain shared state for JavaScript create( to access on any piece of code.
    Purple tea 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.

    Purple Tea feature:

    • A very light-weight storage: 0.6KB (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.
    Purple tea error is readable by human and suggested a way to resolve.

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

    A simple way to create store

    Purple Tea 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 Purple Tea.
    Purple Tea is created with class to contain reusable collection of function.

    import Store from "purple-tea"
     
    let tea = new Store()

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

    let tea = new Store()
     
    tea.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 tea = new Store()
     
    tea.create("sugar", { amount: 0 })
     
    tea.get("sugar")         // { amount: 0 }
    tea.get("sugar").amount  // 0

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

    let tea = new Store()
     
    tea.get("sugar") // sugar isn't existed. Please create it with create("sugar")
     
    tea.create("sugar", { amount: 0 })
    tea.get("sugar") // { amount: 0 }
     
    tea.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 tea = new Store()
     
    tea.create("sugar", { amount: 0 })
    tea.get("sugar") // { amount: 0 }
     
    tea.update("sugar", { amount: 1 })
    tea.get("sugar") // { amount: 1 }

    Set store

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

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

    Subscribe to the storage

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

    import Store from "./purple.ts"
     
    let tea = new Store()
     
    tea.create("sugar", { amount: 0 })
     
    // Trigger when store is updated.
    tea.subscribe("sugar", data => {
        console.log(data) // Get current value of sugar. eg. { amount: 1 }
    })
     
    tea.update("sugar", { amount: 1 })
     
    // Support multiple listener at once.
    tea.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 tea = new Store()
     
    tea.applyMiddleware((store, process) => {
      console.log(store, `Process: ${process}`) // { amount: 0 } Process: create(
      return store
    })
     
    tea.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 purple-tea

    DownloadsWeekly Downloads

    41

    Version

    0.3.3

    License

    MIT

    Unpacked Size

    13 kB

    Total Files

    6

    Last publish

    Collaborators

    • aomkirby123