Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit f83a879

Browse files
armano2armano2
authored
chore(website): [playground] allow to choose file extensions (typescript-eslint#6785)
1 parent 0d8d9f2 commit f83a879

File tree

11 files changed

+152
-166
lines changed

11 files changed

+152
-166
lines changed

‎packages/website/src/components/OptionsSelector.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import IconExternalLink from '@theme/Icon/ExternalLink';
77
import React, { useCallback } from 'react';
88

99
import { useClipboard } from '../hooks/useClipboard';
10-
import Checkbox from './inputs/Checkbox';
10+
import { fileTypes } from './config';
1111
import Dropdown from './inputs/Dropdown';
1212
import Tooltip from './inputs/Tooltip';
1313
import ActionLabel from './layout/ActionLabel';
@@ -74,11 +74,12 @@ function OptionsSelectorContent({
7474
<InputLabel name="TSEslint">{process.env.TS_ESLINT_VERSION}</InputLabel>
7575
</Expander>
7676
<Expander label="Options">
77-
<InputLabel name="Enable jsx">
78-
<Checkbox
79-
name="jsx"
80-
checked={state.jsx}
81-
onChange={(e): void => setState({ jsx: e })}
77+
<InputLabel name="File type">
78+
<Dropdown
79+
name="fileType"
80+
value={state.fileType}
81+
onChange={(fileType): void => setState({ fileType })}
82+
options={fileTypes}
8283
/>
8384
</InputLabel>
8485
<InputLabel name="Source type">

‎packages/website/src/components/Playground.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import type {
2929

3030
function Playground(): JSX.Element {
3131
const [state, setState] = useHashState({
32-
jsx: false,
32+
fileType: '.tsx',
3333
showAST: false,
3434
sourceType: 'module',
3535
code: '',
@@ -131,7 +131,7 @@ function Playground(): JSX.Element {
131131
</div>
132132
<LoadingEditor
133133
ts={state.ts}
134-
jsx={state.jsx}
134+
fileType={state.fileType}
135135
activeTab={activeTab}
136136
code={state.code}
137137
tsconfig={state.tsconfig}

‎packages/website/src/components/config.ts

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,20 @@
1-
export const detailTabs = [
2-
{ value: false as const, label: 'Errors' },
3-
{ value: 'es' as const, label: 'ESTree' },
4-
{ value: 'ts' as const, label: 'TypeScript' },
5-
{ value: 'scope' as const, label: 'Scope' },
1+
import type { ConfigFileType, ConfigShowAst } from './types';
2+
3+
export const detailTabs: { value: ConfigShowAst; label: string }[] = [
4+
{ value: false, label: 'Errors' },
5+
{ value: 'es', label: 'ESTree' },
6+
{ value: 'ts', label: 'TypeScript' },
7+
{ value: 'scope', label: 'Scope' },
8+
];
9+
10+
export const fileTypes: ConfigFileType[] = [
11+
'.ts',
12+
'.tsx',
13+
'.js',
14+
'.jsx',
15+
'.d.ts',
16+
'.cjs',
17+
'.mjs',
18+
'.cts',
19+
'.mts',
620
];

‎packages/website/src/components/config/utils.ts

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -79,10 +79,6 @@ export function toJson(cfg: unknown): string {
7979
return JSON.stringify(cfg, null, 2);
8080
}
8181

82-
export function toJsonConfig(cfg: unknown, prop: string): string {
83-
return toJson({ [prop]: cfg });
84-
}
85-
8682
export function getTypescriptOptions(): OptionDeclarations[] {
8783
const allowedCategories = [
8884
'Command-line Options',

‎packages/website/src/components/editor/LoadedEditor.tsx

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
3333
tsconfig,
3434
eslintrc,
3535
selectedRange,
36-
jsx,
36+
fileType,
3737
onEsASTChange,
3838
onScopeChange,
3939
onTsASTChange,
@@ -84,11 +84,11 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
8484
]);
8585

8686
useEffect(() => {
87-
const newPath = jsx ? '/input.tsx' : '/input.ts';
87+
const newPath = `/input${fileType}`;
8888
if (tabs.code.uri.path !== newPath) {
8989
const newModel = sandboxInstance.monaco.editor.createModel(
9090
tabs.code.getValue(),
91-
'typescript',
91+
undefined,
9292
sandboxInstance.monaco.Uri.file(newPath),
9393
);
9494
newModel.updateOptions({ tabSize: 2, insertSpaces: true });
@@ -98,22 +98,15 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
9898
tabs.code.dispose();
9999
tabs.code = newModel;
100100
}
101-
}, [
102-
jsx,
103-
sandboxInstance.editor,
104-
sandboxInstance.monaco.Uri,
105-
sandboxInstance.monaco.editor,
106-
tabs,
107-
]);
101+
}, [fileType, sandboxInstance.editor, sandboxInstance.monaco, tabs]);
108102

109103
useEffect(() => {
110104
const config = createCompilerOptions(
111-
jsx,
112105
parseTSConfig(tsconfig).compilerOptions,
113106
);
114107
webLinter.updateCompilerOptions(config);
115108
sandboxInstance.setCompilerSettings(config);
116-
}, [jsx, sandboxInstance, tsconfig, webLinter]);
109+
}, [sandboxInstance, tsconfig, webLinter]);
117110

118111
useEffect(() => {
119112
webLinter.updateRules(parseESLintRC(eslintrc).rules);
@@ -128,10 +121,10 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
128121
const lintEditor = debounce(() => {
129122
console.info('[Editor] linting triggered');
130123

131-
webLinter.updateParserOptions(jsx, sourceType);
124+
webLinter.updateParserOptions(sourceType);
132125

133126
try {
134-
const messages = webLinter.lint(code);
127+
const messages = webLinter.lint(code, tabs.code.uri.path);
135128

136129
const markers = parseLintResults(messages, codeActions, ruleId =>
137130
sandboxInstance.monaco.Uri.parse(
@@ -164,7 +157,7 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
164157
lintEditor();
165158
}, [
166159
code,
167-
jsx,
160+
fileType,
168161
tsconfig,
169162
eslintrc,
170163
sourceType,
@@ -239,7 +232,10 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
239232
run(editor) {
240233
const editorModel = editor.getModel();
241234
if (editorModel) {
242-
const fixed = webLinter.fix(editor.getValue());
235+
const fixed = webLinter.fix(
236+
editor.getValue(),
237+
editorModel.uri.path,
238+
);
243239
if (fixed.fixed) {
244240
editorModel.pushEditOperations(
245241
null,

‎packages/website/src/components/editor/config.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@ import type Monaco from 'monaco-editor';
44
import { getTypescriptOptions } from '../config/utils';
55

66
export function createCompilerOptions(
7-
jsx = false,
87
tsConfig: Record<string, unknown> = {},
98
): Monaco.languages.typescript.CompilerOptions {
109
const config = window.ts.convertCompilerOptionsFromJson(
1110
{
1211
// ts and monaco has different type as monaco types are not changing base on ts version
1312
target: 'esnext',
1413
module: 'esnext',
14+
jsx: 'preserve',
1515
...tsConfig,
16-
jsx: jsx ? 'preserve' : undefined,
16+
allowJs: true,
1717
lib: Array.isArray(tsConfig.lib) ? tsConfig.lib : undefined,
1818
moduleResolution: undefined,
1919
plugins: undefined,

‎packages/website/src/components/editor/useSandboxServices.ts

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -33,22 +33,14 @@ export const useSandboxServices = (
3333
): Error | SandboxServices | undefined => {
3434
const { onLoaded } = props;
3535
const [services, setServices] = useState<Error | SandboxServices>();
36-
const [loadedTs, setLoadedTs] = useState<string>(props.ts);
3736
const { colorMode } = useColorMode();
3837

39-
useEffect(() => {
40-
if (props.ts !== loadedTs) {
41-
window.location.reload();
42-
}
43-
}, [props.ts, loadedTs]);
44-
4538
useEffect(() => {
4639
let sandboxInstance: SandboxInstance | undefined;
47-
setLoadedTs(props.ts);
4840

4941
sandboxSingleton(props.ts)
5042
.then(async ({ main, sandboxFactory, lintUtils }) => {
51-
const compilerOptions = createCompilerOptions(props.jsx);
43+
const compilerOptions = createCompilerOptions();
5244

5345
const sandboxConfig: Partial<SandboxConfig> = {
5446
text: props.code,
@@ -128,7 +120,7 @@ export const useSandboxServices = (
128120
};
129121
// colorMode and jsx can't be reactive here because we don't want to force a recreation
130122
// updating of colorMode and jsx is handled in LoadedEditor
131-
}, [props.ts, onLoaded]);
123+
}, []);
132124

133125
return services;
134126
};

0 commit comments

Comments
 (0)