eslint-plugin-sitecore-jss/dist/rules/enforce-image-component.js

An ESLint plugin to enforce correct usage of Sitecore JSS components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const utils_1 = require("@typescript-eslint/utils");
const type_checking_1 = __importDefault(require("./utils/type-checking"));
const { getType, isImageField } = type_checking_1.default;
exports.default = {
    defaultOptions: [],
    meta: {
        type: "problem",
        docs: {
            description: "Ensure `<Image>` is used instead of raw `<img>` for `ImageField`",
            recommended: "recommended",
        },
        messages: {
            useImageComponent: "Use `<Image field={{fieldName}} />` instead of `<img>`. Ensure you are using `ImageField` correctly.",
        },
        fixable: "code",
        schema: [],
    },
    create(context) {
        const parserServices = utils_1.ESLintUtils.getParserServices(context);
        if (!parserServices || !parserServices.program)
            return {};
        const checker = parserServices.program.getTypeChecker();
        return {
            JSXOpeningElement(node) {
                if (node.name.type !== utils_1.AST_NODE_TYPES.JSXIdentifier ||
                    node.name.name !== "img")
                    return;
                const srcAttribute = node.attributes.find((attr) => attr.type === utils_1.AST_NODE_TYPES.JSXAttribute &&
                    attr.name.type === utils_1.AST_NODE_TYPES.JSXIdentifier &&
                    attr.name.name === "src");
                if (!(srcAttribute === null || srcAttribute === void 0 ? void 0 : srcAttribute.value) ||
                    srcAttribute.value.type !== utils_1.AST_NODE_TYPES.JSXExpressionContainer)
                    return;
                const expression = srcAttribute.value.expression;
                if (expression.type !== utils_1.AST_NODE_TYPES.MemberExpression)
                    return;
                const tsNode = parserServices.esTreeNodeToTSNodeMap.get(expression.object);
                if (!tsNode)
                    return;
                const type = getType(tsNode, checker);
                if (isImageField(type)) {
                    let fieldName = expression;
                    while (fieldName.type === utils_1.AST_NODE_TYPES.MemberExpression) {
                        if (fieldName.property.type === utils_1.AST_NODE_TYPES.Identifier &&
                            ["value", "src"].includes(fieldName.property.name)) {
                            fieldName = fieldName.object;
                        }
                        else {
                            break;
                        }
                    }
                    const fieldNameText = context.getSourceCode().getText(fieldName);
                    const parentElement = node.parent;
                    context.report({
                        node,
                        messageId: "useImageComponent",
                        data: { fieldName: fieldNameText },
                        fix(fixer) {
                            return fixer.replaceText(parentElement, `<Image field={${fieldNameText}} />`);
                        },
                    });
                }
                else {
                    console.warn("⚠️ Type is not ImageField, skipping.");
                }
            },
        };
    },
};
//# sourceMappingURL=enforce-image-component.js.map