example_p2.sub.html

gulp_place("app._BUILD_.example_el= toELID(app._BUILD_.example_el_id++)", "eval");
gulp_place("app._BUILD_.example_onkeyup= toKeyUp(app._BUILD_.example_el)", "eval");
<p>The same example with using JavaScript desctructuring syntax:</p>
<div class="output" id="gulp_place('app._BUILD_.example_el', 'variable')"></div>
<script onkeyup="gulp_place('app._BUILD_.example_onkeyup', 'variable')" contenteditable="">
(function(element_id){
    //EXAMPLE START

    const container= document.getElementById(element_id);

    textInputComponent({ label_type: "name", placeholder: "Peter" }).mount(container);
    textInputComponent({ label_type: "surname", placeholder: "Black" }).mount(container);

    function textInputComponent({ label_type= "name", placeholder }){
        const { add, share, update }= $dom.component("DIV");
            add("LABEL", { textContent: `Type your ${label_type}: ` });
                add("INPUT", { type: "text", placeholder, onkeyup });
            add("P", { textContent: `Your ${label_type} is: ` }, -2);
                add("STRONG", null).onupdate({ textContent: " - " }, ({ textContent })=> ({ textContent }));
        return share;

        function onkeyup(){ update({ textContent: this.value }); }
    }
    
    //EXAMPLE END
})("gulp_place('app._BUILD_.example_el', 'variable')");
</script>
<!-- example source links -->