diff --git a/fixtures/flight/package.json b/fixtures/flight/package.json index 3470e72e753aa..3749cc993c5a5 100644 --- a/fixtures/flight/package.json +++ b/fixtures/flight/package.json @@ -18,6 +18,7 @@ "camelcase": "^5.2.0", "case-sensitive-paths-webpack-plugin": "2.2.0", "concurrently": "^5.0.0", + "cors": "^2.8.5", "css-loader": "2.1.1", "dotenv": "6.2.0", "dotenv-expand": "5.1.0", diff --git a/fixtures/flight/server/handler.server.js b/fixtures/flight/server/handler.server.js index d7715af9cc757..b147c9cbd5bc3 100644 --- a/fixtures/flight/server/handler.server.js +++ b/fixtures/flight/server/handler.server.js @@ -18,12 +18,17 @@ module.exports = async function(req, res) { // TODO: Read from a map on the disk. [resolve('../src/Counter.client.js')]: { id: './src/Counter.client.js', - chunks: ['1'], + chunks: ['2'], name: 'default', }, [resolve('../src/ShowMore.client.js')]: { id: './src/ShowMore.client.js', - chunks: ['2'], + chunks: ['3'], + name: 'default', + }, + [resolve('../src/AddTodo.client.js')]: { + id: './src/AddTodo.client.js', + chunks: ['1'], name: 'default', }, }); diff --git a/fixtures/flight/server/index.js b/fixtures/flight/server/index.js index 3d28e818bcf83..025500793505d 100644 --- a/fixtures/flight/server/index.js +++ b/fixtures/flight/server/index.js @@ -12,7 +12,10 @@ babelRegister({ }); const express = require('express'); +const cors = require('cors'); const app = express(); +app.use(cors()); +app.use(express.json()); // Application app.get('/', function(req, res) { @@ -25,18 +28,27 @@ app.get('/', function(req, res) { require('./handler.server.js')(req, res); }); +let todos = [ + { + id: 1, + text: 'Shave yaks', + }, + { + id: 2, + text: 'Eat kale!', + }, +]; + app.get('/todos', function(req, res) { - res.setHeader('Access-Control-Allow-Origin', '*'); - res.json([ - { - id: 1, - text: 'Shave yaks', - }, - { - id: 2, - text: 'Eat kale', - }, - ]); + res.json(todos); +}); + +app.post('/todos', function(req, res) { + todos.push({ + id: todos.length + 1, + text: req.body.text, + }); + res.json(todos); }); app.listen(3001, () => { diff --git a/fixtures/flight/src/AddTodo.client.js b/fixtures/flight/src/AddTodo.client.js new file mode 100644 index 0000000000000..42056f072e8cb --- /dev/null +++ b/fixtures/flight/src/AddTodo.client.js @@ -0,0 +1,33 @@ +import * as React from 'react'; + +import Container from './Container.js'; +import {RefreshContext} from './Context.client'; + +export default function Counter() { + const [text, setText] = React.useState(''); + const [startTransition, isPending] = React.unstable_useTransition(); + const refresh = React.useContext(RefreshContext); + return ( + + setText(e.target.value)} /> + + {isPending && ' ...'} + + ); +} diff --git a/fixtures/flight/src/App.server.js b/fixtures/flight/src/App.server.js index a0d9ae285ad23..0b906e8555713 100644 --- a/fixtures/flight/src/App.server.js +++ b/fixtures/flight/src/App.server.js @@ -3,8 +3,8 @@ import {fetch} from 'react-fetch'; import Container from './Container.js'; +import AddTodo from './AddTodo.client.js'; import Counter from './Counter.client.js'; - import ShowMore from './ShowMore.client.js'; export default function App() { @@ -18,6 +18,9 @@ export default function App() {
  • {todo.text}
    • ))} + +
    +

    Lorem ipsum

     diff --git a/fixtures/flight/src/Context.client.js b/fixtures/flight/src/Context.client.js new file mode 100644 index 0000000000000..3f1ee4c39fb58 --- /dev/null +++ b/fixtures/flight/src/Context.client.js @@ -0,0 +1,3 @@ +import * as React from 'react'; + +export const RefreshContext = React.createContext(null); diff --git a/fixtures/flight/src/index.js b/fixtures/flight/src/index.js index ce9595dbe5482..af33669eda691 100644 --- a/fixtures/flight/src/index.js +++ b/fixtures/flight/src/index.js @@ -2,20 +2,32 @@ import * as React from 'react'; import {Suspense} from 'react'; import ReactDOM from 'react-dom'; import ReactTransportDOMClient from 'react-transport-dom-webpack'; +import {RefreshContext} from './Context.client'; -let data = ReactTransportDOMClient.createFromFetch( +let initialData = ReactTransportDOMClient.createFromFetch( fetch('http://localhost:3001') ); function Content() { - return data.readRoot(); + let [data, setData] = React.useState(initialData); + + function refresh() { + setData( + ReactTransportDOMClient.createFromFetch(fetch('http://localhost:3001')) + ); + } + + return ( + + {data.readRoot()} + + ); } -ReactDOM.render( +ReactDOM.unstable_createRoot(document.getElementById('root')).render( Loading...}> - , - document.getElementById('root') + ); // Create entry points for Client Components. diff --git a/fixtures/flight/yarn.lock b/fixtures/flight/yarn.lock index ad74759fddff9..dbf21e0f51704 100644 --- a/fixtures/flight/yarn.lock +++ b/fixtures/flight/yarn.lock @@ -2804,6 +2804,14 @@ core-util-is@1.0.2, core-util-is@~1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7" +cors@^2.8.5: + version "2.8.5" + resolved "https://registry.yarnpkg.com/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29" + integrity sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g== + dependencies: + object-assign "^4" + vary "^1" + cosmiconfig@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-4.0.0.tgz#760391549580bbd2df1e562bc177b13c290972dc" @@ -6457,7 +6465,7 @@ oauth-sign@~0.9.0: version "0.9.0" resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455" -object-assign@4.1.1, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1: +object-assign@4.1.1, object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" @@ -9309,7 +9317,7 @@ validate-npm-package-license@^3.0.1: spdx-correct "^3.0.0" spdx-expression-parse "^3.0.0" -vary@~1.1.2: +vary@^1, vary@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"