Apr 2, 2023 · Mar 29, 2023 · Mar 29, 2023 · Mar 30, 2023 · Mar 30, 2023 · Mar 30, 2023
diff --git a/packages/website/src/components/OptionsSelector.tsx b/packages/website/src/components/OptionsSelector.tsx
 import React, { useCallback } from 'react';

 import { useClipboard } from '../hooks/useClipboard';
 importCheckboxfrom './inputs/Checkbox';
 import{ fileTypes }from './config';
 import Dropdown from './inputs/Dropdown';
 import Tooltip from './inputs/Tooltip';
 import ActionLabel from './layout/ActionLabel';
        <InputLabel name="TSEslint">{process.env.TS_ESLINT_VERSION}</InputLabel>
      </Expander>
      <Expander label="Options">
        <InputLabel name="Enable jsx">
          <Checkbox
            name="jsx"
            checked={state.jsx}
            onChange={(e): void => setState({ jsx: e })}
        <InputLabel name="File type">
          <Dropdown
            name="fileType"
            value={state.fileType}
            onChange={(fileType): void => setState({ fileType })}
            options={fileTypes}
          />
        </InputLabel>
        <InputLabel name="Source type">
diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx

 function Playground(): JSX.Element {
  const [state, setState] = useHashState({
 jsx: false,
 fileType: '.tsx',
    showAST: false,
    sourceType: 'module',
    code: '',
              </div>
              <LoadingEditor
                ts={state.ts}
 jsx={state.jsx}
 fileType={state.fileType}
                activeTab={activeTab}
                code={state.code}
                tsconfig={state.tsconfig}
diff --git a/packages/website/src/components/config.ts b/packages/website/src/components/config.ts
 export const detailTabs = [
  { value: false as const, label: 'Errors' },
  { value: 'es' as const, label: 'ESTree' },
  { value: 'ts' as const, label: 'TypeScript' },
  { value: 'scope' as const, label: 'Scope' },
 import type { ConfigFileType, ConfigShowAst } from './types';

 export const detailTabs: { value: ConfigShowAst; label: string }[] = [
  { value: false, label: 'Errors' },
  { value: 'es', label: 'ESTree' },
  { value: 'ts', label: 'TypeScript' },
  { value: 'scope', label: 'Scope' },
 ];

 export const fileTypes: ConfigFileType[] = [
  '.ts',
  '.tsx',
  '.js',
  '.jsx',
  '.d.ts',
  '.cjs',
  '.mjs',
  '.cts',
  '.mts',
 ];
diff --git a/packages/website/src/components/config/utils.ts b/packages/website/src/components/config/utils.ts
  return JSON.stringify(cfg, null, 2);
 }

 export function toJsonConfig(cfg: unknown, prop: string): string {
  return toJson({ [prop]: cfg });
 }

 export function getTypescriptOptions(): OptionDeclarations[] {
  const allowedCategories = [
    'Command-line Options',
diff --git a/packages/website/src/components/editor/LoadedEditor.tsx b/packages/website/src/components/editor/LoadedEditor.tsx
  tsconfig,
  eslintrc,
  selectedRange,
 jsx,
 fileType,
  onEsASTChange,
  onScopeChange,
  onTsASTChange,
  ]);

  useEffect(() => {
    const newPath =jsx ? '/input.tsx' : '/input.ts';
    const newPath =`/input${fileType}`;
    if (tabs.code.uri.path !== newPath) {
      const newModel = sandboxInstance.monaco.editor.createModel(
        tabs.code.getValue(),
 'typescript',
 undefined,
        sandboxInstance.monaco.Uri.file(newPath),
      );
      newModel.updateOptions({ tabSize: 2, insertSpaces: true });
      tabs.code.dispose();
      tabs.code = newModel;
    }
  }, [
    jsx,
    sandboxInstance.editor,
    sandboxInstance.monaco.Uri,
    sandboxInstance.monaco.editor,
    tabs,
  ]);
  }, [fileType, sandboxInstance.editor, sandboxInstance.monaco, tabs]);

  useEffect(() => {
    const config = createCompilerOptions(
      jsx,
      parseTSConfig(tsconfig).compilerOptions,
    );
    webLinter.updateCompilerOptions(config);
    sandboxInstance.setCompilerSettings(config);
  }, [jsx,sandboxInstance, tsconfig, webLinter]);
  }, [sandboxInstance, tsconfig, webLinter]);

  useEffect(() => {
    webLinter.updateRules(parseESLintRC(eslintrc).rules);
    const lintEditor = debounce(() => {
      console.info('[Editor] linting triggered');

      webLinter.updateParserOptions(jsx,sourceType);
      webLinter.updateParserOptions(sourceType);

      try {
        const messages = webLinter.lint(code);
        const messages = webLinter.lint(code, tabs.code.uri.path);

        const markers = parseLintResults(messages, codeActions, ruleId =>
          sandboxInstance.monaco.Uri.parse(
    lintEditor();
  }, [
    code,
 jsx,
 fileType,
    tsconfig,
    eslintrc,
    sourceType,
        run(editor) {
          const editorModel = editor.getModel();
          if (editorModel) {
            const fixed = webLinter.fix(editor.getValue());
            const fixed = webLinter.fix(
              editor.getValue(),
              editorModel.uri.path,
            );
            if (fixed.fixed) {
              editorModel.pushEditOperations(
                null,
diff --git a/packages/website/src/components/editor/config.ts b/packages/website/src/components/editor/config.ts
 import { getTypescriptOptions } from '../config/utils';

 export function createCompilerOptions(
  jsx = false,
  tsConfig: Record<string, unknown> = {},
 ): Monaco.languages.typescript.CompilerOptions {
  const config = window.ts.convertCompilerOptionsFromJson(
    {
      // ts and monaco has different type as monaco types are not changing base on ts version
      target: 'esnext',
      module: 'esnext',
      jsx: 'preserve',
      ...tsConfig,
 jsx: jsx ? 'preserve' : undefined,
 allowJs: true,
      lib: Array.isArray(tsConfig.lib) ? tsConfig.lib : undefined,
      moduleResolution: undefined,
      plugins: undefined,
diff --git a/packages/website/src/components/editor/useSandboxServices.ts b/packages/website/src/components/editor/useSandboxServices.ts
 ): Error | SandboxServices | undefined => {
  const { onLoaded } = props;
  const [services, setServices] = useState<Error | SandboxServices>();
  const [loadedTs, setLoadedTs] = useState<string>(props.ts);
  const { colorMode } = useColorMode();

  useEffect(() => {
    if (props.ts !== loadedTs) {
      window.location.reload();
    }
  }, [props.ts, loadedTs]);

  useEffect(() => {
    let sandboxInstance: SandboxInstance | undefined;
    setLoadedTs(props.ts);

    sandboxSingleton(props.ts)
      .then(async ({ main, sandboxFactory, lintUtils }) => {
        const compilerOptions = createCompilerOptions(props.jsx);
        const compilerOptions = createCompilerOptions();

        const sandboxConfig: Partial<SandboxConfig> = {
          text: props.code,
    };
    // colorMode and jsx can't be reactive here because we don't want to force a recreation
    // updating of colorMode and jsx is handled in LoadedEditor
  }, [props.ts, onLoaded]);
  }, []);

  return services;
 };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,7 +7,7 @@ import IconExternalLink from '@theme/Icon/ExternalLink';
		import React, { useCallback } from 'react';

		import { useClipboard } from '../hooks/useClipboard';
		importCheckboxfrom './inputs/Checkbox';
		import{ fileTypes }from './config';
		import Dropdown from './inputs/Dropdown';
		import Tooltip from './inputs/Tooltip';
		import ActionLabel from './layout/ActionLabel';
Expand DownExpand Up		@@ -74,11 +74,12 @@ function OptionsSelectorContent({
		<InputLabel name="TSEslint">{process.env.TS_ESLINT_VERSION}</InputLabel>
		</Expander>
		<Expander label="Options">
		<InputLabel name="Enable jsx">
		<Checkbox
		name="jsx"
		checked={state.jsx}
		onChange={(e): void => setState({ jsx: e })}
		<InputLabel name="File type">
		<Dropdown
		name="fileType"
		value={state.fileType}
		onChange={(fileType): void => setState({ fileType })}
		options={fileTypes}
		/>
		</InputLabel>
		<InputLabel name="Source type">
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -29,7 +29,7 @@ import type {

		function Playground(): JSX.Element {
		const [state, setState] = useHashState({
		jsx: false,
		fileType: '.tsx',
		showAST: false,
		sourceType: 'module',
		code: '',
Expand DownExpand Up		@@ -131,7 +131,7 @@ function Playground(): JSX.Element {
		</div>
		<LoadingEditor
		ts={state.ts}
		jsx={state.jsx}
		fileType={state.fileType}
		activeTab={activeTab}
		code={state.code}
		tsconfig={state.tsconfig}
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,20 @@
		export const detailTabs = [
		{ value: false as const, label: 'Errors' },
		{ value: 'es' as const, label: 'ESTree' },
		{ value: 'ts' as const, label: 'TypeScript' },
		{ value: 'scope' as const, label: 'Scope' },
		import type { ConfigFileType, ConfigShowAst } from './types';

		export const detailTabs: { value: ConfigShowAst; label: string }[] = [
		{ value: false, label: 'Errors' },
		{ value: 'es', label: 'ESTree' },
		{ value: 'ts', label: 'TypeScript' },
		{ value: 'scope', label: 'Scope' },
		];

		export const fileTypes: ConfigFileType[] = [
		'.ts',
		'.tsx',
		'.js',
		'.jsx',
		'.d.ts',
		'.cjs',
		'.mjs',
		'.cts',
		'.mts',
		];
Original file line number	Diff line number	Diff line change
Expand Up		@@ -79,10 +79,6 @@ export function toJson(cfg: unknown): string {
		return JSON.stringify(cfg, null, 2);
		}

		export function toJsonConfig(cfg: unknown, prop: string): string {
		return toJson({ [prop]: cfg });
		}

		export function getTypescriptOptions(): OptionDeclarations[] {
		const allowedCategories = [
		'Command-line Options',
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -33,7 +33,7 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
		tsconfig,
		eslintrc,
		selectedRange,
		jsx,
		fileType,
		onEsASTChange,
		onScopeChange,
		onTsASTChange,
Expand DownExpand Up		@@ -84,11 +84,11 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
		]);

		useEffect(() => {
		const newPath =jsx ? '/input.tsx' : '/input.ts';
		const newPath =`/input${fileType}`;
		if (tabs.code.uri.path !== newPath) {
		const newModel = sandboxInstance.monaco.editor.createModel(
		tabs.code.getValue(),
		'typescript',
		undefined,
		sandboxInstance.monaco.Uri.file(newPath),
		);
		newModel.updateOptions({ tabSize: 2, insertSpaces: true });
Expand All		@@ -98,22 +98,15 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
		tabs.code.dispose();
		tabs.code = newModel;
		}
		}, [
		jsx,
		sandboxInstance.editor,
		sandboxInstance.monaco.Uri,
		sandboxInstance.monaco.editor,
		tabs,
		]);
		}, [fileType, sandboxInstance.editor, sandboxInstance.monaco, tabs]);

		useEffect(() => {
		const config = createCompilerOptions(
		jsx,
		parseTSConfig(tsconfig).compilerOptions,
		);
		webLinter.updateCompilerOptions(config);
		sandboxInstance.setCompilerSettings(config);
		}, [jsx,sandboxInstance, tsconfig, webLinter]);
		}, [sandboxInstance, tsconfig, webLinter]);

		useEffect(() => {
		webLinter.updateRules(parseESLintRC(eslintrc).rules);
Expand All		@@ -128,10 +121,10 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
		const lintEditor = debounce(() => {
		console.info('[Editor] linting triggered');

		webLinter.updateParserOptions(jsx,sourceType);
		webLinter.updateParserOptions(sourceType);

		try {
		const messages = webLinter.lint(code);
		const messages = webLinter.lint(code, tabs.code.uri.path);

		const markers = parseLintResults(messages, codeActions, ruleId =>
		sandboxInstance.monaco.Uri.parse(
Expand DownExpand Up		@@ -164,7 +157,7 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
		lintEditor();
		}, [
		code,
		jsx,
		fileType,
		tsconfig,
		eslintrc,
		sourceType,
Expand DownExpand Up		@@ -239,7 +232,10 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
		run(editor) {
		const editorModel = editor.getModel();
		if (editorModel) {
		const fixed = webLinter.fix(editor.getValue());
		const fixed = webLinter.fix(
		editor.getValue(),
		editorModel.uri.path,
		);
		if (fixed.fixed) {
		editorModel.pushEditOperations(
		null,
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,16 +4,16 @@ import type Monaco from 'monaco-editor';
		import { getTypescriptOptions } from '../config/utils';

		export function createCompilerOptions(
		jsx = false,
		tsConfig: Record<string, unknown> = {},
		): Monaco.languages.typescript.CompilerOptions {
		const config = window.ts.convertCompilerOptionsFromJson(
		{
		// ts and monaco has different type as monaco types are not changing base on ts version
		target: 'esnext',
		module: 'esnext',
		jsx: 'preserve',
		...tsConfig,
		jsx: jsx ? 'preserve' : undefined,
		allowJs: true,
		lib: Array.isArray(tsConfig.lib) ? tsConfig.lib : undefined,
		moduleResolution: undefined,
		plugins: undefined,
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -33,22 +33,14 @@ export const useSandboxServices = (
		): Error \| SandboxServices \| undefined => {
		const { onLoaded } = props;
		const [services, setServices] = useState<Error \| SandboxServices>();
		const [loadedTs, setLoadedTs] = useState<string>(props.ts);
		const { colorMode } = useColorMode();

		useEffect(() => {
		if (props.ts !== loadedTs) {
		window.location.reload();
		}
		}, [props.ts, loadedTs]);

		useEffect(() => {
		let sandboxInstance: SandboxInstance \| undefined;
		setLoadedTs(props.ts);

		sandboxSingleton(props.ts)
		.then(async ({ main, sandboxFactory, lintUtils }) => {
		const compilerOptions = createCompilerOptions(props.jsx);
		const compilerOptions = createCompilerOptions();

		const sandboxConfig: Partial<SandboxConfig> = {
		text: props.code,
Expand DownExpand Up		@@ -128,7 +120,7 @@ export const useSandboxServices = (
		};
		// colorMode and jsx can't be reactive here because we don't want to force a recreation
		// updating of colorMode and jsx is handled in LoadedEditor
		}, [props.ts, onLoaded]);
		}, []);

		return services;
		};