@adyen/eslint-plugin-bento 1.1.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/eslint-plugin-bento",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "Adyen Bento ESLint rules",
   "main": "index.js",
   "files": [
@@ -18,10 +18,17 @@
     "url": "git@github.com:Adyen/bento.git"
   },
   "license": "MIT",
+  "dependencies": {
+    "jscodeshift": "17.1.2"
+  },
   "devDependencies": {
-    "@vitest/coverage-v8": "2.1.4",
+    "@types/estree": "1.0.6",
+    "@types/node": "20.17.24",
+    "@types/eslint": "8.56.12",
+    "@vitest/coverage-v8": "2.1.9",
     "eslint": "8.57.1",
-    "vitest": "2.1.4",
+    "vitest": "2.1.9",
+    "eslint-plugin-vue": "9.25.0",
     "vue-eslint-parser": "9.3.2"
   },
   "peerDependencies": {

package/rules/deprecation-currency-default-slot/deprecation-currency-default-slot.integration.test.ts

@@ -30,7 +30,7 @@ describe('@adyen/bento/deprecation-currency-default-slot', () => {
             nodeType: 'VElement',
             endLine: 4,
             endColumn: 22,
-            fix: { range: [30, 101], text: ' :value="`${thisIsMyVariableWithCurrencyValue}`" />' },
+            fix: { range: [30, 101], text: ' :value="thisIsMyVariableWithCurrencyValue" />' },
         });
     });
 });

package/rules/deprecation-currency-default-slot/deprecation-currency-default-slot.js

@@ -1,6 +1,15 @@
+/**
+ * @typedef {import('eslint').Rule.RuleContext} RuleContext
+ */
+
+/**
+ * @typedef {import('eslint-plugin-vue/lib/utils').RuleModule} RuleModule
+ */
+
 const VueUtils = require('eslint-plugin-vue/lib/utils');
 const { componentSlotMigration } = require('../../utils/component-slot-migration');
 
+/** @type {RuleModule} */
 module.exports = {
     meta: {
         type: 'suggestion',
@@ -16,8 +25,11 @@ module.exports = {
         fixable: 'code',
         schema: [], // No options are needed for this rule
     },
+
+    /** @param {RuleContext} context */
     create(context) {
         const sourceCode = context.getSourceCode();
+
         const template =
             sourceCode.parserServices.getTemplateBodyTokenStore &&
             sourceCode.parserServices.getTemplateBodyTokenStore();

package/rules/deprecation-currency-default-slot/deprecation-currency-default-slot.test.ts

@@ -31,10 +31,10 @@ describe('@adyen/bento/deprecation-currency-default-slot should suggest the usag
                 filename: 'test.vue',
                 code: `
                 <template>
-                    <bento-currency 
-                        :value="thisIsMyVariableWithCurrencyValue" 
-                        :currency="BentoCurrencyISOCode.USD" 
-                        major-units 
+                    <bento-currency
+                        :value="thisIsMyVariableWithCurrencyValue"
+                        :currency="BentoCurrencyISOCode.USD"
+                        major-units
                     />
                 </template>
                 `,
@@ -57,6 +57,23 @@ describe('@adyen/bento/deprecation-currency-default-slot should suggest the usag
                     `,
                 errors: [{ message: '"default" slot is deprecated in favor of the "value" property' }],
             },
+            {
+                name: 'BentoCurrency with CallExpression child',
+                code: `
+                    <template>
+                        <bento-currency :currency="BentoCurrencyISOCode.EUR" major-units
+                            >{{ myFunction(valueRefs, EnumValues.EURO_AMOUNT) }}
+                        </bento-currency>
+                    </template>
+                    `,
+                output: `
+                    <template>
+                        <bento-currency :currency="BentoCurrencyISOCode.EUR" major-units
+                             :value="myFunction(valueRefs, EnumValues.EURO_AMOUNT)" />
+                    </template>
+                    `,
+                errors: [{ message: '"default" slot is deprecated in favor of the "value" property' }],
+            },
             {
                 name: 'BentoCurrency with VText child and no attributes',
                 code: `
@@ -75,6 +92,22 @@ describe('@adyen/bento/deprecation-currency-default-slot should suggest the usag
             },
             {
                 name: 'BentoCurrency with property as child',
+                code: `
+                        <template>
+                            <bento-currency :key="item.thisIsMyVariableWithCurrencyValue" :currency="BentoCurrencyISOCode.EUR" major-units>
+                                {{ item.thisIsMyVariableWithCurrencyValue }}
+                            </bento-currency>
+                        </template>
+                        `,
+                output: `
+                        <template>
+                            <bento-currency :key="item.thisIsMyVariableWithCurrencyValue" :currency="BentoCurrencyISOCode.EUR" major-units :value="item.thisIsMyVariableWithCurrencyValue" />
+                        </template>
+                        `,
+                errors: [{ message: '"default" slot is deprecated in favor of the "value" property' }],
+            },
+            {
+                name: 'BentoCurrency with simple property as child',
                 code: `
                         <template>
                             <bento-currency>
@@ -84,7 +117,7 @@ describe('@adyen/bento/deprecation-currency-default-slot should suggest the usag
                         `,
                 output: `
                         <template>
-                            <bento-currency :value="\`\${thisIsMyVariableWithCurrencyValue}\`" />
+                            <bento-currency :value="thisIsMyVariableWithCurrencyValue" />
                         </template>
                         `,
                 errors: [{ message: '"default" slot is deprecated in favor of the "value" property' }],

package/rules/deprecation-tag-default-slot/deprecation-tag-default-slot.js

@@ -1,6 +1,15 @@
+/**
+ * @typedef {import('eslint').Rule.RuleContext} RuleContext
+ */
+
+/**
+ * @typedef {import('eslint-plugin-vue/lib/utils').RuleModule} RuleModule
+ */
+
 const VueUtils = require('eslint-plugin-vue/lib/utils');
 const { componentSlotMigration } = require('../../utils/component-slot-migration');
 
+/** @type {RuleModule} */
 module.exports = {
     meta: {
         type: 'suggestion',
@@ -16,6 +25,8 @@ module.exports = {
         fixable: 'code',
         schema: [], // No options are needed for this rule
     },
+
+    /** @param {RuleContext} context */
     create(context) {
         const sourceCode = context.getSourceCode();
         const template =

package/rules/deprecation-tag-default-slot/deprecation-tag-default-slot.test.ts

@@ -78,12 +78,11 @@ describe('@adyen/bento/deprecation-tag-default-slot should suggest the usage of
                         `,
                 output: `
                         <template>
-                            <bento-tag :label="\`\${thisIsMyVariableWithText}\`" />
+                            <bento-tag :label="thisIsMyVariableWithText" />
                         </template>
                         `,
                 errors: [{ message: '"default" slot is deprecated in favor of the "label" property' }],
             },
-
             {
                 name: 'BentoTag with text and property as child',
                 code: `
@@ -100,6 +99,38 @@ describe('@adyen/bento/deprecation-tag-default-slot should suggest the usage of
                         `,
                 errors: [{ message: '"default" slot is deprecated in favor of the "label" property' }],
             },
+            {
+                name: 'BentoTag with text and expression with a call',
+                code: `
+                        <template>
+                            <bento-tag>
+                                Value: {{ thisIsAValue() }}
+                            </bento-tag>
+                        </template>
+                        `,
+                output: `
+                        <template>
+                            <bento-tag :label="\`Value: \${thisIsAValue()}\`" />
+                        </template>
+                        `,
+                errors: [{ message: '"default" slot is deprecated in favor of the "label" property' }],
+            },
+            {
+                name: 'BentoTag with multiple expressions',
+                code: `
+                        <template>
+                            <bento-tag>
+                                {{ expression }} {{ thisIsAValue() }}
+                            </bento-tag>
+                        </template>
+                        `,
+                output: `
+                        <template>
+                            <bento-tag :label="\`\${expression} \${thisIsAValue()}\`" />
+                        </template>
+                        `,
+                errors: [{ message: '"default" slot is deprecated in favor of the "label" property' }],
+            },
         ],
     });
 });

package/rules/vue-old-spacer-tokens/vue-old-spacer-tokens.js

@@ -1,3 +1,16 @@
+/**
+ * @typedef {import('eslint').Rule.RuleContext} RuleContext
+ */
+/**
+ * @typedef {import('estree').Node} Node
+ */
+/**
+ * @typedef {import('vue-eslint-parser/ast').VLiteral} VLiteral
+ */
+/**
+ * @typedef {import('eslint-plugin-vue/lib/utils').RuleModule} RuleModule
+ */
+
 const VueUtils = require('eslint-plugin-vue/lib/utils');
 
 // Mappings for the classes that can to be replaced
@@ -15,6 +28,7 @@ const CLASS_MAP = {
     '64': '140',
 };
 
+/** @type {RuleModule} */
 module.exports = {
     meta: {
         type: 'suggestion', // The type can be "problem", "suggestion", or "layout"
@@ -30,16 +44,17 @@ module.exports = {
         fixable: 'code',
         schema: [], // No options are needed for this rule
     },
+    /** @param {RuleContext} context */
     create(context) {
         return VueUtils.defineTemplateBodyVisitor(context, {
-            VLiteral: node => {
+            VLiteral: (/** @type {any} */ node) => {
                 if (typeof node.value === 'string') {
                     let hasReplacements = false;
-                    const classList = node.value;
+                    const classList = /** @type {VLiteral['value']} */ node.value;
 
                     const fixed = classList
                         .split(' ')
-                        .map(cssClass => {
+                        .map((/** @type {VLiteral['value']} */ cssClass) => {
                             // Check if the class list has "padding" or "margin" utilities
                             const regexPaddingMargin = /\bu-(padding|margin)\b/g;
                             if (regexPaddingMargin.test(cssClass)) {

package/utils/component-slot-migration.js

@@ -1,61 +1,117 @@
+const j = require('jscodeshift');
+
+/**
+ * @typedef {import('eslint').Rule.RuleContext} RuleContext
+ * @typedef {import('eslint').AST.Token} Token
+ */
+
 /**
- * Generates a report with a fix to those VElements containing a deprecated default slot.
- *
- * It moves the content of the "default" slot into a prop with the "propertyName" value.
- *
- * @param props Contains the name of the property by which it will be replace and the context
+ * @typedef {import('vue-eslint-parser/ast').VText} VText
+ * @typedef {import('vue-eslint-parser/ast').VExpressionContainer} VExpressionContainer
  */
-export function componentSlotMigration({ propertyName, context, template, alwaysExpression = false }) {
-    return node => {
-        if (!node.children.length) {
-            return;
-        }
-
-        // Turned true if one of the children is an expression
-        let hasExpression = false;
-
-        const transformNodeToText = ({ value, type, expression }) => {
-            if (type === 'VText') {
-                return value;
+
+/**
+ * @typedef { { propertyName: string, context: RuleContext, template: any, alwaysExpression?: boolean } } ComponentSlotMigrationProps
+ * @typedef { (node: any) => void } ComponentSlotMigrationReturn
+ */
+
+module.exports = {
+    /**
+     * Generates a report with a fix to those VElements containing a deprecated default slot.
+     *
+     * It moves the content of the "default" slot into a prop with the "propertyName" value.
+     *
+     * @param {ComponentSlotMigrationProps} props Contains the name of the property by which it will be replace and the context
+     * @returns {ComponentSlotMigrationReturn}
+     */
+    componentSlotMigration({ propertyName, context, template, alwaysExpression = false }) {
+        return node => {
+            if (!node.children.length) {
+                return;
             }
 
-            if (type === 'VExpressionContainer') {
-                hasExpression = true;
+            // Turned true if one of the children is an expression
+            let hasExpression = false;
+
+            /**
+             * @param {VText | VExpressionContainer } node
+             * @param {boolean} wrapStringLiteral
+             * @returns {string | undefined}
+             */
+            function transformNodeToText(node, wrapStringLiteral = false) {
+                if (node.type === 'VText') {
+                    return node.value;
+                }
 
-                return `\${${expression.name}}`;
+                if (node.type === 'VExpressionContainer') {
+                    hasExpression = true;
+                    if (['CallExpression', 'MemberExpression', 'Identifier'].includes(node.expression?.type || '')) {
+                        const expression = j(node.expression).toSource();
+                        return wrapStringLiteral ? `\${${expression}}` : expression;
+                    }
+                }
             }
-        };
 
-        // Opening tag closing brace ">"
-        const closingBrace = template.getLastToken(node.startTag);
-        // Get all content and concat
-        const slotContent = node.children
-            // .map(({ value }) => value)
-            .map(transformNodeToText)
-            .join('')
-            .trim();
-
-        const attributeFormat = () => {
-            if (alwaysExpression) {
-                return `:${propertyName}`;
+            /**
+             * @param { VText | VExpressionContainer } node
+             * @returns {boolean}
+             */
+            function removeEmptyVTextNodes(node) {
+                if (node.type === 'VText') {
+                    return !!node.value.trim().length;
+                }
+
+                return true;
             }
 
-            return hasExpression ? `:${propertyName}` : propertyName;
-        };
+            // Opening tag closing brace ">"
+            /** @type {Token} */
+            const closingBrace = template.getLastToken(node.startTag);
+
+            // Remove empty nodes
+            /** @type { Array<VText | VExpressionContainer> } */
+            const filteredNodes = node.children.filter(removeEmptyVTextNodes);
+
+            // Get all content and concat
+            const slotContent = (() => {
+                if (filteredNodes.length === 1) {
+                    return transformNodeToText(filteredNodes[0])?.trim();
+                }
+
+                const content = node.children
+                    .map((/** @type {VText | VExpressionContainer} */ node) => transformNodeToText(node, true))
+                    .join('')
+                    .trim();
+
+                return `\`${content}\``;
+            })();
 
-        context.report({
-            node,
-            loc: node.loc,
-            messageId: 'migrateDefaultSlot',
-            *fix(fixer) {
-                const attribute = attributeFormat();
-                // Add attribute at the end of opening tag
-                const attributeValue = hasExpression ? `\`${slotContent}\`` : slotContent;
-                yield fixer.insertTextBefore(closingBrace, ` ${attribute}="${attributeValue}" /`);
-
-                // Remove everything after the closing brace
-                yield fixer.removeRange([closingBrace.range[0] + 1, node.range[1]]);
-            },
-        });
-    };
-}
+            /**
+             * Formats an attribute name into an expression (:attribute) or a value (attribute)
+             * for the Vue template.
+             * @returns formatted attribute name
+             */
+            function attributeFormat() {
+                if (alwaysExpression) {
+                    return `:${propertyName}`;
+                }
+
+                return hasExpression ? `:${propertyName}` : propertyName;
+            }
+
+            context.report({
+                node,
+                loc: node.loc,
+                messageId: 'migrateDefaultSlot',
+                *fix(fixer) {
+                    const attribute = attributeFormat();
+                    // Add attribute at the end of opening tag
+                    yield fixer.insertTextBefore(closingBrace, ` ${attribute}="${slotContent}" /`);
+
+                    // Remove everything after the closing brace
+                    yield fixer.removeRange([closingBrace.range[0] + 1, node.range[1]]);
+                },
+            });
+        };
+    },
+};