Merge pull request #217 from Financial-Times/x-node-jsx

x-node-jsx packages

packages/x-engine/readme.md

@@ -134,9 +134,10 @@ module.exports = {
 };
 ```
 
-You will also need to import `h` from `x-engine` at the top of each `.jsx` file.
+You will also need to import the factory function from `x-engine` in each `.jsx` file.
+
 ```javascript
-import {h} from '@financial-times/x-engine'
+import { h } from '@financial-times/x-engine'
 ```
 
 ## FAQ

packages/x-handlebars/readme.md

@@ -4,7 +4,7 @@ This module provides Handlebars helper functions to render `x-dash` component pa
 
 ## Installation
 
-This module is requires Node 6+ and is distributed on npm.
+This module is compatible with Node 6+ and is distributed on npm.
 
 ```bash
 npm install -S @financial-times/x-handlebars

packages/x-node-jsx/index.js

@@ -0,0 +1,29 @@
+const { addHook } = require('pirates');
+const { transform } = require('sucrase');
+
+const extension = '.jsx';
+
+// Assume .jsx components are using x-engine
+const jsxOptions = {
+	jsxPragma: 'h',
+	jsxFragmentPragma: 'Fragment'
+};
+
+const defaultOptions = {
+	// Do not output JSX debugger information
+	production: true,
+	// https://github.com/alangpierce/sucrase#transforms
+	transforms: ['imports', 'jsx']
+};
+
+module.exports = (userOptions = {}) => {
+	const options = { ...defaultOptions, ...userOptions, ...jsxOptions };
+
+	const handleJSX = (code) => {
+		const transformed = transform(code, options);
+		return transformed.code;
+	};
+
+	// Return a function to revert the hook
+	return addHook(handleJSX, { exts: [extension] });
+};

packages/x-node-jsx/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@financial-times/x-node-jsx",
+  "version": "0.0.0",
+  "description": "This module extends Node's require function to enable the use of .jsx files at runtime.",
+  "main": "src/index.js",
+  "keywords": [
+    "x-dash"
+  ],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "pirates": "^4.0.0",
+    "sucrase": "^3.6.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Financial-Times/x-dash.git"
+  },
+  "homepage": "https://github.com/Financial-Times/x-dash/tree/master/packages/x-node-jsx",
+  "engines": {
+    "node": ">= 8.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/x-node-jsx/readme.md

@@ -0,0 +1,65 @@
+# x-node-jsx
+
+This module extends Node's `require()` function to enable the use of `.jsx` files at runtime. It uses [Pirates] to safely add a require hook and [Sucrase] to transform code on-the-fly.
+
+[Pirates]: https://github.com/ariporad/pirates
+[Sucrase]: https://github.com/alangpierce/sucrase
+
+
+## Installation
+
+This module is compatible with Node 8+ and is distributed on npm.
+
+```bash
+npm install -S @financial-times/x-node-jsx
+```
+
+To add the require hook you only need to import the register module. You can do this programmatically in your application code:
+
+```js
+require('@financial-times/x-node-jsx/register');
+```
+
+Or use the `--require` or `-r` flag when invoking Node:
+
+```bash
+node --require "@financial-times/x-node-jsx/register"
+```
+
+You can also add the require hook manually. This will return a function which can be used to later remove the hook:
+
+```js
+const addHook = require('@financial-times/x-node-jsx');
+
+const removeHook = addHook();
+
+// Some time later...
+removeHook();
+```
+
+An options object may also be provided, the options and their defaults are shown below:
+
+```js
+const addHook = require('@financial-times/x-node-jsx');
+
+addHook({
+	production: true,
+	transforms: ['imports', 'jsx']
+});
+```
+
+These options will be passed to the Sucrase module. To see more options take a look at the [Sucrase documentation].
+
+After the hook has been added `.jsx` files can be imported and will be transformed on-the-fly:
+
+```js
+// Add the hook
+require('@financial-times/x-node-jsx/register');
+
+// Transparently require .jsx files
+const App = require('./components/App.jsx');
+```
+
+[Sucrase documentation]: https://github.com/alangpierce/sucrase#transforms
+
+

packages/x-node-jsx/register.js

@@ -0,0 +1 @@
+require('./')();