A very hacky converter for jade files to react components.
Handles very basic variables in jade, e.g. p= foo
by converting to props as appropriate, but currently trips over a lot of cases.
npm install -g jade-to-jsx
jade-to-jsx test.jade > Test.js
jade-to-jsx test.jade > Test.js
Will convert:
h1 Hello
p= foo
p= foo*2
p= bar.baz
include ./bar.jade
import React from 'React';
export default React.createClass({
propTypes: {
bar: React.PropTypes.any,
foo: React.PropTypes.any
},
render() {
let { bar, foo } = this.props;
return (
<div>
<h1>Hello</h1>
<p>{foo}</p>
<p>{foo*2}</p>
<p>{bar.baz}</p>
<h2>Bar</h2>
</div>
);
}
});
You can replace includes with components like so:
jade-to-jsx test.jade -r ./bar.jade -w ./Bar > Test.js
-r
path to actually included jade file-w
path that should be imported in the react component file
results in:
import React from 'React';
import bar from './Bar';
export default React.createClass({
propTypes: {
bar: React.PropTypes.any,
foo: React.PropTypes.any
},
render() {
let { bar, foo } = this.props;
return (
<div>
<h1>Hello</h1>
<p>{foo}</p>
<p>{foo*2}</p>
<p>{bar.baz}</p>
<Bar />
</div>
);
}
});
Umm, sorry about the code? Very messy hack rn.
MIT