From 78dd7165d62adc391051de47391b43120411618d Mon Sep 17 00:00:00 2001 From: Armano Date: Thu, 31 Mar 2022 02:15:01 +0200 Subject: [PATCH 1/2] fix(website): add missing transpilation options to playground #4414 --- .../src/components/editor/LoadedEditor.tsx | 7 ++- .../src/components/tsConfigOptions.json | 45 +++++++++++++++++++ 2 files changed, 51 insertions(+), 1 deletion(-) diff --git a/packages/website/src/components/editor/LoadedEditor.tsx b/packages/website/src/components/editor/LoadedEditor.tsx index a3e8395bc3d7..98560ee4893a 100644 --- a/packages/website/src/components/editor/LoadedEditor.tsx +++ b/packages/website/src/components/editor/LoadedEditor.tsx @@ -139,8 +139,13 @@ export const LoadedEditor: React.FC = ({ 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 index 8ddd3b6d35df..eefcd920504c 100644 --- a/packages/website/src/components/tsConfigOptions.json +++ b/packages/website/src/components/tsConfigOptions.json @@ -93,5 +93,50 @@ "label": "Disable including any library files, including the default lib.d.ts." } ] + }, + { + "heading": "Emit", + "fields": [ + { + "key": "declaration", + "label": "Generate, .d.ts files from TypeScript and JavaScript files in your project." + }, + { + "key": "removeComments", + "label": "Disable, emitting comments." + }, + { + "key": "importHelpers", + "label": "Allow, importing helper functions from tslib once per project, instead of including them per-file." + }, + { + "key": "downlevelIteration", + "label": "Emit, more compliant, but verbose and less performant JavaScript for iteration." + }, + { + "key": "inlineSourceMap", + "label": "Include, sourcemap files inside the emitted JavaScript." + }, + { + "key": "inlineSources", + "label": "Include, source code in the sourcemaps inside the emitted JavaScript." + }, + { + "key": "stripInternal", + "label": "Disable, emitting declarations that have @internal in their JSDoc comments." + }, + { + "key": "noEmitHelpers", + "label": "Disable, generating custom helper functions like __extends in compiled output." + }, + { + "key": "preserveConstEnums", + "label": "Disable, erasing const enum declarations in generated code." + }, + { + "key": "preserveValueImports", + "label": "Preserve, unused imported values in the JavaScript output that would otherwise be removed." + } + ] } ] From 494082dbc7ccf54a0d6dc91bd47f9bd2e83b6b1f Mon Sep 17 00:00:00 2001 From: Armano Date: Thu, 31 Mar 2022 03:28:37 +0200 Subject: [PATCH 2/2] fix(website): implement dynamic config generation #4414 --- .../components/config/ConfigTypeScript.tsx | 53 ++++++- .../src/components/tsConfigOptions.json | 142 ------------------ 2 files changed, 50 insertions(+), 145 deletions(-) delete mode 100644 packages/website/src/components/tsConfigOptions.json diff --git a/packages/website/src/components/config/ConfigTypeScript.tsx b/packages/website/src/components/config/ConfigTypeScript.tsx index 27cc2cbdd97b..b2c215c6b577 100644 --- a/packages/website/src/components/config/ConfigTypeScript.tsx +++ b/packages/website/src/components/config/ConfigTypeScript.tsx @@ -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'; @@ -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([]); + + 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>((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) => { const cfg = Object.fromEntries( diff --git a/packages/website/src/components/tsConfigOptions.json b/packages/website/src/components/tsConfigOptions.json deleted file mode 100644 index eefcd920504c..000000000000 --- a/packages/website/src/components/tsConfigOptions.json +++ /dev/null @@ -1,142 +0,0 @@ -[ - { - "heading": "Interop Constraints", - "fields": [ - { - "key": "isolatedModules", - "label": "Ensure that each file can be safely transpiled without relying on other imports." - }, - { - "key": "allowSyntheticDefaultImports", - "label": "Allow `import x from y` when a module doesn't have a default export." - }, - { - "key": "esModuleInterop", - "label": "Emit additional JavaScript to ease support for importing CommonJS modules. This enables allowSyntheticDefaultImports for type compatibility." - } - ] - }, - { - "heading": "Type Checking", - "fields": [ - { - "key": "strict", - "label": "Enable all strict type-checking options." - }, - { - "key": "noImplicitAny", - "label": "Enable error reporting for expressions and declarations with an implied any type.." - }, - { - "key": "strictNullChecks", - "label": "When type checking, take into account null and undefined." - }, - { - "key": "strictFunctionTypes", - "label": "When assigning functions, check to ensure parameters and the return values are subtype-compatible." - }, - { - "key": "strictBindCallApply", - "label": "Check that the arguments for bind, call, and apply methods match the original function." - }, - { - "key": "strictPropertyInitialization", - "label": "Check for class properties that are declared but not set in the constructor." - }, - { - "key": "noImplicitThis", - "label": "Enable error reporting when this is given the type any." - }, - { - "key": "alwaysStrict", - "label": "Ensure `use strict` is always emitted." - }, - { - "key": "noUnusedLocals", - "label": "Enable error reporting when a local variables aren't read." - }, - { - "key": "noUnusedParameters", - "label": "Raise an error when a function parameter isn't read." - }, - { - "key": "noImplicitReturns", - "label": "Enable error reporting for codepaths that do not explicitly return in a function." - }, - { - "key": "noFallthroughCasesInSwitch", - "label": "Enable error reporting for fallthrough cases in switch statements." - }, - { - "key": "allowUnusedLabels", - "label": "Disable error reporting for unused labels." - }, - { - "key": "allowUnreachableCode", - "label": "Disable error reporting for unreachable code." - } - ] - }, - { - "heading": "Language and Environment", - "fields": [ - { - "key": "experimentalDecorators", - "label": "Enable experimental support for TC39 stage 2 draft decorators." - }, - { - "key": "emitDecoratorMetadata", - "label": "Emit design-type metadata for decorated declarations in source files." - }, - { - "key": "noLib", - "label": "Disable including any library files, including the default lib.d.ts." - } - ] - }, - { - "heading": "Emit", - "fields": [ - { - "key": "declaration", - "label": "Generate, .d.ts files from TypeScript and JavaScript files in your project." - }, - { - "key": "removeComments", - "label": "Disable, emitting comments." - }, - { - "key": "importHelpers", - "label": "Allow, importing helper functions from tslib once per project, instead of including them per-file." - }, - { - "key": "downlevelIteration", - "label": "Emit, more compliant, but verbose and less performant JavaScript for iteration." - }, - { - "key": "inlineSourceMap", - "label": "Include, sourcemap files inside the emitted JavaScript." - }, - { - "key": "inlineSources", - "label": "Include, source code in the sourcemaps inside the emitted JavaScript." - }, - { - "key": "stripInternal", - "label": "Disable, emitting declarations that have @internal in their JSDoc comments." - }, - { - "key": "noEmitHelpers", - "label": "Disable, generating custom helper functions like __extends in compiled output." - }, - { - "key": "preserveConstEnums", - "label": "Disable, erasing const enum declarations in generated code." - }, - { - "key": "preserveValueImports", - "label": "Preserve, unused imported values in the JavaScript output that would otherwise be removed." - } - ] - } -]