Module jsx-runtime/mod

a minimal implementation of JSX runtime element creation.
to use in esbuild's javascript build API, you will need to do one of the following options (or do both):

1. option 1 (preferred):
   for JSX to work with your IDE's LSP, and for esbuild to automatically discover the hyperscript functions, you will need to include the following two comment lines at the top of your .tsx script:

/** \@jsx h */
/** \@jsxFrag hf */
Copy

2. option 2 (no LSP support):
   in the esbuild build options (BuildOptions), set jsxFactory = "h" and jsxFragment = "hf".

import { build, stop } from "https://deno.land/x/esbuild/mod.js"
build({
    entryPoints: ["./path/to/your/script.tsx"],
    jsxFactory: "h",
    jsxFragment: "Fragment",
    // other build options
    minify: true,
})
stop()
Copy

and now in your .jsx script, you should:

• import createHyperScript from this module
• create a reactive signal Context
• call createHyperScript with the signal context ctx as the argument
• the returned tuple will contain 3 elements:
  • the first element should be named h (which is the name you declare as \@jsx h in option 1 or jsxFactory = "h" in option 2)
  • the second element should be named hf (which is the name you declare as \@jsxFrag hf in option 1 or jsxFragment = "hf" in option 2)
  • the third can be named anything

Example

// the `\@jsx h` comment comes here, but I can't show multiline comments in this documentation.
// the `\@jsxFrag hf` comment comes here, but I can't show multiline comments in this documentation.

import { createHyperScript } from "./path/to/tsignal/jsx-runtime/mod.ts"
import { Context } from "./path/to/tsignal/mod.ts"

const ctx = new Context()
const [h, hf, namespaceStack] = createHyperScript(ctx)

const my_elem = <div>Hello world</div>
const my_fragment_elems = <>
    <span>World<span>
    <span>Hello<span>
</>
const my_elem2 = <div>...my_fragment_elems</div>
document.body.appendChild(my_elem)
document.body.appendChild(my_elem2)

// when creating svgs or xml, you will have to change the DOM namespace, so that the correct kinds of `Node`s are created.
namespaceStack.push("svg")
const my_svg = <svg viewBox="0 0 200 200">
    <g transform="translate(100, 50)">
        <text text-anchor="middle">SVG says Hi!</text>
        <text y="25" text-anchor="middle">SVG stands for "SUGOI! Vector Graphics"</text>
    </g>
</svg>
namespaceStack.pop()
Copy