jsx-hyperscript-loader

A webpack loader for using JSX (HTML inside JS) to create DOM elements using Hyperscript

E.g const div = <div>Hello!</div>

Create your own JSX loader

Setup

npm install jsx-hyperscript-loader --save-dev

Add to webpack.config.js

module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /\.gjsx$/, //Replace this with any file extension including .js
                use: [
                    {
                        loader: path.resolve('jsx-hyperscript-loader'),
                        options: {
                            serialize: function(component) {
                                return "'JSX_REPLACEMENT'[";
                            }
                        }
                    }
                ]
            }
        ]
    }
}

Usage

// parentheses just for clarity (not required) 
const test = (
   <div class="name-field">
      Enter your name
      <input type="text"/>
   </div>
);

More to come!