Jun 10, 2022 · May 31, 2022 · Jun 1, 2022 · Jun 10, 2022 · Jun 10, 2022
diff --git a/packages/website/src/components/config/ConfigEditor.module.css b/packages/website/src/components/config/ConfigEditor.module.css
  margin: 0.2rem 0;
 }

 .searchResultDescription {
  flex: 1 0 75%;
 }

 .searchResult:nth-child(even),
 .searchResultGroup:nth-child(even) {
  background: var(--ifm-color-emphasis-100);
diff --git a/packages/website/src/components/config/ConfigEditor.tsx b/packages/website/src/components/config/ConfigEditor.tsx
 import Checkbox from '../inputs/Checkbox';
 import useFocus from '../hooks/useFocus';
 import Modal from '@site/src/components/modals/Modal';
 import Dropdown from '@site/src/components/inputs/Dropdown';

 export interface ConfigOptionsField {
  key: string;
  type: 'boolean' | 'string';
  label?: string;
  defaults?: unknown[];
  enum?: string[];
 }

 export interface ConfigOptionsType {
  state: ConfigEditorValues,
  action:
    | { type: 'init'; config?: ConfigEditorValues }
    | {
        type: 'set';
        name: string;
        value: unknown;
      }
    | {
        type: 'toggle';
        checked: boolean;
    case 'init': {
      return action.config ?? {};
    }
    case 'set': {
      const newState = { ...state };
      if (action.value === '') {
        delete newState[action.name];
      } else {
        newState[action.name] = action.value;
      }
      return newState;
    }
    case 'toggle': {
      const newState = { ...state };
      if (action.checked) {
            <div>
              {group.fields.map(item => (
                <label className={styles.searchResult} key={item.key}>
                  <span>
                  <span className={styles.searchResultDescription}>
                    <span className={styles.searchResultName}>{item.key}</span>
                    {item.label && <br />}
                    {item.label && <span>{item.label}</span>}
                  </span>
                  <Checkbox
                    name={`config_${item.key}`}
                    value={item.key}
                    indeterminate={
                      Boolean(config[item.key]) &&
                      !isDefault(config[item.key], item.defaults)
                    }
                    checked={Boolean(config[item.key])}
                    onChange={(checked, name): void =>
                      setConfig({
                        type: 'toggle',
                        checked,
                        default: item.defaults,
                        name,
                      })
                    }
                  />
                  {item.type === 'boolean' && (
                    <Checkbox
                      name={`config_${item.key}`}
                      value={item.key}
                      indeterminate={
                        Boolean(config[item.key]) &&
                        !isDefault(config[item.key], item.defaults)
                      }
                      checked={Boolean(config[item.key])}
                      onChange={(checked, name): void =>
                        setConfig({
                          type: 'toggle',
                          checked,
                          default: item.defaults,
                          name,
                        })
                      }
                    />
                  )}
                  {item.type === 'string' && item.enum && (
                    <Dropdown
                      name={`config_${item.key}`}
                      value={String(config[item.key])}
                      options={item.enum}
                      onChange={(value): void => {
                        setConfig({
                          type: 'set',
                          value,
                          name: item.key,
                        });
                      }}
                    />
                  )}
                </label>
              ))}
            </div>
diff --git a/packages/website/src/components/config/ConfigEslint.tsx b/packages/website/src/components/config/ConfigEslint.tsx
          .map(item => ({
            key: item.name,
            label: item.description,
            type: 'boolean',
            defaults: ['error', 2, 'warn', 1, ['error'], ['warn'], [2], [1]],
          })),
      },
          .map(item => ({
            key: item.name,
            label: item.description,
            type: 'boolean',
            defaults: ['error', 2, 'warn', 1, ['error'], ['warn'], [2], [1]],
          })),
      },
diff --git a/packages/website/src/components/config/ConfigTypeScript.tsx b/packages/website/src/components/config/ConfigTypeScript.tsx
  readonly config?: string;
 }

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

 function ConfigTypeScript(props: ConfigTypeScriptProps): JSX.Element {
  const [tsConfigOptions, updateOptions] = useState<ConfigOptionsType[]>([]);
  const [configObject, updateConfigObject] = useState<TSConfig>();
                heading: category,
                fields: [],
              };
              group[category].fields.push({
                key: item.name,
                label: item.description!.message,
              });
              if (item.type === 'boolean') {
                group[category].fields.push({
                  key: item.name,
                  type: 'boolean',
                  label: item.description!.message,
                });
              } else if (item.type instanceof Map) {
                group[category].fields.push({
                  key: item.name,
                  type: 'string',
                  label: item.description!.message,
                  enum: ['', ...Array.from<string>(item.type.keys())],
                });
              }
              return group;
            },
            {},

  const onClose = useCallback(
    (newConfig: Record<string, unknown>) => {
      const cfg = Object.fromEntries(
        Object.entries(newConfig).filter(checkOptions),
      );
      const cfg = { ...newConfig };
      if (!shallowEqual(cfg, configObject?.compilerOptions)) {
        props.onClose({
          tsconfig: toJson({ ...(configObject ?? {}), compilerOptions: cfg }),
diff --git a/packages/website/src/components/config/utils.ts b/packages/website/src/components/config/utils.ts
  type?: unknown;
  category?: { message: string };
  description?: { message: string };
  element?: {
    type: unknown;
  };
 }

 export function parseESLintRC(code?: string): EslintRC {
 export function getTypescriptOptions(): OptionDeclarations[] {
  const allowedCategories = [
    'Command-line Options',
    'Modules',
    'Projects',
    'Compiler Diagnostics',
    'Editor Support',
    'Source Map Options',
  ];

  const filteredNames = [
    'moduleResolution',
    'moduleDetection',
    'plugins',
    'typeRoots',
    'jsx',
  ];

  // @ts-expect-error: definition is not fully correct
  return (window.ts.optionDeclarations as OptionDeclarations[]).filter(
    item =>
      item.type === 'boolean' &&
      (item.type === 'boolean' ||
        item.type === 'list' ||
        item.type instanceof Map) &&
      item.description &&
      item.category &&
      !allowedCategories.includes(item.category.message),
      !allowedCategories.includes(item.category.message) &&
      !filteredNames.includes(item.name),
  );
 }

diff --git a/packages/website/src/components/editor/config.ts b/packages/website/src/components/editor/config.ts
    module: window.ts.ModuleKind.ESNext as number,
    ...tsConfig,
    jsx: jsx ? window.ts.JsxEmit.Preserve : window.ts.JsxEmit.None,
    moduleResolution: undefined,
    plugins: undefined,
    typeRoots: undefined,
    paths: undefined,
    moduleDetection: undefined,
    baseUrl: undefined,
  };
 }


 export function getTsConfigSchema(): JSONSchema4 {
  const properties = getTypescriptOptions().reduce((options, item) => {
    options[item.name] = {
      type: item.type,
      description: item.description!.message,
    };
    if (item.type === 'boolean') {
      options[item.name] = {
        type: 'boolean',
        description: item.description!.message,
      };
    } else if (item.type === 'list' && item.element?.type instanceof Map) {
      options[item.name] = {
        type: 'array',
        items: {
          type: 'string',
          enum: Array.from(item.element.type.keys()),
        },
        description: item.description!.message,
      };
    } else if (item.type instanceof Map) {
      options[item.name] = {
        type: 'string',
        description: item.description!.message,
        enum: Array.from(item.type.keys()),
      };
    }
    return options;
  }, {});
Original file line number	Diff line number	Diff line change
Expand Up		@@ -39,6 +39,10 @@
		margin: 0.2rem 0;
		}

		.searchResultDescription {
		flex: 1 0 75%;
		}

		.searchResult:nth-child(even),
		.searchResultGroup:nth-child(even) {
		background: var(--ifm-color-emphasis-100);
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,11 +7,14 @@ import Text from '../inputs/Text';
		import Checkbox from '../inputs/Checkbox';
		import useFocus from '../hooks/useFocus';
		import Modal from '@site/src/components/modals/Modal';
		import Dropdown from '@site/src/components/inputs/Dropdown';

		export interface ConfigOptionsField {
		key: string;
		type: 'boolean' \| 'string';
		label?: string;
		defaults?: unknown[];
		enum?: string[];
		}

		export interface ConfigOptionsType {
Expand All		@@ -33,6 +36,11 @@ function reducerObject(
		state: ConfigEditorValues,
		action:
		\| { type: 'init'; config?: ConfigEditorValues }
		\| {
		type: 'set';
		name: string;
		value: unknown;
		}
		\| {
		type: 'toggle';
		checked: boolean;
Expand All		@@ -44,6 +52,15 @@ function reducerObject(
		case 'init': {
		return action.config ?? {};
		}
		case 'set': {
		const newState = { ...state };
		if (action.value === '') {
		delete newState[action.name];
		} else {
		newState[action.name] = action.value;
		}
		return newState;
		}
		case 'toggle': {
		const newState = { ...state };
		if (action.checked) {
Expand DownExpand Up		@@ -110,28 +127,44 @@ function ConfigEditor(props: ConfigEditorProps): JSX.Element {
		<div>
		{group.fields.map(item => (
		<label className={styles.searchResult} key={item.key}>
		<span>
		<span className={styles.searchResultDescription}>
		<span className={styles.searchResultName}>{item.key}</span>
		{item.label && <br />}
		{item.label && <span>{item.label}</span>}
		</span>
		<Checkbox
		name={`config_${item.key}`}
		value={item.key}
		indeterminate={
		Boolean(config[item.key]) &&
		!isDefault(config[item.key], item.defaults)
		}
		checked={Boolean(config[item.key])}
		onChange={(checked, name): void =>
		setConfig({
		type: 'toggle',
		checked,
		default: item.defaults,
		name,
		})
		}
		/>
		{item.type === 'boolean' && (
		<Checkbox
		name={`config_${item.key}`}
		value={item.key}
		indeterminate={
		Boolean(config[item.key]) &&
		!isDefault(config[item.key], item.defaults)
		}
		checked={Boolean(config[item.key])}
		onChange={(checked, name): void =>
		setConfig({
		type: 'toggle',
		checked,
		default: item.defaults,
		name,
		})
		}
		/>
		)}
		{item.type === 'string' && item.enum && (
		<Dropdown
		name={`config_${item.key}`}
		value={String(config[item.key])}
		options={item.enum}
		onChange={(value): void => {
		setConfig({
		type: 'set',
		value,
		name: item.key,
		});
		}}
		/>
		)}
		</label>
		))}
		</div>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -45,6 +45,7 @@ function ConfigEslint(props: ConfigEslintProps): JSX.Element {
		.map(item => ({
		key: item.name,
		label: item.description,
		type: 'boolean',
		defaults: ['error', 2, 'warn', 1, ['error'], ['warn'], [2], [1]],
		})),
		},
Expand All		@@ -55,6 +56,7 @@ function ConfigEslint(props: ConfigEslintProps): JSX.Element {
		.map(item => ({
		key: item.name,
		label: item.description,
		type: 'boolean',
		defaults: ['error', 2, 'warn', 1, ['error'], ['warn'], [2], [1]],
		})),
		},
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -11,10 +11,6 @@ interface ConfigTypeScriptProps {
		readonly config?: string;
		}

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

		function ConfigTypeScript(props: ConfigTypeScriptProps): JSX.Element {
		const [tsConfigOptions, updateOptions] = useState<ConfigOptionsType[]>([]);
		const [configObject, updateConfigObject] = useState<TSConfig>();
Expand All		@@ -36,10 +32,20 @@ function ConfigTypeScript(props: ConfigTypeScriptProps): JSX.Element {
		heading: category,
		fields: [],
		};
		group[category].fields.push({
		key: item.name,
		label: item.description!.message,
		});
		if (item.type === 'boolean') {
		group[category].fields.push({
		key: item.name,
		type: 'boolean',
		label: item.description!.message,
		});
		} else if (item.type instanceof Map) {
		group[category].fields.push({
		key: item.name,
		type: 'string',
		label: item.description!.message,
		enum: ['', ...Array.from<string>(item.type.keys())],
		});
		}
		return group;
		},
		{},
Expand All		@@ -51,9 +57,7 @@ function ConfigTypeScript(props: ConfigTypeScriptProps): JSX.Element {

		const onClose = useCallback(
		(newConfig: Record<string, unknown>) => {
		const cfg = Object.fromEntries(
		Object.entries(newConfig).filter(checkOptions),
		);
		const cfg = { ...newConfig };
		if (!shallowEqual(cfg, configObject?.compilerOptions)) {
		props.onClose({
		tsconfig: toJson({ ...(configObject ?? {}), compilerOptions: cfg }),
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,6 +8,9 @@ export interface OptionDeclarations {
		type?: unknown;
		category?: { message: string };
		description?: { message: string };
		element?: {
		type: unknown;
		};
		}

		export function parseESLintRC(code?: string): EslintRC {
Expand DownExpand Up		@@ -84,7 +87,6 @@ export function toJsonConfig(cfg: unknown, prop: string): string {
		export function getTypescriptOptions(): OptionDeclarations[] {
		const allowedCategories = [
		'Command-line Options',
		'Modules',
		'Projects',
		'Compiler Diagnostics',
		'Editor Support',
Expand All		@@ -93,13 +95,24 @@ export function getTypescriptOptions(): OptionDeclarations[] {
		'Source Map Options',
		];

		const filteredNames = [
		'moduleResolution',
		'moduleDetection',
		'plugins',
		'typeRoots',
		'jsx',
		];

		// @ts-expect-error: definition is not fully correct
		return (window.ts.optionDeclarations as OptionDeclarations[]).filter(
		item =>
		item.type === 'boolean' &&
		(item.type === 'boolean' \|\|
		item.type === 'list' \|\|
		item.type instanceof Map) &&
		item.description &&
		item.category &&
		!allowedCategories.includes(item.category.message),
		!allowedCategories.includes(item.category.message) &&
		!filteredNames.includes(item.name),
		);
		}

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -13,6 +13,12 @@ export function createCompilerOptions(
		module: window.ts.ModuleKind.ESNext as number,
		...tsConfig,
		jsx: jsx ? window.ts.JsxEmit.Preserve : window.ts.JsxEmit.None,
		moduleResolution: undefined,
		plugins: undefined,
		typeRoots: undefined,
		paths: undefined,
		moduleDetection: undefined,
		baseUrl: undefined,
		};
		}

Expand DownExpand Up		@@ -58,10 +64,27 @@ export function getEslintSchema(

		export function getTsConfigSchema(): JSONSchema4 {
		const properties = getTypescriptOptions().reduce((options, item) => {
		options[item.name] = {
		type: item.type,
		description: item.description!.message,
		};
		if (item.type === 'boolean') {
		options[item.name] = {
		type: 'boolean',
		description: item.description!.message,
		};
		} else if (item.type === 'list' && item.element?.type instanceof Map) {
		options[item.name] = {
		type: 'array',
		items: {
		type: 'string',
		enum: Array.from(item.element.type.keys()),
		},
		description: item.description!.message,
		};
		} else if (item.type instanceof Map) {
		options[item.name] = {
		type: 'string',
		description: item.description!.message,
		enum: Array.from(item.type.keys()),
		};
		}
		return options;
		}, {});

Expand Down