Skip to content

Commit 353f3df

Browse files
dgozmandgozman
authored
chore: do not confuse codemirror language and codegen language (#37013)
1 parent c0c772b commit 353f3df

File tree

7 files changed

+31
-30
lines changed

7 files changed

+31
-30
lines changed

‎packages/playwright-core/src/server/recorder.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -570,7 +570,7 @@ function isScreenshotCommand(metadata: CallMetadata) {
570570
return metadata.method.toLowerCase().includes('screenshot');
571571
}
572572

573-
function languageForFile(file: string) {
573+
function languageForFile(file: string): Language {
574574
if (file.endsWith('.py'))
575575
return 'python';
576576
if (file.endsWith('.java'))

‎packages/playwright-core/src/server/recorder/recorderApp.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@ export class RecorderApp {
5252
private _actions: actions.ActionInContext[] = [];
5353
private _userSources: Source[] = [];
5454
private _recorderSources: Source[] = [];
55-
private _primaryLanguage: string;
56-
private _selectedLanguageId: string;
55+
private _primaryGeneratorId: string;
56+
private _selectedGeneratorId: string;
5757

5858
private constructor(recorder: Recorder, params: RecorderAppParams, page: Page, wsEndpointForTest: string | undefined) {
5959
this._page = page;
@@ -70,8 +70,8 @@ export class RecorderApp {
7070
};
7171

7272
this._throttledOutputFile = params.outputFile ? new ThrottledFile(params.outputFile) : null;
73-
this._primaryLanguage = process.env.TEST_INSPECTOR_LANGUAGE || params.language || determinePrimaryLanguage(params.sdkLanguage);
74-
this._selectedLanguageId = this._primaryLanguage;
73+
this._primaryGeneratorId = process.env.TEST_INSPECTOR_LANGUAGE || params.language || determinePrimaryGeneratorId(params.sdkLanguage);
74+
this._selectedGeneratorId = this._primaryGeneratorId;
7575
}
7676

7777
private async _init(inspectedContext: BrowserContext) {
@@ -133,7 +133,7 @@ export class RecorderApp {
133133
const source = [...this._recorderSources, ...this._userSources].find(s => s.id === data.params.fileId);
134134
if (source) {
135135
if (source.isRecorded)
136-
this._selectedLanguageId = source.id;
136+
this._selectedGeneratorId = source.id;
137137
this._recorder.setLanguage(source.language);
138138
}
139139
return;
@@ -358,9 +358,9 @@ export class RecorderApp {
358358
};
359359
source.revealLine = text.split('\n').length - 1;
360360
recorderSources.push(source);
361-
if (languageGenerator.id === this._primaryLanguage)
361+
if (languageGenerator.id === this._primaryGeneratorId)
362362
this._throttledOutputFile?.setContent(source.text);
363-
if (reveal === 'reveal' && source.id === this._selectedLanguageId)
363+
if (reveal === 'reveal' && source.id === this._selectedGeneratorId)
364364
revealSourceId = source.id;
365365
}
366366

@@ -370,8 +370,8 @@ export class RecorderApp {
370370
}
371371
}
372372

373-
// For example, if the SDK language is 'javascript', we return 'playwright-test' as the primary language.
374-
function determinePrimaryLanguage(sdkLanguage: Language): string {
373+
// For example, if the SDK language is 'javascript', this returns 'playwright-test'.
374+
function determinePrimaryGeneratorId(sdkLanguage: Language): string {
375375
for (const language of languageSet()) {
376376
if (language.highlighter === sdkLanguage)
377377
return language.id;

‎packages/recorder/src/recorder.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -182,14 +182,14 @@ export const Recorder: React.FC<RecorderProps> = ({
182182
</Toolbar>
183183
<SplitView
184184
sidebarSize={200}
185-
main={<CodeMirrorWrapper text={source.text} language={source.language} highlight={source.highlight} revealLine={source.revealLine} readOnly={true} lineNumbers={true} />}
185+
main={<CodeMirrorWrapper text={source.text} highlighter={source.language} highlight={source.highlight} revealLine={source.revealLine} readOnly={true} lineNumbers={true} />}
186186
sidebar={<TabbedPane
187187
rightToolbar={selectedTab === 'locator' || selectedTab === 'aria' ? [<ToolbarButton key={1} icon='files' title='Copy' onClick={() => copy((selectedTab === 'locator' ? locator : ariaSnapshot) || '')} />] : []}
188188
tabs={[
189189
{
190190
id: 'locator',
191191
title: 'Locator',
192-
render: () => <CodeMirrorWrapper text={locator} placeholder='Type locator to inspect' language={source.language} focusOnChange={true} onChange={onEditorChange} wrapLines={true} />
192+
render: () => <CodeMirrorWrapper text={locator} placeholder='Type locator to inspect' highlighter={source.language} focusOnChange={true} onChange={onEditorChange} wrapLines={true} />
193193
},
194194
{
195195
id: 'log',
@@ -199,7 +199,7 @@ export const Recorder: React.FC<RecorderProps> = ({
199199
{
200200
id: 'aria',
201201
title: 'Aria',
202-
render: () => <CodeMirrorWrapper text={ariaSnapshot || ''} placeholder='Type aria template to match' language={'yaml'} onChange={onAriaEditorChange} highlight={ariaSnapshotErrors} wrapLines={true} />
202+
render: () => <CodeMirrorWrapper text={ariaSnapshot || ''} placeholder='Type aria template to match' highlighter={'yaml'} onChange={onAriaEditorChange} highlight={ariaSnapshotErrors} wrapLines={true} />
203203
},
204204
]}
205205
selectedTab={selectedTab}

‎packages/trace-viewer/src/ui/inspectorTab.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,15 @@
1515
*/
1616

1717
import { CodeMirrorWrapper } from '@web/components/codeMirrorWrapper';
18-
import type { Language, SourceHighlight } from '@web/components/codeMirrorWrapper';
18+
import type { SourceHighlight } from '@web/components/codeMirrorWrapper';
1919
import { ToolbarButton } from '@web/components/toolbarButton';
2020
import { copy } from '@web/uiUtils';
2121
import * as React from 'react';
2222
import type { HighlightedElement } from './snapshotTab';
2323
import './sourceTab.css';
2424
import { parseAriaSnapshot } from '@isomorphic/ariaSnapshot';
2525
import yaml from 'yaml';
26+
import type { Language } from '@isomorphic/locatorGenerators';
2627

2728
export const InspectorTab: React.FunctionComponent<{
2829
sdkLanguage: Language,
@@ -55,7 +56,7 @@ export const InspectorTab: React.FunctionComponent<{
5556
}}></ToolbarButton>
5657
</div>
5758
<div style={{ height: 50 }}>
58-
<CodeMirrorWrapper text={highlightedElement.locator || ''} language={sdkLanguage} isFocused={true} wrapLines={true} onChange={text => {
59+
<CodeMirrorWrapper text={highlightedElement.locator || ''} highlighter={sdkLanguage} isFocused={true} wrapLines={true} onChange={text => {
5960
// Updating text needs to go first - react can squeeze a render between the state updates.
6061
setHighlightedElement({ ...highlightedElement, locator: text, lastEdited: 'locator' });
6162
setIsInspecting(false);
@@ -71,7 +72,7 @@ export const InspectorTab: React.FunctionComponent<{
7172
<div style={{ height: 150 }}>
7273
<CodeMirrorWrapper
7374
text={highlightedElement.ariaSnapshot || ''}
74-
language='yaml'
75+
highlighter='yaml'
7576
wrapLines={false}
7677
highlight={ariaSnapshotErrors}
7778
onChange={onAriaEditorChange} />

‎packages/trace-viewer/src/ui/sourceTab.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ export const SourceTab: React.FunctionComponent<{
114114
<CopyToClipboard description='Copy filename' value={shortFileName}/>
115115
{location && <ToolbarButton icon='link-external' title='Open in VS Code' onClick={openExternally}></ToolbarButton>}
116116
</Toolbar> }
117-
<CodeMirrorWrapper text={source.content || ''} language='javascript' highlight={highlight} revealLine={targetLine} readOnly={true} lineNumbers={true} dataTestId='source-code-mirror'/>
117+
<CodeMirrorWrapper text={source.content || ''} highlighter='javascript' highlight={highlight} revealLine={targetLine} readOnly={true} lineNumbers={true} dataTestId='source-code-mirror'/>
118118
</div>}
119119
sidebar={<StackTraceView stack={stack} selectedFrame={selectedFrame} setSelectedFrame={setSelectedFrame} />}
120120
/>;

‎packages/web/src/components/codeMirrorWrapper.spec.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -69,27 +69,27 @@ class Program
6969
`;
7070

7171
test('highlight JavaScript', async ({ mount }) => {
72-
const component = await mount(<CodeMirrorWrapper text={javascriptSnippet} language='javascript' />);
72+
const component = await mount(<CodeMirrorWrapper text={javascriptSnippet} highlighter='javascript' />);
7373
await expect(component.locator('text="async"').first()).toHaveClass('cm-keyword');
7474
});
7575

7676
test('highlight Python', async ({ mount }) => {
77-
const component = await mount(<CodeMirrorWrapper text={pythonSnippet} language='python' />);
77+
const component = await mount(<CodeMirrorWrapper text={pythonSnippet} highlighter='python' />);
7878
await expect(component.locator('text="async"').first()).toHaveClass('cm-keyword');
7979
});
8080

8181
test('highlight Java', async ({ mount }) => {
82-
const component = await mount(<CodeMirrorWrapper text={javaSnippet} language='java' />);
82+
const component = await mount(<CodeMirrorWrapper text={javaSnippet} highlighter='java' />);
8383
await expect(component.locator('text="public"').first()).toHaveClass('cm-keyword');
8484
});
8585

8686
test('highlight C#', async ({ mount }) => {
87-
const component = await mount(<CodeMirrorWrapper text={csharpSnippet} language='csharp' />);
87+
const component = await mount(<CodeMirrorWrapper text={csharpSnippet} highlighter='csharp' />);
8888
await expect(component.locator('text="public"').first()).toHaveClass('cm-keyword');
8989
});
9090

9191
test('highlight lines', async ({ mount }) => {
92-
const component = await mount(<CodeMirrorWrapper text={javascriptSnippet} language='javascript' highlight={[
92+
const component = await mount(<CodeMirrorWrapper text={javascriptSnippet} highlighter='javascript' highlight={[
9393
{ line: 4, type: 'running' },
9494
{ line: 5, type: 'paused' },
9595
{ line: 6, type: 'error' },

‎packages/web/src/components/codeMirrorWrapper.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,13 @@ export type SourceHighlight = {
2727
message?: string;
2828
};
2929

30-
export type Language = 'javascript' | 'python' | 'java' | 'csharp' | 'jsonl' | 'html' | 'css' | 'markdown' | 'yaml';
30+
type CodeMirrorHighlighter = 'javascript' | 'python' | 'java' | 'csharp' | 'jsonl' | 'html' | 'css' | 'markdown' | 'yaml';
3131

3232
export const lineHeight = 20;
3333

3434
export interface SourceProps {
3535
text: string;
36-
language?: Language;
36+
highlighter?: CodeMirrorHighlighter;
3737
mimeType?: string;
3838
linkify?: boolean;
3939
readOnly?: boolean;
@@ -51,7 +51,7 @@ export interface SourceProps {
5151

5252
export const CodeMirrorWrapper: React.FC<SourceProps> = ({
5353
text,
54-
language,
54+
highlighter,
5555
mimeType,
5656
linkify,
5757
readOnly,
@@ -85,7 +85,7 @@ export const CodeMirrorWrapper: React.FC<SourceProps> = ({
8585
if (!element)
8686
return;
8787

88-
const mode = languageToMode(language) || mimeTypeToMode(mimeType) || (linkify ? 'text/linkified' : '');
88+
const mode = highlighterToMode(highlighter) || mimeTypeToMode(mimeType) || (linkify ? 'text/linkified' : '');
8989

9090
if (codemirrorRef.current
9191
&& mode === codemirrorRef.current.cm.getOption('mode')
@@ -113,7 +113,7 @@ export const CodeMirrorWrapper: React.FC<SourceProps> = ({
113113
setCodemirror(cm);
114114
return cm;
115115
})();
116-
}, [modulePromise, codemirror, codemirrorElement, language, mimeType, linkify, lineNumbers, wrapLines, readOnly, isFocused, placeholder]);
116+
}, [modulePromise, codemirror, codemirrorElement, highlighter, mimeType, linkify, lineNumbers, wrapLines, readOnly, isFocused, placeholder]);
117117

118118
React.useEffect(() => {
119119
if (codemirrorRef.current)
@@ -244,8 +244,8 @@ function mimeTypeToMode(mimeType: string | undefined): string | undefined {
244244
return 'css';
245245
}
246246

247-
function languageToMode(language: Language | undefined): string | undefined {
248-
if (!language)
247+
function highlighterToMode(highlighter: CodeMirrorHighlighter | undefined): string | undefined {
248+
if (!highlighter)
249249
return;
250250
return {
251251
javascript: 'javascript',
@@ -257,5 +257,5 @@ function languageToMode(language: Language | undefined): string | undefined {
257257
html: 'htmlmixed',
258258
css: 'css',
259259
yaml: 'yaml',
260-
}[language];
260+
}[highlighter];
261261
}

0 commit comments

Comments
 (0)