OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2026-01-15 12:15:22 +00:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

[DevTools] Fix formatWithStyles not styling the results if the first argument is an object + Added unit tests (#24554)

Browse Source 
formatWithStyles currently doesn't style the array argument if the first argument is an object. This PR fixes this and also adds unit tests.
This commit is contained in:
Luna Ruan
2022-05-13 15:34:33 -07:00
committed by GitHub
parent 2c8a1452b8
commit 0ecb77d4c5
3 changed files with 26 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/react-devtools-shared/src/__tests__/utils-test.js vendored
View File

@@ -189,5 +189,26 @@ describe('utils', () => {
]);
expect(formatWithStyles(['%%c%c'], 'color: gray')).toEqual(['%%c%c']);
});
it('should format non string inputs as the first argument', () => {
expect(formatWithStyles([{foo: 'bar'}])).toEqual([{foo: 'bar'}]);
expect(formatWithStyles([[1, 2, 3]])).toEqual([[1, 2, 3]]);
expect(formatWithStyles([{foo: 'bar'}], 'color: gray')).toEqual([
'%c%o',
'color: gray',
{foo: 'bar'},
]);
expect(formatWithStyles([[1, 2, 3]], 'color: gray')).toEqual([
'%c%o',
'color: gray',
[1, 2, 3],
]);
expect(formatWithStyles([{foo: 'bar'}, 'hi'], 'color: gray')).toEqual([
'%c%o %s',
'color: gray',
{foo: 'bar'},
'hi',
]);
});
});
});

5
packages/react-devtools-shared/src/backend/utils.js vendored
View File

@@ -181,9 +181,8 @@ export function formatWithStyles(
inputArgs === undefined ||
inputArgs === null ||
inputArgs.length === 0 ||
typeof inputArgs[0] !== 'string' ||
// Matches any of %c but not %%c
inputArgs[0].match(/([^%]|^)(%c)/g) ||
(typeof inputArgs[0] === 'string' && inputArgs[0].match(/([^%]|^)(%c)/g)) ||
style === undefined
) {
return inputArgs;
@@ -191,7 +190,7 @@ export function formatWithStyles(
// Matches any of %(o|O|d|i|s|f), but not %%(o|O|d|i|s|f)
const REGEXP = /([^%]|^)((%%)*)(%([oOdisf]))/g;
if (inputArgs[0].match(REGEXP)) {
if (typeof inputArgs[0] === 'string' && inputArgs[0].match(REGEXP)) {
return [`%c${inputArgs[0]}`, style, ...inputArgs.slice(1)];
} else {
const firstArg = inputArgs.reduce((formatStr, elem, i) => {

6
packages/react-devtools-shared/src/hook.js vendored
View File

@@ -180,9 +180,9 @@ export function installHook(target: any): DevToolsHook | null {
inputArgs === undefined ||
inputArgs === null ||
inputArgs.length === 0 ||
typeof inputArgs[0] !== 'string' ||
// Matches any of %c but not %%c
inputArgs[0].match(/([^%]|^)(%c)/g) ||
(typeof inputArgs[0] === 'string' &&
inputArgs[0].match(/([^%]|^)(%c)/g)) ||
style === undefined
) {
return inputArgs;
@@ -190,7 +190,7 @@ export function installHook(target: any): DevToolsHook | null {
// Matches any of %(o|O|d|i|s|f), but not %%(o|O|d|i|s|f)
const REGEXP = /([^%]|^)((%%)*)(%([oOdisf]))/g;
if (inputArgs[0].match(REGEXP)) {
if (typeof inputArgs[0] === 'string' && inputArgs[0].match(REGEXP)) {
return [`%c${inputArgs[0]}`, style, ...inputArgs.slice(1)];
} else {
const firstArg = inputArgs.reduce((formatStr, elem, i) => {