Switch frontend pkg to use Nuxt ESLint config

apps/frontend/eslint.config.mjs

@@ -0,0 +1,13 @@
+import withNuxt from "./.nuxt/eslint.config.mjs";
+
+export default withNuxt().append({
+ name: "modrinth/typescript",
+ rules: {
+ // *Generally* unhelpful, still nice to check from time to time!
+ "@typescript-eslint/no-explicit-any": "off",
+ // Conflicts with Prettier
+ "vue/html-self-closing": "off",
+ // Prone to breaking
+ "no-undef": "off",
+ },
+});

apps/frontend/nuxt.config.ts

@@ -45,6 +45,22 @@ const localesCategoriesOverrides: Partial<Record<string, "fun" | "experimental">
  pes: "experimental",
 };
 
+function readBinding<V extends string | undefined>(
+ binding: string,
+ defaultValue?: V,
+): undefined extends V ? string | undefined : string {
+ const globalThis_ = globalThis as Record<string, unknown>;
+
+ let value;
+ if (binding in globalThis_) value = globalThis_[binding];
+
+ if (value == null || typeof value !== "string") {
+ return defaultValue as never;
+ }
+
+ return value;
+}
+
 export default defineNuxtConfig({
  srcDir: "src/",
  app: {
@@ -312,10 +328,8 @@ export default defineNuxtConfig({
  },
  },
  runtimeConfig: {
- // @ts-ignore
- apiBaseUrl: process.env.BASE_URL ?? globalThis.BASE_URL ?? getApiUrl(),
- // @ts-ignore
- rateLimitKey: process.env.RATE_LIMIT_IGNORE_KEY ?? globalThis.RATE_LIMIT_IGNORE_KEY,
+ apiBaseUrl: process.env.BASE_URL ?? readBinding("BASE_URL") ?? getApiUrl(),
+ rateLimitKey: process.env.RATE_LIMIT_IGNORE_KEY ?? readBinding("RATE_LIMIT_IGNORE_KEY"),
  public: {
  apiBaseUrl: getApiUrl(),
  siteUrl: getDomain(),
@@ -327,14 +341,12 @@ export default defineNuxtConfig({
  branch:
  process.env.VERCEL_GIT_COMMIT_REF ||
  process.env.CF_PAGES_BRANCH ||
- // @ts-ignore
- globalThis.CF_PAGES_BRANCH ||
+ readBinding("CF_PAGES_BRANCH") ||
  "master",
  hash:
  process.env.VERCEL_GIT_COMMIT_SHA ||
  process.env.CF_PAGES_COMMIT_SHA ||
- // @ts-ignore
- globalThis.CF_PAGES_COMMIT_SHA ||
+ readBinding("CF_PAGES_COMMIT_SHA") ||
  "unknown",
 
  turnstile: { siteKey: "0x4AAAAAAAW3guHM6Eunbgwu" },
@@ -351,7 +363,7 @@ export default defineNuxtConfig({
  },
  },
  },
- modules: ["@vintl/nuxt", "@nuxtjs/turnstile"],
+ modules: ["@nuxt/eslint", "@vintl/nuxt", "@nuxtjs/turnstile"],
  vintl: {
  defaultLocale: "en-US",
  locales: [
@@ -412,8 +424,7 @@ export default defineNuxtConfig({
 });
 
 function getApiUrl() {
- // @ts-ignore
- return process.env.BROWSER_BASE_URL ?? globalThis.BROWSER_BASE_URL ?? STAGING_API_URL;
+ return process.env.BROWSER_BASE_URL ?? readBinding("BROWSER_BASE_URL") ?? STAGING_API_URL;
 }
 
 function isProduction() {
@@ -428,11 +439,8 @@ function getDomain() {
  if (process.env.NODE_ENV === "production") {
  if (process.env.SITE_URL) {
  return process.env.SITE_URL;
- }
- // @ts-ignore
- else if (process.env.CF_PAGES_URL || globalThis.CF_PAGES_URL) {
- // @ts-ignore
- return process.env.CF_PAGES_URL ?? globalThis.CF_PAGES_URL;
+ } else if (process.env.CF_PAGES_URL || readBinding("CF_PAGES_URL")) {
+ return process.env.CF_PAGES_URL ?? readBinding("CF_PAGES_URL");
  } else if (process.env.HEROKU_APP_NAME) {
  return `https://${process.env.HEROKU_APP_NAME}.herokuapp.com`;
  } else if (process.env.VERCEL_URL) {

apps/frontend/package.json

@@ -14,13 +14,14 @@
  },
  "devDependencies": {
  "@nuxt/devtools": "^1.3.3",
+ "@nuxt/eslint": "^0.4.0",
  "@nuxtjs/turnstile": "^0.8.0",
  "@types/node": "^20.1.0",
  "@vintl/compact-number": "^2.0.5",
  "@vintl/how-ago": "^3.0.1",
  "@vintl/nuxt": "^1.9.2",
  "autoprefixer": "^10.4.19",
- "eslint": "^8.57.0",
+ "eslint": "^9.8.0",
  "glob": "^10.2.7",
  "nuxt": "^3.12.3",
  "postcss": "^8.4.39",

apps/frontend/src/components/ui/ProjectMemberHeader.vue

@@ -241,7 +241,7 @@ const nags = computed(() => [
  },
  },
  {
- condition: props.project.gallery.length === 0 || !featuredGalleryImage,
+ condition: props.project.gallery.length === 0 || !featuredGalleryImage.value,
  title: "Feature a gallery image",
  id: "feature-gallery-image",
  description: "Featured gallery images may be the first impression of many users.",

apps/frontend/src/composables/date.js

@@ -1,7 +1,7 @@
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 
-dayjs.extend(relativeTime); // eslint-disable-line import/no-named-as-default-member
+dayjs.extend(relativeTime);
 
 export const useCurrentDate = () => useState("currentDate", () => Date.now());
 

apps/frontend/src/composables/display-names.ts

@@ -40,7 +40,6 @@ export function createDisplayNames(
  of(tag: string) {
  let attempt = 0;
 
- // eslint-disable-next-line no-labels
  lookupLoop: do {
  let lookup: string;
  switch (attempt) {
@@ -51,7 +50,6 @@ export function createDisplayNames(
  lookup = safeTagFor(tag);
  break;
  default:
- // eslint-disable-next-line no-labels
  break lookupLoop;
  }
 

apps/frontend/src/composables/use-client-try.ts

@@ -1,25 +1,24 @@
-type AsyncFunction<TArgs extends any[], TResult> = (...args: TArgs) => Promise<TResult>;
-type ErrorFunction = (err: any) => void | Promise<void>;
-type VoidFunction = () => void | Promise<void>;
-
-type useClientTry = <TArgs extends any[], TResult>(
- fn: AsyncFunction<TArgs, TResult>,
- onFail?: ErrorFunction,
- onFinish?: VoidFunction,
-) => (...args: TArgs) => Promise<TResult | undefined>;
-
-const defaultOnError: ErrorFunction = (error) => {
+function defaultErrorHandler(error: any) {
  addNotification({
  group: "main",
  title: "An error occurred",
  text: error?.data?.description || error.message || error || "Unknown error",
  type: "error",
  });
-};
+}
+
+type AsyncFunction<TArgs extends unknown[], TResult> = (...args: TArgs) => Promise<TResult>;
 
-export const useClientTry: useClientTry =
- (fn, onFail = defaultOnError, onFinish) =>
- async (...args) => {
+type ErrorHandlerFunction = (err: unknown) => void | Promise<void>;
+
+type FinishCallbackFunction = () => Promise<void> | void;
+
+export async function useClientTry<TArgs extends unknown[], TResult>(
+ fn: AsyncFunction<TArgs, TResult>,
+ onFail: ErrorHandlerFunction = defaultErrorHandler,
+ onFinish?: FinishCallbackFunction,
+) {
+ return async function (...args: TArgs) {
  startLoading();
  try {
  return await fn(...args);
@@ -34,3 +33,4 @@ export const useClientTry: useClientTry =
  stopLoading();
  }
  };
+}

apps/frontend/src/helpers/highlight.js

@@ -54,7 +54,7 @@ export const renderHighlightedString = (string) =>
  if (lang && hljs.getLanguage(lang)) {
  try {
  return hljs.highlight(str, { language: lang }).value;
- } catch (__) {
+ } catch {
  /* empty */
  }
  }

apps/frontend/src/helpers/infer.js

@@ -97,23 +97,18 @@ export const inferVersionInfo = async function (rawFile, project, gameVersions)
  const inferFunctions = {
  // Forge 1.13+ and NeoForge
  "META-INF/mods.toml": async (file, zip) => {
- const metadata = TOML.parse(file, { joiner: "\n" }); // eslint-disable-line import/no-named-as-default-member
+ const metadata = TOML.parse(file, { joiner: "\n" });
 
  if (metadata.mods && metadata.mods.length > 0) {
  let versionNum = metadata.mods[0].version;
 
  // ${file.jarVersion} -> Implementation-Version from manifest
  const manifestFile = zip.file("META-INF/MANIFEST.MF");
- if (
- // eslint-disable-next-line no-template-curly-in-string
- metadata.mods[0].version.includes("${file.jarVersion}") &&
- manifestFile !== null
- ) {
+ if (metadata.mods[0].version.includes("${file.jarVersion}") && manifestFile !== null) {
  const manifestText = await manifestFile.async("text");
  const regex = /Implementation-Version: (.*)$/m;
  const match = manifestText.match(regex);
  if (match) {
- // eslint-disable-next-line no-template-curly-in-string
  versionNum = versionNum.replace("${file.jarVersion}", match[1]);
  }
  }

apps/frontend/src/helpers/package.js

@@ -131,7 +131,7 @@ export const createDataPackVersion = async function (
  primaryZipReader.file("quilt.mod.json", JSON.stringify(quiltModJson));
  }
  if (loaders.includes("forge")) {
- primaryZipReader.file("META-INF/mods.toml", TOML.stringify(forgeModsToml, { newline: "\n" })); // eslint-disable-line import/no-named-as-default-member
+ primaryZipReader.file("META-INF/mods.toml", TOML.stringify(forgeModsToml, { newline: "\n" }));
  }
 
  if (!newForge && loaders.includes("forge")) {

apps/frontend/src/pages/dashboard/collections.vue

@@ -142,7 +142,7 @@ const { data: collections } = await useAsyncData(`user/${auth.value.user.id}/col
 
 const orderedCollections = computed(() => {
  if (!collections.value) return [];
- return collections.value
+ return [...collections.value]
  .sort((a, b) => {
  const aUpdated = new Date(a.updated);
  const bUpdated = new Date(b.updated);

apps/frontend/src/pages/dashboard/projects.vue

@@ -440,19 +440,19 @@ export default defineNuxtComponent({
  discord_url: this.editLinks.discord.clear ? null : this.editLinks.discord.val.trim(),
  };
 
- if (!baseData.issues_url?.length ?? 1 > 0) {
+ if (!((baseData.issues_url?.length ?? 1) > 0)) {
  delete baseData.issues_url;
  }
 
- if (!baseData.source_url?.length ?? 1 > 0) {
+ if (!((baseData.source_url?.length ?? 1) > 0)) {
  delete baseData.source_url;
  }
 
- if (!baseData.wiki_url?.length ?? 1 > 0) {
+ if (!((baseData.wiki_url?.length ?? 1) > 0)) {
  delete baseData.wiki_url;
  }
 
- if (!baseData.discord_url?.length ?? 1 > 0) {
+ if (!((baseData.discord_url?.length ?? 1) > 0)) {
  delete baseData.discord_url;
  }
 

apps/frontend/src/pages/dashboard/revenue/transfers.vue

@@ -118,7 +118,7 @@ const { data: payouts, refresh } = await useAsyncData(`payout`, () =>
 );
 
 const sortedPayouts = computed(() =>
- payouts.value.sort((a, b) => dayjs(b.created) - dayjs(a.created)),
+ [...payouts.value].sort((a, b) => dayjs(b.created) - dayjs(a.created)),
 );
 
 const years = computed(() => {

apps/frontend/src/types/vintl.d.ts

@@ -1,5 +1,5 @@
 import "@vintl/vintl";
-import { CompactNumber } from "@vintl/compact-number/dist/index.mjs";
+import type { CompactNumber } from "@vintl/compact-number/dist/index.mjs";
 
 declare global {
  namespace VueIntlController {

apps/frontend/src/utils/analytics.js

@@ -5,7 +5,7 @@ import { ref, watch, computed } from "vue";
 // note: build step can miss unix import for some reason, so
 // we have to import it like this
 
-const { unix } = dayjs; // eslint-disable-line import/no-named-as-default-member
+const { unix } = dayjs;
 
 export function useCountryNames(style = "long") {
  const formattingOptions = { type: "region", style };
@@ -277,7 +277,7 @@ export const processAnalyticsByCountry = (category, projects, sortFn) => {
  };
 };
 
-const sortCount = ([_a, a], [_b, b]) => b - a;
+const sortCount = ([, a], [, b]) => b - a;
 const sortTimestamp = ([a], [b]) => a - b;
 const roundValue = ([ts, value]) => [ts, Math.round(parseFloat(value) * 100) / 100];
 

apps/frontend/src/utils/vue-children.ts

@@ -8,7 +8,7 @@ import { createTextVNode, isVNode, toDisplayString, type VNode } from "vue";
  * @returns Either the original VNode or a text VNode containing child converted
  * to a display string.
  */
-function normalizeChild(child: any): VNode {
+function normalizeChild(child: unknown): VNode {
  return isVNode(child) ? child : createTextVNode(toDisplayString(child));
 }
 
@@ -20,6 +20,6 @@ function normalizeChild(child: any): VNode {
  * @param children Children to normalize.
  * @returns Children with all of non-VNodes converted to display strings.
  */
-export function normalizeChildren(children: any | any[]): VNode[] {
+export function normalizeChildren(children: unknown | unknown[]): VNode[] {
  return Array.isArray(children) ? children.map(normalizeChild) : [normalizeChild(children)];
 }