example_t2.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 use another component inside current one (see <a href="https://github.com/jaandrle/dollar_dom_component/blob/master/docs/%24dom_component.md#module_jaaJSU..$dom..instance_component.component"><code>.component</code></a>):</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);
    const sum_updated= $dom.componentListener("update", { sum: 0 }, ({ sum })=> ({ value: sum }));

    pseudoFormComponent({ user_name: "Adam", stuff_arr: [ "socks", "legs" ], color: "red" }).mount(container);
    pseudoFormComponent({ user_name: "Eva", stuff_arr: [ "socks", "hands" ] }).mount(container);

    function pseudoFormComponent({ user_name, stuff_arr= [ "socks" ], color }= {}){
        user_name= user_name ? user_name+"’s" : "yours";
        const color_setup= !color ? null : { className: `example_${color}_color` };

        const { add, addText, component, update, setShift, share }=
        $dom.component("DIV", Object.assign({ textContent: "Form:" }, color_setup));
            setShift(0); //(*) you can imagine this as phantom element which is now child, so in loop ve add siblings=> -1
        for(let i=0, i_length= stuff_arr.length; i<i_length; i++){
            component(counterComponent({ textContent: `Number of ${user_name} ${stuff_arr[i]}: `, onchange }), -1);
        }
            add("P", null, -1);
                add("SPAN", null).onupdate({ sum_main: 0 }, ({ sum_main })=> ({ textContent: ` Last given number: ${sum_main}` }))
                addText(" (", -1);
                add("A", { textContent: "reset", style: "cursor: pointer;", onclick }, -1);
                addText(").", -1);
        return share;
        
        //of course, in real life we nead mor info
        function onchange(sum_main){ update({ sum_main }); }
        //!!! see, `sum` event name is shared with sub-components
        function onclick(){ update({ sum: 0, sum_main: 0 }); }
    }

    function counterComponent({ textContent, onchange: onchangeCallback }){
        const { add, addText, share, update }= $dom.component("P", null);
            add("LABEL", { textContent });
                add("INPUT", { type: "number", onchange }, -1).on(sum_updated);
                add("BUTTON", { textContent: "+", value: 1, onclick }, -1);
                addText(" ", -1);
                //of course, instead of `style` you schould use `className` in production code!
                add("BUTTON", { textContent: "–", value: -1, onclick, style: "padding: .25em .575em;" }, -1);
        return share;

        function onclick(){
            let sum= Number(this.value);
            update(function({ sum: old_sum }){
                sum+= old_sum;
                onchangeCallback(sum);
                return { sum };
            });
        }
        function onchange(){
            const sum= Number(this.value);
            onchangeCallback(sum);
            update({ sum });
        }
    }
    
    //EXAMPLE END
})("gulp_place('app._BUILD_.example_el', 'variable')");
</script>
<!-- example source links -->