refactor: replace eslint with oxlint (#271)

* refactor: replace eslint with oxlint

* chore: f

* chore: f

Author: Saul-Mirone

.github/workflows/ci.yml

@@ -32,8 +32,8 @@ jobs:
       - name: Run lint
         run: pnpm lint
 
-      - name: Run prettier
-        run: pnpm prettier
+      - name: Run format check
+        run: pnpm format:check
 
   build:
     runs-on: ubuntu-latest

.lintstagedrc.js

@@ -1,3 +1,3 @@
 module.exports = {
-  "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write --ignore-unknown"],
-};
+  '*.{js,jsx,ts,tsx}': ['oxlint -c .oxlintrc.json --fix', 'oxfmt --write'],
+}

.oxfmtrc.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 80,
+  "sortImports": {
+    "groups": [
+      "type-import",
+      ["value-builtin", "value-external"],
+      "type-internal",
+      "value-internal",
+      ["type-parent", "type-sibling", "type-index"],
+      ["value-parent", "value-sibling", "value-index"],
+      "unknown"
+    ]
+  },
+  "ignorePatterns": [
+    "pnpm-lock.yaml",
+    "**/storybook-static",
+    "**/lib",
+    "**/.storybook",
+    "**/tests/data/*.md",
+    "**/templates/*.md"
+  ]
+}

.oxlintrc.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "nextjs", "jsx-a11y", "import", "typescript"],
+  "categories": {
+    "correctness": "error",
+    "suspicious": "warn",
+    "perf": "warn"
+  },
+  "rules": {
+    "no-unused-vars": "off",
+    "react/react-in-jsx-scope": "off",
+    "jsx-a11y/click-events-have-key-events": "warn",
+    "jsx-a11y/no-static-element-interactions": "warn",
+    "import/order": "error"
+  },
+  "settings": {
+    "next": {
+      "rootDir": ["."]
+    },
+    "react": {
+      "formComponents": [],
+      "linkComponents": [{ "name": "Link", "linkAttribute": "href" }]
+    }
+  },
+  "ignorePatterns": [".next", "out", "build", "milkdown", "next-env.d.ts"]
+}

.prettierignore

@@ -13,47 +13,47 @@ You can even use visualizer to visualize the data. We create a simple example on
 Inspector will be a top-level API in Milkdown. You can use it like this:
 
 ```ts
-import { Editor } from "@milkdown/core";
-import { Telemetry } from "@milkdown/ctx";
+import { Editor } from '@milkdown/core'
+import { Telemetry } from '@milkdown/ctx'
 
 const editor = await Editor.make()
   // Inspector is disabled by default considering performance. You need to enable it manually.
   .enableInspector()
   // ...
-  .create();
+  .create()
 
-const telemetry: Telemetry[] = editor.inspect();
+const telemetry: Telemetry[] = editor.inspect()
 ```
 
 The `Telemetry` interface will have the following fields:
 
 ```ts
 interface Telemetry {
   // User defined information for the plugin.
-  metadata: Meta;
+  metadata: Meta
 
   // The slices and their current value defined by the plugin.
-  injectedSlices: { name: string; value: unknown }[];
+  injectedSlices: { name: string; value: unknown }[]
 
   // The slices and their current value consumed by the plugin.
-  consumedSlices: { name: string; value: unknown }[];
+  consumedSlices: { name: string; value: unknown }[]
 
   // The timers and their duration defined by the plugin.
-  recordedTimers: { name: string; duration: number; status: TimerStatus }[];
+  recordedTimers: { name: string; duration: number; status: TimerStatus }[]
 
   // The timers and their duration consumed by the plugin.
   // Generally, the plugin will wait for them.
-  waitTimers: { name: string; duration: number; status: TimerStatus }[];
+  waitTimers: { name: string; duration: number; status: TimerStatus }[]
 }
 
-type TimerStatus = "pending" | "resolved" | "rejected";
+type TimerStatus = 'pending' | 'resolved' | 'rejected'
 
 interface Meta {
-  displayName: string;
-  description?: string;
-  package: string;
-  group?: string;
-  additional?: Record<string, any>;
+  displayName: string
+  description?: string
+  package: string
+  group?: string
+  additional?: Record<string, any>
 }
 ```
 
@@ -62,52 +62,52 @@ With the data, you'll know the sequence of the plugins loaded, the slices and ti
 For example:
 
 ```ts
-[
+;[
   {
     metadata: {
-      displayName: "Config",
-      package: "@milkdown/core",
-      group: "System",
+      displayName: 'Config',
+      package: '@milkdown/core',
+      group: 'System',
     },
     injectedSlices: [],
     consumedSlices: [
       /* ... */
     ],
     recordedTimers: [
       {
-        name: "ConfigReady",
+        name: 'ConfigReady',
         duration: 3,
-        status: "resolved",
+        status: 'resolved',
       },
     ],
     waitTimers: [],
   },
   {
     metadata: {
-      displayName: "Init",
-      package: "@milkdown/core",
-      group: "System",
+      displayName: 'Init',
+      package: '@milkdown/core',
+      group: 'System',
     },
     injectedSlices: [],
     consumedSlices: [
       /* ... */
     ],
     recordedTimers: [
       {
-        name: "InitReady",
+        name: 'InitReady',
         duration: 5,
-        status: "resolved",
+        status: 'resolved',
       },
     ],
     waitTimers: [
       {
-        name: "ConfigReady",
+        name: 'ConfigReady',
         duration: 5,
-        status: "resolved",
+        status: 'resolved',
       },
     ],
   },
-];
+]
 ```
 
 From above information, we can know that the `Init` plugin wait for `Config` plugin to be ready.
@@ -120,23 +120,23 @@ We can build a sequence diagram from the data.
 For plugin maintainers, you can add metadata to your plugin to make it more friendly to the inspector.
 
 ```ts
-import { MilkdownPlugin } from "@milkdown/ctx";
+import { MilkdownPlugin } from '@milkdown/ctx'
 
 const yourMilkdownPlugin: MilkdownPlugin = () => {
   /* your implementation */
-};
+}
 
 yourMilkdownPlugin.metadata = {
-  displayName: "Your Plugin",
-  package: "your-plugin-package",
-  description: "Your plugin description",
-  group: "If you have a lot of plugins in your package, you can group them.",
+  displayName: 'Your Plugin',
+  package: 'your-plugin-package',
+  description: 'Your plugin description',
+  group: 'If you have a lot of plugins in your package, you can group them.',
   addtitional: {
     /* You can add any additional information here. */
-    version: "1.0.0",
-    authror: "Mike",
+    version: '1.0.0',
+    authror: 'Mike',
   },
-};
+}
 ```
 
 With metadata, your plugin will report telemetry correctly to the inspector.