From d50799d6c081cd28e676421e25607bd835421c9e Mon Sep 17 00:00:00 2001 From: Armano Date: Tue, 31 May 2022 19:13:35 +0200 Subject: [PATCH 1/3] chore(website): improve config editor to support enum values and not filter compilerOptions --- .../components/config/ConfigEditor.module.css | 4 ++ .../src/components/config/ConfigEditor.tsx | 65 ++++++++++++++----- .../src/components/config/ConfigEslint.tsx | 2 + .../components/config/ConfigTypeScript.tsx | 26 ++++---- .../website/src/components/config/utils.ts | 15 ++++- .../website/src/components/editor/config.ts | 23 +++++-- 6 files changed, 99 insertions(+), 36 deletions(-) diff --git a/packages/website/src/components/config/ConfigEditor.module.css b/packages/website/src/components/config/ConfigEditor.module.css index 1329e5af9a74..b2f25dfcbe0f 100644 --- a/packages/website/src/components/config/ConfigEditor.module.css +++ b/packages/website/src/components/config/ConfigEditor.module.css @@ -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); diff --git a/packages/website/src/components/config/ConfigEditor.tsx b/packages/website/src/components/config/ConfigEditor.tsx index 43bfcadd9bcd..21664128ee0f 100644 --- a/packages/website/src/components/config/ConfigEditor.tsx +++ b/packages/website/src/components/config/ConfigEditor.tsx @@ -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 { @@ -33,6 +36,11 @@ function reducerObject( state: ConfigEditorValues, action: | { type: 'init'; config?: ConfigEditorValues } + | { + type: 'set'; + name: string; + value: unknown; + } | { type: 'toggle'; checked: boolean; @@ -44,6 +52,11 @@ function reducerObject( case 'init': { return action.config ?? {}; } + case 'set': { + const newState = { ...state }; + newState[action.name] = action.value; + return newState; + } case 'toggle': { const newState = { ...state }; if (action.checked) { @@ -110,28 +123,44 @@ function ConfigEditor(props: ConfigEditorProps): JSX.Element {
{group.fields.map(item => ( ))}
diff --git a/packages/website/src/components/config/ConfigEslint.tsx b/packages/website/src/components/config/ConfigEslint.tsx index 3ffc57cb35ff..b1e949b7c1dd 100644 --- a/packages/website/src/components/config/ConfigEslint.tsx +++ b/packages/website/src/components/config/ConfigEslint.tsx @@ -50,6 +50,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]], })), }, @@ -60,6 +61,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]], })), }, diff --git a/packages/website/src/components/config/ConfigTypeScript.tsx b/packages/website/src/components/config/ConfigTypeScript.tsx index 78f547088b66..5f2083aa86d8 100644 --- a/packages/website/src/components/config/ConfigTypeScript.tsx +++ b/packages/website/src/components/config/ConfigTypeScript.tsx @@ -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([]); const [configObject, updateConfigObject] = useState({}); @@ -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(item.type.keys()), + }); + } return group; }, {}, @@ -51,9 +57,7 @@ function ConfigTypeScript(props: ConfigTypeScriptProps): JSX.Element { const onClose = useCallback( (newConfig: Record) => { - const cfg = Object.fromEntries( - Object.entries(newConfig).filter(checkOptions), - ); + const cfg = { ...newConfig }; if (!shallowEqual(cfg, configObject)) { props.onClose({ tsconfig: toJsonConfig(cfg, 'compilerOptions') }); } else { diff --git a/packages/website/src/components/config/utils.ts b/packages/website/src/components/config/utils.ts index 9ee188b6152e..66f446564c84 100644 --- a/packages/website/src/components/config/utils.ts +++ b/packages/website/src/components/config/utils.ts @@ -57,7 +57,6 @@ export function toJsonConfig(cfg: unknown, prop: string): string { export function getTypescriptOptions(): OptionDeclarations[] { const allowedCategories = [ 'Command-line Options', - 'Modules', 'Projects', 'Compiler Diagnostics', 'Editor Support', @@ -66,13 +65,23 @@ export function getTypescriptOptions(): OptionDeclarations[] { 'Source Map Options', ]; + const filteredNames = [ + 'moduleResolution', + 'moduleDetection', + 'lib', + '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 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 index 679baa8a0f22..f8c385fce93c 100644 --- a/packages/website/src/components/editor/config.ts +++ b/packages/website/src/components/editor/config.ts @@ -13,6 +13,13 @@ export function createCompilerOptions( module: window.ts.ModuleKind.ESNext as number, ...tsConfig, jsx: jsx ? window.ts.JsxEmit.Preserve : window.ts.JsxEmit.None, + moduleResolution: undefined, + lib: undefined, + plugins: undefined, + typeRoots: undefined, + paths: undefined, + moduleDetection: undefined, + baseUrl: undefined, }; } @@ -58,10 +65,18 @@ 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 instanceof Map) { + options[item.name] = { + type: 'string', + description: item.description!.message, + enum: Array.from(item.type.keys()), + }; + } return options; }, {}); From b9ec296acf4fe8f3c0d48ddd87a89dfcb0b7a913 Mon Sep 17 00:00:00 2001 From: Armano Date: Wed, 1 Jun 2022 18:25:30 +0200 Subject: [PATCH 2/3] fix: support for empty values in enum selection --- packages/website/src/components/config/ConfigEditor.tsx | 6 +++++- packages/website/src/components/config/ConfigTypeScript.tsx | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/website/src/components/config/ConfigEditor.tsx b/packages/website/src/components/config/ConfigEditor.tsx index 21664128ee0f..4f0f9d939955 100644 --- a/packages/website/src/components/config/ConfigEditor.tsx +++ b/packages/website/src/components/config/ConfigEditor.tsx @@ -54,7 +54,11 @@ function reducerObject( } case 'set': { const newState = { ...state }; - newState[action.name] = action.value; + if (action.value === '') { + delete newState[action.name]; + } else { + newState[action.name] = action.value; + } return newState; } case 'toggle': { diff --git a/packages/website/src/components/config/ConfigTypeScript.tsx b/packages/website/src/components/config/ConfigTypeScript.tsx index 5f2083aa86d8..7bdbc7fcdfa9 100644 --- a/packages/website/src/components/config/ConfigTypeScript.tsx +++ b/packages/website/src/components/config/ConfigTypeScript.tsx @@ -43,7 +43,7 @@ function ConfigTypeScript(props: ConfigTypeScriptProps): JSX.Element { key: item.name, type: 'string', label: item.description!.message, - enum: Array.from(item.type.keys()), + enum: ['', ...Array.from(item.type.keys())], }); } return group; From 8ef15c9cf7262b07c52286c3ef8d0f61a1ba5b22 Mon Sep 17 00:00:00 2001 From: Armano Date: Fri, 10 Jun 2022 03:47:58 +0200 Subject: [PATCH 3/3] fix: add missing support for array autocompletion --- packages/website/src/components/config/utils.ts | 8 ++++++-- packages/website/src/components/editor/config.ts | 9 +++++++++ 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/website/src/components/config/utils.ts b/packages/website/src/components/config/utils.ts index aae6ab0a47e4..749487ea1aab 100644 --- a/packages/website/src/components/config/utils.ts +++ b/packages/website/src/components/config/utils.ts @@ -8,6 +8,9 @@ export interface OptionDeclarations { type?: unknown; category?: { message: string }; description?: { message: string }; + element?: { + type: unknown; + }; } export function parseESLintRC(code?: string): EslintRC { @@ -95,7 +98,6 @@ export function getTypescriptOptions(): OptionDeclarations[] { const filteredNames = [ 'moduleResolution', 'moduleDetection', - 'lib', 'plugins', 'typeRoots', 'jsx', @@ -104,7 +106,9 @@ export function getTypescriptOptions(): OptionDeclarations[] { // @ts-expect-error: definition is not fully correct return (window.ts.optionDeclarations as OptionDeclarations[]).filter( item => - (item.type === 'boolean' || item.type instanceof Map) && + (item.type === 'boolean' || + item.type === 'list' || + item.type instanceof Map) && item.description && item.category && !allowedCategories.includes(item.category.message) && diff --git a/packages/website/src/components/editor/config.ts b/packages/website/src/components/editor/config.ts index 390446bab601..b1d013ff28f6 100644 --- a/packages/website/src/components/editor/config.ts +++ b/packages/website/src/components/editor/config.ts @@ -69,6 +69,15 @@ export function getTsConfigSchema(): JSONSchema4 { 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',