/babel-plugin-transform-h-jsx

Transform JSX into virtual-hyperscript

Primary LanguageJavaScriptMIT LicenseMIT

NOTE: This is a fork of jchook/babel-plugin-transform-h-jsx

This version of the babel plugin allows data- attributes as well.

JSX to Virtual Hyperscript Babel Plugin

Turns JSX into virtual-hyperscript via Babel.

This repo is essentially transform-react-jsx except it passes children as an array instead of as additional arguments. You can read more about this problem if you like.

Installation

npm install --save-dev babel-plugin-transform-h-jsx

Usage

You can run babel via command line:

babel --preset transform-h-jsx your-file.jsx

Or add transform-h-jsx as a plugin in your babel config:

{
  "plugins": ["transform-h-jsx"]
}

Options

  • pragma (default: 'h')

Webpack example

In your webpack.config.js file:

module.exports = {
  output: {
    path: __dirname + "/dist/js",
    filename: "browser.js"
  },
  context: __dirname + "/src",
  entry: "./browser",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        include: __dirname + '/src',
        loader: "babel-loader",
        query: {
          plugins: [
            ["transform-h-jsx"],
            ["syntax-jsx"]
          ]
        }
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx', '.json']
  }
};