A JSX transform for Web Components
This library transforms JSX in web components into DOM operations with React's new JSX transform, so all you need to do is configure your build tool to use https://esm.sh/wc-jsx-runtime for jsxImportSource.
This transform:
- Turns all JSX into DOM operations (ie,
<div/>becomesdocument.createElement('div')), - Automatically calculates the tag name of each web component by hyphen-casing its constructor name (ie,
AppBodybecomesapp-body), - Determines whether the web component is autonomous (ie,
<hello-world>) or custom (ie,<div is="hello-world">) based on whether it inherits fromHTMLElement. - Automatically runs
customElements.definethe first time the web component is instantiated.
Here's an example that uses both custom (such as <html is="app-html">) and autonomous (such as <hello-world></hello-world>) web components.
class AppHtml extends HTMLHtmlElement {
connectedCallback() {
this.append(
<AppHead />,
<AppBody />
)
}
}
class AppHead extends HTMLHeadElement {
connectedCallback() {
this.append(
<title>Testing ws-jsx-runtime...</title>
)
}
}
class AppBody extends HTMLBodyElement {
connectedCallback() {
this.append(<HelloWorld name='JSX'/>)
}
}
class HelloWorld extends HTMLElement {
connectedCallback() {
this.append(`Hello, ${this.getAttribute('name')}!`)
}
}
document.documentElement.replaceWith(<AppHtml />)Once run, the DOM will look like this:
<html is="app-html">
<head is="app-head">
<title>Testing ws-jsx-runtime...</title>
</head>
<body is="app-body">
<hello-world>Hello, JSX!</hello-world>
</body>
</html>- Add special cases for elements with names that don't conform to
HTML${tagName}Elementpattern.