This package has been deprecated

    Author message:

    Package no longer maintained.

    tsx-create-html-element
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.0 • Public • Published

    tsx-create-html-element

    npm version

    Conventional Commits code style: prettier Built with Spacemacs

    Create html elements from tsx syntax using document.createElement.

    • Support for class elements like in React but without lifecycles or rerender
    • Support for function elements
    • Support for fragments

    Install

    $ npm install tsx-create-html-element

    Update your tsconfig.json:

    // tsconfig.json
    {
      "compilerOptions": {
        "jsx": "react",
        "jsxFactory": "createElement"
      }
    }

    Usage

    Jsx code:

    import { createElement } from "tsx-create-html-element";
     
    const title = "Hello World";
     
    function sayHi() {
      alert(title);
      document.getElementById("greet").innerText = title;
    }
     
    document.getElementById("app").appendChild(
      <div>
        <div id="greet" />
        <button onclick={sayHi}>Say Hi</button>
      </div>
    );

    Equivalent:

    const title = "Hello World";
     
    function sayHi() {
      alert(title);
      document.getElementById("greet").innerText = title;
    }
     
    const divGreetElement = document.createElement("div");
    divGreetElement.id = "greet";
    const buttonElement = document.createElement("button");
    buttonElement.append("SayHi");
    const divElement = document.createElement("div");
    divElement.append(divGreetElement, buttonElement);
    document.getElementById("app").appendChild(divElement);

    Install

    npm i tsx-create-html-element

    DownloadsWeekly Downloads

    0

    Version

    1.3.0

    License

    ISC

    Unpacked Size

    7.29 kB

    Total Files

    6

    Last publish

    Collaborators

    • danielpanpm