Skip to content

Commit

Permalink
[Flight] Minimal webpack plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
gaearon committed Dec 3, 2020
1 parent e23673b commit 976833c
Show file tree
Hide file tree
Showing 6 changed files with 49 additions and 44 deletions.
1 change: 1 addition & 0 deletions fixtures/flight/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@

# production
/build
/dist

# misc
.DS_Store
Expand Down
51 changes: 10 additions & 41 deletions fixtures/flight/server/handler.server.js
Original file line number Diff line number Diff line change
@@ -1,51 +1,20 @@
'use strict';

import {pipeToNodeWritable} from 'react-transport-dom-webpack/server';
import {readFileSync} from 'fs';
import {resolve} from 'path';
import * as React from 'react';

import url from 'url';

function resolve(path) {
return url.pathToFileURL(require.resolve(path)).href;
}

module.exports = async function(req, res) {
res.setHeader('Access-Control-Allow-Origin', '*');
const m = await import('../src/App.server.js');
// const m = require('../src/App.server.js');
const App = m.default.default || m.default;
pipeToNodeWritable(<App />, res, {
// TODO: Read from a map on the disk.
[resolve('../src/Counter.client.js')]: {
Counter: {
id: './src/Counter.client.js',
chunks: ['2'],
name: 'Counter',
},
},
[resolve('../src/Counter2.client.js')]: {
Counter: {
id: './src/Counter2.client.js',
chunks: ['1'],
name: 'Counter',
},
},
[resolve('../src/ShowMore.client.js')]: {
default: {
id: './src/ShowMore.client.js',
chunks: ['3'],
name: 'default',
},
'': {
id: './src/ShowMore.client.js',
chunks: ['3'],
name: '',
},
'*': {
id: './src/ShowMore.client.js',
chunks: ['3'],
name: '*',
},
},
});
res.setHeader('Access-Control-Allow-Origin', '*');
const moduleMap = JSON.parse(
readFileSync(
resolve(__dirname, '../dist/react-transport-manifest.json'),
'utf8'
)
);
pipeToNodeWritable(<App />, res, moduleMap);
};
2 changes: 1 addition & 1 deletion fixtures/flight/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,5 @@ ReactDOM.render(
);

// Create entry points for Client Components.
// TODO: Webpack plugin should do this and write a map to disk.
// TODO: Webpack plugin should do this.
require.context('./', true, /\.client\.js$/, 'lazy');
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,39 @@
* @flow
*/

import {mkdirSync, writeFileSync} from 'fs';
import {dirname, resolve} from 'path';
import {pathToFileURL} from 'url';

export default class ReactFlightWebpackPlugin {
constructor(options: {isServer: boolean}) {}
apply(compiler: any) {}

apply(compiler: any) {
compiler.hooks.emit.tap('React Transport Plugin', compilation => {
const json = {};
compilation.chunks.forEach(chunk => {
chunk.getModules().forEach(mod => {
if (!/\.client\.js$/.test(mod.resource)) {
return;
}
let moduleExports = {};
['', '*'].concat(mod.buildMeta.providedExports).forEach(name => {
moduleExports[name] = {
id: mod.id,
chunks: chunk.ids,
name: name,
};
});
json[pathToFileURL(mod.resource).href] = moduleExports;
});
});
const output = JSON.stringify(json, null, 2);
const filename = resolve(
compiler.options.output.path,
'react-transport-manifest.json',
);
mkdirSync(dirname(filename), {recursive: true});
writeFileSync(filename, output);
});
}
}
2 changes: 1 addition & 1 deletion scripts/rollup/bundles.js
Original file line number Diff line number Diff line change
Expand Up @@ -283,7 +283,7 @@ const bundles = [
moduleType: RENDERER_UTILS,
entry: 'react-transport-dom-webpack/plugin',
global: 'ReactFlightWebpackPlugin',
externals: [],
externals: ['fs', 'path', 'url'],
},

/******* React Transport DOM Webpack Node.js Loader *******/
Expand Down
3 changes: 3 additions & 0 deletions scripts/rollup/modules.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ const {UMD_DEV, UMD_PROD, UMD_PROFILING} = require('./bundles').bundleTypes;
const HAS_NO_SIDE_EFFECTS_ON_IMPORT = false;
// const HAS_SIDE_EFFECTS_ON_IMPORT = true;
const importSideEffects = Object.freeze({
fs: HAS_NO_SIDE_EFFECTS_ON_IMPORT,
path: HAS_NO_SIDE_EFFECTS_ON_IMPORT,
'prop-types/checkPropTypes': HAS_NO_SIDE_EFFECTS_ON_IMPORT,
'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface': HAS_NO_SIDE_EFFECTS_ON_IMPORT,
scheduler: HAS_NO_SIDE_EFFECTS_ON_IMPORT,
Expand All @@ -17,6 +19,7 @@ const importSideEffects = Object.freeze({
'react/jsx-dev-runtime': HAS_NO_SIDE_EFFECTS_ON_IMPORT,
'react-fetch/node': HAS_NO_SIDE_EFFECTS_ON_IMPORT,
'react-dom': HAS_NO_SIDE_EFFECTS_ON_IMPORT,
url: HAS_NO_SIDE_EFFECTS_ON_IMPORT,
});

// Bundles exporting globals that other modules rely on.
Expand Down

0 comments on commit 976833c

Please sign in to comment.