Apr 24, 2023 · Aug 21, 2023 · Sep 15, 2023 · Sep 19, 2023 · Sep 19, 2023 · Sep 19, 2023
diff --git a/.yarn/patches/react-split-pane-npm-0.1.92-93dbf51dff.patch b/.yarn/patches/react-split-pane-npm-0.1.92-93dbf51dff.patch
diff --git a/packages/typescript-estree/src/use-at-your-own-risk.ts b/packages/typescript-estree/src/use-at-your-own-risk.ts
 // required by website
 export * from './create-program/getScriptKind';
 export * from './ast-converter';
 export type { ParseSettings } from './parseSettings';

diff --git a/packages/website/package.json b/packages/website/package.json
    "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",
    "@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",
    "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": "*",
diff --git a/packages/website/src/components/OptionsSelector.tsx b/packages/website/src/components/OptionsSelector.tsx
 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(),
          <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>
        <InputLabel name="Source type">
          <Dropdown
            name="sourceType"
            value={state.sourceType}
            value={state.sourceType ?? 'module'}
            onChange={(sourceType): void => setState({ sourceType })}
            options={['script', 'module']}
          />
      />
    );
  }
  return <OptionsSelectorContent {...props} />;

  return (
    <div className={styles.playgroundMenu}>
      <OptionsSelectorContent {...props} />
    </div>
  );
 }

 export default OptionsSelector;
diff --git a/packages/website/src/components/Playground.module.css b/packages/website/src/components/Playground.module.css
  --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;
  }
 }
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,4 @@
		// required by website
		export * from './create-program/getScriptKind';
		export * from './ast-converter';
		export type { ParseSettings } from './parseSettings';

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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",
Expand All		@@ -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",
Expand All		@@ -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": "*",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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(),
Expand All		@@ -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>
Expand All		@@ -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']}
		/>
Expand DownExpand Up		@@ -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;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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;
		}
		}