Skip to content

Commit

Permalink
Add module tagging babel plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
doug-wade committed Jun 22, 2016
1 parent d5e97b9 commit be2be2a
Show file tree
Hide file tree
Showing 24 changed files with 280 additions and 25 deletions.
3 changes: 3 additions & 0 deletions packages/babel-plugin-react-server/.babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"presets": ["es2015", "stage-0"]
}
3 changes: 3 additions & 0 deletions packages/babel-plugin-react-server/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
node_modules
*.log
lib
3 changes: 3 additions & 0 deletions packages/babel-plugin-react-server/.npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
node_modules
*.log
src
90 changes: 90 additions & 0 deletions packages/babel-plugin-react-server/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
# babel-plugin-react-server

React Server transpilation

## Example

**In**

```js
var logger = require('react-server').logging.getLogger(__LOGGER__);
```

**Out**

```js
"use strict";

var logger = require('react-server').logging.getLogger({ name: 'module.name', color: {} });
```

## Installation

```sh
$ npm install babel-plugin-react-server
```

## Usage

### Via `.babelrc` (Recommended)

**.babelrc**

```json
{
"plugins": ["react-server"]
}
```

### Via CLI

```sh
$ babel --plugins react-server script.js
```

### Via Node API

```javascript
require("babel-core").transform("code", {
plugins: ["react-server"]
});
```


## Configuration

A fully configured babel plugin in your babelrc would look be

```json
{
"plugins": [
["react-server", {
"trim": "my-project.components.",
"token": "__LOGGER__"
}]
]
}
```


### Trim

A substring to trim off the front of the module name

```javascript
{
trim: "my-project.pages."
}
```

### Token

The token to replace in the source code with the module tag. By default, uses
the default logger token `__LOGGER__`, and two future reserved tokens,
`__CHANNEL__` and

```javascript
{
token: "__LOGGER__"
}
```
31 changes: 31 additions & 0 deletions packages/babel-plugin-react-server/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
{
"name": "babel-plugin-react-server",
"version": "0.0.1",
"description": "Babel plugin for React Server transpilation",
"repository": "redfin/babel-plugin-react-server",
"author": "Doug Wade <[email protected]>",
"main": "lib/index.js",
"dependencies": {
"react-server-module-tagger": "^0.0.1"
},
"devDependencies": {
"babel-core": "^6.3.17",
"babel-preset-es2015": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"mocha": "^2.2.5"
},
"scripts": {
"clean": "rm -rf lib npm-debug.log*",
"build": "babel src -d lib",
"test": "mocha --compilers js:babel-register",
"test:watch": "npm run test -- --watch",
"prepublish": "npm run clean && npm run build"
},
"keywords": [
"react",
"server",
"babel",
"plugin",
"babel-plugin"
]
}
34 changes: 34 additions & 0 deletions packages/babel-plugin-react-server/src/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import loggerSpec from 'react-server-module-tagger';
import path from 'path';

module.exports = function({types: t }) {
return {
visitor: {
Identifier(p, state) {
const {node} = p;
const {name, type} = node;

const config = { trim: state.opts.trim };
const parent = path.resolve(path.join(process.cwd(), '..')) + path.sep;
const fp = this.file.opts.filename.replace(parent, '');
const file = { path: fp };
//TODO: Support labels
const moduleTag = loggerSpec.bind({ file, config })(fp);

let tokens;
if (state.opts.tokens) {
tokens = new Set(state.opts.tokens);
} else {
tokens = new Set(["__LOGGER__", "__CHANNEL__", "__CACHE__"]);
}

if (tokens.has(name)) {
// this strikes me as a dirty, nasty hack. I think it would be better
// to parse the object as json and coerce it to an array of
// ObjectProperties to construct an ObjectExpression
p.node.name = moduleTag;
}
}
}
};
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"plugins": [
["../../../src", { "tokens": ["BAR"] }]
]
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
var logger = require('react-server').logging.getLogger(BAR);
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
var logger = require('react-server').logging.getLogger({"name":"babel-plugin-react-server.test.fixtures.configurable-token.actual","color":{"server":133,"client":"rgb(127,42,127)"}});
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"plugins": [
["../../../src"]
]
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
var logger = require('react-server').logging.getLogger(__LOGGER__);
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
var logger = require('react-server').logging.getLogger({"name":"babel-plugin-react-server.test.fixtures.example.actual","color":{"server":131,"client":"rgb(127,42,42)"}});
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"plugins": [
["../../../src"]
]
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
__CHANNEL__
__CACHE__
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
{"name":"babel-plugin-react-server.test.fixtures.reserved-future-tokens.actual","color":{"server":159,"client":"rgb(127,212,212)"}};
{"name":"babel-plugin-react-server.test.fixtures.reserved-future-tokens.actual","color":{"server":159,"client":"rgb(127,212,212)"}};
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"plugins": [
["../../../src", { "trim": "babel-plugin-react-server.test.fixtures." }]
]
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
var logger = require('react-server').logging.getLogger(__LOGGER__);
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
var logger = require('react-server').logging.getLogger({"name":"trim.actual","color":{"server":207,"client":"rgb(212,42,212)"}});
26 changes: 26 additions & 0 deletions packages/babel-plugin-react-server/test/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import path from 'path';
import fs from 'fs';
import assert from 'assert';
import { transformFileSync } from 'babel-core';
import plugin from '../src';

function trim(str) {
return str.replace(/^\s+|\s+$/, '');
}

describe('React Server transpilation', () => {
const fixturesDir = path.join(__dirname, 'fixtures');
fs.readdirSync(fixturesDir).map((caseName) => {
it(`should ${caseName.split('-').join(' ')}`, () => {
const fixtureDir = path.join(fixturesDir, caseName);
const actualPath = path.join(fixtureDir, 'actual.js');
const actual = transformFileSync(actualPath).code;

const expected = fs.readFileSync(
path.join(fixtureDir, 'expected.js')
).toString();

assert.equal(trim(actual), trim(expected));
});
});
});
16 changes: 4 additions & 12 deletions packages/babel-preset-react-server/index.js
Original file line number Diff line number Diff line change
@@ -1,19 +1,11 @@
module.exports = {
plugins: [
require('babel-plugin-transform-es2015-arrow-functions'),
require('babel-plugin-transform-es2015-block-scoping'),
require('babel-plugin-transform-es2015-classes'),
require('babel-plugin-transform-es2015-computed-properties'),
require('babel-plugin-transform-es2015-constants'),
require('babel-plugin-transform-es2015-destructuring'),
require('babel-plugin-transform-es2015-modules-commonjs'),
require('babel-plugin-transform-es2015-parameters'),
require('babel-plugin-transform-es2015-shorthand-properties'),
require('babel-plugin-transform-es2015-spread'),
require('babel-plugin-transform-es2015-template-literals'),
require('babel-plugin-transform-object-rest-spread'),
require('babel-plugin-react-server'),
require('babel-plugin-transform-runtime'),
],
presets: [
require('babel-preset-es2015'),
require('babel-preset-react'),
require('babel-preset-stage-0'),
],
}
20 changes: 7 additions & 13 deletions packages/babel-preset-react-server/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,21 +18,15 @@
"author": "Doug Wade <[email protected]>",
"license": "Apache License 2.0",
"dependencies": {
"babel-plugin-transform-es2015-arrow-functions": "^6.3.13",
"babel-plugin-transform-es2015-block-scoping": "^6.3.13",
"babel-plugin-transform-es2015-classes": "^6.3.13",
"babel-plugin-transform-es2015-computed-properties": "^6.3.13",
"babel-plugin-transform-es2015-constants": "^6.1.4",
"babel-plugin-transform-es2015-destructuring": "^6.3.13",
"babel-plugin-transform-es2015-modules-commonjs": "^6.3.13",
"babel-plugin-transform-es2015-parameters": "^6.3.13",
"babel-plugin-transform-es2015-shorthand-properties": "^6.3.13",
"babel-plugin-transform-es2015-spread": "^6.3.13",
"babel-plugin-transform-es2015-template-literals": "^6.3.13",
"babel-plugin-transform-object-rest-spread": "^6.3.13",
"babel-preset-react": "^6.5.0"
"babel-plugin-transform-runtime": "^6.9.0",
"babel-plugin-react-server": "^0.0.1",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0"
},
"devDependencies": {
"ava": "^0.15.2",
"babel-core": "^6.10.4",
"rimraf": "^2.5.2"
}
}
37 changes: 37 additions & 0 deletions packages/babel-preset-react-server/test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import test from 'ava';
import fs from 'fs';
import { transform } from 'babel-core';

test('module can be required', t => {
try {
require('.');
t.pass();
} catch (e) {
console.error(e);
t.fail();
}
});

test('transpiles as expected', async t => {
const source = await readFile('tst/source.js');
const actual = transform(source, { presets: [require('.')] }).code;
const expected = await readFile('tst/expected.js');
t.is(trim(actual), trim(expected));
});

function readFile(filename) {
return new Promise((resolve, reject) => {
fs.readFile(filename, (err, data) => {
if (err) {
console.error(err);
reject(err);
} else {
resolve(data.toString());
}
});
});
}

function trim(str) {
return str.replace(/^\s+|\s+$/, '');
}
7 changes: 7 additions & 0 deletions packages/babel-preset-react-server/tst/expected.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
'use strict';

var _reactServer = require('react-server');

var label = 'foo';
var logger = _reactServer.logging.getLogger({"name":"unknown","color":{"server":207,"client":"rgb(212,42,212)"}});
var fooLogger = _reactServer.logging.getLogger({"name":"unknown","color":{"server":207,"client":"rgb(212,42,212)"}}({ label: label }));
5 changes: 5 additions & 0 deletions packages/babel-preset-react-server/tst/source.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import {logging} from 'react-server';

const label = 'foo';
const logger = logging.getLogger(__LOGGER__);
const fooLogger = logging.getLogger(__LOGGER__({ label }));

0 comments on commit be2be2a

Please sign in to comment.