Skip to content

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.

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

Babel JSXZ transform

Use HTML files to construct your React components at compilation time. To do that, use CSS selectors transformations to "include" your JSX code inside your HTML (in the same way that enlive templates work).

Example usage :

var cn = require('classnames')
module.exports = {

  showCartButton: React.createClass({
    render: function() {
      <JSXZ in="index" sel=".cart button">
        <Z sel="price">{this.props.price}</Z>,
        <Z sel="a" tag="Link" to="cart"><ChildrenZ/></Z>
      </JSXZ>
    }
  }

  menuItem: React.createClass({
    render: function() {
      return <JSXZ in="index" sel="nav li"
               className={cn(classNameZ,{
                 'active': this.props.active,
                 'mainmenu': this.props.mainmenu
                })}/>
    }
  })
}

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

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

Or use a dedicated loader the webpack jsxz loader. Or build your own usage with you compilation tool.

Usage

The <JSXZ> fake react component API is the following :

  • 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.
  • 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} the 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"}
  • <JSXZ> children must be only <Z> components.

These Z components describe how to merge your JS/JSX code into your HTML converted component :

  • sel attribute is mandatory, it is a CSS selector to select the Components to modify. A warning will be emmited if
  • tag attribute is optional, it can be used to change the component name.
  • all other attributes are added to the output component using the same rules described above.
  • <Z> children can be any valid JSX, they will replace the children of the selected HTML component
  • special variables named attributeNameZ will be available in attribute and children expressions. For instance you can add a class with : className={classNameZ+" newclass"}
  • a special variable named indexZ will contain the current index of the replaced element (because the CSS selector can match several elements).
  • a special component <ChildrenZ/> will be accepted in <Z> children and will be replaced with the original children.

Example usage : Construct Menu Links, replace all <a> with a component <Link> targetting a page according to the matching index :

var  Menu = React.createClass({
  render: function() {
    var menu = ["home","contact","about"]
    return <JSXZ in="index" sel="nav">
      <Z "nav a" tag="Link" to={menu[indexZ]}><ChildrenZ/></Z>
    </JSXZ>
  }
})

Configuration

Then templatesDir plugin configuration allows you to use a different relative path for HTML files than the current directory.

About

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.

Topics

Resources

License

Releases

No releases published

Packages

No packages published