Vite Dev Server

Figured out how to use Vite to demo working on the component! I'm surprised I haven't figured this out yet, it works really well. This also finally allows everything to work locally, since it uses npm for loading the Constructable Stylesheets and ES Module Shims polyfills.

Once the dev server is running in a terminal tab, note that you have to navigate specifically to `http://localhost:5500/test/index.html`, since the main HTML file isn't in the root of the project, because I want to use it only for testing things out.

https://vitejs.dev/guide/#index-html-and-project-root

I had to add `skipLibCheck` because the Constructable Stylesheets Polyfill has overlapping types with the standard library now, unfortunately. So everything was working good with Vite and all (type-wise), but the regular lib defintions were overlapping with each other, since TS natively added types for `document.adoptedStyleSheets`. I can look into making an issue/PR to the polyfill to make it work accordingly with newer TS versions.

I had to add `?inline` to make Vite happy for the CSS Module Scripts import. I am going to look into a way to get around that issue, as I don't want to enforce needing to use that for users that don't use Vite. That query parameter could mean something else by chance on their server, or something like that.

Oh yeah, and turns out I needed `rootDir`/`exclude` for the `tsconfig` because of each Web Component's use of `declare global { interface HTMLElementTagNameMap {} }`, since it defines the tag names on the global scope, and the output JS and types in `./dist` clash with the `./src` definitions, so that causes a type collision issue as well. Aag! I'm gonna look into seeing how Lit element components deal with that, maybe they also `exclude` the `dist` directory. I didn't want to use `rootDir` because I wanted to apply type checking to the TS files in `./test`, like how I'm doing for my other projects. That was one of the benefits with moving to Vite, that I can type check the demo files as well, and use full TS, and also not need to run `tsc` in parallel to the dev server. Instead the server (Vite) can handle the transpilation for me :) All about that simple abstraction :)

package.json

@@ -7,7 +7,8 @@
   "types": "./dist/index.d.ts",
   "scripts": {
     "build": "tsc --project ./tsconfig.build.json",
-    "dev": "tsc --watch"
+    "dev": "tsc --watch",
+    "serve": "vite"
   },
   "repository": {
     "type": "git",
@@ -28,7 +29,10 @@
   },
   "homepage": "https://github.com/Offroaders123/Menu-Drop#readme",
   "devDependencies": {
-    "typescript": "^5.2.2"
+    "construct-style-sheets-polyfill": "^3.1.0",
+    "es-module-shims": "^1.8.1",
+    "typescript": "^5.2.2",
+    "vite": "^4.5.0"
   },
   "sideEffects": true
 }

src/index.ts

@@ -4,7 +4,7 @@ export * from "./MenuList.js";
 export * from "./MenuItem.js";
 export * from "./MenuSubList.js";
 
-import styles from "../styles/style.css" assert { type: "css" };
+import styles from "../styles/style.css?inline" assert { type: "css" };
 
 const stylesheet: CSSStyleSheet = typeof styles === "string"
   ? await new CSSStyleSheet().replace(styles)

test/index.html

@@ -7,8 +7,8 @@
 <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="./polyfill.js"></script>
-<script type="module" src="../dist/index.js"></script>
+<script type="module" src="./polyfill.ts"></script>
+<script type="module" src="../src/index.ts"></script>
 
 <style>
   body {

test/polyfill.ts

@@ -0,0 +1,7 @@
+window.esmsInitOptions = {
+  polyfillEnable: ["css-modules"]
+};
+
+await import("construct-style-sheets-polyfill");
+// @ts-expect-error - module types
+await import("es-module-shims");

tsconfig.build.json

@@ -1,6 +1,8 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
     "noEmit": false,
     "declaration": true,
     "sourceMap": true

tsconfig.json

@@ -1,18 +1,23 @@
 {
   "compilerOptions": {
-    "rootDir": "./src",
-    "outDir": "./dist",
     "module": "NodeNext",
     "target": "ESNext",
     "isolatedModules": true,
     "allowArbitraryExtensions": true,
+    "types": [
+      "vite/client"
+    ],
     "noEmit": true,
+    "skipLibCheck": true,
     "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noUncheckedIndexedAccess": true,
     "allowUnreachableCode": false,
     "noUnusedLocals": true,
     "noUnusedParameters": true
-  }
+  },
+  "exclude": [
+    "./dist"
+  ]
 }

vite.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  base: "./",
+  build: {
+    target: "esnext"
+  },
+  server: {
+    port: 5500,
+    strictPort: true
+  },
+  preview: {
+    port: 5500,
+    strictPort: true
+  }
+});