gulp-jsxfier

Gulp Plugin to convert your html files to jsx node file or in React.createElement Format.See Below.

e.g: Input File index.html:

<div> Hello World !</div>

Will output index.jsx:

module.exports = function(props){ 
  return (
   <div> Hello World !</div>
  )
}

## Usage Example:

const gulp = require('gulp');
const jsxfier = require('gulp-jsxfier');
 
gulp.task('default', function() {
   return gulp.src('index.html')
       .pipe(jsxfier({
            extension:"js", //Output file extension. Optional. Defaults to 'jsx'
            replaceClass: true // Optional.convert class(not understood by react) attribute to className which is supported by React. defaults to false.
             createElementOutput:true//Optional. Defaults to false. See below for output when this flag is true.   
       }))
       .pipe(gulp.dest('./jsx-files'));
});

createElementOutput:

In case of createElementOutput Flag there are some important chnages to keep in Mind. InputHTML must contain a single line comment in Which you can provide variable name followed by e.g: "/<!--@HelloWorld--/>" . No numbers. So:

Input Html becomes:

  <!--@HelloWorld-->
  <div class="dummy">{props.name}</div>

Output will be:

'use strict';
const HelloWorld = function(props){ 
    return React.createElement(
                   "div",
                   { className: "dummy" },
                   props.name
);
};

Note: Pass props object as "HelloWorld(props)" if its used in html.

Enjoy!!