galho

galho is js library for create and manipulate dom elements without need compiling, configuration or VirtualDom

Why?

React, Svelte and other modern tools are for a lot of small and medium size project an over engineering galho offer a much simple approach because it don’t need any setup, configuration, cli or compilation, it is simply a wrapper around Dom Elements with some other utility for SVG, List and Data Binding

Installation

$3

npm i galho

$3

yarn install galho

$3

js

import ... from "https://cdn.jsdelivr.net/npm/galho/galho.min.js"





or if you prefer this version will declare two global variable called

$ and g

html







Exemples



$3

js

import { g, get } from "galho";



//creating a button, add class 'bt-class', apend content 'Show alert' and add a handler to click event

let buttton = g("button", "bt-class", "Show alert").on("click",() => {

    alert("Hello World!")

});

//query body element and append the button

get("body").add(button);

$3

html

js

import { get } from "galho";



get("#list")

    //add inline style

    .css({background:"#e333"})

    //add class

    .c("new-class")

    //remove class

    .c("old-class",false)

    //get all children elements

    .childs()

    //add event listener to all childs

    .on("click",()=>alert("Clicked!"))

    .do((e,i)=>

        //add attribute 

        e.attr("title",

This is a the element nº: ${i+1}

))





$3



for this we are using an utility called orray(Observable aRRAY) that is an array with suport for binding, events, etc.

js

import { g, get } from "galho";

import orray from "galho/orray.js";



let list = orray(), input=g("input");



get("body").add([

    //bind list to created element "ul" i.e. for each change(add, remove, edit) that occur in list will be reflected in the element (ul)

    list.bind(g("ul"),e=>g("li", [e, g("button",["x"]).on("click",list.remove(e))])),

    g("form", [

        input,

        g("button",{type:"submit"},"Adicionar").on("click",()=>{

            list.add(input.v());

            //clear input

            input.v("");

        })

    ])

]);

$3

js

import { getAll } from "galho";



getAll(".dropdown").do(dd=>dd

    //add event click to toggle class open on dropdown

    .on("click", ()=>dd.tcls("open"))

    //search all item inside it show an alert wenever it is ben clicked

    .query(".item").do(i=>i.on("click", ()=>alert(

Dropdown ${dd.attr("name")} selected ${i.text()}

)))

)

$3

js

import { svg, get } from "galho";



get("body").add(svg('svg', { viewBox: "0 0 100 100" }, [

    svg('rect', { fill: "blue", width: "100", height:"100" }),

    svg('rect', { fill: "red", width: "50", height:"50" }),

    svg('rect', { fill: "green", width:"25", height:"25" }),

]))

$3

js

import { css, get } from "galho";



// create css

let style = css({

    h1: {

        fontSize:"20px"

    },

    ".bt": {

        background: "#28C",

        border: "solid 1px #6AE",

        ":hover":  { background:"#39D" },

        ":active": { background:"#59E" },

    },

});

//query for head element and apend an style element with css created above

get("head").add(g("style", null, style));





$3



when it came to reactivity galho do not use VirtualDom, what it does es to listen to binding.

js

import { Component, g, get } from "galho";



///Component permit events and data binding if none of this is needed a function can be used

class Input extends Component{

    view(){

        //this.p represent the properties of this Component 

        let p = this.p;

        let input = g("input", { name: p.name, type: p.type })

        //when user input change the value property and all listeners asociated to it will be release

        .on("input",()=>this.set("value",input.v()));

        return div([

            input,

            //bind the span element to the value property

            this.bind(g("span"),s=>s.set("Value: "+p.value),"value")

        ]);   

    }

}

get("body").add(new Input({name:"input",type:"number"}))