tldraw/.eslintrc.js
alex 6cb797a074
Better generated docs for react components (#3930)
Before:
![Screenshot 2024-06-12 at 12 57
26](https://github.com/tldraw/tldraw/assets/1489520/2a9f6098-ef2a-4f52-88f5-d6e4311c067d)

After:
![Screenshot 2024-06-12 at 12 59
16](https://github.com/tldraw/tldraw/assets/1489520/51733c2a-a2b4-4084-a89a-85bce5b47672)

React components in docs now list their props, and appear under a new
"Component" section instead of randomly under either `Function` or
`Variable`. In order to have our docs generate this, a few criteria need
to be met:
1. They need to be tagged with the `@react` tsdoc tag
2. Their props need to be a simple type alias, typically to an
interface.

Both of these rules are enforced with a new lint rule - any component
tagged as `@public` will have these rules enforced.

### Change Type

- [x] `docs` — Changes to the documentation, examples, or templates.
- [x] `improvement` — Improving existing features
2024-06-13 13:09:27 +00:00

247 lines
6.4 KiB
JavaScript

module.exports = {
extends: [
'prettier',
'eslint:recommended',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'plugin:@next/next/core-web-vitals',
],
ignorePatterns: [],
plugins: [
'@typescript-eslint',
'no-only-tests',
'import',
'local',
'@next/next',
'react',
'react-hooks',
'deprecation',
],
settings: {
next: {
rootDir: ['apps/*/', 'packages/*/'],
},
},
rules: {
'deprecation/deprecation': 'error',
'@next/next/no-html-link-for-pages': 'off',
'no-non-null-assertion': 'off',
'no-fallthrough': 'off',
'react/jsx-no-target-blank': 'error',
'react/react-in-jsx-scope': 'off',
'@typescript-eslint/no-fallthrough': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
'react/display-name': 'off',
'@next/next/no-img-element': 'off',
'react/prop-types': 'off',
'@typescript-eslint/no-extra-semi': 'off',
'no-mixed-spaces-and-tabs': 'off',
'@typescript-eslint/no-unused-vars': [
'error',
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
caughtErrorsIgnorePattern: '^_',
},
],
'no-throw-literal': 'error',
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'error',
'import/no-extraneous-dependencies': 'error',
'@typescript-eslint/consistent-type-exports': [
'error',
{ fixMixedExportsWithInlineTypeSpecifier: true },
],
'local/no-export-star': 'error',
'local/no-internal-imports': 'error',
'local/tagged-components': 'error',
'no-only-tests/no-only-tests': 'error',
'no-restricted-syntax': [
'error',
{ selector: "MethodDefinition[kind='set']", message: 'Property setters are not allowed' },
{ selector: "MethodDefinition[kind='get']", message: 'Property getters are not allowed' },
{
selector: 'Identifier[name=localStorage]',
message: 'Use the getFromLocalStorage/setInLocalStorage helpers instead',
},
{
selector: 'Identifier[name=sessionStorage]',
message: 'Use the getFromSessionStorage/setInSessionStorage helpers instead',
},
],
'no-restricted-globals': [
'error',
{ name: 'structuredClone', message: 'Use structuredClone from @tldraw/util instead' },
],
'@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
},
parser: '@typescript-eslint/parser',
parserOptions: {
project: true,
},
overrides: [
{
// enable the rule specifically for TypeScript files
files: ['*.ts', '*.tsx'],
rules: {
'@typescript-eslint/explicit-module-boundary-types': [0],
'no-console': ['error', { allow: ['warn', 'error'] }],
},
},
{
files: ['packages/editor/**/*', 'packages/tldraw/**/*', 'packages/utils/**/*'],
rules: {
'no-restricted-globals': [
'error',
{
name: 'fetch',
message: 'Use the fetch from @tldraw/util instead.',
},
{
name: 'Image',
message: 'Use the Image from @tldraw/util instead.',
},
{
name: 'setTimeout',
message: 'Use the timers from editor.timers instead.',
},
{
name: 'setInterval',
message: 'Use the timers from editor.timers instead.',
},
{
name: 'requestAnimationFrame',
message: 'Use the timers from editor.timers instead.',
},
{ name: 'structuredClone', message: 'Use structuredClone from @tldraw/util instead' },
],
'no-restricted-properties': [
'error',
{
object: 'window',
property: 'fetch',
message: 'Use the fetch from @tldraw/util instead.',
},
{
object: 'window',
property: 'Image',
message: 'Use the Image from @tldraw/util instead.',
},
{
object: 'window',
property: 'setTimeout',
message: 'Use the timers from editor.timers instead.',
},
{
object: 'window',
property: 'setInterval',
message: 'Use the timers from editor.timers instead.',
},
{
object: 'window',
property: 'requestAnimationFrame',
message: 'Use the timers from editor.timers instead.',
},
],
'no-restricted-syntax': [
'error',
{ selector: "MethodDefinition[kind='set']", message: 'Property setters are not allowed' },
{ selector: "MethodDefinition[kind='get']", message: 'Property getters are not allowed' },
{
selector: 'Identifier[name=localStorage]',
message: 'Use the getFromLocalStorage/setInLocalStorage helpers instead',
},
{
selector: 'Identifier[name=sessionStorage]',
message: 'Use the getFromSessionStorage/setInSessionStorage helpers instead',
},
{
selector:
"JSXElement[openingElement.name.name='img']:not(:has(JSXAttribute[name.name='referrerPolicy']))",
message: 'You must pass `referrerPolicy` when creating an <img>.',
},
],
},
},
// This overrides the default config for the given matching paths.
{
files: ['apps/dotcom/**/*'],
rules: {
'no-restricted-globals': [
'error',
{
name: 'fetch',
message: 'Use the fetch from @tldraw/util instead.',
},
{
name: 'Image',
message: 'Use the Image from @tldraw/util instead.',
},
{ name: 'structuredClone', message: 'Use structuredClone from @tldraw/util instead' },
],
'no-restricted-properties': [
'error',
{
object: 'window',
property: 'fetch',
message: 'Use the fetch from @tldraw/util instead.',
},
{
object: 'window',
property: 'Image',
message: 'Use the Image from @tldraw/util instead.',
},
],
},
},
{
files: ['e2e/**/*'],
rules: {
'@typescript-eslint/no-empty-function': 'off',
},
},
{
files: 'scripts/**/*',
rules: {
'import/no-extraneous-dependencies': 'off',
},
},
{
files: ['*.test.ts', '*.test.tsx', '*.spec.ts'],
rules: {
'no-restricted-properties': 'off',
'no-restricted-globals': 'off',
'react/jsx-key': 'off',
'react/no-string-refs': 'off',
},
},
{
files: ['apps/examples/**/*'],
rules: {
'no-restricted-syntax': 'off',
'local/no-at-internal': 'error',
},
},
{
files: ['apps/huppy/**/*', 'scripts/**/*'],
rules: {
'no-console': 'off',
},
},
{
files: ['apps/dotcom/**/*'],
rules: {
'no-restricted-properties': [
2,
{
object: 'crypto',
property: 'randomUUID',
message: 'Please use the makeUUID util instead.',
},
],
},
},
],
}