chore(website): add playground to website

.cspell.json

@@ -68,6 +68,7 @@
     "IIFE",
     "IIFEs",
     "linebreaks",
+    "lzstring",
     "necroing",
     "nocheck",
     "nullish",
@@ -96,6 +97,7 @@
     "transpiled",
     "transpiles",
     "transpiling",
+    "tsvfs",
     "tsconfigs",
     "tsutils",
     "typedef",

.prettierignore

@@ -18,6 +18,7 @@ CHANGELOG.md
 
 packages/website/.docusaurus
 packages/website/build
+packages/website/src/vendor
 
 # TODO - remove this once prettier supports TS4.1
 packages/scope-manager/tests/fixtures/type-declaration/literal-type1.ts

package.json

@@ -22,7 +22,7 @@
     "url": "https://github.com/typescript-eslint/typescript-eslint/issues"
   },
   "scripts": {
-    "build": "npx nx prebuild @typescript-eslint/types && nx run-many --target=build --all --parallel",
+    "build": "npx nx prebuild @typescript-eslint/types && nx run-many --target=build --all --parallel --exclude website",
     "check-clean-workspace-after-install": "git diff --quiet --exit-code",
     "check-configs": "nx run-many --target=check-configs --all --parallel",
     "check-docs": "nx run-many --target=check-docs --all --parallel",
@@ -33,6 +33,7 @@
     "format": "prettier --write \"./**/*.{ts,tsx,js,jsx,json,md,css}\"",
     "generate-contributors": "yarn ts-node --transpile-only ./tools/generate-contributors.ts && yarn all-contributors generate",
     "generate-sponsors": "yarn ts-node --transpile-only ./tools/generate-sponsors.ts",
+    "generate-website-dts": "yarn ts-node --transpile-only ./tools/generate-website-dts.ts",
     "lint-fix": "eslint . --ext .js,.ts --fix",
     "lint-markdown-fix": "yarn lint-markdown --fix",
     "lint-markdown": "markdownlint \"**/*.md\" --config=.markdownlint.json --ignore-path=.markdownlintignore",

packages/eslint-plugin/src/rules/no-restricted-imports.ts

@@ -1,5 +1,5 @@
 import { TSESTree } from '@typescript-eslint/experimental-utils';
-import {
+import type {
   ArrayOfStringOrObject,
   ArrayOfStringOrObjectPatterns,
 } from 'eslint/lib/rules/no-restricted-imports';

packages/scope-manager/src/referencer/PatternVisitor.ts

@@ -1,5 +1,5 @@
 import { TSESTree, AST_NODE_TYPES } from '@typescript-eslint/types';
-import { VisitorBase, VisitorOptions } from './Visitor';
+import { VisitorBase, VisitorOptions } from './VisitorBase';
 
 type PatternVisitorCallback = (
   pattern: TSESTree.Identifier,

packages/website-eslint/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@typescript-eslint/website-eslint",
+  "version": "5.3.1",
+  "private": true,
+  "description": "ESLint which works in browsers.",
+  "engines": {
+    "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+  },
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup --config=rollup.config.js"
+  },
+  "dependencies": {
+    "eslint": "*"
+  },
+  "devDependencies": {
+    "eslint": "*",
+    "rollup": "^2.59.0",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.0.6",
+    "@rollup/pluginutils": "^3.1.0"
+  }
+}

packages/website-eslint/project.json

@@ -0,0 +1,5 @@
+{
+  "root": "packages/website-eslint",
+  "type": "library",
+  "implicitDependencies": []
+}

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() };
+    },
+  };
+};

packages/website-eslint/rollup.config.js

@@ -0,0 +1,83 @@
+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: 'module',
+    interop: 'auto',
+    freeze: false,
+    file: 'dist/index.js',
+  },
+  external: ['typescript'],
+  plugins: [
+    replace({
+      // verbose: true,
+      alias: [
+        {
+          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',
+            // 'eslint/lib/shared/ajv.js',
+            // 'eslint/lib/shared/runtime-info.js',
+          ],
+          target: './src/mock/empty.js',
+        },
+        {
+          match: /^assert$/u,
+          target: './src/mock/assert.js',
+        },
+        {
+          match: /^path$/u,
+          target: './src/mock/path.js',
+        },
+        {
+          match: /^util$/u,
+          target: './src/mock/util.js',
+        },
+      ],
+      replace: [
+        {
+          match: /eslint\/lib\/linter\/rules\.js$/u,
+          test: /require\(this\._rules\[ruleId\]\)/u,
+          replace: 'null',
+        },
+        {
+          test: /esquery\.parse\(/u,
+          replace: 'esquery.default.parse(',
+        },
+        {
+          test: /esquery\.matches\(/u,
+          replace: 'esquery.default.matches(',
+        },
+        {
+          test: /process\.env\.NODE_DEBUG/u,
+          replace: 'false',
+        },
+        {
+          test: /process\.env\.TIMING/u,
+          replace: 'false',
+        },
+        {
+          test: /process\.env\.IGNORE_TEST_WIN32/u,
+          replace: 'true',
+        },
+      ],
+    }),
+    // nodePolyfills(),
+    resolve({
+      browser: true,
+      preferBuiltins: false,
+    }),
+    commonjs(),
+    json({ preferConst: true }),
+  ],
+};

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];
+  }
+}

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: '',
+};

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,
+  };
+}