Skip to content

Commit e419ec4

Browse files
SteveSandersonMSSteveSandersonMS
committed
Make render-server able to load TS/ES2015 without precompilation
1 parent 1fc3426 commit e419ec4

File tree

3 files changed

+58
-27
lines changed

3 files changed

+58
-27
lines changed

‎samples/react/MusicStore/ReactApp/fx/render-server.js‎

Lines changed: 13 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,16 @@
1+
require('./require-ts-babel')(); // Enable loading TS/TSX/JSX/ES2015 modules
12
var url = require('url');
2-
var babelCore = require('babel-core');
3-
var babelConfig = {
4-
presets: ["es2015", "react"]
5-
};
3+
var domainTasks = require('./domain-tasks.ts');
64

7-
var origJsLoader = require.extensions['.js'];
8-
require.extensions['.js'] = loadViaBabel;
9-
require.extensions['.jsx'] = loadViaBabel;
10-
11-
function loadViaBabel(module, filename) {
12-
// Assume that all the app's own code is ES2015+ (optionally with JSX), but that none of the node_modules are.
13-
// The distinction is important because ES2015+ forces strict mode, and it may break ES3/5 if you try to run it in strict
14-
// mode when the developer didn't expect that (e.g., current versions of underscore.js can't be loaded in strict mode).
15-
var useBabel = filename.indexOf('node_modules') < 0;
16-
if (useBabel) {
17-
var transformedFile = babelCore.transformFileSync(filename, babelConfig);
18-
return module._compile(transformedFile.code, filename);
19-
} else {
20-
return origJsLoader.apply(this, arguments);
5+
function render(bootModulePath, requestUrl, callback) {
6+
var bootFunc = require(bootModulePath);
7+
if (typeof bootFunc !== 'function') {
8+
bootFunc = bootFunc.default;
219
}
22-
}
23-
24-
var domainTasks = require('./domain-tasks.js');
25-
var bootServer = require('../boot-server.jsx').default;
26-
27-
function render(requestUrl, callback) {
10+
if (typeof bootFunc !== 'function') {
11+
throw new Error('The module at ' + bootModulePath + ' must export a default function, otherwise we don\'t know how to invoke it.')
12+
}
13+
2814
var params = {
2915
location: url.parse(requestUrl),
3016
url: requestUrl,
@@ -36,7 +22,7 @@ function render(requestUrl, callback) {
3622
// Since route matching is asynchronous, add the rendering itself to the list of tasks we're awaiting
3723
domainTasks.addTask(new Promise(function (resolve, reject) {
3824
// Now actually perform the first render that will match a route and commence associated tasks
39-
bootServer(params, function(error, result) {
25+
bootFunc(params, function(error, result) {
4026
if (error) {
4127
reject(error);
4228
} else {
@@ -51,15 +37,15 @@ function render(requestUrl, callback) {
5137
// By now, all the data should be loaded, so we can render for real based on the state now
5238
// TODO: Add an optimisation where, if domain-tasks had no outstanding tasks at the end of
5339
// the previous render, we don't re-render (we can use the previous html and state).
54-
bootServer(params, callback);
40+
bootFunc(params, callback);
5541
}).catch(function(error) {
5642
process.nextTick(() => { // Because otherwise you can't throw from inside a catch
5743
callback(error, null);
5844
});
5945
});
6046
}
6147

62-
render('/', (err, html) => {
48+
render('../boot-server.tsx', '/', (err, html) => {
6349
if (err) {
6450
throw err;
6551
}

‎samples/react/MusicStore/ReactApp/fx/require-ts-babel.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
var fs = require('fs');
2+
var ts = require('ntypescript');
3+
var babelCore = require('babel-core');
4+
var resolveBabelRc = require('babel-loader/lib/resolve-rc'); // If this ever breaks, we can easily scan up the directory hierarchy ourselves
5+
var origJsLoader = require.extensions['.js'];
6+
7+
function resolveBabelOptions(relativeToFilename) {
8+
var babelRcText = resolveBabelRc(relativeToFilename);
9+
return babelRcText ? JSON.parse(babelRcText) : {};
10+
}
11+
12+
function loadViaTypeScript(module, filename) {
13+
// First perform a minimal transpilation from TS code to ES2015. This is very fast (doesn't involve type checking)
14+
// and is unlikely to need any special compiler options
15+
var src = fs.readFileSync(filename, 'utf8');
16+
var compilerOptions = { jsx: ts.JsxEmit.Preserve, module: ts.ModuleKind.ES2015, target: ts.ScriptTarget.ES6 };
17+
var es6Code = ts.transpile(src, compilerOptions, 'test.tsx', /* diagnostics */ []);
18+
19+
// Second, process the ES2015 via Babel. We have to do this (instead of going directly from TS to ES5) because
20+
// TypeScript's ES5 output isn't exactly compatible with Node-style CommonJS modules. The main issue is with
21+
// resolving default exports - https://github.com/Microsoft/TypeScript/issues/2719
22+
var es5Code = babelCore.transform(es6Code, resolveBabelOptions(filename)).code;
23+
return module._compile(es5Code, filename);
24+
}
25+
26+
function loadViaBabel(module, filename) {
27+
// Assume that all the app's own code is ES2015+ (optionally with JSX), but that none of the node_modules are.
28+
// The distinction is important because ES2015+ forces strict mode, and it may break ES3/5 if you try to run it in strict
29+
// mode when the developer didn't expect that (e.g., current versions of underscore.js can't be loaded in strict mode).
30+
var useBabel = filename.indexOf('node_modules') < 0;
31+
if (useBabel) {
32+
var transformedFile = babelCore.transformFileSync(filename, resolveBabelOptions(filename));
33+
return module._compile(transformedFile.code, filename);
34+
} else {
35+
return origJsLoader.apply(this, arguments);
36+
}
37+
}
38+
39+
module.exports = function register() {
40+
require.extensions['.js'] = loadViaBabel;
41+
require.extensions['.jsx'] = loadViaBabel;
42+
require.extensions['.ts'] = loadViaTypeScript;
43+
require.extensions['.tsx'] = loadViaTypeScript;
44+
}

‎samples/react/MusicStore/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"bootstrap": "^3.3.6",
2323
"domain-context": "^0.5.1",
2424
"isomorphic-fetch": "^2.2.1",
25+
"ntypescript": "^1.201602072208.1",
2526
"react": "^0.14.7",
2627
"react-bootstrap": "^0.28.2",
2728
"react-dom": "^0.14.7",

0 commit comments

Comments
 (0)