Switched from vue-cli-service to vite

Should be thoroughly tested still Also involved removing operator overloads, which weren't good anyways
2024-11-22 00:21:31 +00:00 · 2022-06-25 22:34:18 -05:00 · 2022-06-25 22:34:18 -05:00 · 7fe57798bb
commit 7fe57798bb
parent cd3841e7e0
36 changed files with 990 additions and 16153 deletions
--- a/babel.config.js
+++ b/babel.config.js
@ -1,12 +0,0 @@
-module.exports = {
-    presets: ["@vue/cli-plugin-babel/preset", "@babel/preset-typescript"],
-    plugins: [
-        [
-            "module:@jetblack/operator-overloading",
-            {
-                enabled: true
-            }
-        ],
-        "@vue/babel-plugin-jsx"
-    ]
-};
--- a/public/index.html
+++ b/public/index.html
@ -16,14 +16,14 @@
 		<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
 		<link rel="manifest" href="/site.webmanifest">

-		<title><%= htmlWebpackPlugin.options.title %></title>
+		<title>Profectus</title>

 	</head>
 	<body>
 		<noscript>
-			<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+			<strong>We're sorry but Profectus doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 		</noscript>
 		<div id="app"></div>
-		<!-- built files will be auto injected -->
+		<script type="module" src="./src/main.ts"></script>
 	</body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -3,21 +3,24 @@
  "version": "0.4.2",
  "private": true,
  "scripts": {
-    "start": "vue-cli-service serve",
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
+    "start": "vite",
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview",
    "test": "jest"
  },
  "dependencies": {
    "@pixi/particle-emitter": "^5.0.4",
+    "@vitejs/plugin-vue": "^2.3.3",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
    "core-js": "^3.6.5",
    "is-plain-object": "^5.0.0",
-    "jest-environment-jsdom": "^28.1.1",
    "lodash.clonedeep": "^4.5.0",
    "lz-string": "^1.4.4",
    "nanoevents": "^6.0.2",
    "pixi.js": "^6.3.0",
+    "vite": "^2.9.12",
+    "vite-tsconfig-paths": "^3.5.0",
    "vue": "^3.2.26",
    "vue-next-select": "^2.10.2",
    "vue-panzoom": "^1.1.6",
@ -27,49 +30,26 @@
    "vuedraggable": "^4.1.0"
  },
  "devDependencies": {
-    "@babel/core": "^7.18.5",
-    "@babel/preset-env": "^7.18.2",
-    "@babel/preset-typescript": "^7.17.12",
    "@ivanv/vue-collapse-transition": "^1.0.2",
-    "@jetblack/operator-overloading": "^0.2.0",
    "@rushstack/eslint-patch": "^1.1.0",
    "@types/jest": "^28.1.3",
    "@types/lodash.clonedeep": "^4.5.6",
    "@types/lz-string": "^1.3.34",
-    "@vue/babel-plugin-jsx": "^1.1.1",
-    "@vue/cli-plugin-babel": "^5.0.3",
-    "@vue/cli-plugin-eslint": "^5.0.3",
-    "@vue/cli-plugin-typescript": "^5.0.3",
-    "@vue/cli-service": "^5.0.3",
-    "@vue/compiler-sfc": "^3.2.26",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^10.0.0",
-    "babel-eslint": "^10.1.0",
    "babel-jest": "^28.1.1",
    "eslint": "^8.6.0",
    "jest": "^28.1.1",
-    "lint-staged": "^12.3.4",
+    "jest-environment-jsdom": "^28.1.1",
    "prettier": "^2.5.1",
-    "raw-loader": "^4.0.2",
-    "sass": "^1.48.0",
-    "sass-loader": "^10.2.0",
-    "tsconfig-paths-webpack-plugin": "^3.5.1",
-    "typescript": "~4.5.5"
+    "typescript": "~4.5.5",
+    "vue-tsc": "^0.38.1"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
-  "gitHooks": {
-    "pre-commit": "lint-staged"
-  },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx,vue}": [
-      "vue-cli-service lint",
-      "git add"
-    ]
-  },
  "engines": {
    "node": "16.x"
  }
--- a/src/App.vue
+++ b/src/App.vue
@ -23,9 +23,10 @@ import projInfo from "./data/projInfo.json";
 import themes from "./data/themes";
 import settings, { gameComponents } from "./game/settings";
 import "./main.css";
+import type { CSSProperties } from "vue";

 const useHeader = projInfo.useHeader;
-const theme = computed(() => themes[settings.theme].variables);
+const theme = computed(() => themes[settings.theme].variables as CSSProperties);
 const showTPS = toRef(settings, "showTPS");

 const gameComponent = computed(() => {
--- a/src/components/SavesManager.vue
+++ b/src/components/SavesManager.vue
@ -124,13 +124,15 @@ watch(saveToImport, importedSave => {
    }
 });

-let bankContext = require.context("raw-loader!../../saves", true, /\.txt$/);
+let bankContext = import.meta.globEager("./../../saves/*.txt", { as: "raw" });
 let bank = ref(
-    bankContext.keys().reduce((acc: Array<{ label: string; value: string }>, curr) => {
-        // .slice(2, -4) strips the leading ./ and the trailing .txt
+    Object.keys(bankContext).reduce((acc: Array<{ label: string; value: string }>, curr) => {
        acc.push({
-            label: curr.slice(2, -4),
-            value: bankContext(curr).default
+            // .slice(2, -4) strips the leading ./ and the trailing .txt
+            label: curr.split("/").slice(-1)[0].slice(0, -4),
+            // Have to perform this unholy cast because globEager's typing doesn't appear to know
+            // adding { as: "raw" } will make the object contain strings rather than modules
+            value: bankContext[curr] as unknown as string
        });
        return acc;
    }, [])
--- a/src/components/fields/FeedbackButton.vue
+++ b/src/components/fields/FeedbackButton.vue
@ -15,7 +15,7 @@ const emit = defineEmits<{
 }>();

 const activated = ref(false);
-const activatedTimeout = ref<number | null>(null);
+const activatedTimeout = ref<NodeJS.Timer | null>(null);

 function click() {
    emit("click");
--- a/src/data/themes.ts
+++ b/src/data/themes.ts
@ -29,6 +29,10 @@ export interface Theme {
 declare module "@vue/runtime-dom" {
    // eslint-disable-next-line @typescript-eslint/no-empty-interface
    interface CSSProperties extends Partial<ThemeVars> {}
+
+    interface HTMLAttributes {
+        style?: StyleValue;
+    }
 }

 const defaultTheme: Theme = {
--- a/src/features/achievements/achievement.tsx
+++ b/src/features/achievements/achievement.tsx
@ -68,7 +68,7 @@ export type GenericAchievement = Replace<
 >;

 export function createAchievement<T extends AchievementOptions>(
-    optionsFunc?: OptionsFunc<T, BaseAchievement>
+    optionsFunc?: OptionsFunc<T, BaseAchievement, GenericAchievement>
 ): Achievement<T> {
    const earned = persistent<boolean>(false);
    return createLazyProxy(() => {
--- a/src/features/bars/bar.ts
+++ b/src/features/bars/bar.ts
@ -73,7 +73,9 @@ export type GenericBar = Replace<
    }
 >;

-export function createBar<T extends BarOptions>(optionsFunc: OptionsFunc<T, BaseBar>): Bar<T> {
+export function createBar<T extends BarOptions>(
+    optionsFunc: OptionsFunc<T, BaseBar, GenericBar>
+): Bar<T> {
    return createLazyProxy(() => {
        const bar = optionsFunc();
        bar.id = getUniqueID("bar-");
--- a/src/features/boards/board.ts
+++ b/src/features/boards/board.ts
@ -198,7 +198,7 @@ export type GenericBoard = Replace<
 >;

 export function createBoard<T extends BoardOptions>(
-    optionsFunc: OptionsFunc<T, BaseBoard>
+    optionsFunc: OptionsFunc<T, BaseBoard, GenericBoard>
 ): Board<T> {
    return createLazyProxy(
        persistent => {
--- a/src/features/buyable.tsx
+++ b/src/features/buyable.tsx
@ -88,7 +88,7 @@ export type GenericBuyable = Replace<
 >;

 export function createBuyable<T extends BuyableOptions>(
-    optionsFunc: OptionsFunc<T, BaseBuyable>
+    optionsFunc: OptionsFunc<T, BaseBuyable, GenericBuyable>
 ): Buyable<T> {
    const amount = persistent<DecimalSource>(0);
    return createLazyProxy(() => {
--- a/src/features/challenges/challenge.tsx
+++ b/src/features/challenges/challenge.tsx
@ -97,7 +97,7 @@ export type GenericChallenge = Replace<
 >;

 export function createChallenge<T extends ChallengeOptions>(
-    optionsFunc: OptionsFunc<T, BaseChallenge>
+    optionsFunc: OptionsFunc<T, BaseChallenge, GenericChallenge>
 ): Challenge<T> {
    const completions = persistent(0);
    const active = persistent(false);
--- a/src/features/clickables/clickable.ts
+++ b/src/features/clickables/clickable.ts
@ -70,7 +70,7 @@ export type GenericClickable = Replace<
 >;

 export function createClickable<T extends ClickableOptions>(
-    optionsFunc?: OptionsFunc<T, BaseClickable>
+    optionsFunc?: OptionsFunc<T, BaseClickable, GenericClickable>
 ): Clickable<T> {
    return createLazyProxy(() => {
        const clickable = optionsFunc?.() ?? ({} as ReturnType<NonNullable<typeof optionsFunc>>);
--- a/src/features/conversion.ts
+++ b/src/features/conversion.ts
@ -135,7 +135,7 @@ export type GenericConversion = Replace<
 * @see {@link createIndependentConversion}.
 */
 export function createConversion<T extends ConversionOptions>(
-    optionsFunc: OptionsFunc<T, BaseConversion>
+    optionsFunc: OptionsFunc<T, BaseConversion, GenericConversion>
 ): Conversion<T> {
    return createLazyProxy(() => {
        const conversion = optionsFunc();
@ -370,7 +370,7 @@ export function createPolynomialScaling(
 * @param optionsFunc Conversion options.
 */
 export function createCumulativeConversion<S extends ConversionOptions>(
-    optionsFunc: OptionsFunc<S, BaseConversion>
+    optionsFunc: OptionsFunc<S, BaseConversion, GenericConversion>
 ): Conversion<S> {
    return createConversion(optionsFunc);
 }
@ -381,7 +381,7 @@ export function createCumulativeConversion<S extends ConversionOptions>(
 * @param optionsFunc Converison options.
 */
 export function createIndependentConversion<S extends ConversionOptions>(
-    optionsFunc: OptionsFunc<S, BaseConversion>
+    optionsFunc: OptionsFunc<S, BaseConversion, GenericConversion>
 ): Conversion<S> {
    return createConversion(() => {
        const conversion: S = optionsFunc();
--- a/src/features/feature.ts
+++ b/src/features/feature.ts
@ -41,7 +41,7 @@ export type Replace<T, S> = S & Omit<T, keyof S>;
 * with "this" bound to what the type will eventually be processed into.
 * Intended for making lazily evaluated objects.
 */
-export type OptionsFunc<T, R = Record<string, unknown>> = () => T & Partial<R>;
+export type OptionsFunc<T, R = Record<string, unknown>, S = R> = () => T & Partial<R> & ThisType<S>;

 let id = 0;
 /**
--- a/src/features/grids/grid.ts
+++ b/src/features/grids/grid.ts
@ -242,7 +242,9 @@ export type GenericGrid = Replace<
    }
 >;

-export function createGrid<T extends GridOptions>(optionsFunc: OptionsFunc<T, BaseGrid>): Grid<T> {
+export function createGrid<T extends GridOptions>(
+    optionsFunc: OptionsFunc<T, BaseGrid, GenericGrid>
+): Grid<T> {
    const cellState = persistent<Record<string | number, State>>({});
    return createLazyProxy(() => {
        const grid = optionsFunc();
--- a/src/features/hotkey.tsx
+++ b/src/features/hotkey.tsx
@ -43,7 +43,7 @@ export type GenericHotkey = Replace<
 >;

 export function createHotkey<T extends HotkeyOptions>(
-    optionsFunc: OptionsFunc<T, BaseHotkey>
+    optionsFunc: OptionsFunc<T, BaseHotkey, GenericHotkey>
 ): Hotkey<T> {
    return createLazyProxy(() => {
        const hotkey = optionsFunc();
--- a/src/features/infoboxes/infobox.ts
+++ b/src/features/infoboxes/infobox.ts
@ -64,7 +64,7 @@ export type GenericInfobox = Replace<
 >;

 export function createInfobox<T extends InfoboxOptions>(
-    optionsFunc: OptionsFunc<T, BaseInfobox>
+    optionsFunc: OptionsFunc<T, BaseInfobox, GenericInfobox>
 ): Infobox<T> {
    const collapsed = persistent<boolean>(false);
    return createLazyProxy(() => {
--- a/src/features/links/links.ts
+++ b/src/features/links/links.ts
@ -44,7 +44,7 @@ export type GenericLinks = Replace<
 >;

 export function createLinks<T extends LinksOptions>(
-    optionsFunc: OptionsFunc<T, BaseLinks>
+    optionsFunc: OptionsFunc<T, BaseLinks, GenericLinks>
 ): Links<T> {
    return createLazyProxy(() => {
        const links = optionsFunc();
--- a/src/features/milestones/milestone.tsx
+++ b/src/features/milestones/milestone.tsx
@ -84,7 +84,7 @@ export type GenericMilestone = Replace<
 >;

 export function createMilestone<T extends MilestoneOptions>(
-    optionsFunc?: OptionsFunc<T, BaseMilestone>
+    optionsFunc?: OptionsFunc<T, BaseMilestone, GenericMilestone>
 ): Milestone<T> {
    const earned = persistent<boolean>(false);
    return createLazyProxy(() => {
--- a/src/features/particles/particles.tsx
+++ b/src/features/particles/particles.tsx
@ -42,7 +42,7 @@ export type Particles<T extends ParticlesOptions> = Replace<
 export type GenericParticles = Particles<ParticlesOptions>;

 export function createParticles<T extends ParticlesOptions>(
-    optionsFunc?: OptionsFunc<T, BaseParticles>
+    optionsFunc?: OptionsFunc<T, BaseParticles, GenericParticles>
 ): Particles<T> {
    return createLazyProxy(() => {
        const particles = optionsFunc?.() ?? ({} as ReturnType<NonNullable<typeof optionsFunc>>);
--- a/src/features/reset.ts
+++ b/src/features/reset.ts
@ -31,7 +31,7 @@ export type Reset<T extends ResetOptions> = Replace<
 export type GenericReset = Reset<ResetOptions>;

 export function createReset<T extends ResetOptions>(
-    optionsFunc: OptionsFunc<T, BaseReset>
+    optionsFunc: OptionsFunc<T, BaseReset, GenericReset>
 ): Reset<T> {
    return createLazyProxy(() => {
        const reset = optionsFunc();
--- a/src/features/tabs/tab.ts
+++ b/src/features/tabs/tab.ts
@ -37,7 +37,9 @@ export type Tab<T extends TabOptions> = Replace<

 export type GenericTab = Tab<TabOptions>;

-export function createTab<T extends TabOptions>(optionsFunc: OptionsFunc<T, BaseTab>): Tab<T> {
+export function createTab<T extends TabOptions>(
+    optionsFunc: OptionsFunc<T, BaseTab, GenericTab>
+): Tab<T> {
    return createLazyProxy(() => {
        const tab = optionsFunc();
        tab.id = getUniqueID("tab-");
--- a/src/features/tabs/tabFamily.ts
+++ b/src/features/tabs/tabFamily.ts
@ -92,7 +92,7 @@ export type GenericTabFamily = Replace<

 export function createTabFamily<T extends TabFamilyOptions>(
    tabs: Record<string, () => TabButtonOptions>,
-    optionsFunc?: OptionsFunc<T, BaseTabFamily>
+    optionsFunc?: OptionsFunc<T, BaseTabFamily, GenericTabFamily>
 ): TabFamily<T> {
    if (Object.keys(tabs).length === 0) {
        console.warn("Cannot create tab family with 0 tabs");
--- a/src/features/trees/tree.ts
+++ b/src/features/trees/tree.ts
@ -73,7 +73,7 @@ export type GenericTreeNode = Replace<
 >;

 export function createTreeNode<T extends TreeNodeOptions>(
-    optionsFunc?: OptionsFunc<T, BaseTreeNode>
+    optionsFunc?: OptionsFunc<T, BaseTreeNode, GenericTreeNode>
 ): TreeNode<T> {
    return createLazyProxy(() => {
        const treeNode = optionsFunc?.() ?? ({} as ReturnType<NonNullable<typeof optionsFunc>>);
@ -186,7 +186,9 @@ export type GenericTree = Replace<
    }
 >;

-export function createTree<T extends TreeOptions>(optionsFunc: OptionsFunc<T, BaseTree>): Tree<T> {
+export function createTree<T extends TreeOptions>(
+    optionsFunc: OptionsFunc<T, BaseTree, GenericTree>
+): Tree<T> {
    return createLazyProxy(() => {
        const tree = optionsFunc();
        tree.id = getUniqueID("tree-");
--- a/src/features/upgrades/upgrade.ts
+++ b/src/features/upgrades/upgrade.ts
@ -79,7 +79,7 @@ export type GenericUpgrade = Replace<
 >;

 export function createUpgrade<T extends UpgradeOptions>(
-    optionsFunc: OptionsFunc<T, BaseUpgrade>
+    optionsFunc: OptionsFunc<T, BaseUpgrade, GenericUpgrade>
 ): Upgrade<T> {
    const bought = persistent<boolean>(false);
    return createLazyProxy(() => {
--- a/src/game/events.ts
+++ b/src/game/events.ts
@ -18,7 +18,7 @@ export interface GlobalEvents {

 export const globalBus = createNanoEvents<GlobalEvents>();

-let intervalID: number | null = null;
+let intervalID: NodeJS.Timer | null = null;

 // Not imported immediately due to dependency cycles
 // This gets set during startGameLoop(), and will only be used in the update function
--- a/src/game/layers.tsx
+++ b/src/game/layers.tsx
@ -3,6 +3,7 @@ import {
    CoercableComponent,
    jsx,
    JSXFunction,
+    OptionsFunc,
    Replace,
    setDefault,
    StyleValue
@ -105,7 +106,7 @@ export const persistentRefs: Record<string, Set<Persistent>> = {};
 export const addingLayers: string[] = [];
 export function createLayer<T extends LayerOptions>(
    id: string,
-    optionsFunc: (this: BaseLayer) => T & Partial<BaseLayer>
+    optionsFunc: OptionsFunc<T, BaseLayer>
 ): Layer<T> {
    return createLazyProxy(() => {
        const layer = {} as T & Partial<BaseLayer>;
--- a/src/lib/break_eternity.ts
+++ b/src/lib/break_eternity.ts
@ -1190,50 +1190,6 @@ export default class Decimal {
        return cost.div(currentRpS).add(cost.div(deltaRpS));
    }

-    public [Symbol.for("+")](other: DecimalSource): DecimalSource {
-        return this.add(other);
-    }
-
-    public [Symbol.for("-")](other: DecimalSource): DecimalSource {
-        return this.sub(other);
-    }
-
-    public [Symbol.for("*")](other: DecimalSource): DecimalSource {
-        return this.times(other);
-    }
-
-    public [Symbol.for("/")](other: DecimalSource): DecimalSource {
-        return this.div(other);
-    }
-
-    public [Symbol.for("minus")](): DecimalSource {
-        return this.neg();
-    }
-
-    public [Symbol.for("==")](other: DecimalSource): boolean {
-        return this.eq(other);
-    }
-
-    public [Symbol.for(">")](other: DecimalSource): boolean {
-        return this.gt(other);
-    }
-
-    public [Symbol.for("<")](other: DecimalSource): boolean {
-        return this.lt(other);
-    }
-
-    public [Symbol.for(">=")](other: DecimalSource): boolean {
-        return this.gte(other);
-    }
-
-    public [Symbol.for("<=")](other: DecimalSource): boolean {
-        return this.lte(other);
-    }
-
-    public [Symbol.for("!=")](other: DecimalSource): boolean {
-        return this.neq(other);
-    }
-
    public normalize(): this {
        /*
    PSEUDOCODE:
--- a/src/lib/collapseTransition.d.ts
+++ b/src/lib/collapseTransition.d.ts
@ -0,0 +1 @@
+declare module '@ivanv/vue-collapse-transition/src/CollapseTransition.vue';
--- a/src/main.ts
+++ b/src/main.ts
@ -44,7 +44,7 @@ requestAnimationFrame(async () => {
        "padding: 4px;"
    );
    await load();
-    const { globalBus, startGameLoop } = await require("./game/events");
+    const { globalBus, startGameLoop } = await import("./game/events");

    // Create Vue
    const vue = (window.vue = createApp(App));
--- a/src/util/vue.tsx
+++ b/src/util/vue.tsx
@ -119,7 +119,7 @@ export function setupHoldToClick(
    stop: VoidFunction;
    handleHolding: VoidFunction;
 } {
-    const interval = ref<null | number>(null);
+    const interval = ref<NodeJS.Timer | null>(null);
    const event = ref<MouseEvent | TouchEvent | undefined>(undefined);

    function start(e: MouseEvent | TouchEvent) {
--- a/tsconfig.json
+++ b/tsconfig.json
@ -17,8 +17,8 @@
    "sourceMap": true,
    "baseUrl": "src",
    "types": [
-      "webpack-env",
-      "jest"
+      "jest",
+      "vite/client"
    ],
    "lib": [
      "esnext",
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,15 @@
+import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [
+        vue(),
+        vueJsx({
+            // options are passed on to @vue/babel-plugin-jsx
+        }),
+        tsconfigPaths()
+    ]
+});
--- a/vue.config.js
+++ b/vue.config.js
@ -1,17 +0,0 @@
-module.exports = {
-    publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
-    runtimeCompiler: true,
-    chainWebpack(config) {
-        config.resolve.alias.delete("@");
-        config.resolve
-            .plugin("tsconfig-paths")
-            // eslint-disable-next-line @typescript-eslint/no-var-requires
-            .use(require("tsconfig-paths-webpack-plugin"));
-        // Remove this if/when all "core" code has no non-ignored more type errors
-        // https://github.com/vuejs/vue-cli/issues/3157#issuecomment-657090338
-        config.plugins.delete("fork-ts-checker");
-    },
-    devServer: {
-        allowedHosts: "all"
-    }
-};
				`@ -0,0 +1 @@`
				`declare module '@ivanv/vue-collapse-transition/src/CollapseTransition.vue';`