chore(website): [playground] add support for extends, ts types and more

packages/typescript-estree/src/use-at-your-own-risk.ts

@@ -1,5 +1,4 @@
 // required by website
-export * from './create-program/getScriptKind';
 export * from './ast-converter';
 export type { ParseSettings } from './parseSettings';
 

packages/website/package.json

@@ -6,7 +6,7 @@
     "build": "docusaurus build",
     "clear": "docusaurus clear",
     "format": "prettier --write \"./**/*.{md,mdx,ts,js,tsx,jsx}\" --ignore-path ../../.prettierignore",
-    "generate-website-dts": "tsx ./tools/generate-website-dts.ts",
+    "generate-package-versions": "tsx ./tools/generate-package-versions.ts",
     "stylelint": "stylelint \"src/**/*.css\"",
     "stylelint:fix": "stylelint \"src/**/*.css\" --fix",
     "lint": "nx lint",
@@ -24,8 +24,10 @@
     "@docusaurus/remark-plugin-npm2yarn": "~2.4.1",
     "@docusaurus/theme-common": "~2.4.1",
     "@mdx-js/react": "1.6.22",
+    "@monaco-editor/react": "^4.3.0",
     "@typescript-eslint/parser": "6.7.2",
     "@typescript-eslint/website-eslint": "6.7.2",
+    "@typescript/vfs": "^1.4.0",
     "clsx": "^2.0.0",
     "eslint": "*",
     "json-schema": "^0.4.0",
@@ -36,7 +38,7 @@
     "prism-react-renderer": "^1.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-split-pane": "^0.1.92",
+    "react-resizable-panels": "^0.0.55",
     "remark-docusaurus-tabs": "^0.2.0",
     "semver": "^7.5.4",
     "ts-node": "*",

packages/website/src/components/OptionsSelector.tsx

@@ -15,19 +15,18 @@ import ActionLabel from './layout/ActionLabel';
 import Expander from './layout/Expander';
 import InputLabel from './layout/InputLabel';
 import { createMarkdown, createMarkdownParams } from './lib/markdown';
-import { fileTypes } from './options';
+import { fileTypes, tsVersions } from './options';
+import styles from './Playground.module.css';
 import type { ConfigModel } from './types';
 
 export interface OptionsSelectorParams {
   readonly state: ConfigModel;
   readonly setState: (cfg: Partial<ConfigModel>) => void;
-  readonly tsVersions: readonly string[];
 }
 
 function OptionsSelectorContent({
   state,
   setState,
-  tsVersions,
 }: OptionsSelectorParams): React.JSX.Element {
   const [copyLink, copyLinkToClipboard] = useClipboard(() =>
     document.location.toString(),
@@ -54,10 +53,9 @@ function OptionsSelectorContent({
           <Dropdown
             name="ts"
             className="text--right"
+            options={tsVersions}
             value={state.ts}
-            disabled={!tsVersions.length}
             onChange={(ts): void => setState({ ts })}
-            options={(tsVersions.length && tsVersions) || [state.ts]}
           />
         </InputLabel>
         <InputLabel name="Eslint">{process.env.ESLINT_VERSION}</InputLabel>
@@ -75,7 +73,7 @@ function OptionsSelectorContent({
         <InputLabel name="Source type">
           <Dropdown
             name="sourceType"
-            value={state.sourceType}
+            value={state.sourceType ?? 'module'}
             onChange={(sourceType): void => setState({ sourceType })}
             options={['script', 'module']}
           />
@@ -132,7 +130,12 @@ function OptionsSelector(props: OptionsSelectorParams): React.JSX.Element {
       />
     );
   }
-  return <OptionsSelectorContent {...props} />;
+
+  return (
+    <div className={styles.playgroundMenu}>
+      <OptionsSelectorContent {...props} />
+    </div>
+  );
 }
 
 export default OptionsSelector;

packages/website/src/components/Playground.module.css

@@ -3,89 +3,95 @@
   --playground-secondary-color: var(--ifm-color-emphasis-100);
 }
 
-.options {
+.playgroundMenu {
+  width: 100%;
   background: var(--playground-main-color);
   overflow: auto;
-  z-index: 1;
 }
 
-.sourceCode {
-  height: 100%;
-  border: 1px solid var(--playground-secondary-color);
+.tabCode {
+  flex: 1;
+  overflow: hidden;
 }
 
-.codeBlocks {
-  display: flex;
-  flex: 1 1 0;
-  flex-direction: row;
-  height: 100%;
-  width: calc(100vw - 20rem);
+.hidden {
+  display: none;
+  visibility: hidden;
 }
 
-.astViewer {
-  height: 100%;
+.playgroundInfoContainer {
   width: 100%;
-  border: 1px solid var(--playground-secondary-color);
-  padding: 0;
+  height: 100%;
   overflow: auto;
-  word-wrap: initial;
-  white-space: nowrap;
   background: var(--code-editor-bg);
 }
 
-.codeContainer {
+.playgroundInfo {
+  word-wrap: normal;
+  width: 100%;
+  position: relative;
+  padding: 5px 0;
+}
+
+.panelGroup {
+  height: calc(100vh - 60px) !important;
+  border-top: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.Panel {
   display: flex;
   flex-direction: row;
-  position: fixed;
-  width: 100%;
-  height: calc(100% - var(--ifm-navbar-height));
-  top: var(--ifm-navbar-height);
-  z-index: calc(var(--ifm-z-index-fixed) - 1);
+  font-size: 2rem;
 }
 
-.playgroundInfoHeader {
-  position: sticky;
-  top: 0;
-  left: 0;
-  z-index: 1;
+.PanelColumn,
+.PanelRow {
+  display: flex;
 }
 
-.tabCode {
-  height: calc(100% - 41px);
-  overflow: auto;
+.PanelColumn {
+  flex-direction: column;
 }
 
-.hidden {
-  display: none;
-  visibility: hidden;
+.PanelRow {
+  flex-direction: row;
 }
 
-@media only screen and (width <= 996px) {
-  .codeContainer {
-    display: block;
-    width: 100%;
-    position: static;
-  }
+.PanelResizeHandle {
+  --resize-border-color: var(--playground-main-color);
+  --resize-background-color: var(--ifm-color-emphasis-200);
 
-  .codeBlocks {
-    display: block;
-    width: 100%;
-  }
+  flex: 0 0 11px;
+  background-clip: padding-box;
+  display: flex;
+  justify-content: stretch;
+  align-items: stretch;
+  outline: none;
+  transition: border-color 0.2s linear, background-color 0.2s linear;
+  background-color: var(--resize-background-color);
+  border-color: var(--resize-border-color);
+  border-style: solid;
+  border-width: 0 5px;
+}
 
-  .options {
-    display: none;
-  }
+.PanelResizeHandle[data-panel-group-direction='vertical'] {
+  flex-direction: column;
+  border-width: 5px 0;
+}
 
-  .tabCode {
-    height: calc(30rem - 3.2rem);
-  }
+.PanelResizeHandle[data-resize-handle-active],
+.PanelResizeHandle:hover {
+  --resize-border-color: var(--ifm-color-emphasis-200);
+  --resize-background-color: var(--ifm-color-emphasis-300);
+}
 
-  .astViewer,
-  .sourceCode {
-    height: 30rem;
+@media (max-width: 500px) {
+  .PanelResizeHandle {
+    flex: 0 0 21px;
+    border-width: 0 10px;
   }
 
-  .astViewer {
-    height: auto;
+  .PanelResizeHandle[data-panel-group-direction='vertical'] {
+    border-width: 10px 0;
   }
 }