react-server-gulp-module-tagger

A gulp plugin for tagging react-server logger instances with information about the module they're being used in.

To transpile your source for use with React Server, install gulp and the plugin

npm i -D gulp react-server-gulp-module-tagger

Then add the task to your gulpfile

const gulp = require('gulp');
const tagger = require('react-server-gulp-module-tagger');
gulp.task('compile', () => {
    gulp.src('src')
        .pipe(tagger())
        .pipe(gulp.dest('dist'));
});

A compile task might also use Babel with the React Server Babel preset to transpile jsx and es 7 for the browser and the server

const gulp = require('gulp');
const babel = require('gulp-babel');
const tagger = require('react-server-gulp-module-tagger');
 
gulp.task('compile', () => {
    gulp.src('src')
        .pipe(tagger(
            trim: 'src.'
        ))
        .pipe(babel({ presets: ['react-server'] }))
        .pipe(gulp.dest('dist'));
});

Given a getLogger call, adds the correct arguments to keep the server and the browser in sync.

For example, given a module in src/components/my-feature/foo.js, and using the options { trim: 'src.', prefix: 'react-server.' }

let logger = require("react-server").logging.getLogger(__LOGGER__);

returns a logger instance that will have consistent coloring on the server and the client, and that has a human-friendly, readable name that easily maps to the file tree (in this example react-server.components.my-feature.foo).

If you need more than one logger in your module, you can distinguish them with labels

var fooLogger = logging.getLogger(__LOGGER__({ label: "foo" }));
var barLogger = logging.getLogger(__LOGGER__({ label: "bar" }));

Two other tokens, __CHANNEL__ and __CACHE__, are reserved for future use, and will also be replaced with a module context.