@wsxjs/eslint-plugin-wsx 0.0.10 → 0.0.11

package/dist/index.js

@@ -184,6 +184,181 @@ var webComponentNaming = {
   }
 };
 
+// src/rules/no-state-on-html-attributes.ts
+var noStateOnHtmlAttributes = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "disallow @state decorator on HTML attributes",
+      category: "Possible Errors",
+      recommended: true
+    },
+    messages: {
+      stateOnHtmlAttribute: "@state decorator cannot be used on properties that are HTML attributes. Property '{{propertyName}}' is defined in observedAttributes. HTML attributes should be handled via onAttributeChanged, not @state decorator."
+    },
+    schema: []
+  },
+  create(context) {
+    const classObservedAttributes = /* @__PURE__ */ new Map();
+    const stateImports = /* @__PURE__ */ new Set();
+    return {
+      // Track imports
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ImportDeclaration(node) {
+        if (node.source.type === "StringLiteral" && (node.source.value === "@wsxjs/wsx-core" || node.source.value.endsWith("/wsx-core"))) {
+          node.specifiers.forEach((spec) => {
+            if (spec.type === "ImportSpecifier" && spec.imported.type === "Identifier" && spec.imported.name === "state") {
+              const localName = spec.local.type === "Identifier" ? spec.local.name : null;
+              if (localName) {
+                stateImports.add(localName);
+              }
+            }
+          });
+        }
+      },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ClassDeclaration(node) {
+        const observedAttributes = [];
+        for (const member of node.body.body) {
+          if ((member.type === "ClassProperty" || member.type === "ClassPrivateProperty") && member.static && member.key.type === "Identifier" && member.key.name === "observedAttributes") {
+            if (member.value?.type === "ArrayExpression") {
+              observedAttributes.push(
+                ...member.value.elements.filter((el) => el && el.type === "StringLiteral").map((el) => el.value)
+              );
+            }
+          } else if (member.type === "ClassMethod" && member.static && member.kind === "get" && member.key.type === "Identifier" && member.key.name === "observedAttributes") {
+            const returnStmt = member.body.body.find(
+              (stmt) => stmt.type === "ReturnStatement"
+            );
+            if (returnStmt?.argument?.type === "ArrayExpression") {
+              observedAttributes.push(
+                ...returnStmt.argument.elements.filter((el) => el && el.type === "StringLiteral").map((el) => el.value)
+              );
+            }
+          }
+        }
+        if (observedAttributes.length > 0) {
+          classObservedAttributes.set(node, observedAttributes);
+        }
+      },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      "ClassDeclaration:exit"(node) {
+        classObservedAttributes.delete(node);
+      },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      Decorator(node) {
+        let isStateDecorator = false;
+        if (node.expression.type === "Identifier") {
+          const name = node.expression.name;
+          isStateDecorator = name === "state" || stateImports.has(name);
+        } else if (node.expression.type === "CallExpression") {
+          const callee = node.expression.callee;
+          if (callee.type === "Identifier") {
+            const name = callee.name;
+            isStateDecorator = name === "state" || stateImports.has(name);
+          }
+        }
+        if (!isStateDecorator) {
+          return;
+        }
+        let classNode = node.parent;
+        while (classNode && classNode.type !== "ClassDeclaration" && classNode.type !== "ClassExpression") {
+          classNode = classNode.parent;
+        }
+        if (!classNode) {
+          return;
+        }
+        const propertyNode = node.parent;
+        if (!propertyNode || propertyNode.type !== "ClassProperty" && propertyNode.type !== "ClassPrivateProperty") {
+          return;
+        }
+        const propertyName = propertyNode.key.type === "Identifier" ? propertyNode.key.name : null;
+        if (!propertyName) {
+          return;
+        }
+        const observedAttributes = classObservedAttributes.get(classNode);
+        if (!observedAttributes || observedAttributes.length === 0) {
+          return;
+        }
+        const propertyKebabCase = propertyName.replace(/([A-Z])/g, "-$1").toLowerCase();
+        const propertyLower = propertyName.toLowerCase();
+        if (observedAttributes.some(
+          (attr) => attr.toLowerCase() === propertyLower || attr.toLowerCase() === propertyKebabCase
+        )) {
+          context.report({
+            node,
+            messageId: "stateOnHtmlAttribute",
+            data: { propertyName }
+          });
+        }
+      }
+    };
+  }
+};
+
+// src/rules/no-state-on-methods.ts
+var noStateOnMethods = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "disallow @state decorator on methods",
+      category: "Possible Errors",
+      recommended: true
+    },
+    messages: {
+      stateOnMethod: "@state decorator cannot be used on methods. '{{methodName}}' is a method, not a property. @state can only be used on properties with primitive, object, or array values."
+    },
+    schema: []
+  },
+  create(context) {
+    const stateImports = /* @__PURE__ */ new Set();
+    return {
+      // Track imports
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ImportDeclaration(node) {
+        if (node.source.type === "StringLiteral" && (node.source.value === "@wsxjs/wsx-core" || node.source.value.endsWith("/wsx-core"))) {
+          node.specifiers.forEach((spec) => {
+            if (spec.type === "ImportSpecifier" && spec.imported.type === "Identifier" && spec.imported.name === "state") {
+              const localName = spec.local.type === "Identifier" ? spec.local.name : null;
+              if (localName) {
+                stateImports.add(localName);
+              }
+            }
+          });
+        }
+      },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      Decorator(node) {
+        let isStateDecorator = false;
+        if (node.expression.type === "Identifier") {
+          const name = node.expression.name;
+          isStateDecorator = name === "state" || stateImports.has(name);
+        } else if (node.expression.type === "CallExpression") {
+          const callee = node.expression.callee;
+          if (callee.type === "Identifier") {
+            const name = callee.name;
+            isStateDecorator = name === "state" || stateImports.has(name);
+          }
+        }
+        if (!isStateDecorator) {
+          return;
+        }
+        const parent = node.parent;
+        if (parent && (parent.type === "ClassMethod" || parent.type === "ClassPrivateMethod")) {
+          const methodName = parent.key.type === "Identifier" ? parent.key.name : parent.key.type === "StringLiteral" ? parent.key.value : null;
+          if (methodName) {
+            context.report({
+              node,
+              messageId: "stateOnMethod",
+              data: { methodName }
+            });
+          }
+        }
+      }
+    };
+  }
+};
+
 // src/configs/recommended.ts
 var recommendedConfig = {
   parser: "@typescript-eslint/parser",
@@ -202,6 +377,8 @@ var recommendedConfig = {
     "wsx/render-method-required": "error",
     "wsx/no-react-imports": "error",
     "wsx/web-component-naming": "warn",
+    "wsx/no-state-on-html-attributes": "error",
+    "wsx/no-state-on-methods": "error",
     // TypeScript 规则（推荐）
     "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
     "@typescript-eslint/no-explicit-any": "warn",
@@ -366,7 +543,9 @@ var plugin = {
   rules: {
     "render-method-required": renderMethodRequired,
     "no-react-imports": noReactImports,
-    "web-component-naming": webComponentNaming
+    "web-component-naming": webComponentNaming,
+    "no-state-on-html-attributes": noStateOnHtmlAttributes,
+    "no-state-on-methods": noStateOnMethods
   },
   // 配置预设
   configs: {

package/dist/index.mjs

@@ -155,6 +155,181 @@ var webComponentNaming = {
   }
 };
 
+// src/rules/no-state-on-html-attributes.ts
+var noStateOnHtmlAttributes = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "disallow @state decorator on HTML attributes",
+      category: "Possible Errors",
+      recommended: true
+    },
+    messages: {
+      stateOnHtmlAttribute: "@state decorator cannot be used on properties that are HTML attributes. Property '{{propertyName}}' is defined in observedAttributes. HTML attributes should be handled via onAttributeChanged, not @state decorator."
+    },
+    schema: []
+  },
+  create(context) {
+    const classObservedAttributes = /* @__PURE__ */ new Map();
+    const stateImports = /* @__PURE__ */ new Set();
+    return {
+      // Track imports
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ImportDeclaration(node) {
+        if (node.source.type === "StringLiteral" && (node.source.value === "@wsxjs/wsx-core" || node.source.value.endsWith("/wsx-core"))) {
+          node.specifiers.forEach((spec) => {
+            if (spec.type === "ImportSpecifier" && spec.imported.type === "Identifier" && spec.imported.name === "state") {
+              const localName = spec.local.type === "Identifier" ? spec.local.name : null;
+              if (localName) {
+                stateImports.add(localName);
+              }
+            }
+          });
+        }
+      },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ClassDeclaration(node) {
+        const observedAttributes = [];
+        for (const member of node.body.body) {
+          if ((member.type === "ClassProperty" || member.type === "ClassPrivateProperty") && member.static && member.key.type === "Identifier" && member.key.name === "observedAttributes") {
+            if (member.value?.type === "ArrayExpression") {
+              observedAttributes.push(
+                ...member.value.elements.filter((el) => el && el.type === "StringLiteral").map((el) => el.value)
+              );
+            }
+          } else if (member.type === "ClassMethod" && member.static && member.kind === "get" && member.key.type === "Identifier" && member.key.name === "observedAttributes") {
+            const returnStmt = member.body.body.find(
+              (stmt) => stmt.type === "ReturnStatement"
+            );
+            if (returnStmt?.argument?.type === "ArrayExpression") {
+              observedAttributes.push(
+                ...returnStmt.argument.elements.filter((el) => el && el.type === "StringLiteral").map((el) => el.value)
+              );
+            }
+          }
+        }
+        if (observedAttributes.length > 0) {
+          classObservedAttributes.set(node, observedAttributes);
+        }
+      },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      "ClassDeclaration:exit"(node) {
+        classObservedAttributes.delete(node);
+      },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      Decorator(node) {
+        let isStateDecorator = false;
+        if (node.expression.type === "Identifier") {
+          const name = node.expression.name;
+          isStateDecorator = name === "state" || stateImports.has(name);
+        } else if (node.expression.type === "CallExpression") {
+          const callee = node.expression.callee;
+          if (callee.type === "Identifier") {
+            const name = callee.name;
+            isStateDecorator = name === "state" || stateImports.has(name);
+          }
+        }
+        if (!isStateDecorator) {
+          return;
+        }
+        let classNode = node.parent;
+        while (classNode && classNode.type !== "ClassDeclaration" && classNode.type !== "ClassExpression") {
+          classNode = classNode.parent;
+        }
+        if (!classNode) {
+          return;
+        }
+        const propertyNode = node.parent;
+        if (!propertyNode || propertyNode.type !== "ClassProperty" && propertyNode.type !== "ClassPrivateProperty") {
+          return;
+        }
+        const propertyName = propertyNode.key.type === "Identifier" ? propertyNode.key.name : null;
+        if (!propertyName) {
+          return;
+        }
+        const observedAttributes = classObservedAttributes.get(classNode);
+        if (!observedAttributes || observedAttributes.length === 0) {
+          return;
+        }
+        const propertyKebabCase = propertyName.replace(/([A-Z])/g, "-$1").toLowerCase();
+        const propertyLower = propertyName.toLowerCase();
+        if (observedAttributes.some(
+          (attr) => attr.toLowerCase() === propertyLower || attr.toLowerCase() === propertyKebabCase
+        )) {
+          context.report({
+            node,
+            messageId: "stateOnHtmlAttribute",
+            data: { propertyName }
+          });
+        }
+      }
+    };
+  }
+};
+
+// src/rules/no-state-on-methods.ts
+var noStateOnMethods = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "disallow @state decorator on methods",
+      category: "Possible Errors",
+      recommended: true
+    },
+    messages: {
+      stateOnMethod: "@state decorator cannot be used on methods. '{{methodName}}' is a method, not a property. @state can only be used on properties with primitive, object, or array values."
+    },
+    schema: []
+  },
+  create(context) {
+    const stateImports = /* @__PURE__ */ new Set();
+    return {
+      // Track imports
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ImportDeclaration(node) {
+        if (node.source.type === "StringLiteral" && (node.source.value === "@wsxjs/wsx-core" || node.source.value.endsWith("/wsx-core"))) {
+          node.specifiers.forEach((spec) => {
+            if (spec.type === "ImportSpecifier" && spec.imported.type === "Identifier" && spec.imported.name === "state") {
+              const localName = spec.local.type === "Identifier" ? spec.local.name : null;
+              if (localName) {
+                stateImports.add(localName);
+              }
+            }
+          });
+        }
+      },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      Decorator(node) {
+        let isStateDecorator = false;
+        if (node.expression.type === "Identifier") {
+          const name = node.expression.name;
+          isStateDecorator = name === "state" || stateImports.has(name);
+        } else if (node.expression.type === "CallExpression") {
+          const callee = node.expression.callee;
+          if (callee.type === "Identifier") {
+            const name = callee.name;
+            isStateDecorator = name === "state" || stateImports.has(name);
+          }
+        }
+        if (!isStateDecorator) {
+          return;
+        }
+        const parent = node.parent;
+        if (parent && (parent.type === "ClassMethod" || parent.type === "ClassPrivateMethod")) {
+          const methodName = parent.key.type === "Identifier" ? parent.key.name : parent.key.type === "StringLiteral" ? parent.key.value : null;
+          if (methodName) {
+            context.report({
+              node,
+              messageId: "stateOnMethod",
+              data: { methodName }
+            });
+          }
+        }
+      }
+    };
+  }
+};
+
 // src/configs/recommended.ts
 var recommendedConfig = {
   parser: "@typescript-eslint/parser",
@@ -173,6 +348,8 @@ var recommendedConfig = {
     "wsx/render-method-required": "error",
     "wsx/no-react-imports": "error",
     "wsx/web-component-naming": "warn",
+    "wsx/no-state-on-html-attributes": "error",
+    "wsx/no-state-on-methods": "error",
     // TypeScript 规则（推荐）
     "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
     "@typescript-eslint/no-explicit-any": "warn",
@@ -337,7 +514,9 @@ var plugin = {
   rules: {
     "render-method-required": renderMethodRequired,
     "no-react-imports": noReactImports,
-    "web-component-naming": webComponentNaming
+    "web-component-naming": webComponentNaming,
+    "no-state-on-html-attributes": noStateOnHtmlAttributes,
+    "no-state-on-methods": noStateOnMethods
   },
   // 配置预设
   configs: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wsxjs/eslint-plugin-wsx",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "ESLint plugin for WSX Framework",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -25,7 +25,7 @@
     "web-components"
   ],
   "dependencies": {
-    "@wsxjs/wsx-core": "0.0.10"
+    "@wsxjs/wsx-core": "0.0.11"
   },
   "devDependencies": {
     "tsup": "^8.0.0",
@@ -43,6 +43,9 @@
   "peerDependencies": {
     "eslint": ">=8.0.0 || ^9.0.0"
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "build": "tsup src/index.ts --format cjs,esm --dts --cjs-interop",
     "dev": "tsup src/index.ts --format cjs,esm --dts --watch",