gulp-direact

Precompiler that allows usage of React components directly inside markup as custom tags.

Usage no npm install needed!

<script type="module">
  import gulpDireact from 'https://cdn.skypack.dev/gulp-direact';
</script>

README

gulp-direact

Precompiler that allows usage of React components directly inside markup as custom tags.

NPM

Example

Markup usage

<!DOCTYPE html>
<html>
  <head><title>Gulp Direact \o/</title></head>
  <body>
    <!-- using my component directly inside my markup -->
    <Clock color="red" />

    <!-- including React and my component's source -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.min.js"></script>
    <script src="/js/Clock.js"></script>
  </body>
</html>

Gulp usage

var gulp = require('gulp');
var react = require('gulp-react');
var direact = require('gulp-direact');
var prettify = require('gulp-prettify');

var path = {
   HTML: 'src/index.html',
   ALL: ['src/js/*.js', 'src/js/**/*.js', 'src/index.html'],
   JS: ['src/js/*.js', 'src/js/**/*.js'],
   DEST_JS: 'dist/js',
   DEST: 'dist'
};

gulp.task('transformJS', function(){
   gulp.src(path.JS)
   .pipe(react())
   .pipe(gulp.dest(path.DEST_JS));
});

gulp.task('transformHTML', function(){
   gulp.src(path.HTML)
   .pipe(direact())
   .pipe(prettify())                                          
   .pipe(gulp.dest(path.DEST));
});

gulp.task('watch', function(){
   gulp.watch(path.ALL, ['transformJS', 'transformHTML']);
});

gulp.task('default', ['transformJS', 'transformHTML']);