Skip to content

Commit

Permalink
[Flight] Expand the fixture to use require.extensions (facebook#20209)
Browse files Browse the repository at this point in the history
* Expand fixture

Use .server convention. /server/index.js should really change too so it can be compiled but for now we treat it as bootstrapping code outside the compiled code.

Move App.server. It's part of the application code rather than the infra.

Add hybrid component used in both server/client and an extra component shared by multiple entry points.

* Use require.extensions to replace .client imports

The simplest server doesn't need AOT compilation. Instead we can just
configure require.extensions. This is probably not the best idea to use
in prod but is enough to show the set up.
  • Loading branch information
sebmarkbage authored and koto committed Jun 15, 2021
1 parent 1b85f59 commit 6e47e76
Show file tree
Hide file tree
Showing 8 changed files with 59 additions and 21 deletions.
16 changes: 0 additions & 16 deletions fixtures/flight/server/App.server.js

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,19 @@

import {pipeToNodeWritable} from 'react-transport-dom-webpack/server';
import * as React from 'react';
import App from './App.server';
import App from '../src/App.server';

module.exports = function(req, res) {
res.setHeader('Access-Control-Allow-Origin', '*');
pipeToNodeWritable(<App />, res, {
// TODO: Read from a map on the disk.
'./src/Counter.client.js': {
[require.resolve('../src/Counter.client.js')]: {
id: './src/Counter.client.js',
chunks: ['1'],
name: 'default',
},
[require.resolve('../src/ShowMore.client.js')]: {
id: './src/ShowMore.client.js',
chunks: ['2'],
name: 'default',
},
Expand Down
9 changes: 8 additions & 1 deletion fixtures/flight/server/index.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
'use strict';

require.extensions['.client.js'] = function(module, path) {
module.exports = {
$$typeof: Symbol.for('react.module.reference'),
name: path,
};
};

const babelRegister = require('@babel/register');

babelRegister({
Expand All @@ -18,7 +25,7 @@ app.get('/', function(req, res) {
delete require.cache[key];
}
}
require('./handler')(req, res);
require('./handler.server')(req, res);
});

app.listen(3001, () => {
Expand Down
19 changes: 19 additions & 0 deletions fixtures/flight/src/App.server.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import * as React from 'react';

import Container from './Container';

import Counter from './Counter.client';

import ShowMore from './ShowMore.client';

export default function App() {
return (
<Container>
<h1>Hello, world</h1>
<Counter />
<ShowMore>
<p>Lorem ipsum</p>
</ShowMore>
</Container>
);
}
5 changes: 5 additions & 0 deletions fixtures/flight/src/Container.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import * as React from 'react';

export default function Container({children}) {
return <div>{children}</div>;
}
8 changes: 7 additions & 1 deletion fixtures/flight/src/Counter.client.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
import * as React from 'react';

import Container from './Container';

export default function Counter() {
const [count, setCount] = React.useState(0);
return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
return (
<Container>
<button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
</Container>
);
}
11 changes: 11 additions & 0 deletions fixtures/flight/src/ShowMore.client.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import * as React from 'react';

import Container from './Container';

export default function ShowMore({children}) {
const [show, setShow] = React.useState(false);
if (!show) {
return <button onClick={() => setShow(true)}>Show More</button>;
}
return <Container>{children}</Container>;
}
3 changes: 2 additions & 1 deletion fixtures/flight/src/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, {Suspense} from 'react';
import * as React from 'react';
import {Suspense} from 'react';
import ReactDOM from 'react-dom';
import ReactTransportDOMClient from 'react-transport-dom-webpack';

Expand Down

0 comments on commit 6e47e76

Please sign in to comment.