0.1.2 • Published 9 years ago
react-jsx-anywhere v0.1.2
Write JSX Tags Anywhere
Install
npm install react-jsx-anywhere
JSX Tags
Coffeescript
@element = jsx("""<Component str="string" num={100} obj={{a:1, b:2}}/>""")
// @element = (React.createElement(Component, {str: "string", num: 123, obj: {a:1, b:2}}))
Typescript
///<reference path="node_modules/react-jsx-anywhere/jsx.d.ts"/>
var element:React.ReactElement = jsx(`<Component str="string" num={100} obj={{a:1, b:2}}/>`)
// var element:React.ReactElement = (React.createElement(Component, {str: "string", num: 123, obj: {a:1, b:2}}))
IntelliJ IDE Typescript template string support is version 14.1 and higher
Javascript (ECMAScript6)
var element = jsx(`<Component str="string" num={100} obj={{a:1, b:2}}/>`)
// var element = (React.createElement(Component, {str: "string", num: 123, obj: {a:1, b:2}}))
Build
Gulp.js
Coffeescript
'use strict'
var path = require('path')
var gulp = require('gulp')
var coffeescript = require('gulp-coffee')
var jsx = require('react-jsx-anywhere/gulp')
gulp.task('build', function () {
return gulp.src('src/script.coffee')
.pipe(jsx())
.pipe(coffeescript())
.pipe(gulp.dest('dist/'))
})
Typescript
'use strict'
var gulp = require('gulp')
var typescript = require('gulp-typescript')
var jsx = require('react-jsx-anywhere/gulp')
gulp.task('build', function () {
return gulp.src('src/script.ts')
.pipe(jsx())
.pipe(typescript({
target: 'ES5',
module: 'commonjs',
declarationFiles: true,
noExternalResolve: false
}))
.pipe(gulp.dest('dist/'))
})
ECMAScript6
'use strict'
var gulp = require('gulp')
var babel = require('gulp-babel')
var jsx = require('react-jsx-anywhere/gulp')
gulp.task('build', function () {
return gulp.src('src/script.js')
.pipe(jsx())
.pipe(babel())
.pipe(gulp.dest('dist/'))
})
Webpack
Coffeescript
'use strict'
module.exports = {
entry: 'src/script.coffee',
output: {
path: 'dist',
filename: 'script.js'
},
resolve: {
root: __dirname,
extensions: ['', '.js', '.coffee']
},
module: {
loaders: [
{test: /\.coffee$/, loaders: ['coffee-loader', 'react-jsx-anywhere/webpack']}
]
}
}
ECMAScript6
'use strict'
module.exports = {
entry: 'src/script.js',
output: {
path: 'dist',
filename: 'script.js'
},
resolve: {
root: __dirname,
extensions: ['', '.js']
},
module: {
loaders: [
{test: /\.js$/, loaders: ['babel-loader', 'react-jsx-anywhere/webpack']}
]
}
}
Typescript
'use strict'
module.exports = {
entry: 'src/script.ts',
output: {
path: 'dist',
filename: 'script.js'
},
resolve: {
root: __dirname,
extensions: ['', '.js', '.ts']
},
module: {
loaders: [
{test: /\.ts$/, loaders: ['ts-loader', 'react-jsx-anywhere/webpack']}
]
}
}
Browserify
browserify -t react-jsx-anywhere/browserify src/script.coffee -o dist/script.js
Jsx Parser Function
var fs = require('fs')
var jsxParser = require('react-jsx-anywhere')
var origin = fs.readFileSync('src/script.ts', {encode:'utf8'}) // 'var element:React.ReactElement = jsx(`<Component str="string" num={100} obj={{a:1, b:2}}/>`)'
var parsed = jsxParser(origin)
fs.writeFileSync('dist/script.js', parsed)