Merge pull request redfin#611 from doug-wade/fix-586

Prepend configurable prefix to module tag

packages/babel-plugin-react-server/src/index.js

@@ -9,11 +9,12 @@ module.exports = function() {
 				const {name} = node;
 
 				const trim = state.opts.trim;
+				const prefix = state.opts.prefix;
 				const parent = path.resolve(path.join(process.cwd(), '..')) + path.sep;
 				const filePath = this.file.opts.filename.replace(parent, '');
 
 				//TODO: Support labels
-				const moduleTag = loggerSpec({ filePath, trim });
+				const moduleTag = loggerSpec({ filePath, trim, prefix });
 
 				let tokens;
 				if (state.opts.tokens) {

packages/babel-plugin-react-server/test/fixtures/prefix/.babelrc

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["../../../src", { "prefix": "nicolas-lodeiro." }]
+  ]
+}

packages/babel-plugin-react-server/test/fixtures/prefix/actual.js

@@ -0,0 +1 @@
+var logger = require('react-server').logging.getLogger(__LOGGER__);

packages/babel-plugin-react-server/test/fixtures/prefix/expected.js

@@ -0,0 +1 @@
+var logger = require('react-server').logging.getLogger({"name":"nicolas-lodeiro.babel-plugin-react-server.test.fixtures.prefix.actual","color":{"server":207,"client":"rgb(212,42,212)"}});

packages/react-server-gulp-module-tagger/README.md

@@ -42,15 +42,15 @@ Given a [`getLogger`](http://redfin.github.io/react-server/annotated-src/logging
 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.' }`
+`{ trim: 'src.', prefix: 'react-server.' }`
 
 ```javascript
 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 `components.my-feature.foo`).
+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

packages/react-server-gulp-module-tagger/index.js

@@ -25,7 +25,9 @@ module.exports = function(config) {
 			return loggerSpec({
 				filePath: file.path,
 				basePath: config.basePath,
-				trim: config.trim, optString,
+				trim: config.trim,
+				prefix: config.prefix,
+				optString,
 			});
 		}));
 	});

packages/react-server-gulp-module-tagger/test/fixtures/prefix/actual.js

@@ -0,0 +1,3 @@
+var logger = require('react-server').logging.getLogger(__LOGGER__);
+var fooLogger = logging.getLogger(__LOGGER__({ label: "foo" }));
+var barLogger = logging.getLogger(__LOGGER__({ label: "bar" }));

packages/react-server-gulp-module-tagger/test/fixtures/prefix/gulpfile.js

@@ -0,0 +1,8 @@
+const gulp = require('gulp');
+const tagger = require('../../..');
+
+gulp.task('default', () => {
+	gulp.src('actual.js')
+		.pipe(tagger({ prefix: 'christian-roldan.' }))
+		.pipe(gulp.dest('build'));
+});

packages/react-server-module-tagger/index.js

@@ -9,13 +9,15 @@ var isWindows = ('win32' === process.platform);
  * @param  {String} optString The label to add to the module tag, in the form '({label:"$label"})'
  * @param  {String} trim      The prefix to remove from the logger name
  * @param  {String} basePath  The path to the root of the project
+ * @param  {String} prefix    A prefix to prepend to the logger name
  * @return {String}           A json object containing a module identifier
  */
 module.exports = function(arg){
 	var optString = arg.optString
 	,   fn   = arg.filePath
 	,   trim = arg.trim || ''
 	,   basePath = arg.basePath || ''
+	,   prefix = arg.prefix
 	,   opts = {}
 
 	if (fn.indexOf(basePath) !== 0) {
@@ -28,7 +30,7 @@ module.exports = function(arg){
 		opts = new Function("return "+optString.replace(/^\/\//mg,''))(); // eslint-disable-line no-new-func
 	}
 
-	opts.name  = getName  (fn, opts, trim, basePath);
+	opts.name  = getName  (fn, opts, trim, basePath, prefix);
 	opts.color = getColor (opts);
 
 	return JSON.stringify(opts);
@@ -45,11 +47,12 @@ module.exports = function(arg){
  *     ) // returns "components.my-component"
  * @param  {String}   fn       filename
  * @param  {Object}   opts     { label: 'Optional logger label' }
- * @param  {String}   trim     The leading portion of the name to remove.
+ * @param  {String}   trim     The leading portion of the name to remove
  * @param  {String}   basePath The path to the file
+ * @param  {String}   prefix   A prefix to prepend to the name
  * @return {String}            The logger name, e.g. my-project.components.my-component
  */
-var getName = function(fn, opts, trim, basePath){
+var getName = function(fn, opts, trim, basePath, prefix){
 	var slashPattern = isWindows
 		?/\\/g
 		:/\//g
@@ -59,6 +62,9 @@ var getName = function(fn, opts, trim, basePath){
 	if (opts.label) {
 		name += '.'+opts.label
 	}
+	if (prefix) {
+		name = prefix + name
+	}
 	return name;
 }
 

packages/react-server-module-tagger/test.js

@@ -20,6 +20,16 @@ test('trims prefix from module tag name', t => {
 	t.is(expected, actual);
 });
 
+test('adds prefix to module tag name', t => {
+	const expected = '{\"name\":\"foo.bar.baz\",\"color\":{\"server\":131,\"client\":\"rgb(127,42,42)\"}}';
+
+	const filePath = 'bar/baz';
+	const prefix = 'foo.';
+	const actual = loggerSpec({filePath, prefix});
+
+	t.is(expected, actual);
+});
+
 test('adds labels', t => {
 	const expected = '{\"label\":\"foo\",\"name\":\"has.label.foo\",\"color\":{\"server\":131,\"client\":\"rgb(127,42,42)\"}}';