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