├── test ├── index.html ├── test.js ├── index.jsx └── index.js ├── playwright.config.js ├── tsconfig.json ├── package.json ├── jsx-runtime.js ├── LICENSE ├── README.md └── .gitignore /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /playwright.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | testDir: './test', 3 | 4 | webServer: { 5 | command: 'esbuild test/index.jsx --bundle --outdir=test && cd test && serve', 6 | port: 3000, 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "jsx": "react-jsx", 4 | "jsxImportSource": "..", 5 | "baseUrl": ".", 6 | "paths": { 7 | "jsx-runtime": ["jsx-runtime.js"] 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | import {test, expect} from '@playwright/test' 2 | 3 | let outerHTML = `Testing ws-jsx-runtime...Hello, JSX!` 4 | 5 | test('outerHTML matches', async ({page}) => { 6 | await page.goto('http://localhost:3000/') 7 | let documentElement = page.locator('html') 8 | await expect(documentElement).toHaveJSProperty('outerHTML', outerHTML) 9 | }) 10 | -------------------------------------------------------------------------------- /test/index.jsx: -------------------------------------------------------------------------------- 1 | class AppHtml extends HTMLHtmlElement { 2 | connectedCallback() { 3 | this.append( 4 | , 5 | 6 | ) 7 | } 8 | } 9 | 10 | class AppHead extends HTMLHeadElement { 11 | connectedCallback() { 12 | this.append( 13 | Testing ws-jsx-runtime... 14 | ) 15 | } 16 | } 17 | 18 | class AppBody extends HTMLBodyElement { 19 | connectedCallback() { 20 | this.append() 21 | } 22 | } 23 | 24 | class HelloWorld extends HTMLElement { 25 | connectedCallback() { 26 | this.append(`Hello, ${this.getAttribute('name')}!`) 27 | } 28 | } 29 | 30 | document.documentElement.replaceWith() 31 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wc-jsx-runtime", 3 | "version": "1.0.1", 4 | "description": "A JSX transform for Web Components", 5 | "type": "module", 6 | "module": "./jsx-runtime.js", 7 | "scripts": { 8 | "test": "npx playwright test" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/jed/wc-jsx-runtime.git" 13 | }, 14 | "author": "Jed Schmidt", 15 | "license": "MIT", 16 | "bugs": { 17 | "url": "https://github.com/jed/wc-jsx-runtime/issues" 18 | }, 19 | "homepage": "https://github.com/jed/wc-jsx-runtime#readme", 20 | "exports": { 21 | "./jsx-runtime": { 22 | "browser": "./jsx-runtime.js", 23 | "import": "./jsx-runtime.js" 24 | } 25 | }, 26 | "devDependencies": { 27 | "@playwright/test": "^1.24.2", 28 | "serve": "^14.0.1", 29 | "esbuild": "^0.14.51" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /jsx-runtime.js: -------------------------------------------------------------------------------- 1 | export {jsx, jsx as jsxs, jsx as Fragment} 2 | 3 | let definitions = new Map() 4 | 5 | function jsx(node, props, key) { 6 | if (node === jsx) node = document.createDocumentFragment() 7 | 8 | else if (typeof node === 'function') { 9 | let definition = definitions.get(node) 10 | 11 | if (!definition) { 12 | let is = node.name.replace(/(.)([A-Z])/g, '$1-$2').toLowerCase() 13 | let name = Object.getPrototypeOf(node).name.replace(/^HTML|Element$/g, '').toLowerCase() 14 | definition = name ? [name, {is}] : [is] 15 | customElements.define(is, node, name ? {extends: name} : null) 16 | definitions.set(...definition) 17 | } 18 | 19 | node = document.createElement(...definition) 20 | } 21 | 22 | else node = document.createElement(node) 23 | 24 | if (key) node.setAttribute('key', key) 25 | 26 | for (let name in props) { 27 | if (name !== 'children') node.setAttribute(name, props[name]) 28 | 29 | else Array.isArray(props[name]) 30 | ? node.append(...props[name]) 31 | : node.append(props[name]) 32 | } 33 | 34 | return node 35 | } 36 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Jed Schmidt 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | (() => { 2 | // jsx-runtime.js 3 | var definitions = /* @__PURE__ */ new Map(); 4 | function jsx(node, props, key) { 5 | if (node === jsx) 6 | node = document.createDocumentFragment(); 7 | else if (typeof node === "function") { 8 | let definition = definitions.get(node); 9 | if (!definition) { 10 | let is = node.name.replace(/(.)([A-Z])/g, "$1-$2").toLowerCase(); 11 | let name = Object.getPrototypeOf(node).name.replace(/^HTML|Element$/g, "").toLowerCase(); 12 | definition = name ? [name, { is }] : [is]; 13 | customElements.define(is, node, name ? { extends: name } : null); 14 | definitions.set(...definition); 15 | } 16 | node = document.createElement(...definition); 17 | } else 18 | node = document.createElement(node); 19 | if (key) 20 | node.setAttribute("key", key); 21 | for (let name in props) { 22 | if (name !== "children") 23 | node.setAttribute(name, props[name]); 24 | else 25 | Array.isArray(props[name]) ? node.append(...props[name]) : node.append(props[name]); 26 | } 27 | return node; 28 | } 29 | 30 | // test/index.jsx 31 | var AppHtml = class extends HTMLHtmlElement { 32 | connectedCallback() { 33 | this.append( 34 | /* @__PURE__ */ jsx(AppHead, {}), 35 | /* @__PURE__ */ jsx(AppBody, {}) 36 | ); 37 | } 38 | }; 39 | var AppHead = class extends HTMLHeadElement { 40 | connectedCallback() { 41 | this.append( 42 | /* @__PURE__ */ jsx("title", { 43 | children: "Testing ws-jsx-runtime..." 44 | }) 45 | ); 46 | } 47 | }; 48 | var AppBody = class extends HTMLBodyElement { 49 | connectedCallback() { 50 | this.append(/* @__PURE__ */ jsx(HelloWorld, { 51 | name: "JSX" 52 | })); 53 | } 54 | }; 55 | var HelloWorld = class extends HTMLElement { 56 | connectedCallback() { 57 | this.append(`Hello, ${this.getAttribute("name")}!`); 58 | } 59 | }; 60 | document.documentElement.replaceWith(/* @__PURE__ */ jsx(AppHtml, {})); 61 | })(); 62 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # wc-jsx-runtime 2 | 3 | A JSX transform for Web Components 4 | 5 | ## Usage 6 | 7 | This library transforms JSX in web components into DOM operations with [React's new JSX transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html), so all you need to do is configure your build tool to use `https://esm.sh/wc-jsx-runtime` for `jsxImportSource`. 8 | 9 | This transform: 10 | 11 | 1. Turns all JSX into DOM operations (ie, `
` becomes `document.createElement('div')`), 12 | 2. Automatically calculates the tag name of each web component by hyphen-casing its constructor name (ie, `AppBody` becomes `app-body`), 13 | 3. Determines whether the web component is autonomous (ie, ``) or custom (ie, `
`) based on whether it inherits from `HTMLElement`. 14 | 4. Automatically runs `customElements.define` the first time the web component is instantiated. 15 | 16 | ## Example 17 | 18 | Here's [an example](./test/index.jsx) that uses both custom (such as ``) and autonomous (such as ``) web components. 19 | 20 | ```jsx 21 | class AppHtml extends HTMLHtmlElement { 22 | connectedCallback() { 23 | this.append( 24 | , 25 | 26 | ) 27 | } 28 | } 29 | 30 | class AppHead extends HTMLHeadElement { 31 | connectedCallback() { 32 | this.append( 33 | Testing ws-jsx-runtime... 34 | ) 35 | } 36 | } 37 | 38 | class AppBody extends HTMLBodyElement { 39 | connectedCallback() { 40 | this.append() 41 | } 42 | } 43 | 44 | class HelloWorld extends HTMLElement { 45 | connectedCallback() { 46 | this.append(`Hello, ${this.getAttribute('name')}!`) 47 | } 48 | } 49 | 50 | document.documentElement.replaceWith() 51 | ``` 52 | 53 | Once run, the DOM will look like this: 54 | 55 | ```html 56 | 57 | 58 | Testing ws-jsx-runtime... 59 | 60 | 61 | Hello, JSX! 62 | 63 | 64 | ``` 65 | 66 | ## Todo 67 | 68 | - Add special cases for elements with names that don't conform to `HTML${tagName}Element` pattern. 69 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | /test-results/ 106 | /playwright-report/ 107 | /playwright/.cache/ 108 | .DS_Store 109 | --------------------------------------------------------------------------------