Wc-jsx-runtime NPM

wc-jsx-runtime

A JSX transform for Web Components

Usage

This library transforms JSX in web components into DOM operations. 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/> becomes document.createElement('div')),
Automatically calculates the tag name of each web component by hyphen-casing its constructor name (ie, AppBody becomes app-body),
Determines whether the web component is autonomous (ie, <hello-world>) or custom (ie, <div is="hello-world">) based on whether it inherits from HTMLElement.
Automatically runs customElements.define the first time the web component is instantiated.

Example

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>

Todo

Add special cases for elements with names that don't conform to HTML${tagName}Element pattern.

@infinitebrahmanuniverse/nolb-wc @everything-registry/sub-chunk-3118

1.0.1

2 years ago

1.0.0

2 years ago