1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8" />
6  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
8  <title>React DevTools</title>
9  <style>
10    html,
11    body {
12      width: 100vw;
13      height: 100vh;
14      padding: 0;
15      margin: 0;
16      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
17        Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
18    }
19
20    a {
21      color: inherit;
22      text-decoration: none;
23    }
24
25    * {
26      box-sizing: border-box;
27    }
28
29    #hint {
30      margin: 1em;
31      font-size: 16px;
32    }
33
34    #root {
35      width: 100%;
36      height: 100%;
37    }
38
39  </style>
40</head>
41
42<body>
43  <noscript>
44    You need to enable JavaScript to run this app.
45  </noscript>
46  <div id="hint">Connecting to ReactDevToolsProxy...</div>
47  <div id="root"></div>
48  <!--
49    JSPM Generator Import Map
50    Edit URL: https://generator.jspm.io/#U2NgYGBkDM0rySzJSU1hKEpNTC7RTUktK8nPzynWTc4vSnUw0TMy1zPSLy5JzEtJzMnPSwUAiUm0+zQA
51  -->
52  <script type="importmap">
53      {
54        "imports": {
55          "react-devtools-core/standalone": "https://ga.jspm.io/npm:[email protected]/standalone.js"
56        },
57        "scopes": {
58          "https://ga.jspm.io/": {
59            "buffer": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/buffer.js",
60            "child_process": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/child_process.js",
61            "crypto": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/crypto.js",
62            "events": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/events.js",
63            "fs": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/fs.js",
64            "http": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/http.js",
65            "https": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/https.js",
66            "net": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/net.js",
67            "path": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/path.js",
68            "process": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/process-production.js",
69            "stream": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/stream.js",
70            "tls": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/tls.js",
71            "url": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/url.js",
72            "util": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/util.js",
73            "vm": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/vm.js",
74            "zlib": "https://ga.jspm.io/npm:@jspm/[email protected]/nodelibs/browser/zlib.js"
75          }
76        }
77      }
78    </script>
79
80  <!-- ES Module Shims: Import maps polyfill for modules browsers without import maps support (all except Chrome 89+) -->
81  <script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js"
82    crossorigin="anonymous"></script>
83
84  <script type="module">
85    import { default as DevToolsUIWrapper } from "react-devtools-core/standalone";
86    const DevTools = DevToolsUIWrapper.default;
87
88    /**
89     * Private command to support DevTools frontend reload
90     */
91    const RELOAD_COMMAND = 'Expo::RELOAD';
92
93    function connectAsync(url) {
94      return new Promise((resolve, reject) => {
95        const ws = new WebSocket(url);
96
97        ws.addEventListener("open", () => {
98          resolve(ws);
99        });
100
101        ws.addEventListener("close", (e) => {
102          reject(e);
103        });
104
105        ws.addEventListener("error", (e) => {
106          reject(e);
107        });
108      });
109    }
110
111    async function delayAsync(timeMs) {
112      return new Promise((resolve) => setTimeout(resolve, timeMs));
113    }
114
115    async function connectAsyncWithRetries(url) {
116      while (true) {
117        try {
118          const ws = await connectAsync(url);
119          document.getElementById("hint").style.display = "none";
120          return ws;
121        } catch {
122          document.getElementById("hint").style.display = "block";
123          await delayAsync(5000);
124        }
125      }
126    }
127
128    async function main() {
129      const ws = await connectAsyncWithRetries("ws://localhost:8097");
130
131      ws.addEventListener("close", () => {
132        document.getElementById("hint").style.display = "block";
133        main();
134      });
135      DevTools.setContentDOMNode(document.getElementById("root"));
136      ws.send(RELOAD_COMMAND);
137      DevTools.connectToSocket(ws);
138    }
139
140    main();
141  </script>
142</body>
143
144</html>
145