feat(ui/eslint): update eslint-plugin-artalk to v1.0.2 (#1010)

- Add new ESLint rules for ArtalkPlugin:
  - Available rules: `noCycleDeps`, `noLifeCycleEventInNestedBlocks`, `noEventInWatchConf`, `noInjectInNestedBlocks`, `noInjectOutsidePlugin`, `onePluginPerFile`. For more details, see [eslint-plugin-artalk](https://github.com/ArtalkJS/Artalk/tree/master/ui/eslint-plugin-artalk).
- Add tests for the new ESLint rules.
- Implement Tarjan's algorithm for detecting SCCs in the `noCycleDeps` rule.
- Improve code organization and maintainability.
- Disable the 'import-x/namespace' rule for better performance. (import-js/eslint-plugin-import#2340)

eslint.config.mjs

@@ -81,6 +81,7 @@ export default eslintTs.config(
       'import-x/no-named-as-default-member': 'off',
       'import-x/no-named-as-default': 'off',
       'import-x/default': 'off', // fix https://github.com/import-js/eslint-plugin-import/issues/1800
+      'import-x/namespace': 'off', // very slow, see https://github.com/import-js/eslint-plugin-import/issues/2340
       'import-x/order': 'warn',
     },
     settings: {

package.json

@@ -38,7 +38,7 @@
     "eslint": "^9.10.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-import-resolver-typescript": "3.6.3",
-    "eslint-plugin-artalk": "^1.0.1",
+    "eslint-plugin-artalk": "^1.0.2",
     "eslint-plugin-compat": "^6.0.1",
     "eslint-plugin-import-x": "^4.2.1",
     "eslint-plugin-react": "^7.36.1",

ui/eslint-plugin-artalk/README.md

@@ -70,11 +70,69 @@ The ESLint rule `artalk/artalk-plugin` enforces the conventions for Artalk plugi
 
 The ESLint rule is only enabled when a TypeScript file imports the `ArtalkPlugin` type from the `artalk` package and defines an arrow function variable with the type `ArtalkPlugin`, such as `const TestPlugin: ArtalkPlugin = (ctx) => {}`. The variable type must be `ArtalkPlugin`.
 
-#### `noLifeCycleEventInNestedBlocks`
+#### `noCycleDeps`
 
-Should not allow life-cycle event listeners to be defined inside nested blocks.
+Circular dependencies should not be allowed in the `provide` method. The method must not inject a dependency that it also provides, including indirect circular references (e.g., `a` -> `b` -> `c` -> `a`).
 
-The life-cycle event listeners are `created`, `mounted`, `updated`, and `destroyed` must be defined in the top-level scope of the ArtalkPlugin arrow function.
+The best way to deal with this situation is to do some kind of refactor to avoid the cyclic dependencies.
+
+**⚠️ Fail**:
+
+```ts
+import type { ArtalkPlugin } from 'artalk'
+
+export const TestPlugin: ArtalkPlugin = (ctx) => {
+  ctx.provide('foo', (foo) => {}, ['foo'])
+}
+```
+
+```ts
+import type { ArtalkPlugin } from 'artalk'
+
+// foo.ts
+const FooPlugin: ArtalkPlugin = (ctx) => {
+  ctx.provide('foo', (bar) => {}, ['bar'])
+}
+
+// bar.ts
+const BarPlugin: ArtalkPlugin = (ctx) => {
+  ctx.provide('bar', (foo) => {}, ['foo'])
+}
+```
+
+**✅ Pass**:
+
+You can introduce a mediator to resolve circular dependencies. The mediator will handle interactions between the dependencies, breaking the direct circular relationship while maintaining their communication through the mediator.
+
+```ts
+import type { ArtalkPlugin } from 'artalk'
+
+// foo.ts
+const FooPlugin: ArtalkPlugin = (ctx) => {
+  ctx.provide('foo', () => {})
+}
+
+// bar.ts
+const BarPlugin: ArtalkPlugin = (ctx) => {
+  ctx.provide('bar', () => {})
+}
+
+// mediator.ts
+const MediatorPlugin: ArtalkPlugin = (ctx) => {
+  ctx.provide(
+    'mediator',
+    (foo, bar) => {
+      // ...
+      // interact with foo and bar
+    },
+    ['foo', 'bar'],
+  )
+}
+```
+
+#### `noLifeCycleEventInNestedBlocks`
+
+Life-cycle event listeners such as `created`, `mounted`, `updated`, and `destroyed` should not be defined inside nested blocks. They must be placed in the top-level scope of the `ArtalkPlugin` arrow function to ensure clarity and maintainability.
 
 **⚠️ Fail**:
 
@@ -102,7 +160,7 @@ export const TestPlugin: ArtalkPlugin = (ctx) => {
 
 #### `noEventInWatchConf`
 
-Should not allow event listeners to be defined inside watchConf effect function.
+Event listeners should not be defined inside the `watchConf` effect function. They must be placed outside to ensure proper separation of concerns and to avoid unintended side effects.
 
 **⚠️ Fail**:
 
@@ -116,6 +174,97 @@ export const TestPlugin: ArtalkPlugin = (ctx) => {
 }
 ```
 
+**✅ Pass**:
+
+```ts
+import type { ArtalkPlugin } from 'artalk'
+
+export const TestPlugin: ArtalkPlugin = (ctx) => {
+  ctx.on('update', () => {})
+
+  ctx.watchConf(['el'], (conf) => {})
+}
+```
+
+#### `noInjectInNestedBlocks`
+
+The `inject` method should not be called inside nested blocks. It must be used at the top-level scope of the `ArtalkPlugin` arrow function. For better readability and maintainability, it is recommended to place the `inject` call at the beginning of the function.
+
+**⚠️ Fail**:
+
+```ts
+import type { ArtalkPlugin } from 'artalk'
+
+export const TestPlugin: ArtalkPlugin = (ctx) => {
+  const fn = () => {
+    const foo = ctx.inject('foo')
+  }
+}
+```
+
+**✅ Pass**:
+
+```ts
+import type { ArtalkPlugin } from 'artalk'
+
+export const TestPlugin: ArtalkPlugin = (ctx) => {
+  const foo = ctx.inject('foo')
+}
+```
+
+#### `noInjectOutsidePlugin`
+
+The `inject` method should not be called outside the `ArtalkPlugin` arrow function. It must be used in the top-level scope of the `ArtalkPlugin` function to ensure the dependency injection remains readable and maintainable.
+
+**⚠️ Fail**:
+
+```ts
+function fn(ctx) {
+  const foo = ctx.inject('foo')
+}
+```
+
+**✅ Pass**:
+
+```ts
+import type { ArtalkPlugin } from 'artalk'
+
+export const TestPlugin: ArtalkPlugin = (ctx) => {
+  const foo = ctx.inject('foo')
+}
+```
+
+#### `onePluginPerFile`
+
+Multiple plugins should not be defined in the same file. Each plugin must be defined in its own separate file to improve code organization and maintainability.
+
+**⚠️ Fail**:
+
+```ts
+import type { ArtalkPlugin } from 'artalk'
+
+export const TestPlugin: ArtalkPlugin = (ctx) => {}
+export const AnotherPlugin: ArtalkPlugin = (ctx) => {}
+```
+
+**✅ Pass**:
+
+TestPlugin.ts:
+
+```ts
+import type { ArtalkPlugin } from 'artalk'
+
+export const TestPlugin: ArtalkPlugin = (ctx) => {}
+```
+
+AnotherPlugin.ts:
+
+```ts
+import type { ArtalkPlugin } from 'artalk'
+
+export const AnotherPlugin: ArtalkPlugin = (ctx) => {}
+```
+
 ## License
 
 [MIT](https://github.com/ArtalkJS/Artalk/blob/master/LICENSE)

ui/eslint-plugin-artalk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-artalk",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "type": "module",
   "license": "MIT",
   "homepage": "https://github.com/ArtalkJS/Artalk/tree/master/ui/eslint-plugin-artalk",