Dynamically load TSX

hyparam · May 30, 2024 · 43ed5fd · 43ed5fd
1 parent 5d1dbfc
commit 43ed5fd
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 19 deletions.
diff --git a/demo.js b/demo.js
@@ -0,0 +1,51 @@
+const header = ['ID', 'Name', 'Age']
+const data = [
+  [1, 'Alice', 25],
+  [2, 'Bob', 28],
+  [3, 'Carol', 32],
+]
+
+// Load ./src/hightable.tsx and render
+function init() {
+  const HighTable = require('./src/hightable.tsx').default
+  const container = document.getElementById('app')
+  const root = ReactDOM.createRoot(container)
+  root.render(React.createElement(HighTable, { header, data }))
+}
+init()
+
+/**
+ * Fake require function to load modules
+ *
+ * @param {string} path
+ * @returns {any}
+ */
+function require(path) {
+  if (path === 'react') return React
+  if (path === 'react-dom') return ReactDOM
+  if (path.startsWith('./src/')) return loadFromUrl(path.slice(6))
+  if (path.startsWith('./')) return loadFromUrl(path.slice(2))
+  throw new Error(`Cannot find module '${path}'`)
+}
+
+/**
+ * Load source code from URL and compile with Babel
+ *
+ * @param {string} filename
+ * @returns {string}
+ */
+function loadFromUrl(filename) {
+  const req = new XMLHttpRequest()
+  req.open('GET', `./src/${filename}`, false) // sync
+  req.send()
+  if (req.status !== 200) throw new Error(`Failed to load ${filename}`)
+  const text = req.responseText
+
+  // compile with babel
+  const js = Babel.transform(text, { filename, presets: ['env', 'react', 'typescript'] }).code
+  // eval with custom require
+  const run = eval('(require, exports, source) => eval(source)')
+  const exports = {}
+  run(require, exports, js)
+  return exports
+}
diff --git a/index.html b/index.html
@@ -13,25 +13,12 @@
       padding: 0;
     }
   </style>
+  <script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js"></script>
+  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
 </head>
 <body>
-  <div id="root"></div>
-  <script type="module">
-    import React from 'https://cdn.skypack.dev/react@17'
-    import ReactDOM from 'https://cdn.skypack.dev/react-dom@17'
-    import HighTable from './dist/hightable.min.js'
-
-    const header = ['ID', 'Name', 'Age']
-    const data = [
-      [1, 'Alice', 25],
-      [2, 'Bob', 28],
-      [3, 'Carol', 32],
-    ]
-
-    ReactDOM.render(
-      React.createElement(HighTable, { header, data }),
-      document.getElementById('root')
-    )
-  </script>
+  <div id="app"></div>
+  <script src="demo.js"></script>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -15,7 +15,8 @@
   },
   "main": "dist/hightable.min.js",
   "files": [
-    "src", "dist"
+    "src",
+    "dist"
   ],
   "type": "module",
   "types": "dist/hightable.d.ts",