gulp-jsxfier
v1.0.2
Published
A plugin to wrap html file in jsx component format
Downloads
7
Maintainers
Readme
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
);
};