jsx-for-web-components v1.2.1
jsx-for-web-components
WIP: A basic JSX factory for use in projects leveraging web components
Features
- Drop-in ready
- TypeScript support
Requirements
- Compiler that can convert JSX to JSX factory JavaScript calls
Installation
yarn add jsx-for-web-componentsGetting Started
We'll use TypeScript and Rollup to build for the browser. Let's start with pulling in some dependencies:
yarn add --dev typescript rollup rollup-plugin-node-resolve rollup-plugin-typescript2A couple configuration files to help the project build correctly:
./tsconfig.json
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "h",
"moduleResolution": "node",
"target": "es2015"
}
}./rollup.config.js
import resolve from "rollup-plugin-node-resolve";
import typescript from "rollup-plugin-typescript2";
export default {
input: "./src/index.tsx",
output: {
file: "./dist/index.js",
format: "iife",
},
plugins: [
resolve({
extensions: [ '.js', '.ts', '.tsx' ],
}),
typescript({
typescript: require("typescript"),
}),
],
};Define your custom element:
./src/index.tsx
import { h, JSXCustomElement } from "jsx-for-web-components";
class ExampleElement extends JSXCustomElement {
static elementName = "example-element";
public render() {
return <div id="testing">hello</div>;
}
}
ExampleElement.register();Leverage your custom element:
./index.html
<!DOCTYPE html>
<script src="/dist/index.js" defer></script>
<example-element></example-element>After building the project with rollup -c rollup.config.js, you should be able to load your HTML in a browser to see your work.
Notes
connectedCallback
While there is some setup performed within the constructor of JSXCustomElement, the DOM nodes defined by your render method are not attached until the connectedCallback method is called. If you need to leverage this callback within your code, be sure to call the super method, e.g.:
class ExampleElement extends JSXCustomElement {
// ...
public connectedCallback() {
super.connectedCallback();
// your code
}
}License
This project is licensed under the MIT License. See LICENSE for details.