Piece-of-cake NPM

PieceOfCake

JavaScript like it should be

Install

npm install piece-of-cake

or just include a script tag, like

<script src="https://unpkg.com/piece-of-cacke"></script>

Define your html like ever:

<body>
    <input placeholder="what to to next?"/>
    <button onclick="addTodo" disabled>Add</button>
    <ul><!-- todo entries shall go here --></ul>

    <script>
        // functions like 'addTodo' and 'onChangeFilter' go here
    </script>
</body>

Extract your event handling functions into there own scope, where they belong:

class MyControllerClass {

     addTodo() {
        const input = document.getElementsByTagName("input")[0]
        const list = document.getElementsByTagName("ul")[0]
        const value = input.value        
        const li = document.createElement("li")
        li.innerText = value
        list.apendChild(li)        
    }
    
}

Extend the PieceOfCake Controller to get access to some useful helper methods (this is optional)

class MyControllerClass extends PieceOfCake.Controller {
    //...
}

Simplify bindings to dom elements you need to access in your event handlers

    <input placeholder="what to to next?"/>
    <button onclick="addTodo" disabled>Add</button>
    <ul data-id="todolist">
        <!-- use a standard data tag here. Nothing special. No Side-effects -->
    </ul>

class MyControllerClass extends {

    get input() {
        return this.find("input")
    }

    get list() {
        return this.findByDataID("todolist")
    }

    addTodo() {
       // ...
    }
    
}

Store your state in its own field, where it belongs:

class MyControllerClass extends {

    get todos() {
        return this._todos || [] // 'this._todos' is a kind of backing field. Nothing special. Just JavaScript
    }

    set todos(value) {
        this._todos = value
    }

    addTodo() {
       // ...
       this.todos = [this.todos, text]
       // ... update todo <ul>
    }
    
}

Connect your rendering logic to methods that update your state to keep your controller clean

class MyControllerClass extends {

    set todos(value) {
        this._todos = value
        this._renderTodos()
    }

    addTodo() {
       this.todos = [this.todos, text]
    }

    _renderTodos() {
        this.list.innerHTML = ""
        this.todos.forEach(text => {
            const li = document.createElement("li")
            li.innerText(text)
            this.list.appendChild(li)
        })
    }
    
}

Make your controller class visible to the library and connect it to a specific sub-tree of your dom it should control

PieceOfCake.controllerClasses.push(MyControllerClass)

    <body data-controller="MyControllerClass">
        <!-- Nothing special with the data-attribute. But you must call it 'conrtoller', otherweise the library won't find it-- >
    </body>

Use optional field and element binding shorthands in your controller

class MyControllerClass extends {
    static elements = {
        input: "input",     // this will bind 'this.input' to an element w/ data-id="input"
        list: "todolist"
    }

    static fields = {
        todos: {                    // this will create a getter and setter for the field 'todos'
            defaultValue: [],       // it creates a backing field w/ default Value []
            set(value) {            // define custom behavour after the backing field was updated here
                this._renderTodos
            }
        }
    }
}

Example

Just look at the basic and advanced to get an idea of how things work.

Controller HTML Event

@infinitebrahmanuniverse/nolb-pie @everything-registry/sub-chunk-2436

0.1.0

7 years ago