Skip to content

Commit 81bd055

Browse files
author
Orta Therox
authored
Merge pull request #1735 from microsoft/tsconfigMostOpts
Support all tsconfig options in the playground
2 parents 8a19ee4 + 133f50d commit 81bd055

File tree

1 file changed

+114
-40
lines changed

1 file changed

+114
-40
lines changed

‎packages/playground/src/createConfigDropdown.ts

Lines changed: 114 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -12,69 +12,140 @@ type OptionsSummary = {
1212
// This is where all the localized descriptions come from
1313
declare const optionsSummary: OptionsSummary[]
1414

15+
type CompilerOptStub = {
16+
name: string
17+
type: string
18+
isCommandLineOnly: boolean
19+
category: any
20+
description: any
21+
}
22+
23+
const notCompilerOptions = ["Project_Files_0", "Watch_Options_999", "Command_line_Options_6171"]
24+
const notRelevantToPlayground = [
25+
"listFiles",
26+
"allowJs",
27+
"checkJs",
28+
"explainFiles",
29+
"diagnostics",
30+
"extendedDiagnostics",
31+
"traceResolution",
32+
"assumeChangesOnlyAffectDirectDependencies",
33+
"emitDeclarationOnly",
34+
"resolveJsonModule",
35+
"skipDefaultLibCheck",
36+
"emitBOM",
37+
"noEmit",
38+
"disableSizeLimit",
39+
"disableReferencedProjectLoad",
40+
"disableSolutionSearching",
41+
"listEmittedFiles",
42+
"incremental",
43+
"composite",
44+
"sourceMap",
45+
"declarationMap",
46+
"preserveSymlinks",
47+
"noResolve",
48+
"noEmitOnError",
49+
"skipLibCheck",
50+
"forceConsistentCasingInFileNames",
51+
]
52+
1553
export const createConfigDropdown = (sandbox: Sandbox, monaco: Monaco) => {
1654
const configContainer = document.getElementById("config-container")!
1755
const container = document.createElement("div")
1856
container.id = "boolean-options-container"
1957
configContainer.appendChild(container)
2058

21-
const compilerOpts = sandbox.getCompilerOptions()
22-
const boolOptions = Object.keys(compilerOpts).filter(k => typeof compilerOpts[k] === "boolean")
59+
// @ts-ignore
60+
const allOptions: CompilerOptStub[] = sandbox.ts.optionDeclarations
2361

24-
// we want to make sections of categories
62+
const boolOptions = allOptions.filter(
63+
k =>
64+
!notRelevantToPlayground.includes(k.name) &&
65+
k.type === "boolean" &&
66+
!k.isCommandLineOnly &&
67+
k.category &&
68+
!notCompilerOptions.includes(k.category.key)
69+
)
70+
71+
// We want to make sections of categories
2572
const categoryMap = {} as { [category: string]: { [optID: string]: OptionsSummary } }
26-
boolOptions.forEach(optID => {
27-
const summary = optionsSummary.find(sum => optID === sum.id)!
73+
boolOptions.forEach(opt => {
74+
let summary = optionsSummary.find(sum => opt.name === sum.id)!
75+
76+
// When a new compiler flag is added, and it isn't in the site yet, this lookup will fail.
77+
// Then re-create one from the info in the compiler
78+
if (!summary) {
79+
summary = {
80+
display: opt.name,
81+
oneliner: opt.description.message,
82+
id: opt.name,
83+
categoryDisplay: opt.category.message,
84+
categoryID: opt.category.key,
85+
}
86+
}
2887

2988
const existingCategory = categoryMap[summary.categoryID]
3089
if (!existingCategory) categoryMap[summary.categoryID] = {}
3190

32-
categoryMap[summary.categoryID][optID] = summary
91+
categoryMap[summary.categoryID][opt.name] = summary
3392
})
3493

35-
Object.keys(categoryMap).forEach(categoryID => {
36-
const categoryDiv = document.createElement("div")
37-
const header = document.createElement("h4")
38-
const ol = document.createElement("ol")
39-
40-
Object.keys(categoryMap[categoryID]).forEach(optID => {
41-
const optSummary = categoryMap[categoryID][optID]
42-
header.textContent = optSummary.categoryDisplay
43-
44-
const li = document.createElement("li")
45-
const label = document.createElement("label")
46-
label.style.position = "relative"
47-
label.style.width = "100%"
48-
49-
const svg = `<?xml version="1.0" encoding="UTF-8"?><svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
94+
const sortList = [
95+
"Strict_Type_Checking_Options_6173",
96+
"Additional_Checks_6176",
97+
"Basic_Options_6172",
98+
"Module_Resolution_Options_6174",
99+
"Source_Map_Options_6175",
100+
"Experimental_Options_6177",
101+
"Advanced_Options_6178",
102+
]
103+
104+
Object.keys(categoryMap)
105+
.sort((a, b) => sortList.indexOf(a) - sortList.indexOf(b))
106+
.forEach(categoryID => {
107+
const categoryDiv = document.createElement("div")
108+
const header = document.createElement("h4")
109+
const ol = document.createElement("ol")
110+
111+
Object.keys(categoryMap[categoryID]).forEach(optID => {
112+
const optSummary = categoryMap[categoryID][optID]
113+
header.textContent = optSummary.categoryDisplay
114+
115+
const li = document.createElement("li")
116+
const label = document.createElement("label")
117+
label.style.position = "relative"
118+
label.style.width = "100%"
119+
120+
const svg = `<?xml version="1.0" encoding="UTF-8"?><svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
50121
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
51122
<circle stroke="#0B6F57" cx="10" cy="10" r="9"></circle>
52123
<path d="M9.99598394,6 C10.2048193,6 10.4243641,5.91700134 10.6546185,5.75100402 C10.8848728,5.58500669 11,5.33601071 11,5.00401606 C11,4.66666667 10.8848728,4.41499331 10.6546185,4.24899598 C10.4243641,4.08299866 10.2048193,4 9.99598394,4 C9.79250335,4 9.57563588,4.08299866 9.34538153,4.24899598 C9.11512718,4.41499331 9,4.66666667 9,5.00401606 C9,5.33601071 9.11512718,5.58500669 9.34538153,5.75100402 C9.57563588,5.91700134 9.79250335,6 9.99598394,6 Z M10.6877323,16 L10.6877323,14.8898836 L10.6877323,8 L9.30483271,8 L9.30483271,9.11011638 L9.30483271,16 L10.6877323,16 Z" fill="#0B6F57" fill-rule="nonzero"></path>
53124
</g>
54125
</svg>`
55-
label.innerHTML = `<span>${optSummary.id}</span><a href='../tsconfig#${optSummary.id}' class='compiler_info_link' alt='Look up ${optSummary.id} in the TSConfig Reference'>${svg}</a><br/>${optSummary.oneliner}`
126+
label.innerHTML = `<span>${optSummary.id}</span><a href='../tsconfig#${optSummary.id}' class='compiler_info_link' alt='Look up ${optSummary.id} in the TSConfig Reference'>${svg}</a><br/>${optSummary.oneliner}`
56127

57-
const input = document.createElement("input")
58-
input.value = optSummary.id
59-
input.type = "checkbox"
60-
input.name = optSummary.id
61-
input.id = "option-" + optSummary.id
128+
const input = document.createElement("input")
129+
input.value = optSummary.id
130+
input.type = "checkbox"
131+
input.name = optSummary.id
132+
input.id = "option-" + optSummary.id
62133

63-
input.onchange = () => {
64-
sandbox.updateCompilerSetting(optSummary.id, input.checked)
65-
}
134+
input.onchange = () => {
135+
sandbox.updateCompilerSetting(optSummary.id, input.checked)
136+
}
66137

67-
label.htmlFor = input.id
138+
label.htmlFor = input.id
68139

69-
li.appendChild(input)
70-
li.appendChild(label)
71-
ol.appendChild(li)
72-
})
140+
li.appendChild(input)
141+
li.appendChild(label)
142+
ol.appendChild(li)
143+
})
73144

74-
categoryDiv.appendChild(header)
75-
categoryDiv.appendChild(ol)
76-
container.appendChild(categoryDiv)
77-
})
145+
categoryDiv.appendChild(header)
146+
categoryDiv.appendChild(ol)
147+
container.appendChild(categoryDiv)
148+
})
78149

79150
const dropdownContainer = document.getElementById("compiler-dropdowns")!
80151

@@ -108,9 +179,12 @@ export const updateConfigDropdownForCompilerOptions = (sandbox: Sandbox, monaco:
108179
const boolOptions = Object.keys(compilerOpts).filter(k => typeof compilerOpts[k] === "boolean")
109180

110181
boolOptions.forEach(opt => {
182+
if (notRelevantToPlayground.includes(opt)) return
183+
111184
const inputID = "option-" + opt
112185
const input = document.getElementById(inputID) as HTMLInputElement
113-
input.checked = !!compilerOpts[opt]
186+
if (!input) console.error("Could not find an input for", opt)
187+
else input.checked = !!compilerOpts[opt]
114188
})
115189

116190
const compilerIDToMaps: any = {

0 commit comments

Comments
 (0)