rauricoste-spa

Summary

This lib is a group of tools to help building Single Page Applications. They are based on hyperhtml and a store approach similar to redux.

It does not contain any styling.

Exemple

const SpaTools = require("rauricoste-spa")

class XRoot extends SpaTools.Component {
    constructor() {
        super()
        this.form = new SpaTools.Form()
        this.form.addField({
            name: "myField",
            label: "value changer",
            type: "number",
            mandatory: true,
            onChange: (value) => {
                window.Actions.setValue(value)
            }
        })
    }
    submit() {
        const errors = this.form.validate({myField: this.props.value})
        console.log("errors", errors)
        window.Actions.submit()
    }
    render(props) {
        super.render(props)
        const {Actions} = window
        const field = this.form.getField("myField")
        return this.localRender`<div class="XRoot">
            <div>value : ${props.value+""}</div>
            <input type="button" onclick=${Actions.add.bind(Actions)} value="Add" />
            <input type="button" onclick=${Actions.addMultiple.bind(Actions, 100)} value="Add 100" />
            <input type="button" onclick=${Actions.subtract.bind(Actions)} value="Subtract" />
            ${
                this.child(SpaTools.Input).render({
                    def: field,
                    value: props.value,
                    error: props.displayErrors && field.validate(props.value)
                })
            }
            <input type="button" onclick=${this.submit.bind(this)} value="Submit" />
        </div>`
    }
}
const uiComponent = new XRoot().attachId("app")

class Actions {
    add() {
        const {value} = this.getState()
        this.setValue(value + 1)
    }
    subtract() {
        const {value} = this.getState()
        this.setValue(value - 1)
    }
    addMultiple(count) {
        for (let i=0;i<count;i++) {
            this.add()
        }
    }
    setValue(value) {
        this.stateWriter.set("value", value)
        this.stateWriter.set("displayErrors", true)
    }
    submit() {
        this.stateWriter.set("displayErrors", true)
    }
}

const spa = new SpaTools.Spa({
    initState: {
        value: null,
        displayErrors: false
    },
    uiComponent,
    Actions: new Actions()
})
spa.stateStream.subscribe(info => {
    console.log(info)
})