Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kbrw/babel-plugin-transform-jsxz

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.
https://github.com/kbrw/babel-plugin-transform-jsxz

css-selector html-components javascript jsx react-components

Last synced: 3 months ago
JSON representation

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.

Awesome Lists containing this project

README 

        
# Babel JSXZ transform



This is a [Babel](https://babeljs.io/) plugin that allows you to create React components from HTML files.



You 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).



## Usage example



```jsx

import { cn } from 'classnames'



export function CartButton(props) {

  const { price } = props;



  return 

    {price} €,

    

  

}

```



In this example, the `CartButton` component is created by selecting the `.cart button` element in the `index.html` file.



On this element, two Z transformations are applied:

- the `.price` element is replaced by the `price` prop,

- the `a` element's tag is replaced by `Link`.



With the provided `index.html` file:

```html



  


    15 €

    Go to cart

  




```



The JSXZ plugin will generate the following code:

```jsx

export function CartButton(props) {

  const { price } = props;



  return 


    {price} €

    Go to cart

  
;

}

```



## Setup



You can use this transform inside your JS babel plugin, along with the "jsx" Babel transform:



```javascript

{

  plugins: [

    ["transform-jsxz", {templatesDir: "/path/to/your/html/template/dir"}],

    "transform-react-jsx"

  ]

}

```



Or use a dedicated loader [the webpack jsxz loader](https://github.com/awetzel/jsxz-loader).

Or build your own usage with you compilation tool.



## Usage



### The JSXZ element



To start using JSXZ, you need to add a `` element in your JSX code. This JSXZ element will be replaced by the the HTML code selected and transformed with the `` elements.



**Attributes**

- `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.

- `sel` attribute is optional, default select the entire document.

  This attribute is a CSS selector to choose the input HTML block to

  convert to a JSX component. Only the first matching element will be

  selected.

- 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). 

- special *variables* named `attributeNameZ` will be available in attribute expressions. For instance you can add a class with: `className={classNameZ + " newclass"}`



**Children**

The children of a JSXZ element can be either JSX elements or `` elements, but you cannot mix both.



If you use JSX elements, they will replace the content of the selected HTML element.



Example of direct JSX children:

```jsx



  {price} €



```



If you use `` elements, each `` element will represent a transformation that will be applied to your HTML. See the next section for more details.



**Special variables**

You 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`.



For example, you can add new CSS classes to an element like this:

```jsx



```



Those special variables are available in JSXZ and Z attibute expressions.



### The Z element



Each `` 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.



**Attributes**



- `sel` attribute is mandatory, it is a CSS selector to select the elements to modify

- `tag` attribute is optional, it can be used to change the element name

- all other attributes are added to the output element using the same rules described above

- `` children can be any valid JSX, they will replace the children of the selected HTML element

- special *variables* named `attributeNameZ` will be available, see above

- a special *variable* named `indexZ` will contain the current index of the replaced element (because the CSS selector can match several elements).

- `if` attribute is optional, it can be used to conditionnaly render a `` element. A ternary expression is generated with the `if` attribute as the condition, the `` element as the true value and null as the false value. For instance, `` will be transformed to `{condition ?  : ""}`.

- `replace` attribute is optional, it can be used to ask JSXZ to replace the selected element with the children of the `` element.



**Children**



The children of a `` element will replace the children of the selected HTML element. You can use the `` component to insert the original children.



Example usage:

Construct Menu Links, replace all `` with a component ``

targetting a page according to the matching index :



```jsx

function MenuLink() {

  const menu = ["home","contact","about"]



  return 

    

  

}

```



## Configuration



Then `templatesDir` plugin configuration allows you to use a different relative

path for HTML files than the current directory.