chore(website): migrate playground from typescript-eslint#3147

.cspell.json

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

.eslintignore

@@ -8,8 +8,14 @@ __snapshots__
 
 packages/eslint-plugin-tslint/tests
 
-packages/website/**/*.js
-packages/website/**/*.d.ts
+packages/website/build
+packages/website/.docusaurus
+packages/website/sidebars
+packages/website/webpack.plugin.js
+packages/website/babel.config.js
+packages/website/docusaurus.config.js
+packages/website/src/modules
+packages/website/src/vendor
 
 # Files copied as part of the build
 packages/types/src/ast-spec.ts

.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/website/docusaurus.config.js

@@ -27,6 +27,7 @@ const config = {
     sponsors,
   },
   plugins: [
+    require.resolve('./webpack.plugin'),
     '@docusaurus/plugin-debug',
     [
       '@docusaurus/theme-classic',
@@ -84,6 +85,12 @@ const config = {
             label: 'Rules',
             position: 'left',
           },
+          {
+            to: 'repl',
+            activeBasePath: 'repl',
+            position: 'right',
+            label: 'Playground',
+          },
           {
             href: githubUrl,
             position: 'right',

packages/website/package.json

@@ -29,14 +29,20 @@
     "eslint": "*",
     "react-dom": "^17.0.2",
     "react": "^17.0.2",
-    "typescript": "*"
+    "typescript": "*",
+    "path-browserify": "1.0.1",
+    "os-browserify": "0.3.0",
+    "util": "0.12.4",
+    "assert": "2.0.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^2.0.0-beta.9",
+    "@types/react": "^17.0.34",
     "@types/react-helmet": "^6.1.4",
     "@types/react-router-dom": "^5.3.2",
-    "@types/react": "^17.0.34",
     "globby": "^11.0.4",
+    "monaco-editor": "^0.29.1",
+    "string-replace-loader": "^3.0.3",
     "webpack": "^5.61.0"
   },
   "browserslist": {

packages/website/src/components/ast-viewer.module.css

@@ -0,0 +1,70 @@
+.list,
+.subList {
+  cursor: default;
+  box-sizing: border-box;
+  font-family: monospace;
+  margin: 0;
+  padding-left: 0;
+  list-style: none;
+}
+
+.subList {
+  padding-left: 1rem;
+}
+
+.nonExpand,
+.expand {
+  border-left: 0.1rem dashed var(--ifm-color-emphasis-200);
+  padding-left: 0.9rem;
+}
+
+.expand.open::before {
+  content: '+';
+}
+
+.selected {
+  background-color: 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;
+}
+
+.propBoolean {
+  color: #b58900;
+}
+
+.propString {
+  color: #15aa15;
+}
+
+.hidden {
+  color: var(--ifm-color-emphasis-400);
+}
+
+.clickable {
+  cursor: pointer;
+}
+.clickable:hover {
+  text-decoration: underline;
+}