@ledge/jsx

@ledge/jsx

Simple JSX implementation for working directly with HTML elements. Types included.

import { h } from '@ledge/jsx';

class CustomElementExample extends HTMLElement {
	public connectedCallback() {
		this.classList.add('lead');
	}
}

customElements.define('custom-element-example', CustomElementExample);

let clickCounter = 0;
const jsxButton = <button id='native-onlick' class='btn btn-dark my-4'
	onclick={() => console.info(`Clicked ${++clickCounter} times`)}>
	Try clicking this button!
</button>;

const jsxSection =
	<section class='card'>
		<h2>DOM in JSX</h2>
		<h3>Work directly with DOM elements using JSX's declarative syntax</h3>
		<custom-element-example>Custom Elements?</custom-element-example>
		<br />
		<CustomElementExample>Fully Supported!</CustomElementExample>
		<br />
		{jsxButton}
	</section>;

document.body.appendChild(jsxSection);

jsxButton.click(); // "Clicked 1 times"
jsxButton.click(); // "Clicked 2 times"

console.log(jsxSection.parentElement === document.body); // true
console.log(jsxButton.closest('.card') === jsxSection);  // true