jsx-dom-builder

Description

This is a library that allows to use jsx to create a wrapper to the dom elements, that you can use to change anything within that dom element

Instalation

Create a vite vanilla app with the command:

npm create vite

open the project folder and run the following commands

npm install
npm install jsx-dom-builder

create the vite.config.js in the root directory of your project, with the following code:

import { defineConfig } from "vite"
import  jsxDomBuilderVitePlugin  from "jsx-dom-builder/vite-plugin"
// custom jsx pragma
export default defineConfig({
  plugins:[jsxDomBuilderVitePlugin()],
})

Example

gh pages

source

import "./style.css"
import Counter from "./components/counter.jsx"
import Title from "./components/title.jsx"
import RefExample from "./components/ref-example.jsx"

const app = 
<div class="container">
    <Title text="vite + jsx-dom-builder"/>
    <Counter />
    <RefExample />
</div>

app.parent(document.body)

Just like to react you can create a component:

export default function Title( { text } )
{
    const title = 
        <h1 
            class="title" 
        >
            {text}
        </h1>
    return title
}

Every JSX elements are dom-builder elements and, here is what you can do with them: here.

export default function Counter()
{
    const data = effect( { count: 0 } )

    const button = 
        <button 
            class="button" 
            effect={data}
        >
            Count is: { () => data.count }
        </button>

    button.event("click", () => data.count++ )

    return button
}

You can also pass an object in the ref property and the element will store a entry with its id as key and, its dom-builder element as the value;

export default function RefExample()
{

    const ref = {}

    const container = 
    <div>
        <button class="button" id="main" ref={ref}>Main</button>
        <button class="button" id="secondary" ref={ref}>Secondary</button>
    </div>

    ref.main.event("click", () => alert("Main button clicked") )
    ref.secondary.event("click", () => alert("Secondary button clicked") )

    return container
}