diff --git a/packages/react-devtools-shared/src/__tests__/utils-test.js b/packages/react-devtools-shared/src/__tests__/utils-test.js index 02bc6be4657a7..ed89202958375 100644 --- a/packages/react-devtools-shared/src/__tests__/utils-test.js +++ b/packages/react-devtools-shared/src/__tests__/utils-test.js @@ -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', + ]); + }); }); }); diff --git a/packages/react-devtools-shared/src/backend/utils.js b/packages/react-devtools-shared/src/backend/utils.js index 169623a1633a9..5c4b1289855b2 100644 --- a/packages/react-devtools-shared/src/backend/utils.js +++ b/packages/react-devtools-shared/src/backend/utils.js @@ -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) => { diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js index d41ea4559159a..8adbb7534a254 100644 --- a/packages/react-devtools-shared/src/hook.js +++ b/packages/react-devtools-shared/src/hook.js @@ -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) => {