Use Vite

pull/10/head
Hamcha 3 months ago
parent c9293c59e1
commit db35e9640f
Signed by: Hamcha
GPG Key ID: 1669C533B8CF6D89
  1. 12
      .drone.yml
  2. 4
      .gitignore
  3. 4
      README.md
  4. 24
      build.js
  5. 10
      env.d.ts
  6. 6
      index.html
  7. 9934
      package-lock.json
  8. 33
      package.json
  9. 11
      src/index.ts
  10. 16
      src/ui/TabManager.ts
  11. 156
      src/ui/sections.ts
  12. 4
      tsconfig.json
  13. 19
      vite.config.ts
  14. 6637
      yarn.lock

@ -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

4
.gitignore vendored

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

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

@ -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();
})();

10
env.d.ts vendored

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

@ -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>

9934
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -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",

@ -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")
);

@ -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);
}

@ -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;

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

@ -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),
},
},
});

File diff suppressed because it is too large Load Diff