-The latest version under the `canary` tag **(latest commit to master)** is:
+The latest version under the `canary` tag **(latest commit to `main`)** is:
diff --git a/commitlint.config.js b/commitlint.config.js
index 20ac415d9299..e03e6410a01e 100644
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -1,18 +1,9 @@
-const path = require('path');
-const config = require('./package.json');
-const globby = require('globby');
+const workspace = require('./workspace.json');
-const workspaces = config.workspaces.packages.map(ws =>
- path.posix.join(ws, 'package.json'),
+const packages = Object.keys(workspace.projects).map(name =>
+ name.charAt(0) === '@' ? name.split('/')[1] : name,
);
-const packages = globby
- .sync(workspaces, {
- cwd: __dirname,
- })
- .map(pJson => require(path.join(__dirname, pJson)).name)
- .map(name => (name.charAt(0) === '@' ? name.split('/')[1] : name));
-
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
diff --git a/docs/development/CUSTOM_RULES.md b/docs/development/CUSTOM_RULES.md
index 2c235725f5c7..ee220e523a1e 100644
--- a/docs/development/CUSTOM_RULES.md
+++ b/docs/development/CUSTOM_RULES.md
@@ -9,25 +9,44 @@ You should be familiar with [ESLint's developer guide](https://eslint.org/docs/d
:::
As long as you are using `@typescript-eslint/parser` as the `parser` in your ESLint configuration, custom ESLint rules generally work the same way for JavaScript and TypeScript code.
-The main two changes to custom rules writing are:
+The main three changes to custom rules writing are:
+- [Utils Package](#utils-package): we recommend using `@typescript-eslint/experimental-utils` to create custom rules
- [AST Extensions](#ast-extensions): targeting TypeScript-specific syntax in your rule selectors
- [Typed Rules](#typed-rules): using the TypeScript type checker to inform rule logic
-## AST Extensions
+## Utils Package
-`@typescript-eslint/estree` creates AST nodes for TypeScript syntax with names that begin with `TS`, such as `TSInterfaceDeclaration` and `TSTypeAnnotation`.
-These nodes are treated just like any other AST node.
-You can query for them in your rule selectors.
+The `@typescript-eslint/experimental-utils` package acts as a replacement package for `eslint` that exports all the same objects and types, but with typescript-eslint support.
+It also exports common utility functions and constants most custom typescript-eslint rules tend to use.
+
+:::caution
+`@types/eslint` types are based on `@types/estree` and do not recognize typescript-eslint nodes and properties.
+You should generally not need to import from `eslint` when writing custom typescript-eslint rules in TypeScript.
+:::
+
+### `RuleCreator`
-This rule written in JavaScript bans interfaces that start with a lower-case letter:
+The recommended way to create custom ESLint rules that make use of typescript-eslint features and/or syntax is with the `ESLintUtils.RuleCreator` function exported by `@typescript-eslint/experimental-utils`.
-```js
-export const rule = {
+It takes in a function that transforms a rule name into its documentation URL, then returns a function that takes in a rule module object.
+`RuleCreator` will infer the allowed message IDs the rule is allowed to emit from the provided `meta.messages` object.
+
+This rule bans function declarations that start with a lower-case letter:
+
+```ts
+import { ESLintUtils } from '@typescript-eslint/experimental-utils';
+
+const createRule = ESLintUtils.RuleCreator(
+ name => `https://example.com/rule/${name}`,
+);
+
+// Type: RuleModule<"uppercase", ...>
+export const rule = createRule({
create(context) {
return {
- TSInterfaceDeclaration(node) {
- if (/[a-z]/.test(node.id.name[0])) {
+ FunctionDeclaration(node) {
+ if (/^[a-z]/.test(node.id.name)) {
context.report({
messageId: 'uppercase',
node: node.id,
@@ -39,7 +58,8 @@ export const rule = {
meta: {
docs: {
category: 'Best Practices',
- description: 'Interface names should start with an upper-case letter.',
+ description:
+ 'Function declaration names should start with an upper-case letter.',
},
messages: {
uppercase: 'Start this name with an upper-case letter.',
@@ -47,75 +67,74 @@ export const rule = {
type: 'suggestion',
schema: [],
},
-};
+});
```
-### Writing Rules in TypeScript
-
-The `@typescript-eslint/experimental-utils` package acts as a replacement package for `eslint` that exports all the same objects and types, but with typescript-eslint support.
-
-:::caution
-`@types/eslint` types are based on `@types/estree` and do not recognize typescript-eslint nodes and properties.
-You should generally not need to import from `eslint` when writing custom typescript-eslint rules in TypeScript.
-:::
-
-#### Rule Types
-
-`@typescript-eslint/experimental-utils` exports a `RuleModule` interface that allows specifying generics for:
+`RuleCreator` rule creator functions return rules typed as the `RuleModule` interface exported by `@typescript-eslint/experimental-utils`.
+It allows specifying generics for:
- `MessageIds`: a union of string literal message IDs that may be reported
-- `Options`: what options users may configure for the rule
+- `Options`: what options users may configure for the rule (by default, `[]`)
+
+If the rule is able to take in rule options, declare them as a tuple type containing a single object of rule options:
```ts
-import { TSESLint } from '@typescript-eslint/experimental-utils';
+import { ESLintUtils } from '@typescript-eslint/experimental-utils';
-export const rule: TSESLint.RuleModule<'uppercase', []> = {
- create(context /* : ReadonlyAn ESLint parser which leverages TypeScript ESTree to allow for ESLint to lint TypeScript source code.
+An ESLint parser which leverages TypeScript ESTree to allow for ESLint to lint TypeScript source code.
@@ -10,7 +10,7 @@
## Getting Started
-**[You can find our Getting Started docs here](../../docs/getting-started/linting/README.md)**
+**[You can find our Getting Started docs here](../../docs/linting/README.md)**
These docs walk you through setting up ESLint, this parser, and our plugin. If you know what you're doing and just want to quick start, read on...
@@ -41,7 +41,7 @@ The core rules built into ESLint, such as `indent` have no knowledge of such con
Instead, you also need to make use of one more plugins which will add or extend rules with TypeScript-specific features.
-By far the most common case will be installing the [`@typescript-eslint/eslint-plugin`](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin) plugin, but there are also other relevant options available such a [`@typescript-eslint/eslint-plugin-tslint`](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin-tslint).
+By far the most common case will be installing the [`@typescript-eslint/eslint-plugin`](https://github.com/typescript-eslint/typescript-eslint/tree/main/packages/eslint-plugin) plugin, but there are also other relevant options available such a [`@typescript-eslint/eslint-plugin-tslint`](https://github.com/typescript-eslint/typescript-eslint/tree/main/packages/eslint-plugin-tslint).
## Configuration
diff --git a/packages/parser/package.json b/packages/parser/package.json
index 77faaa2a13d5..a73757d0ebf8 100644
--- a/packages/parser/package.json
+++ b/packages/parser/package.json
@@ -1,6 +1,6 @@
{
"name": "@typescript-eslint/parser",
- "version": "5.4.0",
+ "version": "5.5.0",
"description": "An ESLint custom parser which leverages TypeScript ESTree",
"main": "dist/index.js",
"types": "dist/index.d.ts",
@@ -44,14 +44,14 @@
"eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
},
"dependencies": {
- "@typescript-eslint/scope-manager": "5.4.0",
- "@typescript-eslint/types": "5.4.0",
- "@typescript-eslint/typescript-estree": "5.4.0",
+ "@typescript-eslint/scope-manager": "5.5.0",
+ "@typescript-eslint/types": "5.5.0",
+ "@typescript-eslint/typescript-estree": "5.5.0",
"debug": "^4.3.2"
},
"devDependencies": {
"@types/glob": "*",
- "@typescript-eslint/experimental-utils": "5.4.0",
+ "@typescript-eslint/experimental-utils": "5.5.0",
"glob": "*",
"typescript": "*"
},
diff --git a/packages/scope-manager/CHANGELOG.md b/packages/scope-manager/CHANGELOG.md
index d79959c2b011..8e741b1a6ebb 100644
--- a/packages/scope-manager/CHANGELOG.md
+++ b/packages/scope-manager/CHANGELOG.md
@@ -3,6 +3,17 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [5.5.0](https://github.com/typescript-eslint/typescript-eslint/compare/v5.4.0...v5.5.0) (2021-11-29)
+
+
+### Bug Fixes
+
+* **scope-manager:** support static class blocks ([#4211](https://github.com/typescript-eslint/typescript-eslint/issues/4211)) ([f8e9125](https://github.com/typescript-eslint/typescript-eslint/commit/f8e91256e0a721aaa906a5c40a92784da9433b53))
+
+
+
+
+
# [5.4.0](https://github.com/typescript-eslint/typescript-eslint/compare/v5.3.1...v5.4.0) (2021-11-15)
diff --git a/packages/scope-manager/README.md b/packages/scope-manager/README.md
index 5e62019ba877..26d08ac2fd7f 100644
--- a/packages/scope-manager/README.md
+++ b/packages/scope-manager/README.md
@@ -14,7 +14,7 @@ You probably don't want to use it directly.
## Getting Started
-**[You can find our Getting Started docs here](../../docs/getting-started/linting/README.md)**
+**[You can find our Getting Started docs here](../../docs/linting/README.md)**
## Installation
diff --git a/packages/scope-manager/package.json b/packages/scope-manager/package.json
index e5f670a4ecde..bd07f5e19e1d 100644
--- a/packages/scope-manager/package.json
+++ b/packages/scope-manager/package.json
@@ -1,6 +1,6 @@
{
"name": "@typescript-eslint/scope-manager",
- "version": "5.4.0",
+ "version": "5.5.0",
"description": "TypeScript scope analyser for ESLint",
"keywords": [
"eslint",
@@ -39,12 +39,12 @@
"typecheck": "tsc -p tsconfig.json --noEmit"
},
"dependencies": {
- "@typescript-eslint/types": "5.4.0",
- "@typescript-eslint/visitor-keys": "5.4.0"
+ "@typescript-eslint/types": "5.5.0",
+ "@typescript-eslint/visitor-keys": "5.5.0"
},
"devDependencies": {
"@types/glob": "*",
- "@typescript-eslint/typescript-estree": "5.4.0",
+ "@typescript-eslint/typescript-estree": "5.5.0",
"glob": "*",
"jest-specific-snapshot": "*",
"make-dir": "*",
diff --git a/packages/scope-manager/src/ScopeManager.ts b/packages/scope-manager/src/ScopeManager.ts
index 3f360710cb0b..5a53fe6fbf8c 100644
--- a/packages/scope-manager/src/ScopeManager.ts
+++ b/packages/scope-manager/src/ScopeManager.ts
@@ -20,6 +20,7 @@ import {
WithScope,
} from './scope';
import { ClassFieldInitializerScope } from './scope/ClassFieldInitializerScope';
+import { ClassStaticBlockScope } from './scope/ClassStaticBlockScope';
import { Variable } from './variable';
@@ -178,6 +179,15 @@ class ScopeManager {
);
}
+ public nestClassStaticBlockScope(
+ node: ClassStaticBlockScope['block'],
+ ): ClassStaticBlockScope {
+ assert(this.currentScope);
+ return this.nestScope(
+ new ClassStaticBlockScope(this, this.currentScope, node),
+ );
+ }
+
public nestConditionalTypeScope(
node: ConditionalTypeScope['block'],
): ConditionalTypeScope {
diff --git a/packages/scope-manager/src/scope/ClassStaticBlockScope.ts b/packages/scope-manager/src/scope/ClassStaticBlockScope.ts
new file mode 100644
index 000000000000..40a5d54b37cf
--- /dev/null
+++ b/packages/scope-manager/src/scope/ClassStaticBlockScope.ts
@@ -0,0 +1,21 @@
+import { TSESTree } from '@typescript-eslint/types';
+import { Scope } from './Scope';
+import { ScopeBase } from './ScopeBase';
+import { ScopeType } from './ScopeType';
+import { ScopeManager } from '../ScopeManager';
+
+class ClassStaticBlockScope extends ScopeBase<
+ ScopeType.classStaticBlock,
+ TSESTree.Expression,
+ Scope
+> {
+ constructor(
+ scopeManager: ScopeManager,
+ upperScope: ClassStaticBlockScope['upper'],
+ block: ClassStaticBlockScope['block'],
+ ) {
+ super(scopeManager, ScopeType.classStaticBlock, upperScope, block, false);
+ }
+}
+
+export { ClassStaticBlockScope };
diff --git a/packages/scope-manager/src/scope/Scope.ts b/packages/scope-manager/src/scope/Scope.ts
index 966e52a9456a..e6237a09119e 100644
--- a/packages/scope-manager/src/scope/Scope.ts
+++ b/packages/scope-manager/src/scope/Scope.ts
@@ -1,6 +1,7 @@
import { BlockScope } from './BlockScope';
import { CatchScope } from './CatchScope';
import { ClassFieldInitializerScope } from './ClassFieldInitializerScope';
+import { ClassStaticBlockScope } from './ClassStaticBlockScope';
import { ClassScope } from './ClassScope';
import { ConditionalTypeScope } from './ConditionalTypeScope';
import { ForScope } from './ForScope';
@@ -21,6 +22,7 @@ type Scope =
| CatchScope
| ClassScope
| ClassFieldInitializerScope
+ | ClassStaticBlockScope
| ConditionalTypeScope
| ForScope
| FunctionExpressionNameScope
diff --git a/packages/scope-manager/src/scope/ScopeBase.ts b/packages/scope-manager/src/scope/ScopeBase.ts
index 34c9a338b5b1..18196d9cce99 100644
--- a/packages/scope-manager/src/scope/ScopeBase.ts
+++ b/packages/scope-manager/src/scope/ScopeBase.ts
@@ -126,6 +126,7 @@ const generator = createIdGenerator();
type VariableScope = GlobalScope | FunctionScope | ModuleScope | TSModuleScope;
const VARIABLE_SCOPE_TYPES = new Set([
ScopeType.classFieldInitializer,
+ ScopeType.classStaticBlock,
ScopeType.function,
ScopeType.global,
ScopeType.module,
diff --git a/packages/scope-manager/src/scope/ScopeType.ts b/packages/scope-manager/src/scope/ScopeType.ts
index 8a63ffbdea7f..cd8bb1a61bde 100644
--- a/packages/scope-manager/src/scope/ScopeType.ts
+++ b/packages/scope-manager/src/scope/ScopeType.ts
@@ -3,6 +3,7 @@ enum ScopeType {
catch = 'catch',
class = 'class',
classFieldInitializer = 'class-field-initializer',
+ classStaticBlock = 'class-static-block',
conditionalType = 'conditionalType',
for = 'for',
function = 'function',
diff --git a/packages/shared-fixtures/CHANGELOG.md b/packages/shared-fixtures/CHANGELOG.md
index 11566177cce0..d4bb6943fabe 100644
--- a/packages/shared-fixtures/CHANGELOG.md
+++ b/packages/shared-fixtures/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [5.5.0](https://github.com/typescript-eslint/typescript-eslint/compare/v5.4.0...v5.5.0) (2021-11-29)
+
+**Note:** Version bump only for package @typescript-eslint/shared-fixtures
+
+
+
+
+
# [5.4.0](https://github.com/typescript-eslint/typescript-eslint/compare/v5.3.1...v5.4.0) (2021-11-15)
diff --git a/packages/shared-fixtures/package.json b/packages/shared-fixtures/package.json
index 427749abb174..281da3efab4a 100644
--- a/packages/shared-fixtures/package.json
+++ b/packages/shared-fixtures/package.json
@@ -1,5 +1,5 @@
{
"name": "@typescript-eslint/shared-fixtures",
- "version": "5.4.0",
+ "version": "5.5.0",
"private": true
}
diff --git a/packages/types/CHANGELOG.md b/packages/types/CHANGELOG.md
index 1528085b88a0..8fbc3556ff6e 100644
--- a/packages/types/CHANGELOG.md
+++ b/packages/types/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [5.5.0](https://github.com/typescript-eslint/typescript-eslint/compare/v5.4.0...v5.5.0) (2021-11-29)
+
+**Note:** Version bump only for package @typescript-eslint/types
+
+
+
+
+
# [5.4.0](https://github.com/typescript-eslint/typescript-eslint/compare/v5.3.1...v5.4.0) (2021-11-15)
**Note:** Version bump only for package @typescript-eslint/types
diff --git a/packages/types/package.json b/packages/types/package.json
index 89b70fa634d2..918fc8c600d7 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,6 +1,6 @@
{
"name": "@typescript-eslint/types",
- "version": "5.4.0",
+ "version": "5.5.0",
"description": "Types for the TypeScript-ESTree AST spec",
"keywords": [
"eslint",
diff --git a/packages/typescript-estree/CHANGELOG.md b/packages/typescript-estree/CHANGELOG.md
index db35c5bd78e9..713725fdc910 100644
--- a/packages/typescript-estree/CHANGELOG.md
+++ b/packages/typescript-estree/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [5.5.0](https://github.com/typescript-eslint/typescript-eslint/compare/v5.4.0...v5.5.0) (2021-11-29)
+
+**Note:** Version bump only for package @typescript-eslint/typescript-estree
+
+
+
+
+
# [5.4.0](https://github.com/typescript-eslint/typescript-eslint/compare/v5.3.1...v5.4.0) (2021-11-15)
diff --git a/packages/typescript-estree/README.md b/packages/typescript-estree/README.md
index 25eb1e928294..a2827701b269 100644
--- a/packages/typescript-estree/README.md
+++ b/packages/typescript-estree/README.md
@@ -10,7 +10,7 @@
## Getting Started
-**[You can find our Getting Started docs here](../../docs/getting-started/linting/README.md)**
+**[You can find our Getting Started docs here](../../docs/linting/README.md)**
## About
@@ -72,7 +72,7 @@ interface ParseOptions {
* NOTE: this setting does not effect known file types (.js, .jsx, .ts, .tsx, .json) because the
* TypeScript compiler has its own internal handling for known file extensions.
*
- * For the exact behavior, see https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/parser#parseroptionsecmafeaturesjsx
+ * For the exact behavior, see https://github.com/typescript-eslint/typescript-eslint/tree/main/packages/parser#parseroptionsecmafeaturesjsx
*/
jsx?: boolean;
@@ -367,7 +367,7 @@ Please check the current list of open and known issues and ensure the issue has
A couple of years after work on this parser began, the TypeScript Team at Microsoft began [officially supporting TypeScript parsing via Babel](https://blogs.msdn.microsoft.com/typescript/2018/08/27/typescript-and-babel-7/).
-I work closely with the TypeScript Team and we are gradually aligning the AST of this project with the one produced by Babel's parser. To that end, I have created a full test harness to compare the ASTs of the two projects which runs on every PR, please see [the code](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/typescript-estree/tests/ast-alignment) for more details.
+I work closely with the TypeScript Team and we are gradually aligning the AST of this project with the one produced by Babel's parser. To that end, I have created a full test harness to compare the ASTs of the two projects which runs on every PR, please see [the code](https://github.com/typescript-eslint/typescript-eslint/tree/main/packages/typescript-estree/tests/ast-alignment) for more details.
## Debugging
diff --git a/packages/typescript-estree/package.json b/packages/typescript-estree/package.json
index 9a88c15b723a..7003cb12fdc3 100644
--- a/packages/typescript-estree/package.json
+++ b/packages/typescript-estree/package.json
@@ -1,6 +1,6 @@
{
"name": "@typescript-eslint/typescript-estree",
- "version": "5.4.0",
+ "version": "5.5.0",
"description": "A parser that converts TypeScript source code into an ESTree compatible form",
"main": "dist/index.js",
"types": "dist/index.d.ts",
@@ -41,8 +41,8 @@
"typecheck": "tsc -p tsconfig.json --noEmit"
},
"dependencies": {
- "@typescript-eslint/types": "5.4.0",
- "@typescript-eslint/visitor-keys": "5.4.0",
+ "@typescript-eslint/types": "5.5.0",
+ "@typescript-eslint/visitor-keys": "5.5.0",
"debug": "^4.3.2",
"globby": "^11.0.4",
"is-glob": "^4.0.3",
@@ -59,7 +59,7 @@
"@types/is-glob": "*",
"@types/semver": "*",
"@types/tmp": "*",
- "@typescript-eslint/shared-fixtures": "5.4.0",
+ "@typescript-eslint/shared-fixtures": "5.5.0",
"glob": "*",
"jest-specific-snapshot": "*",
"make-dir": "*",
diff --git a/packages/typescript-estree/src/parser-options.ts b/packages/typescript-estree/src/parser-options.ts
index fdd71cc55b55..77af781a2588 100644
--- a/packages/typescript-estree/src/parser-options.ts
+++ b/packages/typescript-estree/src/parser-options.ts
@@ -70,7 +70,7 @@ interface ParseOptions {
* NOTE: this setting does not effect known file types (.js, .jsx, .ts, .tsx, .json) because the
* TypeScript compiler has its own internal handling for known file extensions.
*
- * For the exact behavior, see https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/parser#parseroptionsecmafeaturesjsx
+ * For the exact behavior, see https://github.com/typescript-eslint/typescript-eslint/tree/main/packages/parser#parseroptionsecmafeaturesjsx
*/
jsx?: boolean;
diff --git a/packages/typescript-estree/tests/ast-alignment/utils.ts b/packages/typescript-estree/tests/ast-alignment/utils.ts
index 14a9f3213bcd..186eae71efea 100644
--- a/packages/typescript-estree/tests/ast-alignment/utils.ts
+++ b/packages/typescript-estree/tests/ast-alignment/utils.ts
@@ -263,24 +263,6 @@ export function preprocessBabylonAST(ast: File): any {
Object.keys(node).forEach(key => delete node[key]);
Object.assign(node, typeAnnotation);
},
- /*
- * Babel's AST has no `assertions` property if there are no assertions.
- */
- ImportDeclaration(node) {
- if (!node.assertions) {
- node.assertions = [];
- }
- },
- ExportNamedDeclaration(node) {
- if (!node.assertions) {
- node.assertions = [];
- }
- },
- ExportAllDeclaration(node) {
- if (!node.assertions) {
- node.assertions = [];
- }
- },
},
);
}
diff --git a/packages/visitor-keys/CHANGELOG.md b/packages/visitor-keys/CHANGELOG.md
index ff7812258068..034a16fbc662 100644
--- a/packages/visitor-keys/CHANGELOG.md
+++ b/packages/visitor-keys/CHANGELOG.md
@@ -3,6 +3,17 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [5.5.0](https://github.com/typescript-eslint/typescript-eslint/compare/v5.4.0...v5.5.0) (2021-11-29)
+
+
+### Bug Fixes
+
+* **visitor-keys:** add missing import assertion keys ([#4178](https://github.com/typescript-eslint/typescript-eslint/issues/4178)) ([9c38b7f](https://github.com/typescript-eslint/typescript-eslint/commit/9c38b7f7fc3ce471a8f720c4a2fbce01f3ee12a4))
+
+
+
+
+
# [5.4.0](https://github.com/typescript-eslint/typescript-eslint/compare/v5.3.1...v5.4.0) (2021-11-15)
diff --git a/packages/visitor-keys/package.json b/packages/visitor-keys/package.json
index f10bda2222eb..d1ccf7556f5f 100644
--- a/packages/visitor-keys/package.json
+++ b/packages/visitor-keys/package.json
@@ -1,6 +1,6 @@
{
"name": "@typescript-eslint/visitor-keys",
- "version": "5.4.0",
+ "version": "5.5.0",
"description": "Visitor keys used to help traverse the TypeScript-ESTree AST",
"keywords": [
"eslint",
@@ -38,7 +38,7 @@
"typecheck": "tsc -p tsconfig.json --noEmit"
},
"dependencies": {
- "@typescript-eslint/types": "5.4.0",
+ "@typescript-eslint/types": "5.5.0",
"eslint-visitor-keys": "^3.0.0"
},
"devDependencies": {
diff --git a/packages/visitor-keys/src/visitor-keys.ts b/packages/visitor-keys/src/visitor-keys.ts
index 4f160677e666..85e424308197 100644
--- a/packages/visitor-keys/src/visitor-keys.ts
+++ b/packages/visitor-keys/src/visitor-keys.ts
@@ -19,9 +19,6 @@ const additionalKeys: AdditionalKeys = {
// Stage 3 Import Assertions
ImportAttribute: ['key', 'value'],
- // ES2020
- ImportExpression: ['source'],
-
// Additional Properties.
ArrayPattern: ['decorators', 'elements', 'typeAnnotation'],
ArrowFunctionExpression: ['typeParameters', 'params', 'returnType', 'body'],
@@ -45,9 +42,13 @@ const additionalKeys: AdditionalKeys = {
'implements',
'body',
],
+ ExportAllDeclaration: ['exported', 'source', 'assertions'],
+ ExportNamedDeclaration: ['declaration', 'specifiers', 'source', 'assertions'],
FunctionDeclaration: ['id', 'typeParameters', 'params', 'returnType', 'body'],
FunctionExpression: ['id', 'typeParameters', 'params', 'returnType', 'body'],
Identifier: ['decorators', 'typeAnnotation'],
+ ImportDeclaration: ['specifiers', 'source', 'assertions'],
+ ImportExpression: ['source', 'attributes'],
MethodDefinition: ['decorators', 'key', 'value'],
NewExpression: ['callee', 'typeParameters', 'arguments'],
ObjectPattern: ['decorators', 'properties', 'typeAnnotation'],
diff --git a/packages/website-eslint/CHANGELOG.md b/packages/website-eslint/CHANGELOG.md
new file mode 100644
index 000000000000..55ef091566e5
--- /dev/null
+++ b/packages/website-eslint/CHANGELOG.md
@@ -0,0 +1,8 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [5.5.0](https://github.com/typescript-eslint/typescript-eslint/compare/v5.4.0...v5.5.0) (2021-11-29)
+
+**Note:** Version bump only for package @typescript-eslint/website-eslint
diff --git a/packages/website-eslint/package.json b/packages/website-eslint/package.json
new file mode 100644
index 000000000000..03a3ac2af9fe
--- /dev/null
+++ b/packages/website-eslint/package.json
@@ -0,0 +1,36 @@
+{
+ "name": "@typescript-eslint/website-eslint",
+ "version": "5.5.0",
+ "private": true,
+ "description": "ESLint which works in browsers.",
+ "engines": {
+ "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+ },
+ "types": "types/index.d.ts",
+ "main": "dist/index.js",
+ "files": [
+ "dist"
+ ],
+ "scripts": {
+ "build": "rollup --config=rollup.config.js",
+ "format": "prettier --write \"./**/*.{ts,js,json,md}\" --ignore-path ../../.prettierignore"
+ },
+ "dependencies": {
+ "@typescript-eslint/experimental-utils": "5.5.0",
+ "@typescript-eslint/types": "5.5.0"
+ },
+ "devDependencies": {
+ "@rollup/plugin-commonjs": "^21.0.1",
+ "@rollup/plugin-json": "^4.1.0",
+ "@rollup/plugin-node-resolve": "^13.0.6",
+ "@rollup/pluginutils": "^3.1.0",
+ "@typescript-eslint/eslint-plugin": "5.5.0",
+ "@typescript-eslint/parser": "5.5.0",
+ "@typescript-eslint/scope-manager": "5.5.0",
+ "@typescript-eslint/typescript-estree": "5.5.0",
+ "@typescript-eslint/visitor-keys": "5.5.0",
+ "eslint": "*",
+ "rollup": "^2.59.0",
+ "semver": "^7.3.5"
+ }
+}
diff --git a/packages/website-eslint/project.json b/packages/website-eslint/project.json
new file mode 100644
index 000000000000..ac6ff89fcb81
--- /dev/null
+++ b/packages/website-eslint/project.json
@@ -0,0 +1,5 @@
+{
+ "root": "packages/website-eslint",
+ "type": "library",
+ "implicitDependencies": []
+}
diff --git a/packages/website-eslint/rollup-plugin/replace.js b/packages/website-eslint/rollup-plugin/replace.js
new file mode 100644
index 000000000000..b8f3143c9050
--- /dev/null
+++ b/packages/website-eslint/rollup-plugin/replace.js
@@ -0,0 +1,94 @@
+const path = require('path');
+const Module = require('module');
+const rollupPluginUtils = require('@rollup/pluginutils');
+const MagicString = require('magic-string');
+
+function toAbsolute(id) {
+ return id.startsWith('./') ? path.resolve(id) : require.resolve(id);
+}
+
+function log(opts, message, type = 'info') {
+ if (opts.verbose) {
+ console.log('rollup-plugin-replace > [' + type + ']', message);
+ }
+}
+
+function createMatcher(it) {
+ if (typeof it === 'function') {
+ return it;
+ } else {
+ return rollupPluginUtils.createFilter(it);
+ }
+}
+
+module.exports = (options = {}) => {
+ const aliasesCache = new Map();
+ const aliases = (options.alias || []).map(item => {
+ return {
+ match: item.match,
+ matcher: createMatcher(item.match),
+ target: item.target,
+ absoluteTarget: toAbsolute(item.target),
+ };
+ });
+ const replaces = (options.replace || []).map(item => {
+ return {
+ match: item.match,
+ test: item.test,
+ replace:
+ typeof item.replace === 'string' ? () => item.replace : item.replace,
+
+ matcher: createMatcher(item.match),
+ };
+ });
+
+ return {
+ name: 'rollup-plugin-replace',
+ resolveId(id, importerPath) {
+ const importeePath =
+ id.startsWith('./') || id.startsWith('../')
+ ? Module.createRequire(importerPath).resolve(id)
+ : id;
+
+ let result = aliasesCache.get(importeePath);
+ if (result) {
+ return result;
+ }
+
+ result = aliases.find(item => item.matcher(importeePath));
+ if (result) {
+ aliasesCache.set(importeePath, result.absoluteTarget);
+ log(options, `${importeePath} as ${result.target}`, 'resolve');
+ return result.absoluteTarget;
+ }
+
+ return null;
+ },
+ transform(code, id) {
+ let hasReplacements = false;
+ let magicString = new MagicString(code);
+
+ replaces.forEach(item => {
+ if (item.matcher && !item.matcher(id)) {
+ return;
+ }
+
+ let match = item.test.exec(code);
+ let start, end;
+ while (match) {
+ hasReplacements = true;
+ start = match.index;
+ end = start + match[0].length;
+ magicString.overwrite(start, end, item.replace(match));
+ match = item.test.global ? item.test.exec(code) : null;
+ }
+ });
+
+ if (!hasReplacements) {
+ return;
+ }
+ log(options, id, 'replace');
+ return { code: magicString.toString() };
+ },
+ };
+};
diff --git a/packages/website-eslint/rollup.config.js b/packages/website-eslint/rollup.config.js
new file mode 100644
index 000000000000..f1edc2885126
--- /dev/null
+++ b/packages/website-eslint/rollup.config.js
@@ -0,0 +1,103 @@
+import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
+import resolve from '@rollup/plugin-node-resolve';
+const replace = require('./rollup-plugin/replace');
+
+module.exports = {
+ input: 'src/linter/linter.js',
+ output: {
+ format: 'amd',
+ interop: 'auto',
+ freeze: false,
+ file: 'dist/index.js',
+ },
+ external: ['vs/language/typescript/tsWorker'],
+ plugins: [
+ replace({
+ // verbose: true,
+ alias: [
+ {
+ // those files should be omitted, we do not want them to be exposed to web
+ match: [
+ /eslint\/lib\/(rule-tester|eslint|cli-engine|init)\//u,
+ /eslint\/lib\/cli\.js$/,
+ /experimental-utils\/dist\/eslint-utils\/RuleTester\.js$/,
+ /experimental-utils\/dist\/ts-eslint\/CLIEngine\.js$/,
+ /experimental-utils\/dist\/ts-eslint\/RuleTester\.js$/,
+ /typescript-estree\/dist\/create-program\/createWatchProgram\.js/,
+ /typescript-estree\/dist\/create-program\/createProjectProgram\.js/,
+ /typescript-estree\/dist\/create-program\/createIsolatedProgram\.js/,
+ /experimental-utils\/dist\/ts-eslint\/ESLint\.js/,
+ // 'eslint/lib/shared/ajv.js',
+ // 'eslint/lib/shared/runtime-info.js',
+ ],
+ target: './src/mock/empty.js',
+ },
+ {
+ // use window.ts instead of bundling typescript
+ match: /typescript$/u,
+ target: './src/mock/typescript.js',
+ },
+ {
+ // assert for web
+ match: /^assert$/u,
+ target: './src/mock/assert.js',
+ },
+ {
+ // path for web
+ match: /^path$/u,
+ target: './src/mock/path.js',
+ },
+ {
+ // util for web
+ match: /^util$/u,
+ target: './src/mock/util.js',
+ },
+ {
+ // semver simplified, solve issue with circular dependencies
+ match: /semver$/u,
+ target: './src/mock/semver.js',
+ },
+ ],
+ replace: [
+ {
+ // we do not want dynamic imports
+ match: /eslint\/lib\/linter\/rules\.js$/u,
+ test: /require\(this\._rules\[ruleId\]\)/u,
+ replace: 'null',
+ },
+ {
+ // esquery has both browser and node versions, we are bundling browser version that has different export
+ test: /esquery\.parse\(/u,
+ replace: 'esquery.default.parse(',
+ },
+ {
+ // esquery has both browser and node versions, we are bundling browser version that has different export
+ test: /esquery\.matches\(/u,
+ replace: 'esquery.default.matches(',
+ },
+ {
+ // replace all process.env.NODE_DEBUG with false
+ test: /process\.env\.NODE_DEBUG/u,
+ replace: 'false',
+ },
+ {
+ // replace all process.env.TIMING with false
+ test: /process\.env\.TIMING/u,
+ replace: 'false',
+ },
+ {
+ // replace all process.env.IGNORE_TEST_WIN32 with true
+ test: /process\.env\.IGNORE_TEST_WIN32/u,
+ replace: 'true',
+ },
+ ],
+ }),
+ resolve({
+ browser: true,
+ preferBuiltins: false,
+ }),
+ commonjs(),
+ json({ preferConst: true }),
+ ],
+};
diff --git a/packages/website-eslint/src/linter/CompilerHost.js b/packages/website-eslint/src/linter/CompilerHost.js
new file mode 100644
index 000000000000..2b7fdec25d07
--- /dev/null
+++ b/packages/website-eslint/src/linter/CompilerHost.js
@@ -0,0 +1,48 @@
+import { getDefaultLibFileName } from 'typescript';
+
+export class CompilerHost {
+ constructor(files, sourceFiles) {
+ this.files = files;
+ this.sourceFiles = sourceFiles;
+ }
+
+ fileExists(name) {
+ return !!this.files[name];
+ }
+
+ getCanonicalFileName(name) {
+ return name;
+ }
+
+ getCurrentDirectory() {
+ return '/';
+ }
+
+ getDirectories() {
+ return [];
+ }
+
+ getDefaultLibFileName(options) {
+ return '/' + getDefaultLibFileName(options);
+ }
+
+ getNewLine() {
+ return '\n';
+ }
+
+ useCaseSensitiveFileNames() {
+ return true;
+ }
+
+ writeFile() {
+ return null;
+ }
+
+ readFile(name) {
+ return this.files[name];
+ }
+
+ getSourceFile(name) {
+ return this.sourceFiles[name];
+ }
+}
diff --git a/packages/website-eslint/src/linter/config.js b/packages/website-eslint/src/linter/config.js
new file mode 100644
index 000000000000..06e9ec28b3e7
--- /dev/null
+++ b/packages/website-eslint/src/linter/config.js
@@ -0,0 +1,24 @@
+export const extra = {
+ code: '',
+ comment: true,
+ comments: [],
+ createDefaultProgram: false,
+ debugLevel: new Set(),
+ errorOnTypeScriptSyntacticAndSemanticIssues: false,
+ errorOnUnknownASTType: false,
+ extraFileExtensions: [],
+ filePath: '',
+ jsx: false,
+ loc: true,
+ log: console.log,
+ preserveNodeMaps: true,
+ projects: [],
+ range: true,
+ strict: false,
+ tokens: [],
+ tsconfigRootDir: '/',
+ EXPERIMENTAL_useSourceOfProjectReferenceRedirect: false,
+ singleRun: false,
+ programs: null,
+ moduleResolver: '',
+};
diff --git a/packages/website-eslint/src/linter/create-ast-program.js b/packages/website-eslint/src/linter/create-ast-program.js
new file mode 100644
index 000000000000..ea0444fd2491
--- /dev/null
+++ b/packages/website-eslint/src/linter/create-ast-program.js
@@ -0,0 +1,44 @@
+import {
+ createProgram,
+ createSourceFile,
+ ScriptTarget,
+ ScriptKind,
+ JsxEmit,
+ ModuleKind,
+} from 'typescript';
+import { CompilerHost } from './CompilerHost';
+
+export function createASTProgram(code, parserOptions) {
+ const isJsx = !!parserOptions?.ecmaFeatures?.jsx;
+ const fileName = isJsx ? '/demo.tsx' : '/demo.ts';
+ const files = {
+ [fileName]: code,
+ };
+ const sourceFiles = {
+ [fileName]: createSourceFile(
+ fileName,
+ code,
+ ScriptTarget.Latest,
+ true,
+ isJsx ? ScriptKind.TSX : ScriptKind.TS,
+ ),
+ };
+ const compilerHost = new CompilerHost(files, sourceFiles);
+ const compilerOptions = {
+ noResolve: true,
+ strict: true,
+ target: ScriptTarget.Latest,
+ jsx: isJsx ? JsxEmit.React : undefined,
+ module: ModuleKind.ES2015,
+ };
+ const program = createProgram(
+ Object.keys(files),
+ compilerOptions,
+ compilerHost,
+ );
+ const ast = program.getSourceFile(fileName);
+ return {
+ ast,
+ program,
+ };
+}
diff --git a/packages/website-eslint/src/linter/linter.js b/packages/website-eslint/src/linter/linter.js
new file mode 100644
index 000000000000..4b798674eeb6
--- /dev/null
+++ b/packages/website-eslint/src/linter/linter.js
@@ -0,0 +1,50 @@
+import 'vs/language/typescript/tsWorker';
+import { parseForESLint } from './parser';
+import { Linter } from 'eslint';
+import rules from '@typescript-eslint/eslint-plugin/dist/rules';
+
+const PARSER_NAME = '@typescript-eslint/parser';
+
+export function loadLinter() {
+ const linter = new Linter();
+ let storedAST;
+
+ linter.defineParser(PARSER_NAME, {
+ parseForESLint(code, options) {
+ const toParse = parseForESLint(code, options);
+ storedAST = toParse.ast;
+ return toParse;
+ }, // parse(code: string, options: ParserOptions): ParseForESLintResult['ast'] {
+ // const toParse = parseForESLint(code, options);
+ // storedAST = toParse.ast;
+ // return toParse.ast;
+ // },
+ });
+
+ for (const name of Object.keys(rules)) {
+ linter.defineRule(`@typescript-eslint/${name}`, rules[name]);
+ }
+
+ const ruleNames = Array.from(linter.getRules()).map(value => {
+ return {
+ name: value[0],
+ description: value[1]?.meta?.docs?.description,
+ };
+ });
+
+ return {
+ ruleNames: ruleNames,
+
+ getAst() {
+ return storedAST;
+ },
+
+ lint(code, parserOptions, rules) {
+ return linter.verify(code, {
+ parser: PARSER_NAME,
+ parserOptions,
+ rules,
+ });
+ },
+ };
+}
diff --git a/packages/website-eslint/src/linter/parser.js b/packages/website-eslint/src/linter/parser.js
new file mode 100644
index 000000000000..282f67c0da7a
--- /dev/null
+++ b/packages/website-eslint/src/linter/parser.js
@@ -0,0 +1,47 @@
+import { analyze } from '@typescript-eslint/scope-manager/dist/analyze';
+import { visitorKeys } from '@typescript-eslint/visitor-keys/dist/visitor-keys';
+import { astConverter } from '@typescript-eslint/typescript-estree/dist/ast-converter';
+import { createASTProgram } from './create-ast-program.js';
+import { extra } from './config.js';
+
+function parseAndGenerateServices(code, options) {
+ const { ast, program } = createASTProgram(code, options);
+ const { estree, astMaps } = astConverter(
+ ast,
+ { ...extra, code, jsx: options.jsx ?? false },
+ true,
+ );
+
+ return {
+ ast: estree,
+ services: {
+ hasFullTypeInformation: true,
+ program,
+ esTreeNodeToTSNodeMap: astMaps.esTreeNodeToTSNodeMap,
+ tsNodeToESTreeNodeMap: astMaps.tsNodeToESTreeNodeMap,
+ },
+ };
+}
+
+export function parseForESLint(code, parserOptions) {
+ const { ast, services } = parseAndGenerateServices(code, {
+ ...parserOptions,
+ jsx: parserOptions.ecmaFeatures?.jsx ?? false,
+ useJSXTextNode: true,
+ projectFolderIgnoreList: [],
+ });
+
+ const scopeManager = analyze(ast, {
+ ecmaVersion:
+ parserOptions.ecmaVersion === 'latest' ? 1e8 : parserOptions.ecmaVersion,
+ globalReturn: parserOptions.ecmaFeatures?.globalReturn ?? false,
+ sourceType: parserOptions.sourceType ?? 'script',
+ });
+
+ return {
+ ast,
+ services,
+ scopeManager,
+ visitorKeys,
+ };
+}
diff --git a/packages/website-eslint/src/mock/assert.js b/packages/website-eslint/src/mock/assert.js
new file mode 100644
index 000000000000..70cbf7a4fbce
--- /dev/null
+++ b/packages/website-eslint/src/mock/assert.js
@@ -0,0 +1,107 @@
+// Copyright Joyent, Inc. and other Node contributors.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a
+// copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to permit
+// persons to whom the Software is furnished to do so, subject to the
+// following conditions:
+//
+// The above copyright notice and this permission notice shall be included
+// in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
+// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
+// USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+// resolves . and .. elements in a path array with directory names there
+// must be no slashes, empty elements, or device names (c:\) in the array
+// (so also no leading and trailing slashes - it does not distinguish
+// relative and absolute paths)
+class AssertionError extends Error {
+ constructor(options) {
+ super(options);
+
+ this.actual = options.actual;
+ this.expected = options.expected;
+ this.operator = options.operator;
+ if (options.message) {
+ this.message = options.message;
+ this.generatedMessage = false;
+ } else {
+ this.message = '';
+ this.generatedMessage = true;
+ }
+ const stackStartFunction = options.stackStartFunction || fail;
+ if (Error.captureStackTrace) {
+ Error.captureStackTrace(this, stackStartFunction);
+ } else {
+ // non v8 browsers so we can have a stacktrace
+ const err = new Error();
+ if (err.stack) {
+ let out = err.stack;
+
+ // try to strip useless frames
+ const fn_name =
+ typeof stackStartFunction === 'function'
+ ? stackStartFunction.name
+ : stackStartFunction.toString();
+ const idx = out.indexOf('\n' + fn_name);
+ if (idx >= 0) {
+ // once we have located the function frame
+ // we need to strip out everything before it (and its line)
+ const next_line = out.indexOf('\n', idx + 1);
+ out = out.substring(next_line + 1);
+ }
+
+ this.stack = out;
+ }
+ }
+ }
+}
+
+function fail(actual, expected, message, operator, stackStartFunction) {
+ throw new AssertionError({
+ message: message,
+ actual: actual,
+ expected: expected,
+ operator: operator,
+ stackStartFunction: stackStartFunction,
+ });
+}
+
+function assert(value, message) {
+ if (!value) {
+ fail(value, true, message, '==', assert);
+ }
+}
+assert.equal = function equal(actual, expected, message) {
+ if (actual != expected) {
+ fail(actual, expected, message, '==', equal);
+ }
+};
+assert.strictEqual = function strictEqual(actual, expected, message) {
+ if (actual !== expected) {
+ fail(actual, expected, message, '===', strictEqual);
+ }
+};
+assert.notStrictEqual = function notStrictEqual(actual, expected, message) {
+ if (actual === expected) {
+ fail(actual, expected, message, '!==', notStrictEqual);
+ }
+};
+assert.notEqual = function notEqual(actual, expected, message) {
+ if (actual == expected) {
+ fail(actual, expected, message, '!=', notEqual);
+ }
+};
+assert.assert = assert.ok = assert;
+assert.fail = fail;
+assert.AssertionError = AssertionError;
+
+module.exports = assert;
diff --git a/packages/website-eslint/src/mock/empty.js b/packages/website-eslint/src/mock/empty.js
new file mode 100644
index 000000000000..ff8b4c56321a
--- /dev/null
+++ b/packages/website-eslint/src/mock/empty.js
@@ -0,0 +1 @@
+export default {};
diff --git a/packages/website-eslint/src/mock/path.js b/packages/website-eslint/src/mock/path.js
new file mode 100644
index 000000000000..3d04551e2e79
--- /dev/null
+++ b/packages/website-eslint/src/mock/path.js
@@ -0,0 +1,244 @@
+// Copyright Joyent, Inc. and other Node contributors.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a
+// copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to permit
+// persons to whom the Software is furnished to do so, subject to the
+// following conditions:
+//
+// The above copyright notice and this permission notice shall be included
+// in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
+// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
+// USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+// resolves . and .. elements in a path array with directory names there
+// must be no slashes, empty elements, or device names (c:\) in the array
+// (so also no leading and trailing slashes - it does not distinguish
+// relative and absolute paths)
+function normalizeArray(parts, allowAboveRoot) {
+ // if the path tries to go above the root, `up` ends up > 0
+ let up = 0;
+ for (let i = parts.length - 1; i >= 0; i--) {
+ const last = parts[i];
+ if (last === '.') {
+ parts.splice(i, 1);
+ } else if (last === '..') {
+ parts.splice(i, 1);
+ up++;
+ } else if (up) {
+ parts.splice(i, 1);
+ up--;
+ }
+ }
+
+ // if the path is allowed to go above the root, restore leading ..s
+ if (allowAboveRoot) {
+ for (; up--; up) {
+ parts.unshift('..');
+ }
+ }
+
+ return parts;
+}
+
+// Split a filename into [root, dir, basename, ext], unix version
+// 'root' is just a slash, or nothing.
+const splitPathRe =
+ /^(\/?|)([\s\S]*?)((?:\.{1,2}|[^\/]+?|)(\.[^.\/]*|))(?:[\/]*)$/;
+const splitPath = function (filename) {
+ return splitPathRe.exec(filename).slice(1);
+};
+
+// path.resolve([from ...], to)
+// posix version
+export function resolve() {
+ let resolvedPath = '',
+ resolvedAbsolute = false;
+
+ for (let i = arguments.length - 1; i >= -1 && !resolvedAbsolute; i--) {
+ const path = i >= 0 ? arguments[i] : '/';
+
+ // Skip empty and invalid entries
+ if (typeof path !== 'string') {
+ throw new TypeError('Arguments to path.resolve must be strings');
+ } else if (!path) {
+ continue;
+ }
+
+ resolvedPath = path + '/' + resolvedPath;
+ resolvedAbsolute = path.charAt(0) === '/';
+ }
+
+ // At this point the path should be resolved to a full absolute path, but
+ // handle relative paths to be safe (might happen when process.cwd() fails)
+
+ // Normalize the path
+ resolvedPath = normalizeArray(
+ filter(resolvedPath.split('/'), function (p) {
+ return !!p;
+ }),
+ !resolvedAbsolute,
+ ).join('/');
+
+ return (resolvedAbsolute ? '/' : '') + resolvedPath || '.';
+}
+
+// path.normalize(path)
+// posix version
+export function normalize(path) {
+ let isPathAbsolute = isAbsolute(path),
+ trailingSlash = substr(path, -1) === '/';
+
+ // Normalize the path
+ path = normalizeArray(
+ filter(path.split('/'), function (p) {
+ return !!p;
+ }),
+ !isPathAbsolute,
+ ).join('/');
+
+ if (!path && !isPathAbsolute) {
+ path = '.';
+ }
+ if (path && trailingSlash) {
+ path += '/';
+ }
+
+ return (isPathAbsolute ? '/' : '') + path;
+}
+
+// posix version
+export function isAbsolute(path) {
+ return path.charAt(0) === '/';
+}
+
+// posix version
+export function join() {
+ const paths = Array.prototype.slice.call(arguments, 0);
+ return normalize(
+ filter(paths, function (p, index) {
+ if (typeof p !== 'string') {
+ throw new TypeError('Arguments to path.join must be strings');
+ }
+ return p;
+ }).join('/'),
+ );
+}
+
+// path.relative(from, to)
+// posix version
+export function relative(from, to) {
+ from = resolve(from).substr(1);
+ to = resolve(to).substr(1);
+
+ function trim(arr) {
+ let start = 0;
+ for (; start < arr.length; start++) {
+ if (arr[start] !== '') break;
+ }
+
+ var end = arr.length - 1;
+ for (; end >= 0; end--) {
+ if (arr[end] !== '') break;
+ }
+
+ if (start > end) return [];
+ return arr.slice(start, end - start + 1);
+ }
+
+ const fromParts = trim(from.split('/'));
+ const toParts = trim(to.split('/'));
+
+ const length = Math.min(fromParts.length, toParts.length);
+ let samePartsLength = length;
+ for (let i = 0; i < length; i++) {
+ if (fromParts[i] !== toParts[i]) {
+ samePartsLength = i;
+ break;
+ }
+ }
+
+ const outputParts = [];
+ for (let i = samePartsLength; i < fromParts.length; i++) {
+ outputParts.push('..');
+ }
+
+ outputParts = outputParts.concat(toParts.slice(samePartsLength));
+
+ return outputParts.join('/');
+}
+
+export var sep = '/';
+export var delimiter = ':';
+
+export function dirname(path) {
+ const result = splitPath(path);
+ const root = result[0];
+ let dir = result[1];
+
+ if (!root && !dir) {
+ // No dirname whatsoever
+ return '.';
+ }
+
+ if (dir) {
+ // It has a dirname, strip trailing slash
+ dir = dir.substr(0, dir.length - 1);
+ }
+
+ return root + dir;
+}
+
+export function basename(path, ext) {
+ let f = splitPath(path)[2];
+ // TODO: make this comparison case-insensitive on windows?
+ if (ext && f.substr(-1 * ext.length) === ext) {
+ f = f.substr(0, f.length - ext.length);
+ }
+ return f;
+}
+
+export function extname(path) {
+ return splitPath(path)[3];
+}
+
+export default {
+ extname: extname,
+ basename: basename,
+ dirname: dirname,
+ sep: sep,
+ delimiter: delimiter,
+ relative: relative,
+ join: join,
+ isAbsolute: isAbsolute,
+ normalize: normalize,
+ resolve: resolve,
+};
+
+function filter(xs, f) {
+ if (xs.filter) return xs.filter(f);
+ const res = [];
+ for (let i = 0; i < xs.length; i++) {
+ if (f(xs[i], i, xs)) res.push(xs[i]);
+ }
+ return res;
+}
+
+// String.prototype.substr - negative index don't work in IE8
+const substr =
+ 'ab'.substr(-1) === 'b'
+ ? function (str, start, len) {
+ return str.substr(start, len);
+ }
+ : function (str, start, len) {
+ if (start < 0) start = str.length + start;
+ return str.substr(start, len);
+ };
diff --git a/packages/website-eslint/src/mock/semver.js b/packages/website-eslint/src/mock/semver.js
new file mode 100644
index 000000000000..ba292927fe90
--- /dev/null
+++ b/packages/website-eslint/src/mock/semver.js
@@ -0,0 +1,4 @@
+import satisfies from 'semver/functions/satisfies';
+import major from 'semver/functions/major';
+
+export { satisfies, major };
diff --git a/packages/website-eslint/src/mock/typescript.js b/packages/website-eslint/src/mock/typescript.js
new file mode 100644
index 000000000000..324b844294b5
--- /dev/null
+++ b/packages/website-eslint/src/mock/typescript.js
@@ -0,0 +1 @@
+module.exports = window.ts;
diff --git a/packages/website-eslint/src/mock/util.js b/packages/website-eslint/src/mock/util.js
new file mode 100644
index 000000000000..3e5cd5e0e71b
--- /dev/null
+++ b/packages/website-eslint/src/mock/util.js
@@ -0,0 +1,7 @@
+const util = {};
+
+util.inspect = function (value) {
+ return value;
+};
+
+export default util;
diff --git a/packages/website-eslint/types/index.d.ts b/packages/website-eslint/types/index.d.ts
new file mode 100644
index 000000000000..eaa86160cba7
--- /dev/null
+++ b/packages/website-eslint/types/index.d.ts
@@ -0,0 +1,34 @@
+import type { TSESLint } from '@typescript-eslint/experimental-utils';
+import type { ParserOptions } from '@typescript-eslint/types';
+
+export type LintMessage = TSESLint.Linter.LintMessage;
+export type RuleFix = TSESLint.RuleFix;
+export type RulesRecord = TSESLint.Linter.RulesRecord;
+export type RuleEntry = TSESLint.Linter.RuleEntry;
+export type ParseForESLintResult = TSESLint.Linter.ESLintParseResult;
+export type ESLintAST = ParseForESLintResult['ast'];
+
+export interface WebLinter {
+ ruleNames: { name: string; description?: string }[];
+
+ getAst(): ESLintAST;
+
+ lint(
+ code: string,
+ parserOptions: ParserOptions,
+ rules?: RulesRecord,
+ ): LintMessage[];
+}
+
+export interface LinterLoader {
+ loadLinter(): WebLinter;
+}
+
+export type { TSESTree } from '@typescript-eslint/types';
+
+export type {
+ DebugLevel,
+ EcmaVersion,
+ ParserOptions,
+ SourceType,
+} from '@typescript-eslint/types';
diff --git a/packages/website/.eslintrc.js b/packages/website/.eslintrc.js
new file mode 100644
index 000000000000..8b30fb624986
--- /dev/null
+++ b/packages/website/.eslintrc.js
@@ -0,0 +1,32 @@
+module.exports = {
+ extends: [
+ '../../.eslintrc.js',
+ 'plugin:jsx-a11y/recommended',
+ 'plugin:react/recommended',
+ 'plugin:react-hooks/recommended',
+ ],
+ plugins: ['jsx-a11y', 'react', 'react-hooks'],
+ overrides: [
+ {
+ files: [
+ './src/pages/*.tsx',
+ './src/components/**/*.tsx',
+ './src/components/hooks/*.ts',
+ ],
+ rules: {
+ 'import/no-default-export': 'off',
+ },
+ },
+ ],
+ rules: {
+ 'react/jsx-no-target-blank': 'off',
+ 'react/no-unescaped-entities': 'off',
+ '@typescript-eslint/internal/prefer-ast-types-enum': 'off',
+ 'react-hooks/exhaustive-deps': 'off', // TODO: enable it later
+ },
+ settings: {
+ react: {
+ version: 'detect',
+ },
+ },
+};
diff --git a/packages/website/CHANGELOG.md b/packages/website/CHANGELOG.md
index 00e80eef0adb..7ca28a97a50f 100644
--- a/packages/website/CHANGELOG.md
+++ b/packages/website/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [5.5.0](https://github.com/typescript-eslint/typescript-eslint/compare/v5.4.0...v5.5.0) (2021-11-29)
+
+**Note:** Version bump only for package website
+
+
+
+
+
# [5.4.0](https://github.com/typescript-eslint/typescript-eslint/compare/v5.3.1...v5.4.0) (2021-11-15)
diff --git a/packages/website/README.md b/packages/website/README.md
index 725d0d7faee6..fd7bb57cb428 100644
--- a/packages/website/README.md
+++ b/packages/website/README.md
@@ -26,4 +26,4 @@ This command generates static content into the `build` directory and can be serv
## Deployment
-The website is deployed automatically using Netlify. Each pull request into the master branch will have a unique preview deployment generated for it.
+The website is deployed automatically using Netlify. Each pull request into the `main` branch will have a unique preview deployment generated for it.
diff --git a/packages/website/docusaurus.config.js b/packages/website/docusaurus.config.js
index f46afb187678..8eee26a28962 100644
--- a/packages/website/docusaurus.config.js
+++ b/packages/website/docusaurus.config.js
@@ -4,12 +4,12 @@
const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
-const sponsors = require('./data/sponsors.json');
-
const remarkPlugins = [
[require('@docusaurus/remark-plugin-npm2yarn'), { sync: true }],
];
+const beforeDefaultRemarkPlugins = [[require('remark-docusaurus-tabs'), {}]];
+
const githubUrl = 'https://github.com/typescript-eslint/typescript-eslint';
/** @type {import('@docusaurus/types').Config} */
@@ -24,10 +24,8 @@ const config = {
organizationName: 'typescript-eslint',
projectName: 'typescript-eslint',
clientModules: [require.resolve('./src/clientModules.js')],
- customFields: {
- sponsors,
- },
plugins: [
+ require.resolve('./webpack.plugin'),
'@docusaurus/plugin-debug',
[
'@docusaurus/theme-classic',
@@ -35,7 +33,14 @@ const config = {
customCss: require.resolve('./src/css/custom.css'),
},
],
- ['@docusaurus/plugin-content-pages', { remarkPlugins }],
+ '@docusaurus/theme-search-algolia',
+ [
+ '@docusaurus/plugin-content-pages',
+ {
+ beforeDefaultRemarkPlugins,
+ remarkPlugins,
+ },
+ ],
[
'@docusaurus/plugin-content-docs',
{
@@ -43,7 +48,8 @@ const config = {
path: '../eslint-plugin/docs/rules',
sidebarPath: require.resolve('./sidebars/sidebar.rules.js'),
routeBasePath: 'rules',
- editUrl: `${githubUrl}/edit/master/packages/website/`,
+ editUrl: `${githubUrl}/edit/main/packages/website/`,
+ beforeDefaultRemarkPlugins,
remarkPlugins,
},
],
@@ -54,22 +60,32 @@ const config = {
path: '../../docs',
routeBasePath: 'docs',
sidebarPath: require.resolve('./sidebars/sidebar.base.js'),
- editUrl: `${githubUrl}/edit/master/packages/website/`,
+ editUrl: `${githubUrl}/edit/main/packages/website/`,
+ beforeDefaultRemarkPlugins,
remarkPlugins,
},
],
],
themeConfig:
- /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+ /** @type {import('@docusaurus/theme-common').UserThemeConfig} */
({
- // sidebarCollapsible: false,
+ algolia: {
+ appId: 'BH4D9OD16A',
+ apiKey: '1ad6b47d4e742c4c0653877b5511c602',
+ indexName: 'typescript-eslint',
+ },
+ metadatas: [
+ { name: 'msapplication-TileColor', content: '#443fd4' },
+ { name: 'theme-color', content: '#443fd4' },
+ ],
navbar: {
title: 'TypeScript ESLint',
// hideOnScroll: true,
logo: {
alt: 'TypeScript ESLint',
+ height: '32px',
src: 'img/logo.svg',
- // srcDark: 'img/logo-dark.svg',
+ width: '32px',
},
// style: 'primary',
items: [
@@ -85,6 +101,12 @@ const config = {
label: 'Rules',
position: 'left',
},
+ {
+ to: 'play',
+ activeBasePath: 'play',
+ position: 'right',
+ label: 'Playground',
+ },
{
href: githubUrl,
position: 'right',
@@ -105,21 +127,37 @@ const config = {
prism: {
theme: lightCodeTheme,
darkTheme: darkCodeTheme,
+ additionalLanguages: ['ignore'],
},
tableOfContents: {
maxHeadingLevel: 4,
minHeadingLevel: 2,
},
}),
+ // Misleading API name, but these are just tags
+ stylesheets: [
+ {
+ rel: 'apple-touch-icon',
+ sizes: '180x180',
+ href: '/img/favicon/apple-touch-icon.png',
+ },
+ {
+ rel: 'icon',
+ type: 'image/png',
+ sizes: '32x32',
+ href: '/img/favicon/favicon-32x32.png',
+ },
+ {
+ rel: 'icon',
+ type: 'image/png',
+ sizes: '16x16',
+ href: '/img/favicon/favicon-16x16.png',
+ },
+ {
+ rel: 'manifest',
+ href: '/img/favicon/site.webmanifest',
+ },
+ ],
};
-/*
-
-
-
-
-
-
-*/
-
module.exports = config;
diff --git a/packages/website/package.json b/packages/website/package.json
index 60cc537aa45d..2058c4598359 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -1,6 +1,6 @@
{
"name": "website",
- "version": "5.4.0",
+ "version": "5.5.0",
"private": true,
"scripts": {
"build": "docusaurus build",
@@ -11,25 +11,23 @@
"swizzle": "docusaurus swizzle"
},
"dependencies": {
- "@babel/runtime": "7.16.0",
+ "@babel/runtime": "7.16.3",
"@docusaurus/core": "2.0.0-beta.9",
"@docusaurus/plugin-content-docs": "^2.0.0-beta.9",
"@docusaurus/plugin-content-pages": "^2.0.0-beta.9",
"@docusaurus/plugin-debug": "^2.0.0-beta.9",
"@docusaurus/remark-plugin-npm2yarn": "^2.0.0-beta.9",
"@docusaurus/theme-classic": "^2.0.0-beta.9",
+ "@docusaurus/theme-search-algolia": "^2.0.0-beta.9",
"@mdx-js/react": "1.6.22",
- "@typescript-eslint/eslint-plugin": "5.4.0",
- "@typescript-eslint/parser": "5.4.0",
- "@typescript-eslint/scope-manager": "5.4.0",
- "@typescript-eslint/types": "5.4.0",
- "@typescript-eslint/typescript-estree": "5.4.0",
- "@typescript-eslint/visitor-keys": "5.4.0",
+ "@typescript-eslint/website-eslint": "5.5.0",
"clsx": "^1.1.1",
"eslint": "*",
- "konamimojisplosion": "^0.4.3",
+ "konamimojisplosion": "^0.5.1",
+ "lzstring.ts": "^2.0.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
+ "remark-docusaurus-tabs": "^0.2.0",
"typescript": "*"
},
"devDependencies": {
@@ -37,8 +35,13 @@
"@types/react": "^17.0.34",
"@types/react-helmet": "^6.1.4",
"@types/react-router-dom": "^5.3.2",
+ "copy-webpack-plugin": "^9.1.0",
+ "eslint-plugin-jsx-a11y": "^6.5.1",
+ "eslint-plugin-react": "^7.27.1",
+ "eslint-plugin-react-hooks": "^4.3.0",
"globby": "^11.0.4",
- "webpack": "^5.61.0"
+ "monaco-editor": "^0.30.1",
+ "webpack": "^5.64.0"
},
"browserslist": {
"production": [
diff --git a/packages/website/src/clientModules.js b/packages/website/src/clientModules.js
index bcb346be41a0..e140bca1019f 100644
--- a/packages/website/src/clientModules.js
+++ b/packages/website/src/clientModules.js
@@ -1,3 +1,3 @@
-if (typeof window !== 'undefined' && typeof window.document !== 'undefined') {
+if (typeof window !== 'undefined') {
require('konamimojisplosion').initializeKonamimojisplosion();
}
diff --git a/packages/website/src/components/OptionsSelector.module.css b/packages/website/src/components/OptionsSelector.module.css
new file mode 100644
index 000000000000..5ff62a8c5b00
--- /dev/null
+++ b/packages/website/src/components/OptionsSelector.module.css
@@ -0,0 +1,81 @@
+.optionLabel {
+ cursor: pointer;
+}
+
+.optionItem,
+.optionLabel {
+ align-items: center;
+ display: flex;
+ flex: 0 0 1.5rem;
+ flex-direction: row;
+ font-size: 0.75rem;
+ margin: 0 0;
+ padding: 0.4rem 0.8rem;
+ transition: background-color var(--ifm-transition-fast)
+ var(--ifm-transition-timing-default),
+ color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+ color: var(--ifm-font-color-secondary);
+ justify-content: space-between;
+ border: none;
+ background: transparent;
+ font-family: var(--ifm-font-family-base);
+ box-sizing: border-box;
+ line-height: var(--ifm-line-height-base);
+}
+
+.optionLabel:hover {
+ background-color: var(--ifm-color-emphasis-100);
+ color: var(--ifm-font-color-primary);
+}
+
+.clickableIcon {
+ cursor: pointer;
+}
+
+.clickableIcon:hover {
+ color: var(--ifm-color-primary);
+}
+
+.optionInput {
+ display: block;
+ width: 90%;
+ padding: 0.4rem 0.6rem;
+ line-height: 1;
+ font-size: 0.8rem;
+ font-weight: 500;
+ font-family: inherit;
+ border-radius: 6px;
+ -webkit-appearance: none;
+ color: var(--ifm-font-color-secondary);
+ border: 1px solid var(--ifm-color-emphasis-100);
+ background: var(--ifm-color-emphasis-200);
+ transition: border 0.3s ease;
+}
+.optionInput::placeholder {
+ color: var(--ifm-color-emphasis-700);
+}
+.optionInput:focus {
+ outline: none;
+ border-color: var(--ifm-color-primary);
+}
+
+.optionSelect {
+ line-height: 1;
+ font-size: 0.8rem;
+ font-weight: 500;
+ border-radius: 6px;
+ font-family: inherit;
+ width: 50%;
+ box-shadow: none;
+ background-image: none;
+ padding: 0.4rem 0.6rem;
+ appearance: none;
+ color: var(--ifm-font-color-secondary);
+ border: 1px solid var(--ifm-color-emphasis-100);
+ background: var(--ifm-color-emphasis-200);
+ transition: border 0.3s ease;
+}
+.optionSelect:focus {
+ outline: none;
+ border-color: var(--ifm-color-primary);
+}
diff --git a/packages/website/src/components/OptionsSelector.tsx b/packages/website/src/components/OptionsSelector.tsx
new file mode 100644
index 000000000000..71f83a95902a
--- /dev/null
+++ b/packages/website/src/components/OptionsSelector.tsx
@@ -0,0 +1,192 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import React, { useCallback, useState } from 'react';
+
+import ConfigEslint from './config/ConfigEslint';
+import ConfigTypeScript from './config/ConfigTypeScript';
+import Expander from './layout/Expander';
+import Dropdown from './inputs/Dropdown';
+import Checkbox from './inputs/Checkbox';
+import Tooltip from './inputs/Tooltip';
+import EditIcon from './icons/EditIcon';
+import CopyIcon from './icons/CopyIcon';
+
+import { createMarkdown } from './lib/markdown';
+
+import type { RuleDetails } from './types';
+
+import styles from './OptionsSelector.module.css';
+
+import type {
+ CompilerFlags,
+ ConfigModel,
+ SourceType,
+ RulesRecord,
+} from './types';
+
+export interface OptionsSelectorParams {
+ readonly ruleOptions: RuleDetails[];
+ readonly state: ConfigModel;
+ readonly setState: (cfg: Partial
+
+ );
+}
+
+export default Playground;
diff --git a/packages/website/src/components/ast/ASTViewer.module.css b/packages/website/src/components/ast/ASTViewer.module.css
new file mode 100644
index 000000000000..ebb4b3470dcb
--- /dev/null
+++ b/packages/website/src/components/ast/ASTViewer.module.css
@@ -0,0 +1,78 @@
+.list,
+.subList {
+ cursor: default;
+ box-sizing: border-box;
+ margin: 0;
+ list-style: none;
+ padding-left: 1.5rem;
+ font-family: Consolas, "Courier New", monospace;
+ font-weight: normal;
+ font-size: 13px;
+ font-feature-settings: "liga" 0, "calt" 0;
+ line-height: 18px;
+ letter-spacing: 0px;
+}
+
+.nonExpand,
+.expand {
+ border-left: 0.1rem dashed var(--ifm-color-emphasis-200);
+}
+
+.expand.open::before {
+ content: '+';
+}
+
+.selected {
+ background: var(--code-line-decoration);
+}
+
+.expand::before {
+ content: '-';
+ margin-left: -1rem;
+ width: 1rem;
+ display: inline-block;
+}
+
+.valueBody {
+ min-width: 300px;
+ width: fit-content;
+}
+
+.tokenName {
+ color: #2aa198;
+}
+
+.propName {
+ color: #b58900;
+}
+
+.propNumber {
+ color: #268bd2;
+}
+
+.propEmpty {
+ color: var(--ifm-color-emphasis-400);
+}
+
+.propRegExp {
+ color: #b58900;
+}
+
+.propBoolean {
+ color: #b58900;
+}
+
+.propString {
+ color: #15aa15;
+}
+
+.hidden {
+ color: var(--ifm-color-emphasis-400);
+}
+
+.clickable {
+ cursor: pointer;
+}
+.clickable:hover {
+ text-decoration: underline;
+}
diff --git a/packages/website/src/components/ast/ASTViewer.tsx b/packages/website/src/components/ast/ASTViewer.tsx
new file mode 100644
index 000000000000..7c234f91a238
--- /dev/null
+++ b/packages/website/src/components/ast/ASTViewer.tsx
@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react';
+import styles from './ASTViewer.module.css';
+
+import type { TSESTree } from '@typescript-eslint/website-eslint';
+import type { Position } from './types';
+
+import { ElementObject } from './Elements';
+import type Monaco from 'monaco-editor';
+
+function ASTViewer(props: {
+ ast: TSESTree.Node | string;
+ position?: Monaco.Position | null;
+ onSelectNode: (node: TSESTree.Node | null) => void;
+}): JSX.Element {
+ const [selection, setSelection] = useState
+
+
+
+
+ {isLoading &&
+ {state.showAST && (
+
+ {ast && (
+
+ )}
+ {props.ast}
+ ) : (
+
+
+ );
+}
+
+export default ASTViewer;
diff --git a/packages/website/src/components/ast/Elements.tsx b/packages/website/src/components/ast/Elements.tsx
new file mode 100644
index 000000000000..9dba9eff491a
--- /dev/null
+++ b/packages/website/src/components/ast/Elements.tsx
@@ -0,0 +1,218 @@
+import React, {
+ SyntheticEvent,
+ useCallback,
+ useEffect,
+ useRef,
+ useState,
+} from 'react';
+import clsx from 'clsx';
+
+import type { TSESTree } from '@typescript-eslint/website-eslint';
+import type { GenericParams } from './types';
+
+import { scrollIntoViewIfNeeded } from '@site/src/components/lib/scroll-into';
+import {
+ filterRecord,
+ hasChildInRange,
+ isArrayInRange,
+ isEsNode,
+ isInRange,
+ isRecord,
+} from './selection';
+
+import PropertyNameComp from '@site/src/components/ast/PropertyName';
+import PropertyValueComp from '@site/src/components/ast/PropertyValue';
+import styles from '@site/src/components/ast/ASTViewer.module.css';
+
+export const PropertyName = React.memo(PropertyNameComp);
+export const PropertyValue = React.memo(PropertyValueComp);
+
+export function ElementArray(props: GenericParams
+
+ );
+}
+
+export function ElementObject(
+ props: GenericParams
+ {props.value.map((item, index) => {
+ return (
+
+ ) : !isComplex ? (
+
+ {props.value.map((item, index) => (
+
+ {index > 0 && ', '}
+
+
+ );
+}
+
+export function ElementItem(props: GenericParams
+ {filterRecord(props.value).map((item, index) => (
+
+ ) : (
+
+ {filterRecord(props.value)
+ .map(item => item[0])
+ .join(', ')}
+
+ )}
+ {'}'}
+
+ {props.name && {props.name}}
+ {props.name && : }
+
+ );
+}
diff --git a/packages/website/src/components/ast/PropertyName.tsx b/packages/website/src/components/ast/PropertyName.tsx
new file mode 100644
index 000000000000..f8768a6c4a2a
--- /dev/null
+++ b/packages/website/src/components/ast/PropertyName.tsx
@@ -0,0 +1,27 @@
+import React, { SyntheticEvent } from 'react';
+import clsx from 'clsx';
+import styles from './ASTViewer.module.css';
+
+export default function PropertyName(props: {
+ name?: string;
+ propName?: string;
+ onClick?: (e: SyntheticEvent) => void;
+ onMouseEnter?: (e: SyntheticEvent) => void;
+}): JSX.Element {
+ return (
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+
+ {props.propName && (
+
+ {props.propName}
+
+ )}
+ {props.propName && : }
+ {props.name && (
+
+ {props.name}
+
+ )}
+
+ );
+}
diff --git a/packages/website/src/components/ast/PropertyValue.tsx b/packages/website/src/components/ast/PropertyValue.tsx
new file mode 100644
index 000000000000..48f3ba119a68
--- /dev/null
+++ b/packages/website/src/components/ast/PropertyValue.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import styles from './ASTViewer.module.css';
+
+export default function PropertyValue(props: { value: unknown }): JSX.Element {
+ if (typeof props.value === 'string') {
+ return (
+ {JSON.stringify(props.value)}
+ );
+ } else if (typeof props.value === 'number') {
+ return {props.value};
+ } else if (typeof props.value === 'bigint') {
+ return {String(props.value)}n;
+ } else if (props.value instanceof RegExp) {
+ return {String(props.value)};
+ } else if (typeof props.value === 'undefined' || props.value === null) {
+ return {String(props.value)};
+ } else if (typeof props.value === 'boolean') {
+ return (
+
+ {props.value ? 'true' : 'false'}
+
+ );
+ }
+ return {String(props.value)};
+}
diff --git a/packages/website/src/components/ast/selection.ts b/packages/website/src/components/ast/selection.ts
new file mode 100644
index 000000000000..9a882d2bf9af
--- /dev/null
+++ b/packages/website/src/components/ast/selection.ts
@@ -0,0 +1,79 @@
+import type { TSESTree } from '@typescript-eslint/website-eslint';
+import type { Position } from './types';
+
+export const propsToFilter = ['parent', 'comments', 'tokens', 'loc'];
+
+export function filterRecord(
+ values: TSESTree.Node | Record
+ {!editJson && (
+
+ {editJson && (
+