@wsxjs/eslint-plugin-wsx 0.0.20 → 0.0.21

package/dist/index.js

@@ -550,6 +550,125 @@ var i18nAfterAutoRegister = {
   }
 };
 
+// src/rules/no-duplicate-keys.ts
+var noDuplicateKeys = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "disallow using the same key in different parent containers",
+      category: "Possible Errors",
+      recommended: true
+    },
+    messages: {
+      duplicateKey: 'Duplicate key "{{key}}" found in different parent containers ({{parent1}} and {{parent2}}). This will cause DOM cache conflicts. Use unique key prefixes like key="{{parent1}}-{{key}}" and key="{{parent2}}-{{key}}".'
+    },
+    schema: []
+    // 无配置选项
+  },
+  create(context) {
+    const functionKeyMap = /* @__PURE__ */ new Map();
+    const functionStack = [];
+    function getParentJSXName(node) {
+      let parent = node.parent;
+      while (parent) {
+        if (parent.type === "JSXElement") {
+          const openingElement = parent.openingElement;
+          if (openingElement) {
+            const name = openingElement.name;
+            if (name) {
+              const nameValue = name.name || name;
+              if (typeof nameValue === "string") {
+                return nameValue;
+              }
+              if (nameValue.name) {
+                return nameValue.name;
+              }
+            }
+          }
+        }
+        parent = parent.parent;
+      }
+      return "unknown";
+    }
+    function getKeyValue(attr) {
+      const value = attr.value;
+      if (!value) {
+        return null;
+      }
+      if (value.type === "Literal") {
+        return String(value.value);
+      }
+      if (value.type === "JSXExpressionContainer") {
+        const expression = value.expression;
+        if (expression.type === "Identifier") {
+          return expression.name;
+        }
+        if (expression.type === "TemplateLiteral") {
+          const quasis = expression.quasis || [];
+          if (quasis.length > 0 && quasis[0].value) {
+            return quasis[0].value.raw || quasis[0].value.cooked;
+          }
+        }
+      }
+      return null;
+    }
+    return {
+      // Track function/method entry
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ":function"(node) {
+        functionStack.push(node);
+        functionKeyMap.set(node, /* @__PURE__ */ new Map());
+      },
+      // Track function/method exit
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ":function:exit"(_node) {
+        functionStack.pop();
+      },
+      // Check JSX elements for key attributes
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      JSXOpeningElement(node) {
+        if (functionStack.length === 0) {
+          return;
+        }
+        const currentFunction = functionStack[functionStack.length - 1];
+        const keyMap = functionKeyMap.get(currentFunction);
+        if (!keyMap) {
+          return;
+        }
+        const keyAttr = (node.attributes || []).find((attr) => {
+          return attr.type === "JSXAttribute" && attr.name && attr.name.name === "key";
+        });
+        if (!keyAttr) {
+          return;
+        }
+        const keyValue = getKeyValue(keyAttr);
+        if (!keyValue) {
+          return;
+        }
+        const parentName = getParentJSXName(node);
+        const existing = keyMap.get(keyValue);
+        if (existing && existing.parentName !== parentName) {
+          context.report({
+            node: keyAttr,
+            messageId: "duplicateKey",
+            data: {
+              key: keyValue,
+              parent1: existing.parentName,
+              parent2: parentName
+            }
+          });
+        } else if (!existing) {
+          keyMap.set(keyValue, {
+            key: keyValue,
+            parentName,
+            node: keyAttr
+          });
+        }
+      }
+    };
+  }
+};
+
 // src/configs/recommended.ts
 var recommendedConfig = {
   parser: "@typescript-eslint/parser",
@@ -575,6 +694,7 @@ var recommendedConfig = {
     "wsx/no-null-render": "error",
     "wsx/no-inner-html": "error",
     "wsx/i18n-after-autoregister": "error",
+    "wsx/no-duplicate-keys": "error",
     // TypeScript 规则（推荐）
     "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
     "@typescript-eslint/no-explicit-any": "warn",
@@ -744,7 +864,8 @@ var plugin = {
     "require-jsx-import-source": requireJsxImportSource,
     "no-null-render": noNullRender,
     "no-inner-html": noInnerHTML,
-    "i18n-after-autoregister": i18nAfterAutoRegister
+    "i18n-after-autoregister": i18nAfterAutoRegister,
+    "no-duplicate-keys": noDuplicateKeys
   },
   // 配置预设
   configs: {

package/dist/index.mjs

@@ -521,6 +521,125 @@ var i18nAfterAutoRegister = {
   }
 };
 
+// src/rules/no-duplicate-keys.ts
+var noDuplicateKeys = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "disallow using the same key in different parent containers",
+      category: "Possible Errors",
+      recommended: true
+    },
+    messages: {
+      duplicateKey: 'Duplicate key "{{key}}" found in different parent containers ({{parent1}} and {{parent2}}). This will cause DOM cache conflicts. Use unique key prefixes like key="{{parent1}}-{{key}}" and key="{{parent2}}-{{key}}".'
+    },
+    schema: []
+    // 无配置选项
+  },
+  create(context) {
+    const functionKeyMap = /* @__PURE__ */ new Map();
+    const functionStack = [];
+    function getParentJSXName(node) {
+      let parent = node.parent;
+      while (parent) {
+        if (parent.type === "JSXElement") {
+          const openingElement = parent.openingElement;
+          if (openingElement) {
+            const name = openingElement.name;
+            if (name) {
+              const nameValue = name.name || name;
+              if (typeof nameValue === "string") {
+                return nameValue;
+              }
+              if (nameValue.name) {
+                return nameValue.name;
+              }
+            }
+          }
+        }
+        parent = parent.parent;
+      }
+      return "unknown";
+    }
+    function getKeyValue(attr) {
+      const value = attr.value;
+      if (!value) {
+        return null;
+      }
+      if (value.type === "Literal") {
+        return String(value.value);
+      }
+      if (value.type === "JSXExpressionContainer") {
+        const expression = value.expression;
+        if (expression.type === "Identifier") {
+          return expression.name;
+        }
+        if (expression.type === "TemplateLiteral") {
+          const quasis = expression.quasis || [];
+          if (quasis.length > 0 && quasis[0].value) {
+            return quasis[0].value.raw || quasis[0].value.cooked;
+          }
+        }
+      }
+      return null;
+    }
+    return {
+      // Track function/method entry
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ":function"(node) {
+        functionStack.push(node);
+        functionKeyMap.set(node, /* @__PURE__ */ new Map());
+      },
+      // Track function/method exit
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ":function:exit"(_node) {
+        functionStack.pop();
+      },
+      // Check JSX elements for key attributes
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      JSXOpeningElement(node) {
+        if (functionStack.length === 0) {
+          return;
+        }
+        const currentFunction = functionStack[functionStack.length - 1];
+        const keyMap = functionKeyMap.get(currentFunction);
+        if (!keyMap) {
+          return;
+        }
+        const keyAttr = (node.attributes || []).find((attr) => {
+          return attr.type === "JSXAttribute" && attr.name && attr.name.name === "key";
+        });
+        if (!keyAttr) {
+          return;
+        }
+        const keyValue = getKeyValue(keyAttr);
+        if (!keyValue) {
+          return;
+        }
+        const parentName = getParentJSXName(node);
+        const existing = keyMap.get(keyValue);
+        if (existing && existing.parentName !== parentName) {
+          context.report({
+            node: keyAttr,
+            messageId: "duplicateKey",
+            data: {
+              key: keyValue,
+              parent1: existing.parentName,
+              parent2: parentName
+            }
+          });
+        } else if (!existing) {
+          keyMap.set(keyValue, {
+            key: keyValue,
+            parentName,
+            node: keyAttr
+          });
+        }
+      }
+    };
+  }
+};
+
 // src/configs/recommended.ts
 var recommendedConfig = {
   parser: "@typescript-eslint/parser",
@@ -546,6 +665,7 @@ var recommendedConfig = {
     "wsx/no-null-render": "error",
     "wsx/no-inner-html": "error",
     "wsx/i18n-after-autoregister": "error",
+    "wsx/no-duplicate-keys": "error",
     // TypeScript 规则（推荐）
     "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
     "@typescript-eslint/no-explicit-any": "warn",
@@ -715,7 +835,8 @@ var plugin = {
     "require-jsx-import-source": requireJsxImportSource,
     "no-null-render": noNullRender,
     "no-inner-html": noInnerHTML,
-    "i18n-after-autoregister": i18nAfterAutoRegister
+    "i18n-after-autoregister": i18nAfterAutoRegister,
+    "no-duplicate-keys": noDuplicateKeys
   },
   // 配置预设
   configs: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wsxjs/eslint-plugin-wsx",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "ESLint plugin for WSXJS",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -25,7 +25,7 @@
     "web-components"
   ],
   "dependencies": {
-    "@wsxjs/wsx-core": "0.0.20"
+    "@wsxjs/wsx-core": "0.0.21"
   },
   "devDependencies": {
     "tsup": "^8.0.0",

package/src/configs/recommended.ts

@@ -29,6 +29,7 @@ export const recommendedConfig: WSXConfig = {
         "wsx/no-null-render": "error",
         "wsx/no-inner-html": "error",
         "wsx/i18n-after-autoregister": "error",
+        "wsx/no-duplicate-keys": "error",
 
         // TypeScript 规则（推荐）
         "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],

package/src/index.ts

@@ -13,6 +13,7 @@ import { requireJsxImportSource } from "./rules/require-jsx-import-source";
 import { noNullRender } from "./rules/no-null-render";
 import { noInnerHTML } from "./rules/no-inner-html";
 import { i18nAfterAutoRegister } from "./rules/i18n-after-autoregister";
+import { noDuplicateKeys } from "./rules/no-duplicate-keys";
 import { recommendedConfig } from "./configs/recommended";
 import { createFlatConfig } from "./configs/flat";
 import { WSXPlugin } from "./types";
@@ -34,6 +35,7 @@ const plugin: WSXPlugin = {
         "no-null-render": noNullRender,
         "no-inner-html": noInnerHTML,
         "i18n-after-autoregister": i18nAfterAutoRegister,
+        "no-duplicate-keys": noDuplicateKeys,
     },
 
     // 配置预设

package/src/rules/no-duplicate-keys.ts

@@ -0,0 +1,192 @@
+/**
+ * ESLint 规则：no-duplicate-keys
+ *
+ * 检测同一个 key 在不同父容器中使用的情况
+ * 这会导致 DOM 缓存冲突，元素被错误地移动到错误的容器中
+ */
+
+import { Rule } from "eslint";
+import { WSXRuleModule } from "../types";
+
+interface KeyUsage {
+    key: string;
+    parentName: string;
+    node: unknown;
+}
+
+export const noDuplicateKeys: WSXRuleModule = {
+    meta: {
+        type: "problem",
+        docs: {
+            description: "disallow using the same key in different parent containers",
+            category: "Possible Errors",
+            recommended: true,
+        },
+        messages: {
+            duplicateKey:
+                'Duplicate key "{{key}}" found in different parent containers ({{parent1}} and {{parent2}}). ' +
+                "This will cause DOM cache conflicts. " +
+                'Use unique key prefixes like key="{{parent1}}-{{key}}" and key="{{parent2}}-{{key}}".',
+        },
+        schema: [], // 无配置选项
+    },
+    create(context: Rule.RuleContext) {
+        // Map<FunctionNode, Map<KeyValue, KeyUsage>>
+        const functionKeyMap = new Map<unknown, Map<string, KeyUsage>>();
+        const functionStack: unknown[] = [];
+
+        /**
+         * Gets the parent JSX element name
+         */
+        function getParentJSXName(node: unknown): string {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let parent = (node as any).parent;
+
+            // Traverse up to find the parent JSX element
+            while (parent) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                if ((parent as any).type === "JSXElement") {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const openingElement = (parent as any).openingElement;
+                    if (openingElement) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        const name = (openingElement as any).name;
+                        if (name) {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            const nameValue = (name as any).name || name;
+                            if (typeof nameValue === "string") {
+                                return nameValue;
+                            }
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            if ((nameValue as any).name) {
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                return (nameValue as any).name;
+                            }
+                        }
+                    }
+                }
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                parent = (parent as any).parent;
+            }
+
+            return "unknown";
+        }
+
+        /**
+         * Extracts the key value from JSX attribute
+         */
+        function getKeyValue(attr: unknown): string | null {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const value = (attr as any).value;
+
+            if (!value) {
+                return null;
+            }
+
+            // String literal: key="value"
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            if ((value as any).type === "Literal") {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                return String((value as any).value);
+            }
+
+            // Template literal: key={`prefix-${id}`}
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            if ((value as any).type === "JSXExpressionContainer") {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const expression = (value as any).expression;
+
+                // Simple identifier: key={itemId}
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                if ((expression as any).type === "Identifier") {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    return (expression as any).name;
+                }
+
+                // Template literal: key={`prefix-${id}`}
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                if ((expression as any).type === "TemplateLiteral") {
+                    // Extract the static parts
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const quasis = (expression as any).quasis || [];
+                    if (quasis.length > 0 && quasis[0].value) {
+                        return quasis[0].value.raw || quasis[0].value.cooked;
+                    }
+                }
+            }
+
+            return null;
+        }
+
+        return {
+            // Track function/method entry
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            ":function"(node: any) {
+                functionStack.push(node);
+                functionKeyMap.set(node, new Map());
+            },
+
+            // Track function/method exit
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            ":function:exit"(_node: any) {
+                functionStack.pop();
+            },
+
+            // Check JSX elements for key attributes
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            JSXOpeningElement(node: any) {
+                if (functionStack.length === 0) {
+                    return;
+                }
+
+                const currentFunction = functionStack[functionStack.length - 1];
+                const keyMap = functionKeyMap.get(currentFunction);
+
+                if (!keyMap) {
+                    return;
+                }
+
+                // Find the key attribute
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const keyAttr = (node.attributes || []).find((attr: any) => {
+                    return attr.type === "JSXAttribute" && attr.name && attr.name.name === "key";
+                });
+
+                if (!keyAttr) {
+                    return;
+                }
+
+                const keyValue = getKeyValue(keyAttr);
+
+                if (!keyValue) {
+                    return;
+                }
+
+                const parentName = getParentJSXName(node);
+
+                // Check if this key was already used in a different parent
+                const existing = keyMap.get(keyValue);
+
+                if (existing && existing.parentName !== parentName) {
+                    // Found duplicate key in different parent!
+                    context.report({
+                        node: keyAttr,
+                        messageId: "duplicateKey",
+                        data: {
+                            key: keyValue,
+                            parent1: existing.parentName,
+                            parent2: parentName,
+                        },
+                    });
+                } else if (!existing) {
+                    // First time seeing this key, record it
+                    keyMap.set(keyValue, {
+                        key: keyValue,
+                        parentName,
+                        node: keyAttr,
+                    });
+                }
+            },
+        };
+    },
+};