#Quereaze

Easily build IO UI's that utilize Undo, History, and Abort Http Request Logic. Simple html syntax combined with declaritive typing allow the library to keep a memoized history of parameters.

GITHUB DEMO

Table of contents

• Table of contents
• Installation
• Usage
  • Constructor
    • Root
    • Defaults
    • Template
  • QuereazeIO
  • QuereazeHttp
• Conclusion
• Dependencies

Installation

npm install quereaze -S

Usage

Constructor - (QuereazeIO and QuereazeHttp)

* root: HTMLElement
* defaults: JS Object describing parameters
* template: Optional, can be supplied in constructor or inline with root

Example: 

{
    root: document.getElementById("root"),
    defaults: {
        strKey: "",
        numKey: 0,
        boolKey:  
    },
    template: `
        <input type="text" quereaze="strKey" />
        <input type="number" quereaze="numKey" />
        <input type="checkbox" quereaze="boolKey" />
        <button quereaze-submit>Submit</button>
    `
}

1. String: (defaultValue = "") <input type="text" quereaze="strKey" />

2. Number: (defaultValue = 0) <input type="number" quereaze="numKey" />

3. Boolean: (defaultValue = false) <input type="checkbox" quereaze="boolKey" />

4. Submit On Click (Optional) <button quereaze-submit>Submit</button>

The quereaze-submit element is optional. This is because all the quereaze elements are wired with rxjs.Observable sequences. These sequences emit the new query params whenever the enter key is pressed.

The template will be parsed and matched against the defaults supplied to Quereaze The defaults can contain additional params but an error will throw if additional quereaze params are found in the template of the values in the template do not === the default values.

Once the constructor has been created it is sent of to one of the Quereaze sequences below to be wired up.

QuereazeIO - Form Only

import { QuereazeIO } from 'Quereaze';

QuereazeIO({ ...Constructor }) ({ onSubmit: ({ data, quereaze }) => { quereaze.save() quereaze.history; //Array of all submitted params data // Current } })

With the simple declaritive syntax Quereaze is able to keep params synced and alert the onSubmit handler. All of the DOM interaction is abstracted and the new params can be used to update the UI as needed.

The quereaze.history Array also allows for a dead simple integration of History or Undo actions.

QuereazeHttp - Form and HTTP

import { QuereazeHttp } from 'Quereaze';

QuereazeHttp({ ...constructor }) ({ onSubmit: (params) => { // Show Loader return { method: "GET"|"POST"|"PUT"|"DELETE", url: "", // Enpoint, params available to construct body: params // Make changes to params if needed } },

onSuccess: ({ data, quereaze }) => {
    // Stop Loader
    // Display response data
},

onError: (err) => console.log(err)

})

With two additional handlers Quereaze is able to not only keep form parameters in sync but also fire XHR responses to a specified endpoints.

Conclusion

The days of manually interacting with the DOM are long gone. Browsers API's are constantly changing and deprecating and working with them alongside complex Business logic is a very complicated task. Often leading to bugs and hours of focus spent not on the end goal but on StackOverflow.

With Quereaze, all the focus now is on the 3 main components that make up a Robust IO Sttate Machine.

1. User Experience, Style
2. Where data lives, how it's accessed
3. Displaying Data

All the state management, HTMLInput interaction is abstracted away and given back to the user in a chronological sequence of events which is much easier to reason with.

Dependencies

• rxjs