module-tsx/index.html at main · YieldRay/module-tsx · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ModuleTSX</title>
    <script></script>
    <!-- <script type="module" src="https://esm.sh/@tailwindcss/browser"></script> -->
    <script type="module-tsx" src="./docs/src/main.tsx"></script>
  </head>
  <body>
    <div id="root">
      <pre style="color: #888; font-size: 12px; margin: 0; padding: 0">loading module-tsx library...</pre>
    </div>
  </body>
  <!-- <script src="./dist/index.umd.js"></script> -->
  <script type="module">
    import { instance, ModuleTSX } from "./dist/index.mjs"; // the ESM module
    // const { instance, ModuleTSX } = window.ModuleTSX; // the UMD global variable
    instance.addEventListener("*", (event) => {
      const { type, payload } = event.detail;

      document.getElementById("root").appendChild(
        Object.assign(document.createElement("pre"), {
          innerText: `${type}: ${JSON.stringify(payload)}`,
          style: `color: ${type.endsWith(":error") ? "#f00" : "#888"}; font-size: 12px; margin: 0; padding: 0;`,
        }),
      );
    });
  </script>
</html>