@simplysm/eslint-plugin 12.14.15 → 12.15.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/eslint-plugin",
-  "version": "12.14.15",
+  "version": "12.15.4",
   "description": "심플리즘 패키지 - ESLINT 플러그인",
   "author": "김석래",
   "repository": {
@@ -12,17 +12,18 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
+    "@angular-eslint/utils": "^20.6.0",
     "@eslint/compat": "^2.0.0",
-    "@typescript-eslint/utils": "^8.46.4",
+    "@typescript-eslint/utils": "^8.47.0",
     "angular-eslint": "^20.6.0",
     "eslint": "^9.39.1",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",
     "globals": "^16.5.0",
     "typescript": "~5.8.3",
-    "typescript-eslint": "^8.46.4"
+    "typescript-eslint": "^8.47.0"
   },
   "devDependencies": {
-    "@typescript-eslint/rule-tester": "^8.46.4"
+    "@typescript-eslint/rule-tester": "^8.47.0"
   }
 }

package/src/configs/root.js

@@ -271,8 +271,10 @@ export default [
       "@simplysm": plugin,
     },
     rules: {
-      "@simplysm/ng-template-no-todo-comments": "warn",
       // "@angular-eslint/template/use-track-by-function": "error",
+
+      "@simplysm/ng-template-no-todo-comments": "warn",
+      "@simplysm/ng-template-sd-require-binding-attrs": ["error"],
     },
   },
 ];

package/src/plugin.js

@@ -3,6 +3,7 @@ import ngTemplateNoTodoComments from "./rules/ng-template-no-todo-comments.js";
 import tsNoExportedTypes from "./rules/ts-no-exported-types.js";
 import tsNoBufferInTypedArrayContext from "./rules/ts-no-buffer-in-typedarray-context.js";
 import noSubpathImportsFromSimplysm from "./rules/no-subpath-imports-from-simplysm.js";
+import ngTemplateSdRequireBindingAttrs from "./rules/ng-template-sd-require-binding-attrs.js";
 
 export default {
   rules: {
@@ -11,5 +12,6 @@ export default {
     "ts-no-buffer-in-typedarray-context": tsNoBufferInTypedArrayContext,
     "ng-template-no-todo-comments": ngTemplateNoTodoComments,
     "no-subpath-imports-from-simplysm": noSubpathImportsFromSimplysm,
+    "ng-template-sd-require-binding-attrs": ngTemplateSdRequireBindingAttrs,
   },
 };

package/src/rules/ng-template-sd-require-binding-attrs.js

@@ -0,0 +1,122 @@
+// ng-template-sd-require-binding-attrs.js
+
+import { getTemplateParserServices } from "@angular-eslint/utils";
+
+export const RULE_NAME = "ng-template-sd-require-binding-attrs";
+
+const DEFAULT_OPTIONS = {
+  selectorPrefixes: ["sd-"],
+  allowAttributes: ["id", "class", "style", "title", "tabindex", "role"],
+  allowAttributePrefixes: ["aria-", "data-", "sd-"],
+};
+
+export default {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow non-whitelisted plain attributes on prefixed components (e.g. sd-*) and require using Angular property bindings instead.",
+      recommended: "error",
+    },
+    fixable: "code",
+    schema: [
+      {
+        type: "object",
+        properties: {
+          selectorPrefixes: {
+            type: "array",
+            items: { type: "string" },
+          },
+          allowAttributes: {
+            type: "array",
+            items: { type: "string" },
+          },
+          allowAttributePrefixes: {
+            type: "array",
+            items: { type: "string" },
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      requireBindingForAttribute:
+        'Attribute "{{attrName}}" is not allowed as a plain attribute on "{{elementName}}". Use a property binding instead, e.g. [{{attrName}}]="…".',
+    },
+  },
+
+  create(context) {
+    const parserServices = getTemplateParserServices(context);
+
+    const userOptions = (context.options && context.options[0]) || {};
+
+    const selectorPrefixes = userOptions.selectorPrefixes || DEFAULT_OPTIONS.selectorPrefixes;
+    const allowAttributes = userOptions.allowAttributes || DEFAULT_OPTIONS.allowAttributes;
+    const allowAttributePrefixes =
+      userOptions.allowAttributePrefixes || DEFAULT_OPTIONS.allowAttributePrefixes;
+
+    const allowedAttrSet = new Set(allowAttributes.map((attr) => attr.toLowerCase()));
+
+    function isTargetElement(node) {
+      const tagName = node.name.toLowerCase();
+      return selectorPrefixes.some((prefix) => tagName.startsWith(prefix.toLowerCase()));
+    }
+
+    function isWhitelistedPlainAttr(attr) {
+      const name = attr.name.toLowerCase();
+
+      if (allowedAttrSet.has(name)) return true;
+
+      return allowAttributePrefixes.some((prefix) => name.startsWith(prefix.toLowerCase()));
+    }
+
+    return {
+      Element(node) {
+        if (!isTargetElement(node)) return;
+
+        // node.attributes: foo="bar" 같은 plain attribute 목록
+        for (const attr of node.attributes) {
+          if (isWhitelistedPlainAttr(attr)) continue;
+
+          const span = attr.sourceSpan || node.sourceSpan;
+          const loc = parserServices.convertNodeSourceSpanToLoc(span || node.sourceSpan);
+
+          context.report({
+            loc,
+            messageId: "requireBindingForAttribute",
+            data: {
+              attrName: attr.name,
+              elementName: node.name,
+            },
+            fix(fixer) {
+              if (!span || span.start == null || span.end == null) {
+                return null;
+              }
+
+              const start = span.start.offset;
+              const end = span.end.offset;
+              if (typeof start !== "number" || typeof end !== "number" || start >= end) {
+                return null;
+              }
+
+              const rawValue = attr.value || "";
+
+              // 2. <sd-aaa bbb> -> <sd-aaa [bbb]="true">
+              if (rawValue === "") {
+                const replacement = `[${attr.name}]="true"`;
+                return fixer.replaceTextRange([start, end], replacement);
+              }
+
+              // 1. aaa="bbb" -> [aaa]="'bbb'"
+              const escaped = rawValue.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+              const expression = `'${escaped}'`;
+              const replacement = `[${attr.name}]="${expression}"`;
+
+              return fixer.replaceTextRange([start, end], replacement);
+            },
+          });
+        }
+      },
+    };
+  },
+};