@gem-sdk/eslint-plugin

@gem-sdk/eslint-plugin

Shared ESLint rules for all GemPages frontend repositories.

Consolidates every custom rule from web-builder-shopify-app, web-builder, and web-builder-elements into a single publishable npm package. The architecture rules support both React (.tsx) and Vue (.vue) files.

The package name is @gem-sdk/eslint-plugin, so its ESLint plugin prefix is @gem-sdk (scoped packages drop the eslint-plugin- segment). Reference rules as @gem-sdk/<rule> and shareable configs as plugin:@gem-sdk/<config>.

Installation

yarn add -D @gem-sdk/eslint-plugin

Usage

Choose the config that matches your tech stack:

React projects

{
  "extends": ["plugin:@gem-sdk/react"]
}

Vue projects

{
  "extends": ["plugin:@gem-sdk/vue"]
}

All repos (architecture + i18n only)

{
  "extends": ["plugin:@gem-sdk/recommended"]
}

Manual rule selection

{
  "plugins": ["@gem-sdk"],
  "rules": {
    "@gem-sdk/module-structure": "error",
    "@gem-sdk/no-module-barrel": "error",
    "@gem-sdk/module-import-boundary": "error",
    "@gem-sdk/pure-ui-layer": "error",
    "@gem-sdk/module-index-required": "error",
    "@gem-sdk/no-self-module-barrel-import": "error",
    "@gem-sdk/no-t-for-variable": "error",
    "@gem-sdk/no-clickable-div": "warn",
    "@gem-sdk/require-monitoring-capture": "warn",
    "@gem-sdk/not-use-store-to-refs": "error",
    "@gem-sdk/not-use-custom-color-class": "warn",
    "@gem-sdk/no-export-type-from-component": "error",
    "@gem-sdk/no-export-type-from-tsx": "error",
    "@gem-sdk/no-import-from-package-path": "error",
    "@gem-sdk/no-multiple-component-exports": "error"
  }
}

What each config enables

vue and react both extend recommended. Vue configs require vue-eslint-parser.

no-export-type-from-component and no-export-type-from-tsx enforce the same thing (no export type/export interface from a component file) — the former also matches .vue files, the latter is React-only. They're kept separate so each config only reports once per file.

no-import-from-package-path options

Deep-path imports can be exempted with the ignore option, which accepts exact import paths or path prefixes:

{
  "rules": {
    "@gem-sdk/no-import-from-package-path": [
      "error",
      { "ignore": ["@gem-sdk/components/internal/Button"] }
    ]
  }
}

Any import path that matches an entry exactly, or starts with an entry followed by /, is allowed.

no-self-module-barrel-import

Files inside modules/<name>/ must not import their own module through the ~//@/ alias — it mixes entry points across sibling files and creates circular dependencies through the barrel. Use relative paths within a module.

// app/modules/onboarding/components/Step.tsx
import { useOnboardingStore } from '~/modules/onboarding'; // ✗
import { useOnboardingStore } from '../stores/onboarding'; // ✓

no-clickable-div

Click handlers on non-interactive elements (div, span, section, li, or a without href) require tabIndex plus a keydown/keyup handler, otherwise keyboard users can't reach them. Applies to JSX and, under vue-eslint-parser, Vue templates. Elements with spread attributes are skipped.

<div onClick={onViewDemo} />                                        // ✗
<button onClick={onViewDemo} />                                     // ✓
<div role="button" tabIndex={0} onClick={go} onKeyDown={go} />      // ✓

require-monitoring-capture options

Inline react-query onError handlers must call a capture function so failures reach Sentry; handlers passed as identifiers are assumed to capture. Both patterns are configurable:

{
  "rules": {
    "@gem-sdk/require-monitoring-capture": [
      "warn",
      { "hookPattern": "^use(Query|Mutation)$", "capturePattern": "capture|reportError" }
    ]
  }
}

hookPattern matches the hook name (default ^use(Query|Queries|InfiniteQuery|Mutation)$); capturePattern matches the called function or method name, case-insensitively (default capture).