7 files changed, 224 insertions, 0 deletions
diff --git a/demos/simple-react/package.json b/demos/simple-react/package.json
new file mode 100644
index 000000000..68ca14dca
--- /dev/null
+++ b/demos/simple-react/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "simple-react",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}
diff --git a/demos/simple-react/public/__runtime.js b/demos/simple-react/public/__runtime.js
new file mode 100644
index 000000000..da76d71eb
--- /dev/null
+++ b/demos/simple-react/public/__runtime.js
@@ -0,0 +1,63 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+
+export var __markAsModule = (target) =>
+  __defProp(target, "__esModule", { value: true });
+export var __commonJS = (cb, mod) => () => {
+  return mod || cb((mod = { exports: {} }).exports, mod), mod.exports;
+};
+
+export var __reExport = (target, module, desc) => {
+  if ((module && typeof module === "object") || typeof module === "function") {
+    for (let key of __getOwnPropNames(module))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, {
+          get: () => module[key],
+          enumerable:
+            !(desc = __getOwnPropDesc(module, key)) || desc.enumerable,
+        });
+  }
+  return target;
+};
+
+export var __toModule = (module) => {
+  return __reExport(
+    __markAsModule(
+      __defProp(
+        module != null ? __create(__getProtoOf(module)) : {},
+        "default",
+        module && module.__esModule && "default" in module
+          ? { get: () => module.default, enumerable: true }
+          : { value: module, enumerable: true }
+      )
+    ),
+    module
+  );
+};
+
+export var __name = (target, name) => {
+  Object.defineProperty(target, "name", {
+    get() {
+      return name;
+    },
+    set(v) {
+      name = v;
+    },
+  });
+
+  return target;
+};
+
+// browsers handles ensuring the same ESM is not loaded multiple times
+export var __require = (n) => {
+  return Object.prototype.hasOwnProperty.call(n, "default") &&
+    Object.keys(n).length === 1
+    ? n["default"]
+    : n;
+};
+
+export const __esModule = true;
diff --git a/demos/simple-react/public/index.html b/demos/simple-react/public/index.html
new file mode 100644
index 000000000..cbf484fd2
--- /dev/null
+++ b/demos/simple-react/public/index.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="/src/index.js" type="module"></script>
+  </head>
+  <body id="reactroot"></body>
+</html>
diff --git a/demos/simple-react/public/src/components/button.js b/demos/simple-react/public/src/components/button.js
new file mode 100644
index 000000000..28bfffda7
--- /dev/null
+++ b/demos/simple-react/public/src/components/button.js
@@ -0,0 +1,23 @@
+import * as _react_dot_jsx from "http://localhost:8080/node_modules/react/index.js";
+var jsxDEV = __require(_react_dot_jsx).jsxDEV, __jsxFilename = "src/components/button.tsx";
+
+import {
+__require
+} from "http://localhost:8080/__runtime.js";
+export const Button = ({ label, onClick }) => jsxDEV("div", {
+  className: "Button",
+  onClick,
+  children: jsxDEV("div", {
+    className: "Button-label",
+    children: label
+  }, null, false, {
+    filename: __jsxFilename,
+    lineNumber: 97,
+    columnNumber: 97
+  }, this)
+}, null, false, {
+  filename: __jsxFilename,
+  lineNumber: 50,
+  columnNumber: 50
+}, this);
+
diff --git a/demos/simple-react/public/src/index.js b/demos/simple-react/public/src/index.js
new file mode 100644
index 000000000..09055b4c4
--- /dev/null
+++ b/demos/simple-react/public/src/index.js
@@ -0,0 +1,93 @@
+import * as _react_dot_jsx from "http://localhost:8080/node_modules/react/index.js";
+var jsxDEV = __require(_react_dot_jsx).jsxDEV,
+  __jsxFilename = "src/index.tsx";
+
+import { __require } from "http://localhost:8080/__runtime.js";
+import ReactDOM from "http://localhost:8080/node_modules/react-dom/index.js";
+import { Button } from "http://localhost:8080/src/components/button.js";
+
+const Base = ({}) => {
+  return jsxDEV(
+    "main",
+    {
+      children: [
+        jsxDEV(
+          "h1",
+          {
+            children: "I am the page",
+          },
+          null,
+          false,
+          {
+            filename: __jsxFilename,
+            lineNumber: 132,
+            columnNumber: 132,
+          },
+          this
+        ),
+        jsxDEV(
+          "h3",
+          {
+            children: "Here is some text",
+          },
+          null,
+          false,
+          {
+            filename: __jsxFilename,
+            lineNumber: 161,
+            columnNumber: 161,
+          },
+          this
+        ),
+        jsxDEV(
+          Button,
+          {
+            label: "Do not click.",
+            onClick: () => alert("I told u not to click!"),
+            children: [],
+          },
+          null,
+          false,
+          {
+            filename: __jsxFilename,
+            lineNumber: 194,
+            columnNumber: 194,
+          },
+          this
+        ),
+      ],
+    },
+    null,
+    false,
+    {
+      filename: __jsxFilename,
+      lineNumber: 119,
+      columnNumber: 119,
+    },
+    this
+  );
+};
+
+function startReact() {
+  ReactDOM.render(
+    () =>
+      jsxDEV(
+        Base,
+        {
+          children: [],
+        },
+        null,
+        false,
+        {
+          filename: __jsxFilename,
+          lineNumber: 374,
+          columnNumber: 374,
+        },
+        this
+      ),
+    document.querySelector("#reactroot")
+  );
+}
+globalThis.addEventListener("DOMContentLoaded", () => {
+  startReact();
+});
diff --git a/demos/simple-react/src/components/button.tsx b/demos/simple-react/src/components/button.tsx
new file mode 100644
index 000000000..a3c90553c
--- /dev/null
+++ b/demos/simple-react/src/components/button.tsx
@@ -0,0 +1,5 @@
+export const Button = ({ label, onClick }) => (
+  <div className="Button" onClick={onClick}>
+    <div className="Button-label">{label}</div>
+  </div>
+);
diff --git a/demos/simple-react/src/index.tsx b/demos/simple-react/src/index.tsx
new file mode 100644
index 000000000..c0f0ec181
--- /dev/null
+++ b/demos/simple-react/src/index.tsx
@@ -0,0 +1,23 @@
+import ReactDOM from "react-dom";
+import { Button } from "./components/button";
+
+const Base = ({}) => {
+  return (
+    <main>
+      <h1>I am the page</h1>
+      <h3>Here is some text</h3>
+      <Button
+        label="Do not click."
+        onClick={() => alert("I told u not to click!")}
+      ></Button>
+    </main>
+  );
+};
+
+function startReact() {
+  ReactDOM.render(() => <Base />, document.querySelector("#reactroot"));
+}
+
+globalThis.addEventListener("DOMContentLoaded", () => {
+  startReact();
+});