eslint-plugin-sitecore-jss/dist/rules/enforce-text-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, isFieldString, isTextField } = type_checking_1.default;
exports.default = {
    defaultOptions: [],
    meta: {
        type: "problem",
        docs: {
            description: "Ensure `<Text>` is used instead of raw JSX elements for `Field<string>`",
            recommended: "recommended",
        },
        messages: {
            useTextComponent: "Use `<Text field={{fieldName}} tag='{{tagName}}' />` instead of `{props.fields.title.value}` inside `<{{tagName}}>`. If using `Field<string>`, `<RichText field={{fieldName}} />` is also allowed.",
        },
        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)
                    return;
                const tagName = node.name.name;
                const parentElement = node.parent;
                if (!(parentElement === null || parentElement === void 0 ? void 0 : parentElement.children))
                    return;
                parentElement.children.forEach((child) => {
                    if (child.type === utils_1.AST_NODE_TYPES.JSXExpressionContainer &&
                        child.expression.type === utils_1.AST_NODE_TYPES.MemberExpression) {
                        const tsNode = parserServices.esTreeNodeToTSNodeMap.get(child.expression.object);
                        if (!tsNode)
                            return;
                        const type = getType(tsNode, checker);
                        if (isFieldString(type) || isTextField(type)) {
                            let fieldName = child.expression;
                            while (fieldName.type === utils_1.AST_NODE_TYPES.MemberExpression) {
                                if (fieldName.property.type === utils_1.AST_NODE_TYPES.Identifier &&
                                    fieldName.property.name === "value") {
                                    fieldName = fieldName.object;
                                }
                                else {
                                    break;
                                }
                            }
                            const fieldNameText = context.getSourceCode().getText(fieldName);
                            context.report({
                                node,
                                messageId: "useTextComponent",
                                data: { tagName, fieldName: fieldNameText },
                                fix(fixer) {
                                    return fixer.replaceText(parentElement, `<Text field={${fieldNameText}} tag="${tagName}" />`);
                                },
                            });
                        }
                    }
                });
            },
        };
    },
};
//# sourceMappingURL=enforce-text-component.js.map