galho is js library for create and manipulate dom elements without need compiling, configuration or VirtualDom
npm i galho
yarn install galho
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
`html
`
`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"}))
``