6cb797a074
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
247 lines
6.4 KiB
JavaScript
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.',
|
|
},
|
|
],
|
|
},
|
|
},
|
|
],
|
|
}
|