@shopify/shop-minis-react/eslint/rules/prefer-sdk-components.cjs

React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)

/**
 * ESLint rule to prefer SDK components over native HTML elements
 * @fileoverview Enforce using Shop Minis SDK components instead of native HTML
 */

module.exports = {
  meta: {
    type: 'suggestion',
    docs: {
      description:
        'Prefer Shop Minis SDK components over native HTML elements for better functionality and styling',
      category: 'Best Practices',
      recommended: true,
    },
    messages: {
      preferSdkComponent:
        'Use <{{sdkComponent}}> from @shopify/shop-minis-react instead of <{{nativeElement}}>. The SDK component provides optimized performance, consistent styling, and additional features.',
      preferButtonComponent:
        'Use <Button> or <Touchable> from @shopify/shop-minis-react instead of <button>. These SDK components provide optimized performance, consistent styling, and additional features.',
    },
    schema: [
      {
        type: 'object',
        properties: {
          components: {
            type: 'object',
            description: 'Map of native elements to SDK components',
            additionalProperties: {
              type: 'string',
            },
          },
        },
        additionalProperties: false,
      },
    ],
  },

  create(context) {
    // Default component mappings
    const defaultComponents = {
      img: 'Image',
      button: 'Button',
      label: 'Label',
      // Future additions will go here:
      // input: 'Input',
      // a: 'Link',
    }

    // Get user configuration or use defaults
    const options = context.options[0] || {}
    const componentMap = {
      ...defaultComponents,
      ...(options.components || {}),
    }

    return {
      JSXOpeningElement(node) {
        const elementName = node.name.name

        // Check if this is a native element we want to replace
        if (componentMap[elementName]) {
          const sdkComponent = componentMap[elementName]

          // Use custom message for button element since it has multiple SDK options
          if (elementName === 'button') {
            context.report({
              node,
              messageId: 'preferButtonComponent',
            })
          } else {
            context.report({
              node,
              messageId: 'preferSdkComponent',
              data: {
                nativeElement: elementName,
                sdkComponent,
              },
            })
          }
        }
      },
    }
  },
}