@db-ux/core-eslint-plugin 4.6.1 → 4.7.0-tabs-34782eb

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @db-ux/core-eslint-plugin
 
+## 4.7.0
+
+### Patch Changes
+
+- fix(`DBNotification`): `close-button-text-required` rule now only requires `closeButtonText` when `closeable` attribute is set. - [see commit 9ae9216](https://github.com/db-ux-design-system/core-web/commit/9ae92161a6d07c7a7ab80a4af31777a4d35d09be):
+  - refactor(`ESLint`): optimize parsing of multiple Angular components.
+
 ## 4.6.1
 
 _version bump_

package/build/rules/close-button/close-button-text-required.js

@@ -19,10 +19,26 @@ export default {
     },
     create(context) {
         const angularHandler = (node, parserServices) => {
-            const componentName = node.name;
             const component = Object.keys(COMPONENTS_WITH_CLOSE_BUTTON).find((comp) => isDBComponent(node, comp));
             if (!component)
                 return;
+            if (component === 'DBNotification') {
+                const input = node.inputs?.find((i) => i.name === 'closeable');
+                // Check for [closeable]="false" - Angular AST structure
+                if (input) {
+                    const val = input.value;
+                    if (val?.type === 'LiteralPrimitive' && val.value === false)
+                        return;
+                    if (val?.source === 'false')
+                        return;
+                }
+                else {
+                    // Check for plain attribute closeable (no binding)
+                    const attr = node.attributes?.find((a) => a.name === 'closeable');
+                    if (!attr)
+                        return;
+                }
+            }
             const attribute = COMPONENTS_WITH_CLOSE_BUTTON[component];
             const value = getAttributeValue(node, attribute);
             if (value === null || value === '') {
@@ -30,20 +46,57 @@ export default {
                 context.report({
                     loc,
                     messageId: MESSAGE_IDS.CLOSE_BUTTON_TEXT_REQUIRED,
-                    data: { component: componentName, attribute }
+                    data: { component: node.name, attribute }
                 });
             }
         };
+        const angularVisitors = {};
         for (const comp of Object.keys(COMPONENTS_WITH_CLOSE_BUTTON)) {
-            const angularVisitors = createAngularVisitors(context, comp, angularHandler);
-            if (angularVisitors)
-                return angularVisitors;
+            const visitors = createAngularVisitors(context, comp, angularHandler);
+            if (visitors) {
+                Object.assign(angularVisitors, visitors);
+            }
         }
+        if (Object.keys(angularVisitors).length > 0)
+            return angularVisitors;
         const checkComponent = (node) => {
             const openingElement = node.openingElement || node;
             const component = Object.keys(COMPONENTS_WITH_CLOSE_BUTTON).find((comp) => isDBComponent(openingElement, comp));
             if (!component)
                 return;
+            if (component === 'DBNotification') {
+                // React: closeable={false}
+                const closeableAttr = openingElement.attributes?.find((a) => a.type === 'JSXAttribute' && a.name.name === 'closeable');
+                if (closeableAttr?.value?.type === 'JSXExpressionContainer' &&
+                    closeableAttr.value.expression?.type === 'Literal' &&
+                    closeableAttr.value.expression.value === false)
+                    return;
+                // Vue: key.name can be a VIdentifier object (key.name.name === 'bind')
+                // or a plain string for non-directive attributes
+                const isVueCloseableBind = (a) => {
+                    const keyName = typeof a.key?.name === 'string'
+                        ? a.key.name
+                        : a.key?.name?.name;
+                    return (keyName === 'bind' &&
+                        a.key?.argument?.name === 'closeable');
+                };
+                const isVueCloseableStatic = (a) => {
+                    const keyName = typeof a.key?.name === 'string'
+                        ? a.key.name
+                        : a.key?.name?.name;
+                    return keyName === 'closeable';
+                };
+                const vueBindAttr = openingElement.startTag?.attributes?.find(isVueCloseableBind);
+                if (vueBindAttr &&
+                    (vueBindAttr.value?.value === 'false' ||
+                        vueBindAttr.value?.expression?.value === false))
+                    return;
+                // Only skip if closeable attribute/binding doesn't exist
+                const hasCloseable = closeableAttr ||
+                    openingElement.startTag?.attributes?.some((a) => isVueCloseableStatic(a) || isVueCloseableBind(a));
+                if (!hasCloseable)
+                    return;
+            }
             const componentName = openingElement.name?.name || openingElement.rawName;
             const attribute = COMPONENTS_WITH_CLOSE_BUTTON[component];
             const value = getAttributeValue(openingElement, attribute);

package/build/rules/content/text-or-children-required.js

@@ -41,11 +41,15 @@ export default {
                 });
             }
         };
+        const angularVisitors = {};
         for (const comp of COMPONENTS_REQUIRING_CONTENT) {
-            const angularVisitors = createAngularVisitors(context, comp, angularHandler);
-            if (angularVisitors)
-                return angularVisitors;
+            const visitors = createAngularVisitors(context, comp, angularHandler);
+            if (visitors) {
+                Object.assign(angularVisitors, visitors);
+            }
         }
+        if (Object.keys(angularVisitors).length > 0)
+            return angularVisitors;
         const checkComponent = (node) => {
             const openingElement = node.openingElement || node;
             const component = COMPONENTS_REQUIRING_CONTENT.find((comp) => isDBComponent(openingElement, comp));

package/build/rules/form/form-label-required.js

@@ -41,11 +41,15 @@ export default {
                 });
             }
         };
+        const angularVisitors = {};
         for (const comp of FORM_COMPONENTS) {
-            const angularVisitors = createAngularVisitors(context, comp, angularHandler);
-            if (angularVisitors)
-                return angularVisitors;
+            const visitors = createAngularVisitors(context, comp, angularHandler);
+            if (visitors) {
+                Object.assign(angularVisitors, visitors);
+            }
         }
+        if (Object.keys(angularVisitors).length > 0)
+            return angularVisitors;
         const checkFormComponent = (node) => {
             const openingElement = node.openingElement || node;
             const component = FORM_COMPONENTS.find((comp) => isDBComponent(openingElement, comp));

package/build/rules/icon/prefer-icon-attribute.js

@@ -37,7 +37,6 @@ export default {
             const iconChild = node.children?.find((child) => (child.type === 'Element' || child.type === 'Element$1') &&
                 isDBComponent(child, 'DBIcon'));
             if (iconChild) {
-                const iconValue = getAttributeValue(iconChild, 'icon');
                 const loc = parserServices.convertNodeSourceSpanToLoc(iconChild.sourceSpan);
                 context.report({
                     loc,
@@ -46,11 +45,15 @@ export default {
                 });
             }
         };
+        const angularVisitors = {};
         for (const comp of COMPONENTS_WITH_ICON_ATTR) {
-            const angularVisitors = createAngularVisitors(context, comp, angularHandler);
-            if (angularVisitors)
-                return angularVisitors;
+            const visitors = createAngularVisitors(context, comp, angularHandler);
+            if (visitors) {
+                Object.assign(angularVisitors, visitors);
+            }
         }
+        if (Object.keys(angularVisitors).length > 0)
+            return angularVisitors;
         const checkComponent = (node) => {
             const openingElement = node.openingElement || node;
             const component = COMPONENTS_WITH_ICON_ATTR.find((comp) => isDBComponent(openingElement, comp));

package/build/shared/utils.d.ts

@@ -4,10 +4,14 @@ type VElement = {
     startTag: {
         attributes: Array<{
             key: {
-                name: string;
-                argument?: {
+                name: string | {
                     name: string;
                 };
+                argument?: string | {
+                    name: string | {
+                        name: string;
+                    };
+                };
             };
             value?: {
                 value: string;
@@ -43,6 +47,8 @@ export declare function defineTemplateBodyVisitor(context: any, templateVisitor:
 export declare function createAngularVisitors(context: any, componentName: string, handler: (node: any, parserServices: any) => void): {
     [x: string]: (node: any) => void;
 } | null;
+export declare function toKebabCase(str: string): string;
+export declare function getAngularComponentName(componentName: string): string;
 export declare function createAngularFix(context: any, node: any, attributeText: string): {
     insertPos: any;
     attributeText: string;

package/build/shared/utils.js

@@ -7,9 +7,7 @@ function isAngularElement(node) {
         (node.attributes || node.inputs));
 }
 export function getAttributeValue(node, attrName) {
-    const kebabAttrName = attrName
-        .replace(/([a-z])([A-Z])/g, '$1-$2')
-        .toLowerCase();
+    const kebabAttrName = toKebabCase(attrName);
     if (isAngularElement(node)) {
         const attr = node.attributes.find((a) => a.name === attrName || a.name === kebabAttrName);
         if (attr) {
@@ -24,12 +22,24 @@ export function getAttributeValue(node, attrName) {
     }
     if (isVElement(node)) {
         const attr = node.startTag.attributes.find((a) => {
-            if (a.key.name === 'bind' && a.key.argument?.name === attrName)
+            const keyName = typeof a.key.name === 'string' ? a.key.name : a.key.name?.name;
+            const argName = a.key.argument
+                ? typeof a.key.argument === 'string'
+                    ? a.key.argument
+                    : typeof a.key.argument.name === 'string'
+                        ? a.key.argument.name
+                        : a.key.argument.name?.name
+                : undefined;
+            if (keyName === 'bind' &&
+                (argName === attrName ||
+                    argName === kebabAttrName ||
+                    argName === attrName.toLowerCase() ||
+                    argName === kebabAttrName.toLowerCase()))
                 return true;
-            return (a.key.name === attrName ||
-                a.key.name === kebabAttrName ||
-                a.key.name === `:${attrName}` ||
-                a.key.name === `:${kebabAttrName}`);
+            return (keyName === attrName ||
+                keyName === kebabAttrName ||
+                keyName === `:${attrName}` ||
+                keyName === `:${kebabAttrName}`);
         });
         if (!attr)
             return null;
@@ -51,9 +61,7 @@ export function getAttributeValue(node, attrName) {
     return null;
 }
 export function hasChildOfType(node, componentName) {
-    const kebabName = componentName
-        .replace(/([a-z])([A-Z])/g, '$1-$2')
-        .toLowerCase();
+    const kebabName = getAngularComponentName(componentName);
     if (isAngularElement(node)) {
         return (node.children || []).some((child) => {
             if (child.type === 'Element' || child.type === 'Element$1') {
@@ -83,9 +91,7 @@ export function hasChildOfType(node, componentName) {
     });
 }
 export function isDBComponent(node, componentName) {
-    const kebabName = componentName
-        .replace(/([a-z])([A-Z])/g, '$1-$2')
-        .toLowerCase();
+    const kebabName = getAngularComponentName(componentName);
     if (isAngularElement(node)) {
         return node.name === componentName || node.name === kebabName;
     }
@@ -126,20 +132,22 @@ export function createAngularVisitors(context, componentName, handler) {
     if (!isAngular) {
         return null;
     }
-    // For DB components, convert DBComponentName -> db-component-name
-    const kebabName = componentName.startsWith('DB')
-        ? 'db-' +
-            componentName
-                .slice(2)
-                .replace(/([a-z])([A-Z])/g, '$1-$2')
-                .toLowerCase()
-        : componentName.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+    const kebabName = getAngularComponentName(componentName);
     const wrappedHandler = (node) => handler(node, parserServices);
     return {
         [`Element[name="${kebabName}"]`]: wrappedHandler,
         [`Element[name="${componentName}"]`]: wrappedHandler
     };
 }
+export function toKebabCase(str) {
+    return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+}
+export function getAngularComponentName(componentName) {
+    // For DB components, convert DBComponentName -> db-component-name
+    return componentName.startsWith('DB')
+        ? 'db-' + toKebabCase(componentName.slice(2))
+        : toKebabCase(componentName);
+}
 export function createAngularFix(context, node, attributeText) {
     const sourceCode = context.sourceCode || context.getSourceCode();
     const text = sourceCode.getText();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/core-eslint-plugin",
-  "version": "4.6.1",
+  "version": "4.7.0-tabs-34782eb",
   "type": "module",
   "description": "ESLint plugin for DB UX Design System components",
   "repository": {
@@ -34,20 +34,20 @@
     "test:update": "vitest run --config vitest.config.ts --update"
   },
   "peerDependencies": {
-    "eslint": "^9.0.0 || ^10.0.0"
+    "eslint": ">=9.0.0"
   },
   "dependencies": {
     "@angular-eslint/utils": "21.3.1",
-    "@typescript-eslint/utils": "^8.58.2"
+    "@typescript-eslint/utils": "^8.59.0"
   },
   "devDependencies": {
     "@angular-eslint/bundled-angular-compiler": "21.3.1",
     "@angular-eslint/template-parser": "21.3.1",
     "@angular-eslint/test-utils": "21.3.1",
-    "@typescript-eslint/parser": "8.58.2",
-    "@typescript-eslint/rule-tester": "8.58.2",
+    "@typescript-eslint/parser": "8.59.0",
+    "@typescript-eslint/rule-tester": "8.59.0",
     "typescript": "5.9.3",
-    "vitest": "4.1.3",
+    "vitest": "4.1.5",
     "vue-eslint-parser": "10.4.0"
   },
   "publishConfig": {