The library for web and native user interfaces.
Mirrored from https://github.com/247TaxiDriver/QOS-React.git
Synced Nov 14, 05:30 UTC
Feat:-Added open in editor to appear by default (#26949)
Currently the Open in editor just is a placeholder input where the developer would need to type the whole Vscode file path being shown as a placeholder, we can make this process a little easier by just already setting the URL . https://github.com/facebook/react/assets/72331432/96f43230-6c49-45f7-907c-c99a0d3d8bf7 Earlier it used to be a placeholder describing the URL <img width="1284" alt="Screenshot 2023-06-14 at 7 55 38 PM" src="https://github.com/facebook/react/assets/72331432/4e8234ad-e1cd-4b55-8ef8-46dea82a9c7c"> cc @hoxyq --------- Co-authored-by: Ruslan Lesiutin <rdlesyutin@gmail.com> Co-authored-by: BIKI <biki@BIKIs-MacBook-Pro.local>
BIKI DAS committed
Jul 27, 2023 at 21:34 UTC
493f72b0a7111b601c16b8ad8bc2649d82c184a0
4 files changed
+45
-12
packages/react-devtools-shared/src/constants.js
+3
@@ -39,6 +39,9 @@ export const SESSION_STORAGE_LAST_SELECTION_KEY =
39
export const LOCAL_STORAGE_OPEN_IN_EDITOR_URL =
40
'React::DevTools::openInEditorUrl';
41
42
+export const LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET =
43
+ 'React::DevTools::openInEditorUrlPreset';
44
+
45
export const LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY =
46
'React::DevTools::parseHookNames';
47
packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+5
-2
@@ -219,8 +219,11 @@ export default function InspectedElementWrapper(_: Props): React.Node {
219
}
220
221
const url = new URL(editorURL);
222
- url.href = url.href.replace('{path}', source.fileName);
223
- url.href = url.href.replace('{line}', String(source.lineNumber));
222
+ url.href = url.href
223
+ .replace('{path}', source.fileName)
224
+ .replace('{line}', String(source.lineNumber))
225
+ .replace('%7Bpath%7D', source.fileName)
226
+ .replace('%7Bline%7D', String(source.lineNumber));
227
window.open(url);
228
}, [inspectedElement, editorURL]);
229
packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
+36
-10
@@ -16,7 +16,10 @@ import {
16
useRef,
17
useState,
18
} from 'react';
19
-import {LOCAL_STORAGE_OPEN_IN_EDITOR_URL} from '../../../constants';
19
+import {
20
+ LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
21
+ LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET,
22
+} from '../../../constants';
23
import {useLocalStorage, useSubscription} from '../hooks';
24
import {StoreContext} from '../context';
25
import Button from '../Button';
@@ -51,6 +54,8 @@ import type {
54
RegExpComponentFilter,
55
} from 'react-devtools-shared/src/types';
56
57
+const vscodeFilepath = 'vscode://file/{path}:{line}';
58
+
59
export default function ComponentsSettings(_: {}): React.Node {
60
const store = useContext(StoreContext);
61
const {parseHookNames, setParseHookNames} = useContext(SettingsContext);
@@ -83,6 +88,10 @@ export default function ComponentsSettings(_: {}): React.Node {
88
[setParseHookNames],
89
);
90
91
+ const [openInEditorURLPreset, setOpenInEditorURLPreset] = useLocalStorage<
92
+ 'vscode' | 'custom',
93
+ >(LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET, 'custom');
94
+
95
const [openInEditorURL, setOpenInEditorURL] = useLocalStorage<string>(
96
LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
97
getDefaultOpenInEditorURL(),
@@ -280,15 +289,32 @@ export default function ComponentsSettings(_: {}): React.Node {
289
290
<label className={styles.OpenInURLSetting}>
291
Open in Editor URL:{' '}
283
- <input
284
- className={styles.Input}
285
- type="text"
286
- placeholder={process.env.EDITOR_URL ?? 'vscode://file/{path}:{line}'}
287
- value={openInEditorURL}
288
- onChange={event => {
289
- setOpenInEditorURL(event.target.value);
290
- }}
291
- />
292
+ <select
293
+ className={styles.Select}
294
+ value={openInEditorURLPreset}
295
+ onChange={({currentTarget}) => {
296
+ const selectedValue = currentTarget.value;
297
+ setOpenInEditorURLPreset(selectedValue);
298
+ if (selectedValue === 'vscode') {
299
+ setOpenInEditorURL(vscodeFilepath);
300
+ } else if (selectedValue === 'custom') {
301
+ setOpenInEditorURL('');
302
+ }
303
+ }}>
304
+ <option value="vscode">VS Code</option>
305
+ <option value="custom">Custom</option>
306
+ </select>
307
+ {openInEditorURLPreset === 'custom' && (
308
+ <input
309
+ className={styles.Input}
310
+ type="text"
311
+ placeholder={process.env.EDITOR_URL ? process.env.EDITOR_URL : ''}
312
+ value={openInEditorURL}
313
+ onChange={event => {
314
+ setOpenInEditorURL(event.target.value);
315
+ }}
316
+ />
317
+ )}
318
</label>
319
320
<div className={styles.Header}>Hide components where...</div>
packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
+1
@@ -88,6 +88,7 @@
88
border: 1px solid var(--color-border);
89
border-radius: 0.125rem;
90
padding: 0.125rem;
91
+ margin-left: .5rem;
92
}
93
94
.InvalidRegExp,