Remove `flight-browser` fixture (#28828)
The flight-browser fixtures doesn't make sense. It also uses UMD builds which are being removed so we'd have to make it use esm.sh or something and really it just won't work because it needs to be built by webpack to not error. We could potentially shim the webpack globals but really the right thing is to publish the esm version of react-server and use esm.sh to load a browser only esm demo of react-server. This change removes the flight-browser fixture
Josh Story committed
Apr 12, 2024 at 09:48 UTC
ba1a9797eebee694f6872e425b3a697c39a17dfc
1 file changed
-101
fixtures/flight-browser/index.html
deleted
-101
@@ -1,101 +0,0 @@
1
-<!DOCTYPE html>
2
-<html style="width: 100%; height: 100%; overflow: hidden">
3
- <head>
4
- <meta charset="utf-8">
5
- <title>Flight Example</title>
6
- </head>
7
- <body>
8
- <h1>Flight Example</h1>
9
- <div id="container">
10
- <p>
11
- To install React, follow the instructions on
12
- <a href="https://github.com/facebook/react/">GitHub</a>.
13
- </p>
14
- <p>
15
- If you can see this, React is <strong>not</strong> working right.
16
- If you checked out the source from GitHub make sure to run <code>npm run build</code>.
17
- </p>
18
- </div>
19
- <script src="../../build/oss-experimental/react/umd/react.development.js"></script>
20
- <script src="../../build/oss-experimental/react-dom/umd/react-dom.development.js"></script>
21
- <script src="../../build/oss-experimental/react-dom/umd/react-dom-server.browser.development.js"></script>
22
- <script src="../../build/oss-experimental/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js"></script>
23
- <script src="../../build/oss-experimental/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.development.js"></script>
24
- <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
25
- <script type="text/babel">
26
- let Suspense = React.Suspense;
27
-
28
- function Text({children}) {
29
- return <span>{children}</span>;
30
- }
31
- function HTML() {
32
- return (
33
- <div>
34
- <Text>hello</Text>
35
- <Text>world</Text>
36
- </div>
37
- );
38
- }
39
-
40
- let resolved = false;
41
- let promise = new Promise(resolve => {
42
- setTimeout(() => {
43
- resolved = true;
44
- resolve();
45
- }, 100);
46
- });
47
- function read() {
48
- if (!resolved) {
49
- throw promise;
50
- }
51
- }
52
-
53
- function Title() {
54
- read();
55
- return 'Title';
56
- }
57
-
58
- let model = {
59
- title: <Title />,
60
- content: <HTML />,
61
- };
62
-
63
- let stream = ReactServerDOMServer.renderToReadableStream(model);
64
- let response = new Response(stream, {
65
- headers: {'Content-Type': 'text/html'},
66
- });
67
- display(response);
68
-
69
- async function display(responseToDisplay) {
70
- let blob = await responseToDisplay.blob();
71
- let url = URL.createObjectURL(blob);
72
-
73
- let data = ReactServerDOMClient.createFromFetch(
74
- fetch(url)
75
- );
76
- renderResult(data);
77
- }
78
-
79
- function Shell({ data }) {
80
- let model = React.use(data);
81
- return <div>
82
- <Suspense fallback="...">
83
- <h1>{model.title}</h1>
84
- </Suspense>
85
- {model.content}
86
- </div>;
87
- }
88
-
89
- function renderResult(data) {
90
- let container = document.getElementById('container');
91
- ReactDOM.createRoot(
92
- container
93
- ).render(
94
- <Suspense fallback="Loading...">
95
- <Shell data={data} />
96
- </Suspense>,
97
- );
98
- }
99
- </script>
100
- </body>
101
-</html>