Browser Testing

Did some testing to see if this works in the browser really, and it actually does! Super cool! It even works on iOS. I guess it's more of a TypeScript thing to test, since it more depends on that being able to transpile down to runnable-JS. I also collapsed some of the `createElement()` types to use the JSX ones I already defined in the `namespace JSX` declaration. Found an issue with importing a component from a module, as both a type, and a side-effect declaration, so I had to look into a setting to configure how the imports should be handled for other scripts. Another way around from running into this is to simply load the script with an inline-import (`import "./web-component.js"`), versus as a default/named import (`import { WebComponent } from "./web-component.js"`). The problem is that TypeScript doesn't see this script as a side-effect script, while it is still required to be able to define `WebComponent` as a custom element for the window. So if you do these on two separate lines, instead of one + the config change, then you don't have to change your TypeScript config settings for that.
Offroaders123 · Jan 26, 2023 · 9ccff98 · 9ccff98
1 parent bbe3307
commit 9ccff98
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -5,20 +5,10 @@
   <title>dino-jsx</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <script type="importmap">
-    {
-      "imports": {
-        "texsaur": "./node_modules/texsaur/dist/index.js",
-        "./node_modules/texsaur/dist/index": "./node_modules/texsaur/dist/index.js",
-        "./node_modules/texsaur/dist/dom": "./node_modules/texsaur/dist/dom.js",
-        "./node_modules/texsaur/dist/svg": "./node_modules/texsaur/dist/svg.js"
-      }
-    }
-  </script>
+  <script type="module" src="./dist/app.js"></script>
 </head>
 
 <body>
-  <script type="module" src="./dist/app.js"></script>
 </body>
 
 </html>
diff --git a/src/app.tsx b/src/app.tsx
@@ -1,5 +1,5 @@
-import { createElement } from "./index.js";
-import type Epic from "./epic.js";
+import * as JSX from "./index.js";
+import Epic from "./epic.js";
 
 const myDiv = <div></div> as HTMLDivElement;
 

diff --git a/src/epic.tsx b/src/epic.tsx
@@ -1,4 +1,4 @@
-import { createElement } from "./index.js";
+import * as JSX from "./index.js";
 
 export class Epic extends HTMLElement {
   readonly shadowRoot = this.attachShadow({ mode: "open" });

diff --git a/src/index.tsx b/src/index.tsx
@@ -5,14 +5,14 @@ declare global {
     type Fragment = Node[];
 
     interface IntrinsicElements extends IntrinsicElementsTagNameMap {}
-    
+
     type IntrinsicElementsTagNameMap = {
       [K in keyof HTMLElementTagNameMap]: Partial<HTMLElementTagNameMap[K]>;
-    };
+    }
   }
 }
 
-export function createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, attributes?: Partial<HTMLElementTagNameMap[K]> | null, ...children: Node[]): HTMLElementTagNameMap[K] {
+export function createElement<K extends keyof JSX.IntrinsicElements>(tagName: K, attributes?: JSX.IntrinsicElementsTagNameMap[K] | null, ...children: Node[]): JSX.IntrinsicElementsTagNameMap[K] {
   const element = document.createElement(tagName);
 
   if (attributes !== null && attributes !== undefined){

diff --git a/tsconfig.json b/tsconfig.json
@@ -6,8 +6,9 @@
     "moduleResolution": "Node",
     "target": "ESNext",
     "jsx": "react",
-    "jsxFactory": "createElement",
-    "jsxFragmentFactory": "Fragment",
-    "strict": true
+    "jsxFactory": "JSX.createElement",
+    "jsxFragmentFactory": "JSX.Fragment",
+    "strict": true,
+    "importsNotUsedAsValues": "preserve"
   }
 }