diff --git a/fixtures/flight/server/App.server.js b/fixtures/flight/server/App.server.js new file mode 100644 index 000000000000..72858c944779 --- /dev/null +++ b/fixtures/flight/server/App.server.js @@ -0,0 +1,16 @@ +import * as React from 'react'; + +// TODO: A transform should read this from webpack plugin output. +const CounterClient = { + $$typeof: Symbol.for('react.module.reference'), + name: './src/Counter.client.js', +}; + +export default function App() { + return ( +
+

Hello, world

+ +
+ ); +} diff --git a/fixtures/flight/server/handler.js b/fixtures/flight/server/handler.js index 25618543db4e..9a0c6004150d 100644 --- a/fixtures/flight/server/handler.js +++ b/fixtures/flight/server/handler.js @@ -1,26 +1,17 @@ 'use strict'; -const ReactTransportDOMServer = require('react-transport-dom-webpack/server'); -const React = require('react'); -const Stream = require('stream'); - -function Text({children}) { - return {children}; -} - -function HTML() { - return ( -
- Hello - world -
- ); -} +import {pipeToNodeWritable} from 'react-transport-dom-webpack/server'; +import * as React from 'react'; +import App from './App.server'; module.exports = function(req, res) { res.setHeader('Access-Control-Allow-Origin', '*'); - let model = { - content: , - }; - ReactTransportDOMServer.pipeToNodeWritable(model, res); + pipeToNodeWritable(, res, { + // TODO: Read from a map on the disk. + './src/Counter.client.js': { + id: './src/Counter.client.js', + chunks: ['2'], + name: 'default', + }, + }); }; diff --git a/fixtures/flight/server/index.js b/fixtures/flight/server/index.js index 2388365eee39..016fe9f15dba 100644 --- a/fixtures/flight/server/index.js +++ b/fixtures/flight/server/index.js @@ -5,6 +5,7 @@ const babelRegister = require('@babel/register'); babelRegister({ ignore: [/\/(build|node_modules)\//], presets: ['react-app'], + plugins: ['@babel/transform-modules-commonjs'], }); const express = require('express'); diff --git a/fixtures/flight/src/App.js b/fixtures/flight/src/App.js deleted file mode 100644 index e3a7b558b35d..000000000000 --- a/fixtures/flight/src/App.js +++ /dev/null @@ -1,15 +0,0 @@ -import React, {Suspense} from 'react'; - -function Content({data}) { - return data.readRoot().content; -} - -function App({data}) { - return ( - Loading...}> - - - ); -} - -export default App; diff --git a/fixtures/flight/src/Counter.client.js b/fixtures/flight/src/Counter.client.js new file mode 100644 index 000000000000..8274f6134b5a --- /dev/null +++ b/fixtures/flight/src/Counter.client.js @@ -0,0 +1,6 @@ +import * as React from 'react'; + +export default function Counter() { + const [count, setCount] = React.useState(0); + return ; +} diff --git a/fixtures/flight/src/index.js b/fixtures/flight/src/index.js index c3e134c096b4..100164f5a461 100644 --- a/fixtures/flight/src/index.js +++ b/fixtures/flight/src/index.js @@ -1,10 +1,22 @@ -import React from 'react'; +import React, {Suspense} from 'react'; import ReactDOM from 'react-dom'; import ReactTransportDOMClient from 'react-transport-dom-webpack'; -import App from './App'; let data = ReactTransportDOMClient.createFromFetch( fetch('http://localhost:3001') ); -ReactDOM.render(, document.getElementById('root')); +function Content() { + return data.readRoot(); +} + +ReactDOM.render( + Loading...}> + + , + document.getElementById('root') +); + +// Create entry points for Client Components. +// TODO: Webpack plugin should do this and write a map to disk. +require.context('./', true, /\.client\.js$/, 'lazy');