Mar 31, 2022 · Mar 31, 2022 · Mar 31, 2022
diff --git a/packages/website/src/components/config/ConfigTypeScript.tsx b/packages/website/src/components/config/ConfigTypeScript.tsx
 import React, { useCallback } from 'react';
 import tsConfigOptions from '../tsConfigOptions.json';
 import React, { useCallback, useEffect, useState } from 'react';

 import ConfigEditor from './ConfigEditor';
 import ConfigEditor, { ConfigOptionsType } from './ConfigEditor';
 import type { CompilerFlags } from '../types';
 import { shallowEqual } from '../lib/shallowEqual';

  readonly config?: CompilerFlags;
 }

 interface OptionDeclarations {
  name: string;
  type?: unknown;
  category?: { message: string };
  description?: { message: string };
 }

 function checkOptions(item: [string, unknown]): item is [string, boolean] {
  return typeof item[1] === 'boolean';
 }

 function ConfigTypeScript(props: ModalTypeScriptProps): JSX.Element {
  const [tsConfigOptions, updateOptions] = useState<ConfigOptionsType[]>([]);

  useEffect(() => {
    if (window.ts) {
      updateOptions(
        Object.values(
          // @ts-expect-error: definition is not fully correct
          (window.ts.optionDeclarations as OptionDeclarations[])
            .filter(
              item =>
                item.type === 'boolean' &&
                item.description &&
                item.category &&
                ![
                  'Command-line Options',
                  'Modules',
                  'Projects',
                  'Compiler Diagnostics',
                  'Editor Support',
                  'Output Formatting',
                  'Watch and Build Modes',
                  'Source Map Options',
                ].includes(item.category.message),
            )
            .reduce<Record<string, ConfigOptionsType>>((group, item) => {
              const category = item.category!.message;
              group[category] = group[category] ?? {
                heading: category,
                fields: [],
              };
              group[category].fields.push({
                key: item.name,
                label: item.description!.message,
              });
              return group;
            }, {}),
        ),
      );
    }
  }, [props.isOpen]);

  const onClose = useCallback(
    (newConfig: Record<string, unknown>) => {
      const cfg = Object.fromEntries(
diff --git a/packages/website/src/components/editor/LoadedEditor.tsx b/packages/website/src/components/editor/LoadedEditor.tsx

  useEffect(() => {
    sandboxInstance.setCompilerSettings({
      noResolve: true,
      strict: true,
      target: main.languages.typescript.ScriptTarget.ESNext,
      module: main.languages.typescript.ModuleKind.ESNext,
      lib: ['ESNext'],
      ...tsConfig,
      jsx: jsx ?2 :0,
      jsx: jsx ?main.languages.typescript.JsxEmit.React :undefined,
    });
  }, [jsx, sandboxInstance, JSON.stringify(tsConfig) /* todo: better way? */]);

diff --git a/packages/website/src/components/tsConfigOptions.json b/packages/website/src/components/tsConfigOptions.json
Original file line number	Diff line number	Diff line change
		@@ -1,7 +1,6 @@
		import React, { useCallback } from 'react';
		import tsConfigOptions from '../tsConfigOptions.json';
		import React, { useCallback, useEffect, useState } from 'react';

		import ConfigEditor from './ConfigEditor';
		import ConfigEditor, { ConfigOptionsType } from './ConfigEditor';
		import type { CompilerFlags } from '../types';
		import { shallowEqual } from '../lib/shallowEqual';

Expand All		@@ -11,11 +10,59 @@ interface ModalTypeScriptProps {
		readonly config?: CompilerFlags;
		}

		interface OptionDeclarations {
		name: string;
		type?: unknown;
		category?: { message: string };
		description?: { message: string };
		}

		function checkOptions(item: [string, unknown]): item is [string, boolean] {
		return typeof item[1] === 'boolean';
		}

		function ConfigTypeScript(props: ModalTypeScriptProps): JSX.Element {
		const [tsConfigOptions, updateOptions] = useState<ConfigOptionsType[]>([]);

		useEffect(() => {
		if (window.ts) {
		updateOptions(
		Object.values(
		// @ts-expect-error: definition is not fully correct
		(window.ts.optionDeclarations as OptionDeclarations[])
		.filter(
		item =>
		item.type === 'boolean' &&
		item.description &&
		item.category &&
		![
		'Command-line Options',
		'Modules',
		'Projects',
		'Compiler Diagnostics',
		'Editor Support',
		'Output Formatting',
		'Watch and Build Modes',
		'Source Map Options',
		].includes(item.category.message),
		)
		.reduce<Record<string, ConfigOptionsType>>((group, item) => {
		const category = item.category!.message;
		group[category] = group[category] ?? {
		heading: category,
		fields: [],
		};
		group[category].fields.push({
		key: item.name,
		label: item.description!.message,
		});
		return group;
		}, {}),
		),
		);
		}
		}, [props.isOpen]);

		const onClose = useCallback(
		(newConfig: Record<string, unknown>) => {
		const cfg = Object.fromEntries(
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -139,8 +139,13 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({

		useEffect(() => {
		sandboxInstance.setCompilerSettings({
		noResolve: true,
		strict: true,
		target: main.languages.typescript.ScriptTarget.ESNext,
		module: main.languages.typescript.ModuleKind.ESNext,
		lib: ['ESNext'],
		...tsConfig,
		jsx: jsx ?2 :0,
		jsx: jsx ?main.languages.typescript.JsxEmit.React :undefined,
		});
		}, [jsx, sandboxInstance, JSON.stringify(tsConfig) /* todo: better way? */]);

Expand Down