Use Vite

.drone.yml

@@ -33,8 +33,8 @@ steps:
     commands:
       - yarn build
     environment:
-      SUBPATH: /tghandbook/${DRONE_COMMIT_BRANCH/\//_}-${DRONE_COMMIT_SHA:0:8}
-      REVISION: ${DRONE_COMMIT_SHA}
+      VITE_SUBPATH: /tghandbook/${DRONE_COMMIT_BRANCH/\//_}-${DRONE_COMMIT_SHA:0:8}
+      VITE_APP_REVISION: ${DRONE_COMMIT_SHA}
     when:
       event:
         - push
@@ -46,9 +46,9 @@ steps:
     commands:
       - yarn build
     environment:
-      SUBPATH: /tghandbook/pr-${DRONE_PULL_REQUEST}
+      VITE_SUBPATH: /tghandbook/pr-${DRONE_PULL_REQUEST}
       OUTDIR: ./dist-pr
-      REVISION: ${DRONE_COMMIT_SHA}
+      VITE_APP_REVISION: ${DRONE_COMMIT_SHA}
     when:
       event:
         - pull_request
@@ -60,9 +60,9 @@ steps:
     commands:
       - yarn build
     environment:
-      SUBPATH: /tghandbook/${DRONE_COMMIT_BRANCH/\//_}
+      VITE_SUBPATH: /tghandbook/${DRONE_COMMIT_BRANCH/\//_}
       OUTDIR: ./dist-branch
-      REVISION: ${DRONE_COMMIT_SHA}
+      VITE_APP_REVISION: ${DRONE_COMMIT_SHA}
     when:
       event:
         - push

.gitignore

@@ -1,4 +1,6 @@
 node_modules
 dist
 .cache
+.parcel-cache
 yarn-error.log
+*.ts.js

README.md

@@ -4,8 +4,8 @@
 
 ## Building
 
-`yarn build`
+`npm run build`
 
 ## Development
 
-`yarn dev`
+`npm start`

build.js

@@ -1,24 +0,0 @@
-/* eslint-disable */
-const Bundler = require("parcel-bundler");
-const Path = require("path");
-
-const entryFiles = Path.join(__dirname, "./index.html");
-
-// Bundler options
-const options = {
-  outDir: process.env.OUTDIR || "./dist",
-  outFile: "index.html",
-  publicUrl: process.env.SUBPATH || "/",
-  watch: false,
-  contentHash: false,
-  scopeHoist: false,
-  target: "browser",
-  logLevel: 3, // 5 = save everything to a file, 4 = like 3, but with timestamps and additionally log http requests to dev server, 3 = log info, warnings & errors, 2 = log warnings & errors, 1 = log errors, 0 = log nothing
-  sourceMaps: true, // Enable or disable sourcemaps, defaults to enabled (minified builds currently always create sourcemaps)
-  autoInstall: true, // Enable or disable auto install of missing dependencies found during bundling
-};
-
-(async () => {
-  const bundler = new Bundler(entryFiles, options);
-  await bundler.bundle();
-})();

env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_SUBDIR: string;
+  readonly VITE_APP_REVISION: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

index.html

@@ -144,9 +144,9 @@
       </section>
     </main>
     <noscript>
-      <h1>NO JS NO PARTY</h1>
-      <h2>JavaScript support is required to run this app.</h2>
+      <h1>JavaScript is required for this tool</h1>
+      <h2>This tools runs completely in your browser, therefore it needs JavaScript to download all the pages, parse them and add all the spicy extras.</h2>
     </noscript>
-    <script src="src/index.ts" async></script>
+    <script src="src/index.ts" async type="module"></script>
   </body>
 </html>

package.json

@@ -3,27 +3,28 @@
   "version": "1.0.0",
   "main": "index.js",
   "license": "ISC",
+  "type": "module",
   "scripts": {
-    "dev": "parcel index.html",
+    "start": "vite",
     "lint": "eslint src",
-    "build": "node ./build.js"
+    "build": "vite build"
   },
   "dependencies": {
-    "@types/node": "^14.0.13",
+    "@types/node": "^17.0.31",
     "@types/service_worker_api": "^0.0.9",
-    "@typescript-eslint/eslint-plugin": "^3.3.0",
-    "@typescript-eslint/parser": "^3.3.0",
-    "eslint": "7.2.0",
-    "eslint-config-airbnb-base": "^14.2.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-import": "2.21.2",
-    "eslint-plugin-prettier": "^3.1.4",
-    "idb-keyval": "^3.2.0",
-    "parcel-bundler": "^1.12.4",
-    "parcel-plugin-sw-cache": "^0.3.1",
-    "prettier": "^2.0.5",
-    "sass": "^1.26.8",
-    "typescript": "^3.9.5"
+    "@typescript-eslint/eslint-plugin": "^5.23.0",
+    "@typescript-eslint/parser": "^5.23.0",
+    "eslint": "8.15.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "idb-keyval": "^6.1.0",
+    "prettier": "^2.6.2",
+    "sass": "^1.51.0",
+    "typescript": "^4.6.4",
+    "vite": "^2.9.8",
+    "vite-plugin-pwa": "^0.12.0"
   },
   "browserslist": [
     "last 2 Chrome versions",

src/index.ts

@@ -3,8 +3,7 @@ import sections from "./ui/sections";
 import { nextAnimationFrame } from "./utils";
 import { searchBox } from "./scripts/search";
 
-// @ts-expect-error: Parcel image import
-import unknown from "~/assets/images/tab-icons/unknown.svg";
+import unknown from "@/assets/images/tab-icons/unknown.svg";
 import { bindFunctions } from "./scripts/index";
 
 // Enable single page mode for developing scripts
@@ -74,7 +73,9 @@ async function load() {
   });
 }
 if ("serviceWorker" in navigator) {
-  const x = process.env.SUBPATH ? `${process.env.SUBPATH}/sw.js` : "sw.js";
+  const x = import.meta.env.VITE_SUBDIR
+    ? `${import.meta.env.VITE_SUBDIR}/sw.js`
+    : "sw.js";
   navigator.serviceWorker
     .register(x)
     .then((registration) => {
@@ -94,4 +95,6 @@ document.body.appendChild(searchBox());
 // Add revision info
 document
   .getElementById("tgh-version")
-  .appendChild(document.createTextNode(process.env.REVISION || "unknown"));
+  .appendChild(
+    document.createTextNode(import.meta.env.VITE_APP_REVISION || "unknown")
+  );

src/ui/TabManager.ts

@@ -1,5 +1,4 @@
-// @ts-expect-error: Asset imports are handled by parcel
-import speen from "~/assets/images/speen.svg";
+import speen from "@/assets/images/speen.svg";
 import { getPageHTML } from "../wiki";
 import {
   processHTML,
@@ -10,8 +9,7 @@ import {
 import cache from "../cache";
 import { nextAnimationFrame, delay } from "../utils";
 
-// @ts-expect-error: Parcel image import
-import unknown from "~/assets/images/tab-icons/unknown.svg";
+import unknown from "@/assets/images/tab-icons/unknown.svg";
 
 function initWaiting(elem: HTMLElement) {
   // Add spinner
@@ -187,9 +185,8 @@ export default class TabManager {
    * @param name Section name
    */
   showSection(name: string): void {
-    const active = this.sectionListContainer.querySelector<HTMLElement>(
-      ".active"
-    );
+    const active =
+      this.sectionListContainer.querySelector<HTMLElement>(".active");
     if (active) {
       // De-activate current section
       active.classList.remove("active");
@@ -298,9 +295,8 @@ export default class TabManager {
       .forEach((it) => it.classList.remove("active"));
 
     // If section is not shown, show it!
-    const isSectionActive = this.sections[section].element.classList.contains(
-      "active"
-    );
+    const isSectionActive =
+      this.sections[section].element.classList.contains("active");
     if (!isSectionActive) {
       this.showSection(section);
     }

src/ui/sections.ts

@@ -1,107 +1,55 @@
-// @ts-expect-error: Parcel image import
-import chemistry from "~/assets/images/tab-icons/chemistry.svg";
-// @ts-expect-error: Parcel image import
-import medicine from "~/assets/images/tab-icons/medicine.svg";
-// @ts-expect-error: Parcel image import
-import plumbing from "~/assets/images/tab-icons/plumbing.svg";
-// @ts-expect-error: Parcel image import
-import grenade from "~/assets/images/tab-icons/grenade.svg";
-// @ts-expect-error: Parcel image import
-import genetics from "~/assets/images/tab-icons/genetics.svg";
-// @ts-expect-error: Parcel image import
-import virus from "~/assets/images/tab-icons/virus.svg";
-// @ts-expect-error: Parcel image import
-import surgery from "~/assets/images/tab-icons/surgery.svg";
-// @ts-expect-error: Parcel image import
-import trauma from "~/assets/images/tab-icons/trauma.svg";
-// @ts-expect-error: Parcel image import
-import wound from "~/assets/images/tab-icons/wound.svg";
-// @ts-expect-error: Parcel image import
-import ghetto from "~/assets/images/tab-icons/ghetto.svg";
-// @ts-expect-error: Parcel image import
-import construction from "~/assets/images/tab-icons/construction.svg";
-// @ts-expect-error: Parcel image import
-import machines from "~/assets/images/tab-icons/machines.svg";
-// @ts-expect-error: Parcel image import
-import power from "~/assets/images/tab-icons/power.svg";
-// @ts-expect-error: Parcel image import
-import solar from "~/assets/images/tab-icons/solar.svg";
-// @ts-expect-error: Parcel image import
-import supermatter from "~/assets/images/tab-icons/supermatter.svg";
-// @ts-expect-error: Parcel image import
-import shield from "~/assets/images/tab-icons/shield.svg";
-// @ts-expect-error: Parcel image import
-import turbine from "~/assets/images/tab-icons/turbine.svg";
-// @ts-expect-error: Parcel image import
-import atmos from "~/assets/images/tab-icons/atmos.svg";
-// @ts-expect-error: Parcel image import
-import tcomm from "~/assets/images/tab-icons/tcomm.svg";
-// @ts-expect-error: Parcel image import
-import rnd from "~/assets/images/tab-icons/rnd.svg";
-// @ts-expect-error: Parcel image import
-import toxins from "~/assets/images/tab-icons/toxins.svg";
-// @ts-expect-error: Parcel image import
-import xeno from "~/assets/images/tab-icons/xeno.svg";
-// @ts-expect-error: Parcel image import
-import nanites from "~/assets/images/tab-icons/nanites.svg";
-// @ts-expect-error: Parcel image import
-import rules from "~/assets/images/tab-icons/rules.svg";
-// @ts-expect-error: Parcel image import
-import aimod from "~/assets/images/tab-icons/aimod.svg";
-// @ts-expect-error: Parcel image import
-import tips from "~/assets/images/tab-icons/tips.svg";
-// @ts-expect-error: Parcel image import
-import critter from "~/assets/images/tab-icons/critter.svg";
-// @ts-expect-error: Parcel image import
-import races from "~/assets/images/tab-icons/races.svg";
-// @ts-expect-error: Parcel image import
-import food from "~/assets/images/tab-icons/food.svg";
-// @ts-expect-error: Parcel image import
-import hydro from "~/assets/images/tab-icons/hydro.svg";
-// @ts-expect-error: Parcel image import
-import song from "~/assets/images/tab-icons/song.svg";
-// @ts-expect-error: Parcel image import
-import crate from "~/assets/images/tab-icons/crate.svg";
-// @ts-expect-error: Parcel image import
-import space from "~/assets/images/tab-icons/space.svg";
-// @ts-expect-error: Parcel image import
-import aux from "~/assets/images/tab-icons/auxbase.svg";
-// @ts-expect-error: Parcel image import
-import robo from "~/assets/images/tab-icons/robo.svg";
-// @ts-expect-error: Parcel image import
-import security from "~/assets/images/tab-icons/security.svg";
-// @ts-expect-error: Parcel image import
-import law from "~/assets/images/tab-icons/law.svg";
-// @ts-expect-error: Parcel image import
-import sop from "~/assets/images/tab-icons/sop.svg";
-// @ts-expect-error: Parcel image import
-import trial from "~/assets/images/tab-icons/trial.svg";
-// @ts-expect-error: Parcel image import
-import traitor from "~/assets/images/tab-icons/traitor.svg";
-// @ts-expect-error: Parcel image import
-import hacking from "~/assets/images/tab-icons/hacking.svg";
-// @ts-expect-error: Parcel image import
-import weapons from "~/assets/images/tab-icons/weapons.svg";
-// @ts-expect-error: Parcel image import
-import uplink from "~/assets/images/tab-icons/uplink.svg";
-// @ts-expect-error: Parcel image import
-import rev from "~/assets/images/tab-icons/rev.svg";
-// @ts-expect-error: Parcel image import
-import cult from "~/assets/images/tab-icons/cult.svg";
-// @ts-expect-error: Parcel image import
-import nuke from "~/assets/images/tab-icons/nuke.svg";
-// @ts-expect-error: Parcel image import
-import malf from "~/assets/images/tab-icons/malf.svg";
-// @ts-expect-error: Parcel image import
-import combat from "~/assets/images/tab-icons/combat.svg";
-// @ts-expect-error: Parcel image import
-import access from "~/assets/images/tab-icons/access.svg";
-// @ts-expect-error: Parcel image import
-import xmorph from "~/assets/images/tab-icons/xmorph.svg";
-// @ts-expect-error: Parcel image import
-import abduction from "~/assets/images/tab-icons/abduction.svg";
-// @ts-expect-error: Parcel image import
-import mafia from "~/assets/images/tab-icons/mafia.svg";
+import chemistry from "@/assets/images/tab-icons/chemistry.svg";
+import medicine from "@/assets/images/tab-icons/medicine.svg";
+import plumbing from "@/assets/images/tab-icons/plumbing.svg";
+import grenade from "@/assets/images/tab-icons/grenade.svg";
+import genetics from "@/assets/images/tab-icons/genetics.svg";
+import virus from "@/assets/images/tab-icons/virus.svg";
+import surgery from "@/assets/images/tab-icons/surgery.svg";
+import trauma from "@/assets/images/tab-icons/trauma.svg";
+import wound from "@/assets/images/tab-icons/wound.svg";
+import ghetto from "@/assets/images/tab-icons/ghetto.svg";
+import construction from "@/assets/images/tab-icons/construction.svg";
+import machines from "@/assets/images/tab-icons/machines.svg";
+import power from "@/assets/images/tab-icons/power.svg";
+import solar from "@/assets/images/tab-icons/solar.svg";
+import supermatter from "@/assets/images/tab-icons/supermatter.svg";
+import shield from "@/assets/images/tab-icons/shield.svg";
+import turbine from "@/assets/images/tab-icons/turbine.svg";
+import atmos from "@/assets/images/tab-icons/atmos.svg";
+import tcomm from "@/assets/images/tab-icons/tcomm.svg";
+import rnd from "@/assets/images/tab-icons/rnd.svg";
+import toxins from "@/assets/images/tab-icons/toxins.svg";
+import xeno from "@/assets/images/tab-icons/xeno.svg";
+import nanites from "@/assets/images/tab-icons/nanites.svg";
+import rules from "@/assets/images/tab-icons/rules.svg";
+import aimod from "@/assets/images/tab-icons/aimod.svg";
+import tips from "@/assets/images/tab-icons/tips.svg";
+import critter from "@/assets/images/tab-icons/critter.svg";
+import races from "@/assets/images/tab-icons/races.svg";
+import food from "@/assets/images/tab-icons/food.svg";
+import hydro from "@/assets/images/tab-icons/hydro.svg";
+import song from "@/assets/images/tab-icons/song.svg";
+import crate from "@/assets/images/tab-icons/crate.svg";
+import space from "@/assets/images/tab-icons/space.svg";
+import aux from "@/assets/images/tab-icons/auxbase.svg";
+import robo from "@/assets/images/tab-icons/robo.svg";
+import security from "@/assets/images/tab-icons/security.svg";
+import law from "@/assets/images/tab-icons/law.svg";
+import sop from "@/assets/images/tab-icons/sop.svg";
+import trial from "@/assets/images/tab-icons/trial.svg";
+import traitor from "@/assets/images/tab-icons/traitor.svg";
+import hacking from "@/assets/images/tab-icons/hacking.svg";
+import weapons from "@/assets/images/tab-icons/weapons.svg";
+import uplink from "@/assets/images/tab-icons/uplink.svg";
+import rev from "@/assets/images/tab-icons/rev.svg";
+import cult from "@/assets/images/tab-icons/cult.svg";
+import nuke from "@/assets/images/tab-icons/nuke.svg";
+import malf from "@/assets/images/tab-icons/malf.svg";
+import combat from "@/assets/images/tab-icons/combat.svg";
+import access from "@/assets/images/tab-icons/access.svg";
+import xmorph from "@/assets/images/tab-icons/xmorph.svg";
+import abduction from "@/assets/images/tab-icons/abduction.svg";
+import mafia from "@/assets/images/tab-icons/mafia.svg";
 
 export interface SectionInfo {
   name: string;

tsconfig.json

@@ -1,9 +1,11 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "es2020",
+    "module": "es2020",
     "baseUrl": ".",
     "allowSyntheticDefaultImports": true,
     "paths": {
+      "@": ["."],
       "~*": ["./src/*"]
     }
   }

vite.config.ts

@@ -0,0 +1,19 @@
+import path from "path";
+import { defineConfig } from "vite";
+import { VitePWA } from "vite-plugin-pwa";
+
+export default defineConfig({
+  plugins: [
+    VitePWA({
+      devOptions: {
+        enabled: true,
+      },
+    }),
+  ],
+  resolve: {
+    alias: {
+      "~": path.resolve(__dirname, "./src"),
+      "@": path.resolve(__dirname),
+    },
+  },
+});