{"id":20513671,"url":"https://github.com/webreflection/jsx2tag","last_synced_at":"2025-10-26T21:34:29.664Z","repository":{"id":49660157,"uuid":"375367267","full_name":"WebReflection/jsx2tag","owner":"WebReflection","description":"Enable JSX for Template Literal Tags based projects.","archived":false,"fork":false,"pushed_at":"2022-09-21T08:38:36.000Z","size":30,"stargazers_count":43,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-13T19:56:04.718Z","etag":null,"topics":["jsx","template-literals"],"latest_commit_sha":null,"homepage":"https://webreflection.medium.com/bringing-jsx-to-template-literals-1fdfd0901540","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WebReflection.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-06-09T13:35:01.000Z","updated_at":"2025-03-04T14:14:22.000Z","dependencies_parsed_at":"2023-01-18T17:47:49.675Z","dependency_job_id":null,"html_url":"https://github.com/WebReflection/jsx2tag","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fjsx2tag","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fjsx2tag/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fjsx2tag/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Fjsx2tag/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WebReflection","download_url":"https://codeload.github.com/WebReflection/jsx2tag/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248799931,"owners_count":21163403,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jsx","template-literals"],"created_at":"2024-11-15T21:12:34.595Z","updated_at":"2025-10-26T21:34:24.616Z","avatar_url":"https://github.com/WebReflection.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JSX2TAG\n\n[![Build Status](https://travis-ci.com/WebReflection/jsx2tag.svg?branch=main)](https://travis-ci.com/WebReflection/jsx2tag) [![Coverage Status](https://coveralls.io/repos/github/WebReflection/jsx2tag/badge.svg?branch=main)](https://coveralls.io/github/WebReflection/jsx2tag?branch=main)\n\n\u003csup\u003e**Social Media Photo by [Andre Taissin](https://unsplash.com/@andretaissin) on [Unsplash](https://unsplash.com/)**\u003c/sup\u003e\n\n\nEnable JSX for Template Literal Tags based projects.\n\n  * [µhtml live demo](https://codepen.io/WebReflection/pen/KKWxXYY?editors=0010)\n  * [µland live demo](https://codepen.io/WebReflection/pen/bGqxYpZ?editors=0010)\n  * [µbe live demo](https://codepen.io/WebReflection/pen/BaWqNpd?editors=0010)\n  * [lit-html live demo](https://codepen.io/WebReflection/pen/abJaVzm?editors=0010)\n\n\n### Features\n\n  * a `createPragma(tag, config?)` utility to have a `React.createElement` like function to use as *pragma*\n  * a `bind` utility to mimic `.prop=${value}` in the template\n  * automatic `onEventName` to `@eventName` conversion\n  * automatic `?prop=${value}` conversion in the template, when the property is boolean\n  * optionally boost performance via [@ungap/plugin-transform-static-jsx](https://github.com/ungap/plugin-transform-static-jsx#readme), able to create best template literals tags' arguments\n\n\n### Example\n\nSee [test/index.jsx](./test/index.jsx) to see all features applied.\n\n```js\n/** @jsx h *//** @jsxFrag h */\n\n// your template literal library of choice\nconst {render, html} = require('uhtml-ssr');\n\n// this module utils\nconst {bind, createPragma} = require('jsx2tag');\n\n// create your `h` / pragma function\nconst h = createPragma(html);\n// if your env works already with `React.createElement`, use:\n// const React = {createElement: createPragma(html)};\n\n// any component (passed as template value)\nconst Bold = ({children}) =\u003e html`\u003cstrong\u003e${children}\u003c/strong\u003e`;\n\n// any generic value\nconst test = 123;\n\n// test it!\nconst myDocument = (\n  \u003cp class=\"what\" test={bind(test)} onClick={console.log}\u003e\n    \u003cBold\u003eHello\u003c/Bold\u003e, \u003cinput type=\"password\" disabled={false} /\u003e\n    \u003cspan id=\"greetings\"\u003eHello\u003c/span\u003e\n  \u003c/p\u003e\n);\n\nrender(String, myDocument);\n// \u003cp class=\"what\" test=\"123\"\u003e\u003cstrong\u003eHello\u003c/strong\u003e, \u003cinput type=\"password\"\u003e\u003cspan id=\"greetings\"\u003eHello\u003c/span\u003e\u003c/p\u003e\n```\n\n## How To Transpile JSX\n\nSpecify `pragma` and `pragmaFrag` or use this syntax on top:\n\n```js\n/** @jsx h */\n/** @jsxFrag h */\n```\n\nOtherwise, follow [@Robbb_J](https://twitter.com/Robbb_J) post [about minimal requirements](https://blog.r0b.io/post/using-jsx-without-react/) and you'll be good.\n\nA huge thanks to him for writing such simple, step by step, guide.\n\n## How to render keyed components\n\nThe `config` object accepts a `keyed(tagName, props)` callback that can return a keyed version of the component.\n\n```js\n/** @jsx h *//** @jsxFrag h */\nimport {createPragma} from '//unpkg.com/jsx2tag?module';\nimport {render, html} from '//unpkg.com/uhtml?module';\n\n// used as weakMap key for global keyed references\nconst refs = {};\nconst h = createPragma(html, {\n  // invoked when a key={value} is found in the node\n  // to render regular elements (or µbe classes)\n  keyed(tagName, {key}) {\n    const ref = refs[tagName] || (refs[tagName] = {});\n    return html.for(ref, key);\n  }\n});\n\nrender(document.body, \u003cdiv key={'unique-id'} /\u003e);\n\n```\n\nAlternatively, each library might have its own way, but the gist of this feature, whenever available, is that the `key` property is all we're after:\n\n```js\n/** @jsx h *//** @jsxFrag h */\n\nimport {createPragma} from '//unpkg.com/jsx2tag?module';\nimport {render, html} from '//unpkg.com/uhtml?module';\n\nconst h = createPragma(html);\n\nconst App = ({name, key}) =\u003e html.for(App, key)`Hello ${name} 👋`;\n\nrender(document.body, \u003cApp name=\"JSX\" key={'specific-key'} /\u003e);\n```\n\nConditional *keyed* components are also possible.\n\nHere another *uhtml* example:\n\n```js\n/** @jsx h *//** @jsxFrag h */\n\nimport {createPragma} from '//unpkg.com/jsx2tag?module';\nimport {render, html} from '//unpkg.com/uhtml?module';\n\nconst h = createPragma(html);\n\nconst App = ({name, key}) =\u003e {\n  const tag = key ? html.for(App, key) : html;\n  return tag`Hello ${name} 👋`;\n};\n\nrender(document.body, \u003cApp name=\"JSX\" key={'specific-key'} /\u003e);\n```\n\nIn few words, there's literally *nothing* stopping template literal tags libraries to be *keyed* compatible.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebreflection%2Fjsx2tag","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebreflection%2Fjsx2tag","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebreflection%2Fjsx2tag/lists"}