Nostradamus Prophecy Machine

    @ledge/jsx
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.0 • Public • Published

    @ledge/jsx test status

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

    Features

    • Full Custom Elements support
    • Full TypeScript support
    • Tiny footprint
      • Zero runtime dependencies
      • Zero virtualization overhead

    Usage

    import { h } from '@ledge/jsx';
    
    let clickCounter = 0;
    const jsxButton = <button id='native-onlick' class='btn btn-dark my-4'
    	onclick={() => console.info(`Clicked ${++clickCounter} times`)}>
    	Click Me
    </button>;
    
    jsxButton.click(); // "Clicked 1 times"
    jsxButton.click(); // "Clicked 2 times"
    
    class CustomElementExample extends HTMLElement {
    	connectedCallback() {
    		this.classList.add('lead');
    	}
    }
    
    customElements.define('custom-element-example', CustomElementExample);
    
    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);
    
    jsxSection.parentElement === document.body; // true
    jsxButton.closest('.card') === jsxSection;  // true

    TypeScript

    The following configuration is required:

    {
    	"compilerOptions": {
    		"lib": ["dom"],
    		"jsx": "react",
    		"jsxFactory": "h"
    	}
    }

    By default, the assigned type will be HTMLElement. If you need the subtype, cast the expression:

    const tpl = <template>{/** ... */}</template> as HTMLTemplateElement;
    const tplClone = tpl.content.cloneNode(true); // ok

    A global CustomElement interface is provided for working with Custom Elements:

    // error without extending HTMLElement
    class CustomElementExample extends HTMLElement implements CustomElement {
    	// autocompletion & documentation for callbacks
    	public connectedCallback() {
    			// ...
    	}
    	// error on mistyped parameter
    	public attributeChangedCallback(name: string) {
    			// ...
    	}
    }

    Keywords

    none

    Install

    npm i @ledge/jsx

    DownloadsWeekly Downloads

    2

    Version

    1.3.0

    License

    EUPL-1.2

    Unpacked Size

    25.5 kB

    Total Files

    9

    Last publish

    Collaborators

    • ledge