feat(eslint): Update eslint to v9

.gitignore

@@ -7,3 +7,4 @@ dist
 .env*
 !.env.example
 .vercel
+.idea

.prettierrc.cjs

@@ -0,0 +1,14 @@
+const prettierConfigStandard = require('prettier-config-standard');
+
+const modifiedConfig = {
+  ...prettierConfigStandard,
+  semi: true,
+  parser: 'typescript',
+  singleQuote: true,
+  trailingComma: 'es5',
+  proseWrap: 'never',
+  arrowParens: 'always',
+  tabWidth: 2,
+};
+
+module.exports = modifiedConfig;

eslint.config.js

@@ -0,0 +1,52 @@
+// @ts-check
+import eslint from '@eslint/js';
+import prettier from 'eslint-plugin-prettier/recommended';
+import promise from 'eslint-plugin-promise';
+import simpleImportSort from 'eslint-plugin-simple-import-sort';
+import solid from 'eslint-plugin-solid/configs/typescript';
+import tseslint from 'typescript-eslint';
+import path from 'node:path';
+import tsParser from '@typescript-eslint/parser';
+
+export default tseslint.config(
+  prettier,
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...tseslint.configs.stylistic,
+  {
+    ignores: ['**/styled-system/'],
+  },
+  {
+    files: ['**/*.tsx', '**/*.ts'],
+    extends: [solid],
+    plugins: {
+      'simple-import-sort': simpleImportSort,
+      promise,
+    },
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        project: path.resolve(
+          import.meta.dirname,
+          'packages',
+          'client',
+          'tsconfig.json'
+        ),
+        tsconfigRootDir: path.resolve(
+          import.meta.dirname,
+          'packages',
+          'client'
+        ),
+      },
+    },
+    rules: {
+      'simple-import-sort/imports': 'error',
+      'simple-import-sort/exports': 'error',
+      '@typescript-eslint/consistent-type-imports': 'error',
+      '@typescript-eslint/no-non-null-assertion': 'off',
+      '@typescript-eslint/no-unused-vars': 'off',
+      'solid/jsx-no-undef': 'off',
+      'no-unused-vars': 'off',
+    },
+  }
+);

package.json

@@ -1,5 +1,6 @@
 {
   "name": "resolvite",
+  "type": "module",
   "version": "1.0.0",
   "description": "Revolt's front-end monorepo.",
   "scripts": {
@@ -20,6 +21,20 @@
     "fmt:check": "prettier --check '**/*.{ts,tsx,json}'",
     "typecheck": "cd packages/client && pnpm run typecheck"
   },
+  "devDependencies": {
+    "@eslint/js": "^9.12.0",
+    "@types/node": "^22.7.5",
+    "eslint": "^9.12.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-promise": "^7.1.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-solid": "^0.14.3",
+    "prettier": "^3.3.3",
+    "prettier-config-standard": "^7.0.0",
+    "typescript-eslint": "^8.8.1",
+    "@typescript-eslint/parser": "^8.8.1"
+  },
   "keywords": [],
   "engines": {
     "node": ">=16",

packages/client/.storybook/main.ts

@@ -1,16 +1,16 @@
-import type { StorybookConfig } from "storybook-solidjs-vite";
+import type { StorybookConfig } from 'storybook-solidjs-vite';
 
 const config: StorybookConfig = {
-  stories: ["../**/*.mdx", "../**/*.story.@(js|jsx|mjs|ts|tsx)"],
+  stories: ['../**/*.mdx', '../**/*.story.@(js|jsx|mjs|ts|tsx)'],
   // stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
   ],
   framework: {
-    name: "storybook-solidjs-vite",
+    name: 'storybook-solidjs-vite',
     options: {},
   },
 };

packages/client/.storybook/preview.tsx

@@ -1,7 +1,7 @@
-import { ApplyGlobalStyles, ThemeProvider, darkTheme } from "@revolt/ui";
-import "@revolt/ui/styles";
+import '@revolt/ui/styles';
+import './panda.css';
 
-import "./panda.css";
+import { ApplyGlobalStyles, darkTheme, ThemeProvider } from '@revolt/ui';
 
 const preview: Preview = {
   parameters: {
@@ -14,7 +14,7 @@ const preview: Preview = {
   },
   decorators: [
     (story) => (
-      <ThemeProvider theme={darkTheme("#FF5733", false)}>
+      <ThemeProvider theme={darkTheme('#FF5733', false)}>
         {story} <ApplyGlobalStyles />
       </ThemeProvider>
     ),

packages/client/codegen.plugin.ts

@@ -1,58 +1,58 @@
-import { readdirSync } from "node:fs";
+import { readdirSync } from 'node:fs';
 
 const fileRegex = /\.tsx$/;
 const codegenRegex = /\/\/ @codegen (.*)/g;
 
-const DIRECTIVES = readdirSync("./components/ui/directives")
-  .filter((x) => x !== "index.ts")
+const DIRECTIVES = readdirSync('./components/ui/directives')
+  .filter((x) => x !== 'index.ts')
   .map((x) => x.substring(0, x.length - 3));
 
-const directiveRegex = new RegExp("use:(" + DIRECTIVES.join("|") + ")");
+const directiveRegex = new RegExp('use:(' + DIRECTIVES.join('|') + ')');
 
 export default function codegenPlugin() {
   return {
-    name: "codegen",
-    enforce: "pre",
+    name: 'codegen',
+    enforce: 'pre' as const,
     transform(src: string, id: string) {
       if (fileRegex.test(id)) {
         src = src.replace(codegenRegex, (substring, group1) => {
-          const rawArgs: string[] = group1.split(" ");
+          const rawArgs: string[] = group1.split(' ');
           const type = rawArgs.shift();
 
           const args = rawArgs.reduce(
             (d, arg) => {
-              const [key, value] = arg.split("=");
+              const [key, value] = arg.split('=');
               return {
                 ...d,
                 [key]: value,
               };
             },
             { type }
           ) as {
-            type: "directives";
+            type: 'directives';
             props?: string;
             include?: string;
           };
 
           switch (args.type) {
-            case "directives":
+            case 'directives':
               // Generate directives forwarding
-              const source = args.props ?? "props";
+              const source = args.props ?? 'props';
               const permitted: string[] =
-                args.include?.split(",") ?? DIRECTIVES;
+                args.include?.split(',') ?? DIRECTIVES;
               return DIRECTIVES.filter((d) => permitted.includes(d))
                 .map((d) => `use:${d}={${source}["use:${d}"]}`)
-                .join("\n");
+                .join('\n');
             default:
               return substring;
           }
         });
 
         if (directiveRegex.test(src)) {
-          if (!id.endsWith("client/components/ui/index.tsx"))
+          if (!id.endsWith('client/components/ui/index.tsx'))
             src =
               `import { ${DIRECTIVES.join(
-                ", "
+                ', '
               )} } from "@revolt/ui/directives";\n` + src;
         }
 

packages/client/components/app/index.tsx

@@ -1,6 +1,5 @@
-export { Message } from "./interface/channels/text/Message";
-export { Messages } from "./interface/channels/text/Messages";
-export { DraftMessages } from "./interface/channels/text/DraftMessages";
-
-export * from "./interface/settings";
-export * from "./menus";
+export { DraftMessages } from './interface/channels/text/DraftMessages';
+export { Message } from './interface/channels/text/Message';
+export { Messages } from './interface/channels/text/Messages';
+export * from './interface/settings';
+export * from './menus';

packages/client/components/app/interface/channels/text/DraftMessage.tsx

@@ -1,13 +1,11 @@
-import { For } from "solid-js";
+import { useClient, useUser } from '@revolt/client';
+import { userInformation } from '@revolt/markdown/users';
+import type { UnsentMessage } from '@revolt/state/stores/Draft';
+import { Avatar, MessageContainer, MessageReply, Username } from '@revolt/ui';
+import type { Channel } from 'revolt.js';
+import { For } from 'solid-js';
 
-import type { Channel } from "revolt.js";
-
-import { useClient, useUser } from "@revolt/client";
-import { userInformation } from "@revolt/markdown/users";
-import type { UnsentMessage } from "@revolt/state/stores/Draft";
-import { Avatar, MessageContainer, MessageReply, Username } from "@revolt/ui";
-
-import { DraftMessageContextMenu } from "../../../menus/DraftMessageContextMenu";
+import { DraftMessageContextMenu } from '../../../menus/DraftMessageContextMenu';
 
 interface Props {
   draft: UnsentMessage;
@@ -31,13 +29,13 @@ export function DraftMessage(props: Props) {
       timestamp={
         // TODO
         // i18n missing
-        props.draft.status === "sending"
-          ? "Sending..."
-          : props.draft.status === "failed"
-          ? "Failed to send" // add icons here
-          : "Unsent message" // add icons here
+        props.draft.status === 'sending'
+          ? 'Sending...'
+          : props.draft.status === 'failed'
+            ? 'Failed to send' // add icons here
+            : 'Unsent message' // add icons here
       }
-      sendStatus={props.draft.status === "sending" ? "sending" : "failed"}
+      sendStatus={props.draft.status === 'sending' ? 'sending' : 'failed'}
       username={<Username username={userInfo().username} />}
       header={
         <For each={props.draft.replies}>

packages/client/components/app/interface/channels/text/DraftMessages.tsx

@@ -1,10 +1,8 @@
-import { For } from "solid-js";
+import { state } from '@revolt/state';
+import type { Channel } from 'revolt.js';
+import { For } from 'solid-js';
 
-import { Channel } from "revolt.js";
-
-import { state } from "@revolt/state";
-
-import { DraftMessage } from "./DraftMessage";
+import { DraftMessage } from './DraftMessage';
 
 interface Props {
   channel: Channel;
@@ -19,12 +17,12 @@ export function DraftMessages(props: Props) {
   const unsent = () =>
     state.draft
       .getPendingMessages(props.channel.id)
-      .filter((draft) => draft.status === "sending");
+      .filter((draft) => draft.status === 'sending');
 
   const failed = () =>
     state.draft
       .getPendingMessages(props.channel.id)
-      .filter((draft) => draft.status !== "sending");
+      .filter((draft) => draft.status !== 'sending');
 
   return (
     <>