[Flight Fixture] Refetching

Author: gaearon

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",

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',
     },
   });

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, () => {

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 (
+    <Container>
+      <input value={text} onChange={e => setText(e.target.value)} />
+      <button
+        onClick={async () => {
+          await fetch('http://localhost:3001/todos', {
+            method: 'POST',
+            mode: 'cors',
+            headers: {
+              Accept: 'application/json',
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({text}),
+          });
+          startTransition(() => {
+            refresh();
+          });
+        }}>
+        add
+      </button>
+      {isPending && ' ...'}
+    </Container>
+  );
+}

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() {
           <li key={todo.id}>{todo.text}</li>
         ))}
       </ul>
+      <AddTodo />
+      <br />
+      <br />
       <ShowMore>
         <p>Lorem ipsum</p>
       </ShowMore>

fixtures/flight/src/Context.client.js

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+export const RefreshContext = React.createContext(null);

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 (
+    <RefreshContext.Provider value={refresh}>
+      {data.readRoot()}
+    </RefreshContext.Provider>
+  );
 }
 
-ReactDOM.render(
+ReactDOM.unstable_createRoot(document.getElementById('root')).render(
   <Suspense fallback={<h1>Loading...</h1>}>
     <Content />
-  </Suspense>,
-  document.getElementById('root')
+  </Suspense>
 );
 
 // Create entry points for Client Components.

fixtures/flight/yarn.lock

@@ -2804,6 +2804,14 @@ [email protected], 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"
 
-[email protected], object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
+[email protected], 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"