example_p1.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>You can define reactive behaviour:</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(params){
        const label_type= params.label_type || "name";
        const default_listener_value= { listen_variable_name: " - " };
        const c= $dom.component("DIV");
            c.add("LABEL", { textContent: `Type your ${label_type}: ` });
                c.add("INPUT", { type: "text", placeholder: params.placeholder, onkeyup: onkeyupHandler });
            c.add("P", { textContent: `Your ${label_type} is: ` }, -2);
                c.add("STRONG", null).onupdate(default_listener_value, onUpdateHandler);
        return c.share;

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