Build Polishing + Service Worker Integration

Did some more debugging on the build setup, and realized a few more things that needed to be adjusted for things to work properly once I push everything up to GitHub Pages.

I looked into moving the Service Worker to full TypeScript again, to which I realized it wasn't being included in the final app bundle because it isn't referenced anywhere by the module tree, since that's kind of true, it isn't statically referenced anywhere, because it's in it's own process, not part of the main thread.

Looks like a possible fix for this could be to add the Service Worker file as a listed input source for Rollup, which can be configured with Vite's config options!

https://joshuatz.com/posts/2021/strongly-typed-service-workers/
https://stackoverflow.com/questions/71355290/ (rediscovery :))prevent-service-worker-js-from-being-bundled-with-vite-rollup
vitejs/vite#5081

Really happy things are working properly with this simple build step now! Only using TypeScript, plain ESM, and a bundler now! The full offline cached size for the whole minified site is only 59.6 kB, and it looks like thanks to dynamic imports, the Compression Streams API is also only polyfilled when the browser needs it, so that part of the site is skipped in caching if it doesn't need to be loaded, sick! The previous offline size was 154 kB. Looking into it, either way the polyfill is only cached if the browser doesn't support Compression Streams, so that's not specific to bundling afterall.

.github/workflows/build.yml

@@ -36,13 +36,10 @@ jobs:
  - name: Setup Pages
  uses: actions/configure-pages@v3
 
- - name: Production dependencies
- run: npm ci --omit=dev
-
  - name: Upload artifact
  uses: actions/upload-pages-artifact@v1
  with:
- path: "./"
+ path: "./dist"
 
  - name: Deploy to GitHub Pages
  id: deployment

package.json

@@ -3,9 +3,9 @@
  "private": true,
  "type": "module",
  "scripts": {
- "build": "tsc; vite build --base /Dovetail/ --target esnext",
- "dev": "vite --host --port 5500 --base /Dovetail/",
- "preview": "vite preview --host --port 5500 --base /Dovetail/"
+ "build": "tsc; vite build --base ./ --target esnext",
+ "dev": "vite --host --port 5500 --base ./",
+ "preview": "vite preview --host --port 5500 --base ./"
  },
  "dependencies": {
  "compression-streams-polyfill": "^0.1.3",

public/service-worker.js

@@ -1,6 +1,7 @@
-// @ts-check
 /// <reference no-default-lib="true"/>
-/// <reference types="better-typescript/worker"/>
+/// <reference types="better-typescript/worker.d.ts"/>
+
+var self = /** @type { ServiceWorkerGlobalScope } */ (/** @type { unknown } */ (globalThis));
 
 const version = "Dovetail v1.6.0";
 

tsconfig.json

@@ -1,5 +1,7 @@
 {
  "compilerOptions": {
+ "allowJs": true,
+ "checkJs": true,
  "module": "ESNext",
  "moduleResolution": "NodeNext",
  "isolatedModules": true,
@@ -11,5 +13,8 @@
  "skipLibCheck": true,
  "strict": true,
  "noImplicitOverride": true
- }
+ },
+ "exclude": [
+ "./dist"
+ ]
 }