chore(website): add playground to website (#4108)

.cspell.json

@@ -15,6 +15,7 @@
     "**/node_modules/**",
     "packages/website/.docusaurus/**",
     "packages/website/build/**",
+    "packages/website/src/vendor/**",
     "yarn.lock"
   ],
   "dictionaries": [
@@ -71,6 +72,7 @@
     "IIFEs",
     "linebreaks",
     "markdownlint",
+    "lzstring",
     "necroing",
     "nocheck",
     "nullish",
@@ -99,6 +101,7 @@
     "transpiled",
     "transpiles",
     "transpiling",
+    "tsvfs",
     "tsconfigs",
     "tsutils",
     "typedef",

.eslintignore

@@ -6,11 +6,15 @@ fixtures
 shared-fixtures
 coverage
 __snapshots__
+.docusaurus
+build
 
 packages/eslint-plugin-tslint/tests
 
 packages/website/**/*.js
 packages/website/**/*.d.ts
+packages/website-eslint/**/*.js
+packages/website-eslint/**/*.d.ts
 
 # Files copied as part of the build
 packages/types/src/ast-spec.ts

.eslintrc.js

@@ -205,7 +205,7 @@ module.exports = {
         'jest/no-deprecated-functions': 'error',
       },
     },
-    // test utility scripts
+    // test utility scripts and website js files
     {
       files: ['tests/**/*.js'],
       rules: {

.gitignore

@@ -9,6 +9,7 @@ yarn-error.log*
 packages/website/.docusaurus
 packages/website/.cache-loader
 packages/website/build
+packages/website/static/sandbox
 
 # Runtime data
 pids

.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

@@ -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,.jsx,.ts,.tsx --fix",
     "lint-markdown-fix": "yarn lint-markdown --fix",
     "lint-markdown": "markdownlint \"**/*.md\" --config=.markdownlint.json --ignore-path=.markdownlintignore",
@@ -60,7 +61,6 @@
     "@babel/types": "^7.16.0",
     "@commitlint/cli": "^15.0.0",
     "@commitlint/config-conventional": "^15.0.0",
-    "@commitlint/config-lerna-scopes": "^15.0.0",
     "@nrwl/cli": "13.0.2",
     "@nrwl/nx-cloud": "12.5.1",
     "@nrwl/tao": "13.0.2",

packages/eslint-plugin/src/util/getWrappingFixer.ts

@@ -1,10 +1,10 @@
 import {
   AST_NODE_TYPES,
   TSESLint,
+  ASTUtils,
   TSESTree,
 } from '@typescript-eslint/experimental-utils';
 import { SourceCode } from '@typescript-eslint/experimental-utils/src/ts-eslint';
-import * as util from '../util';
 
 interface WrappingFixerParams {
   /** Source code. */
@@ -57,7 +57,7 @@ export function getWrappingFixer(
     if (isWeakPrecedenceParent(node)) {
       // we wrapped the node in some expression which very likely has a different precedence than original wrapped node
       // let's wrap the whole expression in parens just in case
-      if (!util.isParenthesized(node, sourceCode)) {
+      if (!ASTUtils.isParenthesized(node, sourceCode)) {
         code = `(${code})`;
       }
     }

packages/website-eslint/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@typescript-eslint/website-eslint",
+  "version": "5.4.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.4.0",
+    "@typescript-eslint/types": "^5.4.0"
+  },
+  "devDependencies": {
+    "eslint": "*",
+    "rollup": "^2.59.0",
+    "semver": "^7.3.5",
+    "@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.4.0",
+    "@typescript-eslint/parser": "5.4.0",
+    "@typescript-eslint/scope-manager": "5.4.0",
+    "@typescript-eslint/typescript-estree": "5.4.0",
+    "@typescript-eslint/visitor-keys": "5.4.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,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 }),
+  ],
+};

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