[DevTools] Fix formatWithStyles not styling the results if the first argument is an object + Added unit tests (#24554)
formatWithStyles currently doesn't style the array argument if the first argument is an object. This PR fixes this and also adds unit tests.
Luna Ruan committed
May 13, 2022 at 15:34 UTC
0ecb77d4c54664e20abd89df0d19ef4e4594f4c8
3 files changed
+26
-6
packages/react-devtools-shared/src/__tests__/utils-test.js
+21
@@ -189,5 +189,26 @@ describe('utils', () => {
189
]);
190
expect(formatWithStyles(['%%c%c'], 'color: gray')).toEqual(['%%c%c']);
191
});
192
+
193
+ it('should format non string inputs as the first argument', () => {
194
+ expect(formatWithStyles([{foo: 'bar'}])).toEqual([{foo: 'bar'}]);
195
+ expect(formatWithStyles([[1, 2, 3]])).toEqual([[1, 2, 3]]);
196
+ expect(formatWithStyles([{foo: 'bar'}], 'color: gray')).toEqual([
197
+ '%c%o',
198
+ 'color: gray',
199
+ {foo: 'bar'},
200
+ ]);
201
+ expect(formatWithStyles([[1, 2, 3]], 'color: gray')).toEqual([
202
+ '%c%o',
203
+ 'color: gray',
204
+ [1, 2, 3],
205
+ ]);
206
+ expect(formatWithStyles([{foo: 'bar'}, 'hi'], 'color: gray')).toEqual([
207
+ '%c%o %s',
208
+ 'color: gray',
209
+ {foo: 'bar'},
210
+ 'hi',
211
+ ]);
212
+ });
213
});
214
});
packages/react-devtools-shared/src/backend/utils.js
+2
-3
@@ -181,9 +181,8 @@ export function formatWithStyles(
181
inputArgs === undefined ||
182
inputArgs === null ||
183
inputArgs.length === 0 ||
184
- typeof inputArgs[0] !== 'string' ||
184
// Matches any of %c but not %%c
186
- inputArgs[0].match(/([^%]|^)(%c)/g) ||
185
+ (typeof inputArgs[0] === 'string' && inputArgs[0].match(/([^%]|^)(%c)/g)) ||
186
style === undefined
187
) {
188
return inputArgs;
@@ -191,7 +190,7 @@ export function formatWithStyles(
190
191
// Matches any of %(o|O|d|i|s|f), but not %%(o|O|d|i|s|f)
192
const REGEXP = /([^%]|^)((%%)*)(%([oOdisf]))/g;
194
- if (inputArgs[0].match(REGEXP)) {
193
+ if (typeof inputArgs[0] === 'string' && inputArgs[0].match(REGEXP)) {
194
return [`%c${inputArgs[0]}`, style, ...inputArgs.slice(1)];
195
} else {
196
const firstArg = inputArgs.reduce((formatStr, elem, i) => {
packages/react-devtools-shared/src/hook.js
+3
-3
@@ -180,9 +180,9 @@ export function installHook(target: any): DevToolsHook | null {
180
inputArgs === undefined ||
181
inputArgs === null ||
182
inputArgs.length === 0 ||
183
- typeof inputArgs[0] !== 'string' ||
183
// Matches any of %c but not %%c
185
- inputArgs[0].match(/([^%]|^)(%c)/g) ||
184
+ (typeof inputArgs[0] === 'string' &&
185
+ inputArgs[0].match(/([^%]|^)(%c)/g)) ||
186
style === undefined
187
) {
188
return inputArgs;
@@ -190,7 +190,7 @@ export function installHook(target: any): DevToolsHook | null {
190
191
// Matches any of %(o|O|d|i|s|f), but not %%(o|O|d|i|s|f)
192
const REGEXP = /([^%]|^)((%%)*)(%([oOdisf]))/g;
193
- if (inputArgs[0].match(REGEXP)) {
193
+ if (typeof inputArgs[0] === 'string' && inputArgs[0].match(REGEXP)) {
194
return [`%c${inputArgs[0]}`, style, ...inputArgs.slice(1)];
195
} else {
196
const firstArg = inputArgs.reduce((formatStr, elem, i) => {