{"id":19691505,"url":"https://github.com/kbrw/babel-plugin-transform-jsxz","last_synced_at":"2025-07-25T02:35:14.162Z","repository":{"id":27959176,"uuid":"31452118","full_name":"kbrw/babel-plugin-transform-jsxz","owner":"kbrw","description":"Write your JSX for your HTML components using successive transformations targeted with CSS selector at compilation time - in the same way that enlive templates work. As a Babel transform plugin.","archived":false,"fork":false,"pushed_at":"2023-06-29T09:53:35.000Z","size":81,"stargazers_count":5,"open_issues_count":0,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-07-17T17:18:35.717Z","etag":null,"topics":["css-selector","html-components","javascript","jsx","react-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kbrw.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2015-02-28T05:26:56.000Z","updated_at":"2025-06-19T09:34:20.000Z","dependencies_parsed_at":"2025-04-29T09:38:30.069Z","dependency_job_id":"d206d73d-df3b-46ad-8f1b-7691e04245a4","html_url":"https://github.com/kbrw/babel-plugin-transform-jsxz","commit_stats":null,"previous_names":["awetzel/babel-plugin-transform-jsxz","awetzel/jsxz"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/kbrw/babel-plugin-transform-jsxz","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kbrw%2Fbabel-plugin-transform-jsxz","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kbrw%2Fbabel-plugin-transform-jsxz/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kbrw%2Fbabel-plugin-transform-jsxz/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kbrw%2Fbabel-plugin-transform-jsxz/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kbrw","download_url":"https://codeload.github.com/kbrw/babel-plugin-transform-jsxz/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kbrw%2Fbabel-plugin-transform-jsxz/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266944698,"owners_count":24010488,"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","status":"online","status_checked_at":"2025-07-25T02:00:09.625Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["css-selector","html-components","javascript","jsx","react-components"],"created_at":"2024-11-11T19:09:34.780Z","updated_at":"2025-07-25T02:35:14.107Z","avatar_url":"https://github.com/kbrw.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Babel JSXZ transform\n\nThis is a [Babel](https://babeljs.io/) plugin that allows you to create React components from HTML files.\n\nYou can apply transformations to your HTML files to create dynamic React components. Those transformations are based on CSS selectors (in the same way that [enlive](https://github.com/cgrand/enlive) templates work).\n\n## Usage example\n\n```jsx\nimport { cn } from 'classnames'\n\nexport function CartButton(props) {\n  const { price } = props;\n\n  return \u003cJSXZ in=\"index\" sel=\".cart button\"\u003e\n    \u003cZ sel=\".price\"\u003e{price} €\u003c/Z\u003e,\n    \u003cZ sel=\"a\" tag=\"Link\" to=\"cart\"\u003e\u003cChildrenZ/\u003e\u003c/Z\u003e\n  \u003c/JSXZ\u003e\n}\n```\n\nIn this example, the `CartButton` component is created by selecting the `.cart button` element in the `index.html` file.\n\nOn this element, two Z transformations are applied:\n- the `.price` element is replaced by the `price` prop,\n- the `a` element's tag is replaced by `Link`.\n\nWith the provided `index.html` file:\n```html\n\u003cdiv class=\"cart\"\u003e\n  \u003cdiv class=\"button\"\u003e\n    \u003cspan class=\"price\"\u003e15 €\u003c/span\u003e\n    \u003ca\u003eGo to cart\u003c/a\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nThe JSXZ plugin will generate the following code:\n```jsx\nexport function CartButton(props) {\n  const { price } = props;\n\n  return \u003cdiv className=\"button\"\u003e\n    \u003cspan className=\"price\"\u003e{price} €\u003c/span\u003e\n    \u003cLink to=\"cart\"\u003eGo to cart\u003c/Link\u003e\n  \u003c/div\u003e;\n}\n```\n\n## Setup\n\nYou can use this transform inside your JS babel plugin, along with the \"jsx\" Babel transform:\n\n```javascript\n{\n  plugins: [\n    [\"transform-jsxz\", {templatesDir: \"/path/to/your/html/template/dir\"}],\n    \"transform-react-jsx\"\n  ]\n}\n```\n\nOr use a dedicated loader [the webpack jsxz loader](https://github.com/awetzel/jsxz-loader).\nOr build your own usage with you compilation tool.\n\n## Usage\n\n### The JSXZ element\n\nTo start using JSXZ, you need to add a `\u003cJSXZ\u003e` element in your JSX code. This JSXZ element will be replaced by the the HTML code selected and transformed with the `\u003cZ\u003e` elements.\n\n**Attributes**\n- `in` attribute is mandatory, it is the original HTML file (\".html\" extension is optional), you can use full or relative path. Relative path can be relative to the `templatesDir` option if given. See [Configuration](#configuration) for more details.\n- `sel` attribute is optional, default select the entire document.\n  This attribute is a CSS selector to choose the input HTML block to\n  convert to a JSX component. Only the first matching element will be\n  selected.\n- All other attributes are added to the output component, if the attribute already exists it will be overwritten (except if the attribute content is `{undefined}` then it will be deleted). \n- special *variables* named `attributeNameZ` will be available in attribute expressions. For instance you can add a class with: `className={classNameZ + \" newclass\"}`\n\n**Children**\nThe children of a JSXZ element can be either JSX elements or `\u003cZ\u003e` elements, but you cannot mix both.\n\nIf you use JSX elements, they will replace the content of the selected HTML element.\n\nExample of direct JSX children:\n```jsx\n\u003cJSXZ in=\"index\" sel=\".cart button\"\u003e\n  \u003cspan className=\"price\"\u003e{price} €\u003c/span\u003e\n\u003c/JSXZ\u003e\n```\n\nIf you use `\u003cZ\u003e` elements, each `\u003cZ\u003e` element will represent a transformation that will be applied to your HTML. See the next section for more details.\n\n**Special variables**\nYou can access the attributes from the original HTML with the special variables `attributeNameZ` (where `attributeName` is the name of the attribute). For instance, if you have an attribute `toto` in your HTML, you can access it with the variable `totoZ`.\n\nFor example, you can add new CSS classes to an element like this:\n```jsx\n\u003cJSXZ in=\"index\" sel=\".cart button\" className={classNameZ + \" newclass\"}\u003e\n```\n\nThose special variables are available in JSXZ and Z attibute expressions.\n\n### The Z element\n\nEach `\u003cZ\u003e` element represents a transformation that will be applied to your HTML. You can select the elements you want to transform in the original HTML using the `sel` attribute.\n\n**Attributes**\n\n- `sel` attribute is mandatory, it is a CSS selector to select the elements to modify\n- `tag` attribute is optional, it can be used to change the element name\n- all other attributes are added to the output element using the same rules described above\n- `\u003cZ\u003e` children can be any valid JSX, they will replace the children of the selected HTML element\n- special *variables* named `attributeNameZ` will be available, see above\n- a special *variable* named `indexZ` will contain the current index of the replaced element (because the CSS selector can match several elements).\n- `if` attribute is optional, it can be used to conditionnaly render a `\u003cZ\u003e` element. A ternary expression is generated with the `if` attribute as the condition, the `\u003cZ\u003e` element as the true value and null as the false value. For instance, `\u003cZ if={condition} sel=\".cart button\"\u003e` will be transformed to `{condition ? \u003cZ sel=\".cart button\"\u003e : \"\"}`.\n- `replace` attribute is optional, it can be used to ask JSXZ to replace the selected element with the children of the `\u003cZ\u003e` element.\n\n**Children**\n\nThe children of a `\u003cZ\u003e` element will replace the children of the selected HTML element. You can use the `\u003cChildrenZ /\u003e` component to insert the original children.\n\nExample usage:\nConstruct Menu Links, replace all `\u003ca\u003e` with a component `\u003cLink\u003e`\ntargetting a page according to the matching index :\n\n```jsx\nfunction MenuLink() {\n  const menu = [\"home\",\"contact\",\"about\"]\n\n  return \u003cJSXZ in=\"index\" sel=\"nav\"\u003e\n    \u003cZ \"nav a\" tag=\"Link\" to={menu[indexZ]}\u003e\u003cChildrenZ/\u003e\u003c/Z\u003e\n  \u003c/JSXZ\u003e\n}\n```\n\n## Configuration\n\nThen `templatesDir` plugin configuration allows you to use a different relative\npath for HTML files than the current directory.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkbrw%2Fbabel-plugin-transform-jsxz","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkbrw%2Fbabel-plugin-transform-jsxz","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkbrw%2Fbabel-plugin-transform-jsxz/lists"}