Next Demoing - React-JSX

Unfortunately it didn't work because of ESM challenges, but tried changing the `jsx` flag to use `react-jsx` instead.

https://www.typescriptlang.org/tsconfig#verbatimModuleSyntax (Tried to upgrade from `importsNotUsedAsValues`, but things are still broken in regards to import elision)
https://www.typescriptlang.org/tsconfig#jsx
microsoft/TypeScript#47804
emotion-js/emotion#2742
https://www.typescriptlang.org/tsconfig#paths (Also tried setting `jsxImportSource`, but that breaks in ESM because of the forced module resolution path `_ident_/jsx-runtime` :{ )

index.html

@@ -5,6 +5,7 @@
   <title>dino-jsx</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="color-scheme" content="light dark">
   <script type="module" src="./dist/app.js"></script>
 </head>
 

package.json

@@ -1,4 +1,11 @@
 {
   "name": "dino-tsx",
-  "type": "module"
+  "type": "module",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc -w"
+  },
+  "devDependencies": {
+    "typescript": "^5.1.3"
+  }
 }

src/epic.tsx

@@ -1,7 +1,7 @@
 import * as JSX from "./index.js";
 
 export class Epic extends HTMLElement {
-  readonly shadowRoot = this.attachShadow({ mode: "open" });
+  override readonly shadowRoot = this.attachShadow({ mode: "open" });
 
   constructor() {
     super();

tsconfig.json

@@ -3,12 +3,13 @@
     "rootDir": "./src",
     "outDir": "./dist",
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "NodeNext",
     "target": "ESNext",
     "jsx": "react",
     "jsxFactory": "JSX.createElement",
     "jsxFragmentFactory": "JSX.Fragment",
     "strict": true,
+    "noImplicitOverride": true,
     "importsNotUsedAsValues": "preserve"
   }
 }