Use Vite #10

Merged
hamcha merged 6 commits from vite into master 2022-05-10 14:28:00 +00:00
14 changed files with 10062 additions and 6808 deletions
Showing only changes of commit db35e9640f - Show all commits

View file

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

2
.gitignore vendored
View file

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

View file

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

View file

@ -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 Normal file
View file

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

View file

@ -144,9 +144,9 @@
</section> </section>
</main> </main>
<noscript> <noscript>
<h1>NO JS NO PARTY</h1> <h1>JavaScript is required for this tool</h1>
<h2>JavaScript support is required to run this app.</h2> <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> </noscript>
<script src="src/index.ts" async></script> <script src="src/index.ts" async type="module"></script>
</body> </body>
</html> </html>

9934
package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

View file

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

View file

@ -3,8 +3,7 @@ import sections from "./ui/sections";
import { nextAnimationFrame } from "./utils"; import { nextAnimationFrame } from "./utils";
import { searchBox } from "./scripts/search"; 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"; import { bindFunctions } from "./scripts/index";
// Enable single page mode for developing scripts // Enable single page mode for developing scripts
@ -74,7 +73,9 @@ async function load() {
}); });
} }
if ("serviceWorker" in navigator) { 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 navigator.serviceWorker
.register(x) .register(x)
.then((registration) => { .then((registration) => {
@ -94,4 +95,6 @@ document.body.appendChild(searchBox());
// Add revision info // Add revision info
document document
.getElementById("tgh-version") .getElementById("tgh-version")
.appendChild(document.createTextNode(process.env.REVISION || "unknown")); .appendChild(
document.createTextNode(import.meta.env.VITE_APP_REVISION || "unknown")
);

View file

@ -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 { getPageHTML } from "../wiki";
import { import {
processHTML, processHTML,
@ -10,8 +9,7 @@ import {
import cache from "../cache"; import cache from "../cache";
import { nextAnimationFrame, delay } from "../utils"; 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) { function initWaiting(elem: HTMLElement) {
// Add spinner // Add spinner
@ -187,9 +185,8 @@ export default class TabManager {
* @param name Section name * @param name Section name
*/ */
showSection(name: string): void { showSection(name: string): void {
const active = this.sectionListContainer.querySelector<HTMLElement>( const active =
".active" this.sectionListContainer.querySelector<HTMLElement>(".active");
);
if (active) { if (active) {
// De-activate current section // De-activate current section
active.classList.remove("active"); active.classList.remove("active");
@ -298,9 +295,8 @@ export default class TabManager {
.forEach((it) => it.classList.remove("active")); .forEach((it) => it.classList.remove("active"));
// If section is not shown, show it! // If section is not shown, show it!
const isSectionActive = this.sections[section].element.classList.contains( const isSectionActive =
"active" this.sections[section].element.classList.contains("active");
);
if (!isSectionActive) { if (!isSectionActive) {
this.showSection(section); this.showSection(section);
} }

View file

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

View file

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

19
vite.config.ts Normal file
View file

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

6637
yarn.lock

File diff suppressed because it is too large Load diff