Migrate eslint-plugin-hydrogen from hydrogen 1 to h2

[cartogram]

In version 1 of hydrogen we had an eslint-plugin package that served to provide the following:

1. Common Configurations

These level-set on common ESLint rules to enforce Shopify’s JavaScript best practices, and catch common issues when using Hydrogen. We maintain these so merchants don't need to worry about the undifferentiated setup common to every Hydrogen app. ESLint is a the standard tool for JavaScript and TypeScript, and providing either a base config or plugin is common among almost every other (meta-)framework.

We provide 3 possible configurations:

• The recommended configuration enforces Shopify's JavaScript best practices and includes third-party plugins.

{
  extends: 'plugin:hydrogen/recommended',
}

The Hydrogen configuration excludes suggested third-party plugins, but keeps the custom Hydrogen rules with their suggested defaults.

{
  extends: 'plugin:hydrogen/hydrogen',
}

The TypeScript configuration is a partial set of overrides to augment the recommended or Hydrogen configurations.

{
  extends: ['plugin:hydrogen/recommended', 'plugin:hydrogen/typescript'],
}

2. Custom Rules

We also provided a set of custom rules that only made sense in projects using Hydrogen v1.

• server-component-banned-hooks: Prevents using the useState, useReducer, useEffect, and useLayoutEffect hooks in files that don't end with the .client extension
• client-component-banned-hooks: Prevents using the useQuery hook in files that end with the .client extension
• prefer-image-component: Prevents using the img tag directly and suggests using the Image component from @shopify/hydrogen
• server-no-json-parse: Prevents using JSON.parse in a Hydrogen API route or server component
• prefer-gql: Detects the use of a GraphQL utility other than the one provided by Hydrogen

Moving forward in V2

I suggest we move this package with both the configurations and custom rules into the new H2 repo. We will want to take another look at the configurations now that we are using Remix, and also remove all of the custom rules except prefer-image-component.

Does anyone see a problem with this or see value in taking another direction? Happy to hear any/all feedback 🙂

[frehner]

We probably don't want prefer-image-component anymore, as the <Image/> component from hydrogen-react only works with images from the Storefront API, and not from other places (e.g. the local filesystem, other CDNs, etc.).

[cartogram]

and not from other places (e.g. the local filesystem, other CDNs, etc.)

will this always be true?

[frehner]

For hydrogen-react? Most likely, yes.

For hydrogen? 🤷

[lordofthecactus]

Remix has it's own eslint config:
https://github.com/remix-run/remix/tree/main/packages/remix-eslint-config so not sure if we need to migrate our own.

Are there any specific config rules from hydrogen v1 that we want in hydrogen v2?
A lot of them seem to be hydrogen v1 oriented.

[cartogram]

so not sure if we need to migrate our own

Not sure what you mean here? There might be some aspects of the remix-config we'd want to enable in ours, as with many other 3p configs.

Are there any specific config rules from hydrogen v1 that we want in hydrogen v2?

I'd like to see some rules related to our implementation of SEO, Analytics, etc... I think this will be most beneficial in non-typescript projects.