# Shop Minis ESLint Plugin

Custom ESLint rules for Shop Minis apps. ESLint is included with the SDK.

## Quick Setup

**Flat Config (eslint.config.js) - Recommended:**

Create **`eslint.config.js`** (NOT `.eslintrc.js`):

```javascript
const shopMinisConfig = require('@shopify/shop-minis-react/eslint/config')

module.exports = [shopMinisConfig]
```

TypeScript and JSX are supported out of the box.

**Traditional Config (.eslintrc.cjs) - Manual Setup:**

Traditional config cannot use `extends` with bundled plugins. Set it up manually:

```javascript
const shopMinisPlugin = require('@shopify/shop-minis-react/eslint')

module.exports = {
  plugins: {
    'shop-minis': shopMinisPlugin,
  },
  rules: {
    'shop-minis/no-internal-imports': 'error',
    'shop-minis/prefer-sdk-components': 'warn',
  },
}
```

> **Tip:** Use flat config (eslint.config.js) for the simplest one-line setup!

## Rules

### `no-internal-imports`

Prevents importing from internal SDK directories.

```tsx
// ❌ Error
import { something } from '@shopify/shop-minis-react/internal'

// ✅ Correct
import { Component } from '@shopify/shop-minis-react'
```

### `prefer-sdk-components`

Suggests using SDK components instead of native HTML elements. **Auto-fixable** with `--fix`.

```tsx
// ❌ Warning
<img src="product.jpg" alt="Product" />

// ✅ Correct
<Image src="product.jpg" alt="Product" />
```

**Auto-fix:**
```bash
# Flat config (eslint.config.js)
npx eslint --fix .

# Traditional config (.eslintrc.cjs)
npx eslint --fix . --ext .ts,.tsx,.js,.jsx
```

## Troubleshooting

**Error: "Property is the wrong type" or "ESLint configuration is invalid"**

**Most common cause:** Wrong file name!

- **Flat config:** File MUST be named `eslint.config.js` (no dot, no "rc")
- **Traditional config:** File MUST be named `.eslintrc.cjs` or `.eslintrc.js` (with dot and rc)

If you have `.eslintrc.js` and trying to use flat config syntax, rename it to `eslint.config.js`.

**Error: "Cannot find plugin 'eslint-plugin-shop-minis'"**

The plugin is bundled with the SDK. Use one of the setups above - don't try to install it separately.

## Extending Rules

To add more component mappings to `prefer-sdk-components`, edit `eslint/rules/prefer-sdk-components.cjs`:

```javascript
const defaultComponents = {
  img: 'Image',
  button: 'Button',  // Add this line
}
```

All consumers automatically get the new mapping. See QUICK-START.md for details.
