diff --git a/babel.config.cjs b/babel.config.cjs index c96aff9..7b582cc 100644 --- a/babel.config.cjs +++ b/babel.config.cjs @@ -19,8 +19,7 @@ module.exports = function(api) { const plugins = compact([ (!isProd && !isTest) && 'react-refresh/babel', - !isProd && '@babel/plugin-transform-class-properties', ]); - return { presets, plugins }; + return {presets, plugins}; }; diff --git a/cypress/e2e/big_list.js b/cypress/e2e/big_list.js index a2af6f5..158022c 100644 --- a/cypress/e2e/big_list.js +++ b/cypress/e2e/big_list.js @@ -3,12 +3,12 @@ it('Big list basic example', () => { cy.contains('button', 'Increase!').click(); expect(console.group).to.be.calledWithMatches([ - { match: 'BigList', times: 1 }, - { match: /props.*style\W/, times: 1 }, + {match: 'BigList', times: 1}, + {match: /props.*style\W/, times: 1}, ]); expect(console.log).to.be.calledWithMatches([ - { match: [() => true, 'Re-rendered because of props changes'], times: 1 }, + {match: [() => true, 'Re-rendered because of props changes'], times: 1}, ]); }); }); diff --git a/cypress/e2e/child-of-pure-component.js b/cypress/e2e/child-of-pure-component.js index 6c0b610..7737ab3 100644 --- a/cypress/e2e/child-of-pure-component.js +++ b/cypress/e2e/child-of-pure-component.js @@ -6,12 +6,12 @@ it('Child of Pure Component', () => { cy.contains('button', 'clicks:').should('contain', '2'); expect(console.group).to.be.calledWithMatches([ - { match: 'PureFather', times: 2 }, - { match: /props.*children\W/, times: 2 }, + {match: 'PureFather', times: 2}, + {match: /props.*children\W/, times: 2}, ]); expect(console.log).to.be.calledWithMatches([ - { match: 'syntax always produces a *NEW* immutable React element', times: 2 }, + {match: 'syntax always produces a *NEW* immutable React element', times: 2}, ]); }); }); diff --git a/cypress/e2e/clone-element.js b/cypress/e2e/clone-element.js index 0d47a6a..7ae0274 100644 --- a/cypress/e2e/clone-element.js +++ b/cypress/e2e/clone-element.js @@ -1,11 +1,11 @@ it('Creating react element using React.cloneElement', () => { cy.visitAndSpyConsole('/#cloneElement', console => { expect(console.group).to.be.calledWithMatches([ - { match: 'TestComponent', times: 1 }, + {match: 'TestComponent', times: 1}, ]); expect(console.log).to.be.calledWithMatches([ - { match: [() => true, 'Re-rendered because the props object itself changed but its values are all equal.'], times: 1 }, + {match: [() => true, 'Re-rendered because the props object itself changed but its values are all equal.'], times: 1}, ]); }); }); diff --git a/cypress/e2e/create-factory.js b/cypress/e2e/create-factory.js index b23f008..c533cf7 100644 --- a/cypress/e2e/create-factory.js +++ b/cypress/e2e/create-factory.js @@ -1,11 +1,11 @@ it('Creating react element using React.createFactory', () => { cy.visitAndSpyConsole('/#createFactory', console => { expect(console.group).to.be.calledWithMatches([ - { match: 'TestComponent', times: 1 }, + {match: 'TestComponent', times: 1}, ]); expect(console.log).to.be.calledWithMatches([ - { match: [() => true, 'Re-rendered because the props object itself changed but its values are all equal.'], times: 1 }, + {match: [() => true, 'Re-rendered because the props object itself changed but its values are all equal.'], times: 1}, ]); }); }); diff --git a/cypress/e2e/hooks-use-context.js b/cypress/e2e/hooks-use-context.js index 8daf69a..022638d 100644 --- a/cypress/e2e/hooks-use-context.js +++ b/cypress/e2e/hooks-use-context.js @@ -1,16 +1,16 @@ it('Hooks - useContext', () => { cy.visitAndSpyConsole('/#useContext', console => { expect(console.group).to.be.calledWithMatches([ - { match: /ComponentWithContextHook$/, times: 2 }, - { match: 'Rendered by Main', times: 1 }, - { match: 'ComponentWithContextHookInsideMemoizedParent', times: 1 }, - { match: '[hook useState result]', times: 1 }, - { match: '[hook useContext result]', times: 2 }, + {match: /ComponentWithContextHook$/, times: 2}, + {match: 'Rendered by Main', times: 1}, + {match: 'ComponentWithContextHookInsideMemoizedParent', times: 1}, + {match: '[hook useState result]', times: 1}, + {match: '[hook useContext result]', times: 2}, ]); expect(console.log).to.be.calledWithMatches([ - { match: [() => true, 'Re-rendered because the props object itself changed but its values are all equal.'], times: 1 }, - { match: [() => true, 'Re-rendered because of hook changes'], times: 3 }, + {match: [() => true, 'Re-rendered because the props object itself changed but its values are all equal.'], times: 1}, + {match: [() => true, 'Re-rendered because of hook changes'], times: 3}, ]); }); }); diff --git a/cypress/e2e/hooks-use-memo-and-callback-child.js b/cypress/e2e/hooks-use-memo-and-callback-child.js index a72bb00..57b30c4 100644 --- a/cypress/e2e/hooks-use-memo-and-callback-child.js +++ b/cypress/e2e/hooks-use-memo-and-callback-child.js @@ -3,10 +3,10 @@ it('Hooks - useMemo and useCallback Child', () => { cy.contains('button', 'count: 0').click(); expect(console.group).to.be.calledWithMatches([ - { match: 'Comp', times: 2 }, - { match: /useMemoFn/, times: 2 }, - { match: /useCallbackFn/, times: 2 }, - { match: /props.*\..*count/, times: 1 }, + {match: 'Comp', times: 2}, + {match: /useMemoFn/, times: 2}, + {match: /useCallbackFn/, times: 2}, + {match: /props.*\..*count/, times: 1}, ]); }); }); diff --git a/cypress/e2e/hooks-use-reducer.js b/cypress/e2e/hooks-use-reducer.js index ed88f86..498a32e 100644 --- a/cypress/e2e/hooks-use-reducer.js +++ b/cypress/e2e/hooks-use-reducer.js @@ -1,12 +1,12 @@ it('Hooks - useReducer', () => { const checkConsole = (console, times) => { expect(console.group).to.be.calledWithMatches([ - { match: 'Main', times }, - { match: '[hook useReducer result]', times }, + {match: 'Main', times}, + {match: '[hook useReducer result]', times}, ]); expect(console.log).to.be.calledWithMatches([ - { match: 'different objects that are equal by value.', times }, + {match: 'different objects that are equal by value.', times}, ]); }; diff --git a/cypress/e2e/hooks-use-state.js b/cypress/e2e/hooks-use-state.js index df1101e..8698823 100644 --- a/cypress/e2e/hooks-use-state.js +++ b/cypress/e2e/hooks-use-state.js @@ -7,8 +7,8 @@ it('Hooks - useState', () => { }); expect(console.group).to.be.calledWithMatches([ - { match: 'BrokenHooksPureComponent', times: 2 }, - { match: '[hook useState result]', times: 2 }, + {match: 'BrokenHooksPureComponent', times: 2}, + {match: '[hook useState result]', times: 2}, ]); }); }); diff --git a/cypress/e2e/hot-reload.js b/cypress/e2e/hot-reload.js index ecb336a..7e3febb 100644 --- a/cypress/e2e/hot-reload.js +++ b/cypress/e2e/hot-reload.js @@ -1,11 +1,11 @@ it('React Hot Reload Of Tracked Component', () => { cy.visitAndSpyConsole('/#hotReload', console => { expect(console.group).to.be.calledWithMatches([ - { match: 'HotExportedDemoComponent', times: 1 }, + {match: 'HotExportedDemoComponent', times: 1}, ]); expect(console.log).to.be.calledWithMatches([ - { match: [() => true, 'Re-rendered because the props object itself changed but its values are all equal.'], times: 1 }, + {match: [() => true, 'Re-rendered because the props object itself changed but its values are all equal.'], times: 1}, ]); }); }); diff --git a/cypress/e2e/no-change.js b/cypress/e2e/no-change.js index c8de7c4..92dc26d 100644 --- a/cypress/e2e/no-change.js +++ b/cypress/e2e/no-change.js @@ -1,11 +1,11 @@ it('No Changes', () => { cy.visitAndSpyConsole('/#noChanges', console => { expect(console.group).to.be.calledWithMatches([ - { match: 'ClassDemo', times: 1 }, + {match: 'ClassDemo', times: 1}, ]); expect(console.log).to.be.calledWithMatches([ - { match: [() => true, 'Re-rendered although props and state objects are the same.'], times: 1 }, + {match: [() => true, 'Re-rendered although props and state objects are the same.'], times: 1}, ]); }); }); diff --git a/cypress/e2e/owner-reasons.js b/cypress/e2e/owner-reasons.js index f8bccb7..d2f874f 100644 --- a/cypress/e2e/owner-reasons.js +++ b/cypress/e2e/owner-reasons.js @@ -1,20 +1,20 @@ it('Log Owner Reasons', () => { cy.visitAndSpyConsole('/#logOwnerReasons', console => { expect(console.group).to.be.calledWithMatches([ - { match: 'Child', times: 3 }, - { match: 'Rendered by Owner', times: 1 }, - { match: 'Rendered by ClassOwner', times: 1 }, - { match: 'Rendered by HooksOwner', times: 1 }, - { match: /props.*a\W/, times: 1 }, - { match: '[hook useState result]', times: 2 }, + {match: 'Child', times: 3}, + {match: 'Rendered by Owner', times: 1}, + {match: 'Rendered by ClassOwner', times: 1}, + {match: 'Rendered by HooksOwner', times: 1}, + {match: /props.*a\W/, times: 1}, + {match: '[hook useState result]', times: 2}, ]); expect(console.log).to.be.calledWithMatches([ - { match: [() => true, 'Re-rendered because the props object itself changed but its values are all equal'], times: 3 }, - { match: [() => true, 'Re-rendered because of props changes'], times: 1 }, - { match: [() => true, 'Re-rendered because of state changes'], times: 1 }, - { match: [() => true, 'Re-rendered because of hook changes'], times: 2 }, - { match: 'different objects.', times: 4 }, + {match: [() => true, 'Re-rendered because the props object itself changed but its values are all equal'], times: 3}, + {match: [() => true, 'Re-rendered because of props changes'], times: 1}, + {match: [() => true, 'Re-rendered because of state changes'], times: 1}, + {match: [() => true, 'Re-rendered because of hook changes'], times: 2}, + {match: 'different objects.', times: 4}, ]); }); }); diff --git a/cypress/e2e/props-and-state-change.js b/cypress/e2e/props-and-state-change.js index ddb0c76..1f11bc2 100644 --- a/cypress/e2e/props-and-state-change.js +++ b/cypress/e2e/props-and-state-change.js @@ -1,13 +1,13 @@ it('Props And State Changes', () => { cy.visitAndSpyConsole('/#bothChanges', console => { expect(console.group).to.be.calledWithMatches([ - { match: 'ClassDemo', times: 1 }, - { match: /props.*a\W/, times: 1 }, - { match: /state.*c\W/, times: 1 }, + {match: 'ClassDemo', times: 1}, + {match: /props.*a\W/, times: 1}, + {match: /state.*c\W/, times: 1}, ]); expect(console.log).to.be.calledWithMatches([ - { match: 'different objects that are equal by value.', times: 2 }, + {match: 'different objects that are equal by value.', times: 2}, ]); }); }); diff --git a/cypress/e2e/props-changes.js b/cypress/e2e/props-changes.js index b66bf69..296aa51 100644 --- a/cypress/e2e/props-changes.js +++ b/cypress/e2e/props-changes.js @@ -1,10 +1,10 @@ it('props changes', () => { cy.visitAndSpyConsole('/#propsChanges', console => { expect(console.group).to.be.calledWithMatches([ - { match: 'ClassDemo', times: 5 }, - { match: 'Rendered by Main', times: 5 }, - { match: /props.*a\W/, times: 4 }, - { match: /props.*containerProps\W/, times: 4 }, + {match: 'ClassDemo', times: 5}, + {match: 'Rendered by Main', times: 5}, + {match: /props.*a\W/, times: 4}, + {match: /props.*containerProps\W/, times: 4}, ]); }); }); diff --git a/cypress/e2e/react-redux.js b/cypress/e2e/react-redux.js index fec0f62..54d6618 100644 --- a/cypress/e2e/react-redux.js +++ b/cypress/e2e/react-redux.js @@ -2,12 +2,12 @@ describe('react-redux', () => { it('React Redux', () => { const checkConsole = (console, times) => { expect(console.group).to.be.calledWithMatches([ - { match: 'ConnectedSimpleComponent', times }, - { match: '[hook useSelector result]', times }, + {match: 'ConnectedSimpleComponent', times}, + {match: '[hook useSelector result]', times}, ]); expect(console.log).to.be.calledWithMatches([ - { match: [() => true, 'Re-rendered because of hook changes'], times }, + {match: [() => true, 'Re-rendered because of hook changes'], times}, ]); }; @@ -33,13 +33,13 @@ describe('react-redux', () => { it('React Redux HOC', () => { const checkConsole = (console, times) => { expect(console.group).to.be.calledWithMatches([ - { match: 'SimpleComponent', times: times * 2 }, - { match: /props.*a\W/, times }, + {match: 'SimpleComponent', times: times * 2}, + {match: /props.*a\W/, times}, ]); expect(console.log).to.be.calledWithMatches([ - { match: [() => true, 'Re-rendered because of props changes'], times }, - { match: 'different objects that are equal by value', times }, + {match: [() => true, 'Re-rendered because of props changes'], times}, + {match: 'different objects that are equal by value', times}, ]); }; diff --git a/cypress/e2e/special-changes.js b/cypress/e2e/special-changes.js index 45390df..16cbe5c 100644 --- a/cypress/e2e/special-changes.js +++ b/cypress/e2e/special-changes.js @@ -1,14 +1,14 @@ it('Special Changes', () => { cy.visitAndSpyConsole('/#specialChanges', console => { expect(console.group).to.be.calledWithMatches([ - { match: 'ClassDemo', times: 1 }, + {match: 'ClassDemo', times: 1}, ]); expect(console.log).to.be.calledWithMatches([ - { match: 'different regular expressions with the same value.', times: 1 }, - { match: 'different functions with the same name.', times: 1 }, - { match: 'different date objects with the same value.', times: 1 }, - { match: 'different React elements (remember that the syntax always produces a *NEW* immutable React element', times: 1 }, + {match: 'different regular expressions with the same value.', times: 1}, + {match: 'different functions with the same name.', times: 1}, + {match: 'different date objects with the same value.', times: 1}, + {match: 'different React elements (remember that the syntax always produces a *NEW* immutable React element', times: 1}, ]); }); }); diff --git a/cypress/e2e/ssr.js b/cypress/e2e/ssr.js index d4ad681..65d42ee 100644 --- a/cypress/e2e/ssr.js +++ b/cypress/e2e/ssr.js @@ -3,11 +3,11 @@ it('Server Side (hydrate)', () => { cy.contains('hydrated hi'); expect(console.group).to.be.calledWithMatches([ - { match: 'DemoComponent', times: 1 }, + {match: 'DemoComponent', times: 1}, ]); expect(console.log).to.be.calledWithMatches([ - { match: [() => true, 'Re-rendered because the props object itself changed but its values are all equal.'], times: 1 }, + {match: [() => true, 'Re-rendered because the props object itself changed but its values are all equal.'], times: 1}, ]); }); }); diff --git a/cypress/e2e/state-changes.js b/cypress/e2e/state-changes.js index 7d8c21d..3d7f270 100644 --- a/cypress/e2e/state-changes.js +++ b/cypress/e2e/state-changes.js @@ -1,12 +1,12 @@ it('state changes', () => { cy.visitAndSpyConsole('/#stateChanges', console => { expect(console.group).to.be.calledWithMatches([ - { match: 'ClassDemo', times: 2 }, - { match: /state.*objectKey\W/, times: 1 }, + {match: 'ClassDemo', times: 2}, + {match: /state.*objectKey\W/, times: 1}, ]); expect(console.log).to.be.calledWithMatches([ - { match: [() => true, 'Re-rendered because the state object itself changed but its values are all equal'], times: 1 }, + {match: [() => true, 'Re-rendered because the state object itself changed but its values are all equal'], times: 1}, ]); }); }); diff --git a/cypress/e2e/strict-mode.js b/cypress/e2e/strict-mode.js index 8ffc0b9..efd2c55 100644 --- a/cypress/e2e/strict-mode.js +++ b/cypress/e2e/strict-mode.js @@ -1,14 +1,14 @@ it('Strict mode', () => { cy.visitAndSpyConsole('/#strict', console => { expect(console.group).to.be.calledWithMatches([ - { match: 'ClassDemo', times: 3 }, - { match: 'Rendered by Main', times: 3 }, - { match: /props.*a\W/, times: 4 }, + {match: 'ClassDemo', times: 3}, + {match: 'Rendered by Main', times: 3}, + {match: /props.*a\W/, times: 4}, ]); expect(console.log).to.be.calledWithMatches([ - { match: [() => true, 'Re-rendered because the props object itself changed but its values are all equal.'], times: 2 }, - { match: 'different objects that are equal by value', times: 4 }, + {match: [() => true, 'Re-rendered because the props object itself changed but its values are all equal.'], times: 2}, + {match: 'different objects that are equal by value', times: 4}, ]); }); }); diff --git a/cypress/e2e/styled-component.js b/cypress/e2e/styled-component.js index 8b2047c..9c20c34 100644 --- a/cypress/e2e/styled-component.js +++ b/cypress/e2e/styled-component.js @@ -5,13 +5,13 @@ it('styled-components', () => { .should('have.css', 'background-color', 'rgb(255, 150, 174)'); expect(console.group).to.be.calledWithMatches([ - { match: 'Styled(SimpleComponent)', times: 1 }, - { match: /props.*a\W/, times: 1 }, + {match: 'Styled(SimpleComponent)', times: 1}, + {match: /props.*a\W/, times: 1}, ]); expect(console.log).to.be.calledWithMatches([ - { match: [() => true, 'Re-rendered because of props changes'], times: 1 }, - { match: 'different objects that are equal by value', times: 1 }, + {match: [() => true, 'Re-rendered because of props changes'], times: 1}, + {match: 'different objects that are equal by value', times: 1}, ]); }); }); diff --git a/cypress/e2e/test_console_assertions.js b/cypress/e2e/test_console_assertions.js index b2a2269..666d525 100644 --- a/cypress/e2e/test_console_assertions.js +++ b/cypress/e2e/test_console_assertions.js @@ -4,13 +4,13 @@ it('Test console testing throws on wrong console appearance amounts', () => { expect( () => expect(console.group).to.be.calledWithMatches([ - { match: 'BigList', times: 0 }, + {match: 'BigList', times: 0}, ]) ).to.throw(); expect( () => expect(console.log).to.be.calledWithMatches([ - { match: [() => true, 'Re-rendered because of props changes'], times: 0 }, + {match: [() => true, 'Re-rendered because of props changes'], times: 0}, ]) ).to.throw(); }); diff --git a/demo/serve.js b/demo/serve.js index 5191c1f..6090ff9 100644 --- a/demo/serve.js +++ b/demo/serve.js @@ -17,9 +17,9 @@ const app = express(); app.get('/ssrComponent', (req, res) => { const stream = ReactDomServer.renderToNodeStream( - React.createElement(DemoComponent, { text: 'hydrated hi' }) + React.createElement(DemoComponent, {text: 'hydrated hi'}) ); - stream.pipe(res, { end: false }); + stream.pipe(res, {end: false}); stream.on('end', () => res.end()); }); @@ -32,7 +32,7 @@ app.use(nollupDevServer(app, config, { app.use(express.static('demo/public')); -app.use(fallback('index.html', { root: 'demo/public' })); +app.use(fallback('index.html', {root: 'demo/public'})); server.listen(port, () => { // eslint-disable-next-line no-console diff --git a/demo/src/App.js b/demo/src/App.js index d4e5185..7a852bf 100644 --- a/demo/src/App.js +++ b/demo/src/App.js @@ -60,7 +60,7 @@ function changeDemo(demoFn) { reactDomRoot?.unmount(); reactDomRoot = ReactDom.createRoot(domElement); setTimeout(() => { - demoFn({ whyDidYouRender, reactDomRoot }); + demoFn({whyDidYouRender, reactDomRoot}); }, 1); } @@ -72,7 +72,7 @@ if (!demoFromHash) { changeDemo(initialDemo.fn); -const DemoLink = ({ name, description, fn }) => ( +const DemoLink = ({name, description, fn}) => (
  • changeDemo(fn)}>{description}
  • ); diff --git a/demo/src/Menu.js b/demo/src/Menu.js index 6310cec..d55f233 100644 --- a/demo/src/Menu.js +++ b/demo/src/Menu.js @@ -1,10 +1,10 @@ import React from 'react'; -let Menu = ({ children }) => ( +let Menu = ({children}) => (

    whyDidYouRender Demos

    -  Open the console  +  Open the console   and click on one of the demos

      diff --git a/demo/src/bigList/index.js b/demo/src/bigList/index.js index b4e7cdd..810bbe5 100644 --- a/demo/src/bigList/index.js +++ b/demo/src/bigList/index.js @@ -1,13 +1,13 @@ import React from 'react'; -import { times } from 'lodash'; +import {times} from 'lodash'; export default { description: 'Big List (Main Demo)', - fn({ reactDomRoot, whyDidYouRender }) { + fn({reactDomRoot, whyDidYouRender}) { whyDidYouRender(React); class BigListPureComponent extends React.PureComponent { - static whyDidYouRender = { customName: 'BigList' }; + static whyDidYouRender = {customName: 'BigList'}; render() { return (
      @@ -20,20 +20,20 @@ export default { } } - const bigListStyle = { width: '100%' }; // eslint-disable-line no-unused-vars + const bigListStyle = {width: '100%'}; // eslint-disable-line no-unused-vars // Notice, that unlike the huge list, we don't track Main's re-renders because we don't care about it's re-renders. class Main extends React.Component { - state = { count: 0 }; + state = {count: 0}; render() { return ( -
      +

      Big List (Main Demo)

      {'Open the console and notice how the heavy list re-renders on every click on "Increase!" even though it\'s props are the same.'}

      -
      @@ -42,7 +42,7 @@ export default {
      {/* this is how you can prevent re-renders: */} {/* */} - +
      ); } diff --git a/demo/src/bothChanges/index.js b/demo/src/bothChanges/index.js index 31c4c26..7742baf 100644 --- a/demo/src/bothChanges/index.js +++ b/demo/src/bothChanges/index.js @@ -4,7 +4,7 @@ import createStepLogger from '../createStepLogger'; export default { description: 'Props And State Changes', - fn({ reactDomRoot, whyDidYouRender }) { + fn({reactDomRoot, whyDidYouRender}) { const stepLogger = createStepLogger(); whyDidYouRender(React); @@ -13,12 +13,12 @@ export default { static whyDidYouRender = true; state = { - c: { d: 'd' }, + c: {d: 'd'}, }; static getDerivedStateFromProps() { return { - c: { d: 'd' }, + c: {d: 'd'}, }; } @@ -28,9 +28,9 @@ export default { } stepLogger('First Render'); - reactDomRoot.render(); + reactDomRoot.render(); stepLogger('Second Render', true); - reactDomRoot.render(); + reactDomRoot.render(); }, }; diff --git a/demo/src/childOfPureComponent/index.js b/demo/src/childOfPureComponent/index.js index 0cc09e3..f49c805 100644 --- a/demo/src/childOfPureComponent/index.js +++ b/demo/src/childOfPureComponent/index.js @@ -2,7 +2,7 @@ import React from 'react'; export default { description: 'Child of Pure Component', - fn({ reactDomRoot, whyDidYouRender }) { + fn({reactDomRoot, whyDidYouRender}) { whyDidYouRender(React, { trackAllPureComponents: true, }); @@ -22,11 +22,11 @@ export default { } class Main extends React.Component { - state = { clicksCount: 0 }; + state = {clicksCount: 0}; render() { return (
      - diff --git a/demo/src/cloneElement/index.js b/demo/src/cloneElement/index.js index d080812..531f1d3 100644 --- a/demo/src/cloneElement/index.js +++ b/demo/src/cloneElement/index.js @@ -2,7 +2,7 @@ import React from 'react'; export default { description: 'Creating react element using React.cloneElement', - fn({ reactDomRoot, whyDidYouRender }) { + fn({reactDomRoot, whyDidYouRender}) { whyDidYouRender(React); class TestComponent extends React.Component { diff --git a/demo/src/createFactory/index.js b/demo/src/createFactory/index.js index b8a106a..61a5de7 100644 --- a/demo/src/createFactory/index.js +++ b/demo/src/createFactory/index.js @@ -2,7 +2,7 @@ import React from 'react'; export default { description: 'Creating react element using React.createFactory', - fn({ reactDomRoot, whyDidYouRender }) { + fn({reactDomRoot, whyDidYouRender}) { whyDidYouRender(React); class TestComponent extends React.Component { @@ -18,7 +18,7 @@ export default { const TestComponentFactory = React.createFactory(TestComponent); - reactDomRoot.render(TestComponentFactory({ a: 1 })); - reactDomRoot.render(TestComponentFactory({ a: 1 })); + reactDomRoot.render(TestComponentFactory({a: 1})); + reactDomRoot.render(TestComponentFactory({a: 1})); }, }; diff --git a/demo/src/hooks/useContext.js b/demo/src/hooks/useContext.js index f9352da..4f1a1e2 100644 --- a/demo/src/hooks/useContext.js +++ b/demo/src/hooks/useContext.js @@ -3,12 +3,12 @@ import createStepLogger from '../createStepLogger'; export default { description: 'Hooks - useContext', - fn({ reactDomRoot, whyDidYouRender }) { + fn({reactDomRoot, whyDidYouRender}) { whyDidYouRender(React); const stepLogger = createStepLogger(); - const MyContext = React.createContext({ c: 'c' }); + const MyContext = React.createContext({c: 'c'}); let alreadyMountedComponentWithContextHook = false; function ComponentWithContextHook() { @@ -53,7 +53,7 @@ export default { let alreadyMountedMain = false; function Main() { - const [currentState, setCurrentState] = React.useState({ c: 'context value' }); + const [currentState, setCurrentState] = React.useState({c: 'context value'}); if (alreadyMountedMain) { stepLogger('renders Main and it would trigger the render of ComponentWithContextHook because it\'s not pure', true); @@ -62,7 +62,7 @@ export default { } React.useLayoutEffect(() => { - setCurrentState({ c: 'context value' }); + setCurrentState({c: 'context value'}); }, []); return ( diff --git a/demo/src/hooks/useMemoAndCallbackChild.js b/demo/src/hooks/useMemoAndCallbackChild.js index f8667bc..e5d1b8b 100644 --- a/demo/src/hooks/useMemoAndCallbackChild.js +++ b/demo/src/hooks/useMemoAndCallbackChild.js @@ -4,12 +4,12 @@ import createStepLogger from '../createStepLogger'; export default { description: 'Hooks - useMemo and useCallback Child', - fn({ reactDomRoot, whyDidYouRender }) { + fn({reactDomRoot, whyDidYouRender}) { const stepLogger = createStepLogger(); whyDidYouRender(React); - const Comp = ({ useMemoFn, useCallbackFn }) => { + const Comp = ({useMemoFn, useCallbackFn}) => { const onClick = (...args) => { useMemoFn(...args); useCallbackFn(...args); @@ -19,7 +19,7 @@ export default { Comp.displayName = 'Comp'; Comp.whyDidYouRender = true; - const ComponentWithNewResultsForNewDeps = React.memo(({ count }) => { + const ComponentWithNewResultsForNewDeps = React.memo(({count}) => { stepLogger('render component with always new results for new deps'); const useMemoFn = React.useMemo(() => () => 'a', [count]); @@ -31,15 +31,15 @@ export default { }); ComponentWithNewResultsForNewDeps.displayName = 'ComponentWithNewResultsForNewDeps'; - const ComponentWithNewResultsForDeepEqualsDeps = React.memo(({ count }) => { + const ComponentWithNewResultsForDeepEqualsDeps = React.memo(({count}) => { if (count === 0) { stepLogger('render component with always deep equals results - first render', false); } else { stepLogger('render component with always deep equals results - next render', true); } - const useMemoFn = React.useMemo(() => () => 'a', [{ dep1: 'dep1' }]); - const useCallbackFn = React.useCallback(() => 'a', [{ dep2: 'dep2' }]); + const useMemoFn = React.useMemo(() => () => 'a', [{dep1: 'dep1'}]); + const useCallbackFn = React.useCallback(() => 'a', [{dep2: 'dep2'}]); return ( diff --git a/demo/src/hooks/useReducer.js b/demo/src/hooks/useReducer.js index e548e59..16cf93e 100644 --- a/demo/src/hooks/useReducer.js +++ b/demo/src/hooks/useReducer.js @@ -3,24 +3,24 @@ import React from 'react'; export default { description: 'Hooks - useReducer', - fn({ reactDomRoot, whyDidYouRender }) { + fn({reactDomRoot, whyDidYouRender}) { whyDidYouRender(React); function reducer(state, action) { switch (action.type) { case 'broken-set-count': - return { count: action.payload.count }; + return {count: action.payload.count}; case 'set-count': if (action.payload.count === state.count) { return state; } - return { count: action.payload.count }; + return {count: action.payload.count}; } } - const initialState = { count: '0' }; + const initialState = {count: '0'}; function Main() { const [state, dispatch] = React.useReducer(reducer, initialState); @@ -33,7 +33,7 @@ export default { @@ -52,11 +52,11 @@ export default { function SmartHooksComponent() { console.log('render SmartHooksComponent'); - const [numObj, setNumObj] = useNumState({ num: 0 }); + const [numObj, setNumObj] = useNumState({num: 0}); return ( <>

      {'Will NOT cause a re-render setState won\'t be called'}

      - diff --git a/demo/src/hotReload/index.js b/demo/src/hotReload/index.js index 29ac9a0..561f25b 100644 --- a/demo/src/hotReload/index.js +++ b/demo/src/hotReload/index.js @@ -4,7 +4,7 @@ import createStepLogger from '../createStepLogger'; const text = 'change me when the app is running please'; -const DemoComponent = ({ children }) => ( +const DemoComponent = ({children}) => (

      {text}

      {children} @@ -15,7 +15,7 @@ DemoComponent.whyDidYouRender = true; export default { description: 'React Hot Reload Of Tracked Component', - fn({ reactDomRoot, whyDidYouRender }) { + fn({reactDomRoot, whyDidYouRender}) { const stepLogger = createStepLogger(); whyDidYouRender(React); diff --git a/demo/src/logOwnerReasons/index.js b/demo/src/logOwnerReasons/index.js index a920a45..ca6bb8d 100644 --- a/demo/src/logOwnerReasons/index.js +++ b/demo/src/logOwnerReasons/index.js @@ -4,7 +4,7 @@ import createStepLogger from '../createStepLogger'; export default { description: 'Log Owner Reasons', - fn({ reactDomRoot, whyDidYouRender }) { + fn({reactDomRoot, whyDidYouRender}) { const stepLogger = createStepLogger(); whyDidYouRender(React); @@ -15,9 +15,9 @@ export default { const Owner = () => ; class ClassOwner extends React.Component { - state = { a: 1 }; + state = {a: 1}; componentDidMount() { - this.setState({ a: 2 }); + this.setState({a: 2}); } render() { diff --git a/demo/src/noChanges/index.js b/demo/src/noChanges/index.js index f8c228f..abf4787 100644 --- a/demo/src/noChanges/index.js +++ b/demo/src/noChanges/index.js @@ -4,7 +4,7 @@ import createStepLogger from '../createStepLogger'; export default { description: 'No Changes', - fn({ reactDomRoot, whyDidYouRender }) { + fn({reactDomRoot, whyDidYouRender}) { const stepLogger = createStepLogger(); whyDidYouRender(React); diff --git a/demo/src/propsChanges/index.js b/demo/src/propsChanges/index.js index a0b53c7..9c44331 100644 --- a/demo/src/propsChanges/index.js +++ b/demo/src/propsChanges/index.js @@ -4,7 +4,7 @@ import createStepLogger from '../createStepLogger'; export default { description: 'Props Changes', - fn({ reactDomRoot, whyDidYouRender }) { + fn({reactDomRoot, whyDidYouRender}) { const stepLogger = createStepLogger(); whyDidYouRender(React); @@ -27,29 +27,29 @@ export default { reactDomRoot.render(
      ); stepLogger('Other props'); - reactDomRoot.render(
      ); + reactDomRoot.render(
      ); stepLogger('Different by ref, equals by value', true); - reactDomRoot.render(
      ); + reactDomRoot.render(
      ); stepLogger('Other nested props'); - reactDomRoot.render(
      ); + reactDomRoot.render(
      ); stepLogger('Deep equal nested props', true); - reactDomRoot.render(
      ); + reactDomRoot.render(
      ); stepLogger('Mixed Props'); - reactDomRoot.render(
      ); + reactDomRoot.render(
      ); stepLogger('Mixed Props again', true); - reactDomRoot.render(
      ); + reactDomRoot.render(
      ); - const sameObj = { a: { b: 'c' } }; + const sameObj = {a: {b: 'c'}}; stepLogger('Mixed Props including eq obj'); - reactDomRoot.render(
      ); + reactDomRoot.render(
      ); stepLogger('Mixed Props including eq obj', true); - reactDomRoot.render(
      ); + reactDomRoot.render(
      ); }, }; diff --git a/demo/src/reactRedux/index.js b/demo/src/reactRedux/index.js index 7e77a7c..0c04633 100644 --- a/demo/src/reactRedux/index.js +++ b/demo/src/reactRedux/index.js @@ -1,14 +1,14 @@ import React from 'react'; import _ from 'lodash'; -import { createStore } from 'redux'; +import {createStore} from 'redux'; import * as Redux from 'react-redux'; export default { description: 'React Redux', - fn({ reactDomRoot, whyDidYouRender }) { - whyDidYouRender(React, { trackExtraHooks: [ + fn({reactDomRoot, whyDidYouRender}) { + whyDidYouRender(React, {trackExtraHooks: [ [Redux, 'useSelector'], - ] }); + ]}); const useDispatch = Redux.useDispatch; const useSelector = Redux.useSelector; @@ -22,19 +22,19 @@ export default {
      {`{a.b} is: ${a.b}`}
      - - - + + +
      ); }; ConnectedSimpleComponent.whyDidYouRender = true; - const initialState = { a: { b: 'c' } }; + const initialState = {a: {b: 'c'}}; const store = createStore((state = initialState, action) => { if (action.type === 'randomObj') { - return { a: { b: `${Math.random()}` } }; + return {a: {b: `${Math.random()}`}}; } if (action.type === 'deepEqlObj') { return _.cloneDeep(state); diff --git a/demo/src/reactReduxHOC/index.js b/demo/src/reactReduxHOC/index.js index 2f7f315..1ea6fd5 100644 --- a/demo/src/reactReduxHOC/index.js +++ b/demo/src/reactReduxHOC/index.js @@ -1,5 +1,5 @@ import React from 'react'; -import { createStore } from 'redux'; +import {createStore} from 'redux'; import * as Redux from 'react-redux'; import _ from 'lodash'; @@ -8,14 +8,14 @@ const Provider = Redux.Provider; export default { description: 'React Redux HOC', - fn({ reactDomRoot, whyDidYouRender }) { + fn({reactDomRoot, whyDidYouRender}) { whyDidYouRender(React); - const initialState = { a: { b: 'c' } }; + const initialState = {a: {b: 'c'}}; const rootReducer = (state, action) => { if (action.type === 'randomObj') { - return { a: { b: `${Math.random()}` } }; + return {a: {b: `${Math.random()}`}}; } if (action.type === 'deepEqlObj') { @@ -27,7 +27,7 @@ export default { const store = createStore(rootReducer, initialState); - const SimpleComponent = ({ a, randomObj, deepEqlObj, sameObj }) => { + const SimpleComponent = ({a, randomObj, deepEqlObj, sameObj}) => { return (
      {`{a.b} is: ${a.b}`} @@ -39,11 +39,11 @@ export default { }; const ConnectedSimpleComponent = connect( - state => ({ a: state.a }), + state => ({a: state.a}), ({ - randomObj: () => ({ type: 'randomObj' }), - deepEqlObj: () => ({ type: 'deepEqlObj' }), - sameObj: () => ({ type: 'sameObj' }), + randomObj: () => ({type: 'randomObj'}), + deepEqlObj: () => ({type: 'deepEqlObj'}), + sameObj: () => ({type: 'sameObj'}), }) )(SimpleComponent); diff --git a/demo/src/specialChanges/index.js b/demo/src/specialChanges/index.js index ddce99e..0a120f0 100644 --- a/demo/src/specialChanges/index.js +++ b/demo/src/specialChanges/index.js @@ -4,7 +4,7 @@ import createStepLogger from '../createStepLogger'; export default { description: 'Special Changes', - fn({ reactDomRoot, whyDidYouRender }) { + fn({reactDomRoot, whyDidYouRender}) { const stepLogger = createStepLogger(); whyDidYouRender(React); diff --git a/demo/src/ssr/index.js b/demo/src/ssr/index.js index 51b6844..1ecc319 100644 --- a/demo/src/ssr/index.js +++ b/demo/src/ssr/index.js @@ -7,7 +7,7 @@ import DemoComponent from './DemoComponent'; export default { description: 'Server Side (hydrate)', - fn({ reactDomRoot, domElement, whyDidYouRender }) { + fn({reactDomRoot, domElement, whyDidYouRender}) { const stepLogger = createStepLogger(); fetch('/ssrComponent') diff --git a/demo/src/stateChanges/index.js b/demo/src/stateChanges/index.js index 8b36594..8bd9881 100644 --- a/demo/src/stateChanges/index.js +++ b/demo/src/stateChanges/index.js @@ -4,7 +4,7 @@ import createStepLogger from '../createStepLogger'; export default { description: 'State Changes', - fn({ reactDomRoot, whyDidYouRender }) { + fn({reactDomRoot, whyDidYouRender}) { const stepLogger = createStepLogger(); whyDidYouRender(React); @@ -18,13 +18,13 @@ export default { componentDidMount() { stepLogger('Set an existing state key with the same value', true); - this.setState({ stateKey: 'stateValue' }, () => { + this.setState({stateKey: 'stateValue'}, () => { stepLogger('Add object entry'); - this.setState({ objectKey: { a: 'a' } }, () => { + this.setState({objectKey: {a: 'a'}}, () => { stepLogger('Add a new object entry that equals by value', true); - this.setState({ objectKey: { a: 'a' } }); + this.setState({objectKey: {a: 'a'}}); }); }); } diff --git a/demo/src/strict/index.js b/demo/src/strict/index.js index 177aadb..2222d87 100644 --- a/demo/src/strict/index.js +++ b/demo/src/strict/index.js @@ -4,7 +4,7 @@ import createStepLogger from '../createStepLogger'; export default { description: 'Strict mode', - fn({ reactDomRoot, whyDidYouRender }) { + fn({reactDomRoot, whyDidYouRender}) { const stepLogger = createStepLogger(); whyDidYouRender(React); @@ -29,15 +29,15 @@ export default { reactDomRoot.render(
      ); stepLogger('Other props'); - reactDomRoot.render(
      ); + reactDomRoot.render(
      ); stepLogger('Different by ref, equals by value', true); - reactDomRoot.render(
      ); + reactDomRoot.render(
      ); stepLogger('Other nested props'); - reactDomRoot.render(
      ); + reactDomRoot.render(
      ); stepLogger('Deep equal nested props', true); - reactDomRoot.render(
      ); + reactDomRoot.render(
      ); }, }; diff --git a/demo/src/styledComponents/index.js b/demo/src/styledComponents/index.js index 6b76196..f595e61 100644 --- a/demo/src/styledComponents/index.js +++ b/demo/src/styledComponents/index.js @@ -3,7 +3,7 @@ import styled from 'styled-components'; export default { description: 'styled-components', - fn({ reactDomRoot, whyDidYouRender }) { + fn({reactDomRoot, whyDidYouRender}) { whyDidYouRender(React); const SimpleComponent = (props) => { diff --git a/eslint.config.js b/eslint.config.js index 413f060..238fc18 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -1,7 +1,7 @@ const reactPlugin = require('eslint-plugin-react'); const js = require('@eslint/js'); const globals = require('globals'); -const { includeIgnoreFile } = require('@eslint/compat'); +const {includeIgnoreFile} = require('@eslint/compat'); const pluginCypress = require('eslint-plugin-cypress/flat'); // TODO: remove once all deps are using the latest version @@ -10,7 +10,7 @@ delete globals.browser['AudioWorkletGlobalScope ']; module.exports = [ - includeIgnoreFile(__dirname +'/.gitignore'), + includeIgnoreFile(__dirname + '/.gitignore'), js.configs.recommended, pluginCypress.configs.globals, { @@ -50,7 +50,7 @@ module.exports = [ 'destructuredArrayIgnorePattern': '^_' }], 'eol-last': 'error', - 'object-curly-spacing': ['error', 'always'], + 'object-curly-spacing': ['error', 'never'], 'react/prop-types': 'off', 'react/display-name': 'off', 'space-before-function-paren': ['error', 'never'], diff --git a/jest.polyfills.js b/jest.polyfills.js index d1d453f..3872e80 100644 --- a/jest.polyfills.js +++ b/jest.polyfills.js @@ -9,18 +9,18 @@ * you don't want to deal with this. */ -const { TextDecoder, TextEncoder } = require('node:util'); +const {TextDecoder, TextEncoder} = require('node:util'); Object.defineProperties(globalThis, { - TextDecoder: { value: TextDecoder }, - TextEncoder: { value: TextEncoder }, + TextDecoder: {value: TextDecoder}, + TextEncoder: {value: TextEncoder}, }); -const { Blob, File } = require('node:buffer'); +const {Blob, File} = require('node:buffer'); Object.defineProperties(globalThis, { - Blob: { value: Blob }, - File: { value: File }, + Blob: {value: Blob}, + File: {value: File}, }); window.MessageChannel = jest.fn().mockImplementation(() => { @@ -34,7 +34,7 @@ window.MessageChannel = jest.fn().mockImplementation(() => { port2: { postMessage: data => { if (onmessage) { - onmessage({ data }); + onmessage({data}); } }, }, diff --git a/jestSetup.js b/jestSetup.js index a8097d6..c078ebd 100644 --- a/jestSetup.js +++ b/jestSetup.js @@ -1,4 +1,4 @@ -import { errorOnConsoleOutput } from '@welldone-software/jest-console-handler'; +import {errorOnConsoleOutput} from '@welldone-software/jest-console-handler'; const substringsToIgnore = [ 'Selectors that return the entire state are almost certainly a mistake', @@ -8,10 +8,10 @@ const substringsToIgnore = [ ]; const regexToIgnore = new RegExp(`(${substringsToIgnore.join('|')})`); -global.flushConsoleOutput = errorOnConsoleOutput({ filterEntries: ({ args }) => { +global.flushConsoleOutput = errorOnConsoleOutput({filterEntries: ({args}) => { const shouldIgnoreConsoleLog = regexToIgnore.test(args[0]); return !shouldIgnoreConsoleLog; -} }); +}}); const React = require('react'); if (!React.version.startsWith('19')) { diff --git a/package.json b/package.json index e4b7bb7..1c3510a 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "test": "jest --config=jest.config.js", "test:ci": "yarn test --coverage", "lint": "eslint . --max-warnings 0 --cache --cache-location .cache/eslint-cache", - "clear": "rimraf .cache dist demo/dist", + "clear": "rimraf .cache dist demo/dist node_modules", "watch": "concurrently --names \"Serve,Test\" \"npm:start\" \"npm:test:watch\"", "checkHealth": "yarn lint && yarn test", "version": "yarn checkHealth && yarn build", @@ -55,9 +55,6 @@ "forces nollup to use source-map 0.8.0-beta.0 or higher.", "will be resolved when nollup is updated to use it" ], - "string-width": [ - "fixes require() of ES Module issue" - ], "rollup-plugin-react-refresh": [ "Uses my forked github https://github.com/vzaidman/rollup-plugin-react-refresh", "Until the PR from that is merged to the official library https://github.com/PepsRyuu/rollup-plugin-react-refresh/pull/10" @@ -72,14 +69,10 @@ }, "resolutions": { "source-map-fast": "npm:source-map@^0.8.0-beta.0", - "source-map": "^0.8.0-beta.0", - "string-width": "4.2.3" + "source-map": "^0.8.0-beta.0" }, "devDependencies": { - "@babel/cli": "^7.26.4", "@babel/core": "^7.26.0", - "@babel/eslint-parser": "^7.25.9", - "@babel/plugin-transform-class-properties": "^7.25.9", "@babel/preset-env": "^7.26.0", "@babel/preset-react": "^7.26.3", "@eslint/compat": "^1.2.4", @@ -134,4 +127,4 @@ "styled-components": "^6.1.13", "typescript": "^5.7.2" } -} +} \ No newline at end of file diff --git a/src/calculateDeepEqualDiffs.js b/src/calculateDeepEqualDiffs.js index 06988dd..2f6ef33 100644 --- a/src/calculateDeepEqualDiffs.js +++ b/src/calculateDeepEqualDiffs.js @@ -10,7 +10,7 @@ import { uniq, } from 'lodash'; -import { diffTypes } from './consts'; +import {diffTypes} from './consts'; const hasElementType = typeof Element !== 'undefined'; @@ -42,7 +42,7 @@ function isGetter(obj, prop) { export const dependenciesMap = new WeakMap(); -function accumulateDeepEqualDiffs(a, b, diffsAccumulator, pathString = '', { detailed }) { +function accumulateDeepEqualDiffs(a, b, diffsAccumulator, pathString = '', {detailed}) { if (a === b) { if (detailed) { trackDiff(a, b, diffsAccumulator, pathString, diffTypes.same); @@ -63,7 +63,7 @@ function accumulateDeepEqualDiffs(a, b, diffsAccumulator, pathString = '', { det const arrayItemDiffs = []; let numberOfDeepEqualsItems = 0; for (let i = arrayLength; i--; i > 0) { - const diffEquals = accumulateDeepEqualDiffs(a[i], b[i], arrayItemDiffs, `${pathString}[${i}]`, { detailed }); + const diffEquals = accumulateDeepEqualDiffs(a[i], b[i], arrayItemDiffs, `${pathString}[${i}]`, {detailed}); if (diffEquals) { numberOfDeepEqualsItems++; } @@ -116,7 +116,7 @@ function accumulateDeepEqualDiffs(a, b, diffsAccumulator, pathString = '', { det } const reactElementPropsAreDeepEqual = - accumulateDeepEqualDiffs(a.props, b.props, [], `${pathString}.props`, { detailed }); + accumulateDeepEqualDiffs(a.props, b.props, [], `${pathString}.props`, {detailed}); return reactElementPropsAreDeepEqual ? trackDiff(a, b, diffsAccumulator, pathString, diffTypes.reactElement) : @@ -133,7 +133,7 @@ function accumulateDeepEqualDiffs(a, b, diffsAccumulator, pathString = '', { det if (aDependenciesObj && bDependenciesObj) { const dependenciesAreDeepEqual = - accumulateDeepEqualDiffs(aDependenciesObj.deps, bDependenciesObj.deps, diffsAccumulator, `${pathString}:parent-hook-${aDependenciesObj.hookName}-deps`, { detailed }); + accumulateDeepEqualDiffs(aDependenciesObj.deps, bDependenciesObj.deps, diffsAccumulator, `${pathString}:parent-hook-${aDependenciesObj.hookName}-deps`, {detailed}); return dependenciesAreDeepEqual ? trackDiff(a, b, diffsAccumulator, pathString, diffTypes.function) : @@ -149,8 +149,8 @@ function accumulateDeepEqualDiffs(a, b, diffsAccumulator, pathString = '', { det const allKeys = uniq([...aKeys, ...bKeys]); - const clonedA = isPlainObject(a) ? { ...a } : a; - const clonedB = isPlainObject(b) ? { ...b } : b; + const clonedA = isPlainObject(a) ? {...a} : a; + const clonedB = isPlainObject(b) ? {...b} : b; if (allKeys.length !== aKeys.length || allKeys.length !== bKeys.length) { return trackDiff(clonedA, clonedB, diffsAccumulator, pathString, diffTypes.different); @@ -183,7 +183,7 @@ function accumulateDeepEqualDiffs(a, b, diffsAccumulator, pathString = '', { det let numberOfDeepEqualsObjectValues = 0; for (let i = keysLength; i--; i > 0) { const key = relevantKeys[i]; - const deepEquals = accumulateDeepEqualDiffs(a[key], b[key], objectValuesDiffs, `${pathString}.${key}`, { detailed }); + const deepEquals = accumulateDeepEqualDiffs(a[key], b[key], objectValuesDiffs, `${pathString}.${key}`, {detailed}); if (deepEquals) { numberOfDeepEqualsObjectValues++; } @@ -203,10 +203,10 @@ function accumulateDeepEqualDiffs(a, b, diffsAccumulator, pathString = '', { det return trackDiff(a, b, diffsAccumulator, pathString, diffTypes.different); } -export default function calculateDeepEqualDiffs(a, b, initialPathString, { detailed = false } = {}) { +export default function calculateDeepEqualDiffs(a, b, initialPathString, {detailed = false} = {}) { try { const diffs = []; - accumulateDeepEqualDiffs(a, b, diffs, initialPathString, { detailed }); + accumulateDeepEqualDiffs(a, b, diffs, initialPathString, {detailed}); return diffs; } catch (error) { if ((error.message && error.message.match(/stack|recursion/i)) || (error.number === -2146828260)) { diff --git a/src/defaultNotifier.js b/src/defaultNotifier.js index cb69047..7bfaa88 100644 --- a/src/defaultNotifier.js +++ b/src/defaultNotifier.js @@ -1,6 +1,6 @@ import wdyrStore from './wdyrStore'; -import { diffTypes, diffTypesDescriptions } from './consts'; +import {diffTypes, diffTypesDescriptions} from './consts'; import printDiff from './printDiff'; const moreInfoUrl = 'http://bit.ly/wdyr02'; @@ -35,12 +35,12 @@ function shouldLog(reason, Component) { return !hasDifferentValues; } -function logDifference({ Component, displayName, hookName, prefixMessage, diffObjType, differences, values }) { +function logDifference({Component, displayName, hookName, prefixMessage, diffObjType, differences, values}) { if (differences && differences.length > 0) { - wdyrStore.options.consoleLog({ [displayName]: Component }, `${prefixMessage} of ${diffObjType} changes:`); - differences.forEach(({ pathString, diffType, prevValue, nextValue }) => { + wdyrStore.options.consoleLog({[displayName]: Component}, `${prefixMessage} of ${diffObjType} changes:`); + differences.forEach(({pathString, diffType, prevValue, nextValue}) => { function diffFn() { - printDiff(prevValue, nextValue, { pathString, consoleLog: wdyrStore.options.consoleLog }); + printDiff(prevValue, nextValue, {pathString, consoleLog: wdyrStore.options.consoleLog}); } wdyrStore.options.consoleGroup( `%c${diffObjType === 'hook' ? `[hook ${hookName} result]` : `${diffObjType}.`}%c${pathString}%c`, @@ -49,16 +49,16 @@ function logDifference({ Component, displayName, hookName, prefixMessage, diffOb wdyrStore.options.consoleLog( `${diffTypesDescriptions[diffType]}. (more info at ${hookName ? moreInfoHooksUrl : moreInfoUrl})`, ); - wdyrStore.options.consoleLog({ [`prev ${pathString}`]: prevValue }, '!==', { [`next ${pathString}`]: nextValue }); + wdyrStore.options.consoleLog({[`prev ${pathString}`]: prevValue}, '!==', {[`next ${pathString}`]: nextValue}); if (diffType === diffTypes.deepEquals) { - wdyrStore.options.consoleLog({ 'For detailed diff, right click the following fn, save as global, and run: ': diffFn }); + wdyrStore.options.consoleLog({'For detailed diff, right click the following fn, save as global, and run: ': diffFn}); } wdyrStore.options.consoleGroupEnd(); }); } else if (differences) { wdyrStore.options.consoleLog( - { [displayName]: Component }, + {[displayName]: Component}, `${prefixMessage} the ${diffObjType} object itself changed but its values are all equal.`, diffObjType === 'props' ? 'This could have been avoided by making the component pure, or by preventing its father from re-rendering.' : @@ -70,7 +70,7 @@ function logDifference({ Component, displayName, hookName, prefixMessage, diffOb } export default function defaultNotifier(updateInfo) { - const { Component, displayName, hookName, prevOwner, nextOwner, prevProps, prevState, prevHookResult, nextProps, nextState, nextHookResult, reason } = updateInfo; + const {Component, displayName, hookName, prevOwner, nextOwner, prevProps, prevState, prevHookResult, nextProps, nextState, nextHookResult, reason} = updateInfo; if (!shouldLog(reason, Component, wdyrStore.options)) { return; @@ -87,7 +87,7 @@ export default function defaultNotifier(updateInfo) { prefixMessage, diffObjType: 'props', differences: reason.propsDifferences, - values: { prev: prevProps, next: nextProps }, + values: {prev: prevProps, next: nextProps}, }); prefixMessage = 'And because'; } @@ -99,7 +99,7 @@ export default function defaultNotifier(updateInfo) { prefixMessage, diffObjType: 'state', differences: reason.stateDifferences, - values: { prev: prevState, next: nextState }, + values: {prev: prevState, next: nextState}, }); } @@ -110,7 +110,7 @@ export default function defaultNotifier(updateInfo) { prefixMessage, diffObjType: 'hook', differences: reason.hookDifferences, - values: { prev: prevHookResult, next: nextHookResult }, + values: {prev: prevHookResult, next: nextHookResult}, hookName, }); } @@ -129,7 +129,7 @@ export default function defaultNotifier(updateInfo) { prefixMessage, diffObjType: 'props', differences: reason.ownerDifferences.propsDifferences, - values: { prev: prevOwnerData.props, next: nextOwnerData.props }, + values: {prev: prevOwnerData.props, next: nextOwnerData.props}, }); prefixMessage = 'And because'; } @@ -141,19 +141,19 @@ export default function defaultNotifier(updateInfo) { prefixMessage, diffObjType: 'state', differences: reason.ownerDifferences.stateDifferences, - values: { prev: prevOwnerData.state, next: nextOwnerData.state }, + values: {prev: prevOwnerData.state, next: nextOwnerData.state}, }); } if (reason.ownerDifferences.hookDifferences) { - reason.ownerDifferences.hookDifferences.forEach(({ hookName, differences }, i) => + reason.ownerDifferences.hookDifferences.forEach(({hookName, differences}, i) => logDifference({ Component: nextOwnerData.Component, displayName: nextOwnerData.displayName, prefixMessage, diffObjType: 'hook', differences, - values: { prev: prevOwnerData.hooksInfo[i].result, next: nextOwnerData.hooksInfo[i].result }, + values: {prev: prevOwnerData.hooksInfo[i].result, next: nextOwnerData.hooksInfo[i].result}, hookName, }) ); @@ -163,7 +163,7 @@ export default function defaultNotifier(updateInfo) { if (!reason.propsDifferences && !reason.stateDifferences && !reason.hookDifferences) { wdyrStore.options.consoleLog( - { [displayName]: Component }, + {[displayName]: Component}, 'Re-rendered although props and state objects are the same.', 'This usually means there was a call to this.forceUpdate() inside the component.', `more info at ${moreInfoUrl}` diff --git a/src/findObjectsDifferences.js b/src/findObjectsDifferences.js index b501d66..2824787 100644 --- a/src/findObjectsDifferences.js +++ b/src/findObjectsDifferences.js @@ -1,9 +1,9 @@ -import { reduce } from 'lodash'; +import {reduce} from 'lodash'; import calculateDeepEqualDiffs from './calculateDeepEqualDiffs'; const emptyObject = {}; -export default function findObjectsDifferences(userPrevObj, userNextObj, { shallow = true } = {}) { +export default function findObjectsDifferences(userPrevObj, userNextObj, {shallow = true} = {}) { if (userPrevObj === userNextObj) { return false; } @@ -15,7 +15,7 @@ export default function findObjectsDifferences(userPrevObj, userNextObj, { shall const prevObj = userPrevObj || emptyObject; const nextObj = userNextObj || emptyObject; - const keysOfBothObjects = Object.keys({ ...prevObj, ...nextObj }); + const keysOfBothObjects = Object.keys({...prevObj, ...nextObj}); return reduce(keysOfBothObjects, (result, key) => { const deepEqualDiffs = calculateDeepEqualDiffs(prevObj[key], nextObj[key], key); diff --git a/src/getDisplayName.js b/src/getDisplayName.js index a8f29bd..fb0d77c 100644 --- a/src/getDisplayName.js +++ b/src/getDisplayName.js @@ -1,4 +1,4 @@ -import { isString } from 'lodash'; +import {isString} from 'lodash'; export default function getDisplayName(type) { return ( diff --git a/src/getUpdateInfo.js b/src/getUpdateInfo.js index 4a3ffdf..7a53687 100644 --- a/src/getUpdateInfo.js +++ b/src/getUpdateInfo.js @@ -19,9 +19,9 @@ function getOwnerDifferences(prevOwner, nextOwner) { prevOwnerData.hooksInfo.slice(prevOwnerData.hooksInfo.length / 2) : prevOwnerData.hooksInfo; - const hookDifferences = prevOwnerDataHooks.map(({ hookName, result }, i) => ({ + const hookDifferences = prevOwnerDataHooks.map(({hookName, result}, i) => ({ hookName, - differences: findObjectsDifferences(result, nextOwnerData.hooksInfo[i].result, { shallow: false }), + differences: findObjectsDifferences(result, nextOwnerData.hooksInfo[i].result, {shallow: false}), })); return { @@ -47,12 +47,12 @@ function getUpdateReason(prevOwner, prevProps, prevState, prevHookResult, nextOw return { propsDifferences: findObjectsDifferences(prevProps, nextProps), stateDifferences: findObjectsDifferences(prevState, nextState), - hookDifferences: findObjectsDifferences(prevHookResult, nextHookResult, { shallow: false }), + hookDifferences: findObjectsDifferences(prevHookResult, nextHookResult, {shallow: false}), ownerDifferences: getOwnerDifferences(prevOwner, nextOwner), }; } -export default function getUpdateInfo({ Component, displayName, hookName, prevOwner, nextOwner, prevProps, prevState, prevHookResult, nextProps, nextState, nextHookResult }) { +export default function getUpdateInfo({Component, displayName, hookName, prevOwner, nextOwner, prevProps, prevState, prevHookResult, nextProps, nextState, nextHookResult}) { return { Component, displayName, diff --git a/src/index.js b/src/index.js index c617d61..d671b7d 100644 --- a/src/index.js +++ b/src/index.js @@ -2,9 +2,9 @@ import * as React from 'react'; import wdyrStore from './wdyrStore'; -import whyDidYouRender, { storeOwnerData, getWDYRType } from './whyDidYouRender'; +import whyDidYouRender, {storeOwnerData, getWDYRType} from './whyDidYouRender'; import defaultNotifier from './defaultNotifier'; -import { getCurrentOwner } from './helpers'; +import {getCurrentOwner} from './helpers'; whyDidYouRender.defaultNotifier = defaultNotifier; whyDidYouRender.wdyrStore = wdyrStore; diff --git a/src/normalizeOptions.js b/src/normalizeOptions.js index 00e19b1..091c904 100644 --- a/src/normalizeOptions.js +++ b/src/normalizeOptions.js @@ -1,5 +1,5 @@ /* eslint-disable no-console */ -import { createDefaultNotifier } from './defaultNotifier'; +import {createDefaultNotifier} from './defaultNotifier'; const emptyFn = () => {}; diff --git a/src/patches/patchClassComponent.js b/src/patches/patchClassComponent.js index 3c66ffb..1d4a5fc 100644 --- a/src/patches/patchClassComponent.js +++ b/src/patches/patchClassComponent.js @@ -1,11 +1,11 @@ -import { defaults } from 'lodash'; +import {defaults} from 'lodash'; import wdyrStore from '../wdyrStore'; -import { checkIfInsideAStrictModeTree } from '../utils'; +import {checkIfInsideAStrictModeTree} from '../utils'; import getUpdateInfo from '../getUpdateInfo'; -export default function patchClassComponent(ClassComponent, { displayName, defaultProps }) { +export default function patchClassComponent(ClassComponent, {displayName, defaultProps}) { class WDYRPatchedClassComponent extends ClassComponent { constructor(props, context) { super(props, context); diff --git a/src/patches/patchForwardRefComponent.js b/src/patches/patchForwardRefComponent.js index 802dc2d..3f35e22 100644 --- a/src/patches/patchForwardRefComponent.js +++ b/src/patches/patchForwardRefComponent.js @@ -1,20 +1,20 @@ -import { defaults } from 'lodash'; +import {defaults} from 'lodash'; import wdyrStore from '../wdyrStore'; import getDisplayName from '../getDisplayName'; -import { isMemoComponent } from '../utils'; +import {isMemoComponent} from '../utils'; import patchFunctionalOrStrComponent from './patchFunctionalOrStrComponent'; -export default function patchForwardRefComponent(ForwardRefComponent, { displayName, defaultProps }) { - const { render: InnerForwardRefComponent } = ForwardRefComponent; +export default function patchForwardRefComponent(ForwardRefComponent, {displayName, defaultProps}) { + const {render: InnerForwardRefComponent} = ForwardRefComponent; const isInnerComponentMemoized = isMemoComponent(InnerForwardRefComponent); const WrappedFunctionalComponent = isInnerComponentMemoized ? InnerForwardRefComponent.type : InnerForwardRefComponent; const WDYRWrappedByReactForwardRefFunctionalComponent = ( - patchFunctionalOrStrComponent(WrappedFunctionalComponent, { isPure: isInnerComponentMemoized, displayName }) + patchFunctionalOrStrComponent(WrappedFunctionalComponent, {isPure: isInnerComponentMemoized, displayName}) ); WDYRWrappedByReactForwardRefFunctionalComponent.displayName = getDisplayName(WrappedFunctionalComponent); diff --git a/src/patches/patchFunctionalOrStrComponent.js b/src/patches/patchFunctionalOrStrComponent.js index 633bea0..8394641 100644 --- a/src/patches/patchFunctionalOrStrComponent.js +++ b/src/patches/patchFunctionalOrStrComponent.js @@ -1,4 +1,4 @@ -import { defaults } from 'lodash'; +import {defaults} from 'lodash'; import wdyrStore from '../wdyrStore'; @@ -8,7 +8,7 @@ const getFunctionalComponentFromStringComponent = (componentTypeStr) => props => wdyrStore.React.createElement(componentTypeStr, props) ); -export default function patchFunctionalOrStrComponent(FunctionalOrStringComponent, { isPure, displayName, defaultProps }) { +export default function patchFunctionalOrStrComponent(FunctionalOrStringComponent, {isPure, displayName, defaultProps}) { const FunctionalComponent = typeof(FunctionalOrStringComponent) === 'string' ? getFunctionalComponentFromStringComponent(FunctionalOrStringComponent) : FunctionalOrStringComponent; diff --git a/src/patches/patchMemoComponent.js b/src/patches/patchMemoComponent.js index e4134f5..dde8330 100644 --- a/src/patches/patchMemoComponent.js +++ b/src/patches/patchMemoComponent.js @@ -1,14 +1,14 @@ -import { defaults } from 'lodash'; +import {defaults} from 'lodash'; import wdyrStore from '../wdyrStore'; import getDisplayName from '../getDisplayName'; -import { isForwardRefComponent, isMemoComponent, isReactClassComponent } from '../utils'; +import {isForwardRefComponent, isMemoComponent, isReactClassComponent} from '../utils'; import patchClassComponent from './patchClassComponent'; import patchFunctionalOrStrComponent from './patchFunctionalOrStrComponent'; -export default function patchMemoComponent(MemoComponent, { displayName, defaultProps }) { - const { type: InnerMemoComponent } = MemoComponent; +export default function patchMemoComponent(MemoComponent, {displayName, defaultProps}) { + const {type: InnerMemoComponent} = MemoComponent; const isInnerMemoComponentAClassComponent = isReactClassComponent(InnerMemoComponent); const isInnerMemoComponentForwardRefs = isForwardRefComponent(InnerMemoComponent); @@ -19,10 +19,10 @@ export default function patchMemoComponent(MemoComponent, { displayName, default InnerMemoComponent; const PatchedInnerComponent = isInnerMemoComponentAClassComponent ? - patchClassComponent(WrappedFunctionalComponent, { displayName, defaultProps }) : + patchClassComponent(WrappedFunctionalComponent, {displayName, defaultProps}) : (isInnerMemoComponentAnotherMemoComponent ? - patchMemoComponent(WrappedFunctionalComponent, { displayName, defaultProps }) : - patchFunctionalOrStrComponent(WrappedFunctionalComponent, { displayName, isPure: true }) + patchMemoComponent(WrappedFunctionalComponent, {displayName, defaultProps}) : + patchFunctionalOrStrComponent(WrappedFunctionalComponent, {displayName, isPure: true}) ); try { diff --git a/src/printDiff.js b/src/printDiff.js index 4b6a3ec..16d2cda 100644 --- a/src/printDiff.js +++ b/src/printDiff.js @@ -1,10 +1,10 @@ -import { sortBy, groupBy } from 'lodash'; +import {sortBy, groupBy} from 'lodash'; import calculateDeepEqualDiffs from './calculateDeepEqualDiffs'; -import { diffTypesDescriptions } from './consts'; +import {diffTypesDescriptions} from './consts'; -export default function printDiff(value1, value2, { pathString, consoleLog }) { - const diffs = calculateDeepEqualDiffs(value1, value2, pathString, { detailed: true }); +export default function printDiff(value1, value2, {pathString, consoleLog}) { + const diffs = calculateDeepEqualDiffs(value1, value2, pathString, {detailed: true}); const keysLength = Math.max(...diffs.map(diff => diff.pathString.length)) + 2; diff --git a/src/shouldTrack.js b/src/shouldTrack.js index 155427f..3db7e82 100644 --- a/src/shouldTrack.js +++ b/src/shouldTrack.js @@ -1,6 +1,6 @@ import wdyrStore from './wdyrStore'; -import { isMemoComponent } from './utils'; +import {isMemoComponent} from './utils'; import getDisplayName from './getDisplayName'; function shouldInclude(displayName) { @@ -19,7 +19,7 @@ function shouldExclude(displayName) { ); } -export default function shouldTrack(Component, { isHookChange }) { +export default function shouldTrack(Component, {isHookChange}) { const displayName = getDisplayName(Component); if (shouldExclude(displayName)) { diff --git a/src/utils.js b/src/utils.js index 80c7cb3..da9e6d8 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,5 +1,5 @@ // copied from https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactTypeOfMode.js -import { REACT_FORWARD_REF_TYPE, REACT_MEMO_TYPE, REACT_STRICT_MODE } from './consts'; +import {REACT_FORWARD_REF_TYPE, REACT_MEMO_TYPE, REACT_STRICT_MODE} from './consts'; // based on "findStrictRoot" from https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactStrictModeWarnings.js // notice: this is only used for class components. functional components doesn't render twice inside strict mode diff --git a/src/whyDidYouRender.js b/src/whyDidYouRender.js index 6de4657..2df2ace 100644 --- a/src/whyDidYouRender.js +++ b/src/whyDidYouRender.js @@ -1,4 +1,4 @@ -import { get, isFunction } from 'lodash'; +import {get, isFunction} from 'lodash'; import wdyrStore from './wdyrStore'; @@ -19,15 +19,15 @@ import { isReactClassComponent, } from './utils'; -import { dependenciesMap } from './calculateDeepEqualDiffs'; +import {dependenciesMap} from './calculateDeepEqualDiffs'; -import { getCurrentOwner } from './helpers'; +import {getCurrentOwner} from './helpers'; -export { wdyrStore, getCurrentOwner }; +export {wdyrStore, getCurrentOwner}; const initialHookValue = Symbol('initial-hook-value'); -function trackHookChanges(hookName, { path: pathToGetTrackedHookResult }, rawHookResult) { +function trackHookChanges(hookName, {path: pathToGetTrackedHookResult}, rawHookResult) { const nextResult = pathToGetTrackedHookResult ? get(rawHookResult, pathToGetTrackedHookResult) : rawHookResult; const prevResultRef = wdyrStore.React.useRef(initialHookValue); @@ -44,12 +44,12 @@ function trackHookChanges(hookName, { path: pathToGetTrackedHookResult }, rawHoo } const hooksInfoForCurrentRender = wdyrStore.hooksInfoForCurrentRender.get(ownerInstance); - hooksInfoForCurrentRender.push({ hookName, result: nextResult }); + hooksInfoForCurrentRender.push({hookName, result: nextResult}); const Component = ownerInstance.type.ComponentForHooksTracking || ownerInstance.type; const displayName = getDisplayName(Component); - const isShouldTrack = shouldTrack(Component, { isHookChange: true }); + const isShouldTrack = shouldTrack(Component, {isHookChange: true}); if (isShouldTrack && prevResult !== initialHookValue) { const notification = getUpdateInfo({ Component: Component, @@ -67,28 +67,28 @@ function trackHookChanges(hookName, { path: pathToGetTrackedHookResult }, rawHoo return rawHookResult; } -function createPatchedComponent(Component, { displayName, defaultProps }) { +function createPatchedComponent(Component, {displayName, defaultProps}) { if (isMemoComponent(Component)) { - return patchMemoComponent(Component, { displayName, defaultProps }); + return patchMemoComponent(Component, {displayName, defaultProps}); } if (isForwardRefComponent(Component)) { - return patchForwardRefComponent(Component, { displayName, defaultProps }); + return patchForwardRefComponent(Component, {displayName, defaultProps}); } if (isReactClassComponent(Component)) { - return patchClassComponent(Component, { displayName, defaultProps }); + return patchClassComponent(Component, {displayName, defaultProps}); } - return patchFunctionalOrStrComponent(Component, { displayName, defaultProps, isPure: false }); + return patchFunctionalOrStrComponent(Component, {displayName, defaultProps, isPure: false}); } -function getPatchedComponent(Component, { displayName, defaultProps }) { +function getPatchedComponent(Component, {displayName, defaultProps}) { if (wdyrStore.componentsMap.has(Component)) { return wdyrStore.componentsMap.get(Component); } - const WDYRPatchedComponent = createPatchedComponent(Component, { displayName, defaultProps }); + const WDYRPatchedComponent = createPatchedComponent(Component, {displayName, defaultProps}); wdyrStore.componentsMap.set(Component, WDYRPatchedComponent); @@ -114,12 +114,12 @@ function getIsSupportedComponentType(Comp) { } export const hooksConfig = { - useState: { path: '0' }, - useReducer: { path: '0' }, + useState: {path: '0'}, + useReducer: {path: '0'}, useContext: undefined, useSyncExternalStore: undefined, - useMemo: { dependenciesPath: '1', dontReport: true }, - useCallback: { dependenciesPath: '1', dontReport: true }, + useMemo: {dependenciesPath: '1', dontReport: true}, + useCallback: {dependenciesPath: '1', dontReport: true}, }; export function storeOwnerData(element) { @@ -164,10 +164,10 @@ function trackHooksIfNeeded() { const newHook = function useWhyDidYouRenderReWrittenHook(...args) { const hookResult = originalHook.call(this, ...args); - const { dependenciesPath, dontReport } = hookTrackingConfig; + const {dependenciesPath, dontReport} = hookTrackingConfig; const shouldTrackHookChanges = !dontReport; if (dependenciesPath && isFunction(hookResult)) { - dependenciesMap.set(hookResult, { hookName, deps: get(args, dependenciesPath) }); + dependenciesMap.set(hookResult, {hookName, deps: get(args, dependenciesPath)}); } if (shouldTrackHookChanges) { trackHookChanges(hookName, hookTrackingConfig, hookResult); @@ -179,7 +179,7 @@ function trackHooksIfNeeded() { value: hookName + 'WDYR', writable: false }); - Object.assign(newHook, { originalHook }); + Object.assign(newHook, {originalHook}); hookParent[hookName] = newHook; }); } @@ -188,7 +188,7 @@ function trackHooksIfNeeded() { export function getWDYRType(origType) { const isShouldTrack = ( getIsSupportedComponentType(origType) && - shouldTrack(origType, { isHookChange: false }) + shouldTrack(origType, {isHookChange: false}) ); if (!isShouldTrack) { @@ -204,7 +204,7 @@ export function getWDYRType(origType) { const defaultProps = getDefaultProps(origType); - const WDYRPatchedComponent = getPatchedComponent(origType, { displayName, defaultProps }); + const WDYRPatchedComponent = getPatchedComponent(origType, {displayName, defaultProps}); return WDYRPatchedComponent; } diff --git a/tests/calculateDeepEqualDiffs.test.js b/tests/calculateDeepEqualDiffs.test.js index 9876d65..e997e13 100644 --- a/tests/calculateDeepEqualDiffs.test.js +++ b/tests/calculateDeepEqualDiffs.test.js @@ -1,10 +1,10 @@ import React from 'react'; import calculateDeepEqualDiffs from '~/calculateDeepEqualDiffs'; -import { diffTypes } from '~/consts'; +import {diffTypes} from '~/consts'; test('same', () => { - const prevValue = { a: 'b' }; + const prevValue = {a: 'b'}; const nextValue = prevValue; const diffs = calculateDeepEqualDiffs(prevValue, nextValue); @@ -13,8 +13,8 @@ test('same', () => { }); test('not deep equal', () => { - const prevValue = { a: 'b' }; - const nextValue = { a: 'c' }; + const prevValue = {a: 'b'}; + const nextValue = {a: 'c'}; const diffs = calculateDeepEqualDiffs(prevValue, nextValue); @@ -35,8 +35,8 @@ test('not deep equal', () => { }); test('simple deep', () => { - const prevValue = { a: 'b' }; - const nextValue = { a: 'b' }; + const prevValue = {a: 'b'}; + const nextValue = {a: 'b'}; const diffs = calculateDeepEqualDiffs(prevValue, nextValue); @@ -51,8 +51,8 @@ test('simple deep', () => { }); test('nested object deep equals', () => { - const prevValue = { a: { b: 'c' } }; - const nextValue = { a: { b: 'c' } }; + const prevValue = {a: {b: 'c'}}; + const nextValue = {a: {b: 'c'}}; const diffs = calculateDeepEqualDiffs(prevValue, nextValue); @@ -67,8 +67,8 @@ test('nested object deep equals', () => { }); test('nested array deep equals', () => { - const prevValue = { a: { b: ['c'] } }; - const nextValue = { a: { b: ['c'] } }; + const prevValue = {a: {b: ['c']}}; + const nextValue = {a: {b: ['c']}}; const diffs = calculateDeepEqualDiffs(prevValue, nextValue); @@ -102,8 +102,8 @@ test('nested date', () => { const now = new Date(); const now2 = new Date(now); - const prevValue = { a: { b: [now] } }; - const nextValue = { a: { b: [now2] } }; + const prevValue = {a: {b: [now]}}; + const nextValue = {a: {b: [now2]}}; const diffs = calculateDeepEqualDiffs(prevValue, nextValue); @@ -137,8 +137,8 @@ test('nested regular expression', () => { const regEx = /c/i; const regEx2 = /c/i; - const prevValue = { a: { b: [regEx] } }; - const nextValue = { a: { b: [regEx2] } }; + const prevValue = {a: {b: [regEx]}}; + const nextValue = {a: {b: [regEx2]}}; const diffs = calculateDeepEqualDiffs(prevValue, nextValue); @@ -156,8 +156,8 @@ test('dom elements', () => { const element = document.createElement('div'); const element2 = document.createElement('div'); - const prevValue = { a: element }; - const nextValue = { a: element2 }; + const prevValue = {a: element}; + const nextValue = {a: element2}; const diffs = calculateDeepEqualDiffs(prevValue, nextValue); @@ -180,8 +180,8 @@ test('dom elements', () => { test('equal react elements', () => { const tooltip =
      hi!
      ; - const prevValue = { a: tooltip }; - const nextValue = { a: tooltip }; + const prevValue = {a: tooltip}; + const nextValue = {a: tooltip}; const diffs = calculateDeepEqualDiffs(prevValue, nextValue); @@ -215,8 +215,8 @@ test('nested react elements', () => { const tooltip =
      hi!
      ; const tooltip2 =
      hi!
      ; - const prevValue = { a: tooltip }; - const nextValue = { a: tooltip2 }; + const prevValue = {a: tooltip}; + const nextValue = {a: tooltip2}; const diffs = calculateDeepEqualDiffs(prevValue, nextValue); @@ -234,8 +234,8 @@ test('nested different react elements', () => { const tooltip =
      hi!
      ; const tooltip2 =
      hi 2 !
      ; - const prevValue = { a: tooltip }; - const nextValue = { a: tooltip2 }; + const prevValue = {a: tooltip}; + const nextValue = {a: tooltip2}; const diffs = calculateDeepEqualDiffs(prevValue, nextValue); @@ -297,8 +297,8 @@ test('react class component instance', () => { const tooltip = ; const tooltip2 = ; - const prevValue = { a: tooltip }; - const nextValue = { a: tooltip2 }; + const prevValue = {a: tooltip}; + const nextValue = {a: tooltip2}; const diffs = calculateDeepEqualDiffs(prevValue, nextValue); @@ -322,8 +322,8 @@ test('react class pure component instance', () => { const tooltip = ; const tooltip2 = ; - const prevValue = { a: tooltip }; - const nextValue = { a: tooltip2 }; + const prevValue = {a: tooltip}; + const nextValue = {a: tooltip2}; const diffs = calculateDeepEqualDiffs(prevValue, nextValue); @@ -345,8 +345,8 @@ test('react functional component instance', () => { const tooltip = ; const tooltip2 = ; - const prevValue = { a: tooltip }; - const nextValue = { a: tooltip2 }; + const prevValue = {a: tooltip}; + const nextValue = {a: tooltip2}; const diffs = calculateDeepEqualDiffs(prevValue, nextValue); @@ -368,8 +368,8 @@ test('react memoized functional component instance', () => { const tooltip = ; const tooltip2 = ; - const prevValue = { a: tooltip }; - const nextValue = { a: tooltip2 }; + const prevValue = {a: tooltip}; + const nextValue = {a: tooltip2}; const diffs = calculateDeepEqualDiffs(prevValue, nextValue); @@ -387,8 +387,8 @@ test('functions', () => { const fn = function something() {}; const fn2 = function something() {}; - const prevValue = { fn }; - const nextValue = { fn: fn2 }; + const prevValue = {fn}; + const nextValue = {fn: fn2}; const diffs = calculateDeepEqualDiffs(prevValue, nextValue); @@ -403,8 +403,8 @@ test('functions', () => { }); test('inline functions', () => { - const prevValue = { a: { fn: () => {} } }; - const nextValue = { a: { fn: () => {} } }; + const prevValue = {a: {fn: () => {}}}; + const nextValue = {a: {fn: () => {}}}; const diffs = calculateDeepEqualDiffs(prevValue, nextValue); @@ -461,8 +461,8 @@ test('sets', () => { }); test('mix', () => { - const prevValue = { a: { fn: () => {} }, b: [{ tooltip:
      hi
      }] }; - const nextValue = { a: { fn: () => {} }, b: [{ tooltip:
      hi
      }] }; + const prevValue = {a: {fn: () => {}}, b: [{tooltip:
      hi
      }]}; + const nextValue = {a: {fn: () => {}}, b: [{tooltip:
      hi
      }]}; const diffs = calculateDeepEqualDiffs(prevValue, nextValue); diff --git a/tests/defaultNotifier.test.js b/tests/defaultNotifier.test.js index 0423ea9..863c03b 100644 --- a/tests/defaultNotifier.test.js +++ b/tests/defaultNotifier.test.js @@ -41,7 +41,7 @@ const testInputAndExpects = { }, onlyLogs: { description: 'Only logs', - userOptions: { onlyLogs: true }, + userOptions: {onlyLogs: true}, expects: { logsCount: { title: 1, @@ -68,7 +68,7 @@ const testInputAndExpects = { }, collapseGroups: { description: 'Group by component with collapse', - userOptions: { collapseGroups: true }, + userOptions: {collapseGroups: true}, expects: { logsCount: { title: 0, @@ -117,7 +117,7 @@ describe('For no differences', () => { React.__REVERT_WHY_DID_YOU_RENDER__(); }); - Object.values(testInputAndExpects).forEach(({ description, userOptions, expects }) => { + Object.values(testInputAndExpects).forEach(({description, userOptions, expects}) => { test(description, () => { whyDidYouRender(React, userOptions); @@ -141,15 +141,15 @@ describe('For different props eq by ref', () => { React.__REVERT_WHY_DID_YOU_RENDER__(); }); - Object.values(testInputAndExpects).forEach(({ description, userOptions, expects }) => { + Object.values(testInputAndExpects).forEach(({description, userOptions, expects}) => { test(description, () => { whyDidYouRender(React, userOptions); const updateInfo = getUpdateInfo({ Component: TestComponent, - prevProps: { a: 'aa' }, + prevProps: {a: 'aa'}, prevState: null, - nextProps: { a: 'aa' }, + nextProps: {a: 'aa'}, nextState: null, }); @@ -165,16 +165,16 @@ describe('For equal state eq by ref', () => { React.__REVERT_WHY_DID_YOU_RENDER__(); }); - Object.values(testInputAndExpects).forEach(({ description, userOptions, expects }) => { + Object.values(testInputAndExpects).forEach(({description, userOptions, expects}) => { test(description, () => { whyDidYouRender(React, userOptions); const updateInfo = getUpdateInfo({ Component: TestComponent, prevProps: null, - prevState: { a: 'aa' }, + prevState: {a: 'aa'}, nextProps: null, - nextState: { a: 'aa' }, + nextState: {a: 'aa'}, }); defaultNotifier(updateInfo); @@ -189,16 +189,16 @@ describe('For different state and props', () => { React.__REVERT_WHY_DID_YOU_RENDER__(); }); - Object.values(testInputAndExpects).forEach(({ description, userOptions, expects }) => { + Object.values(testInputAndExpects).forEach(({description, userOptions, expects}) => { test(description, () => { whyDidYouRender(React, userOptions); const updateInfo = getUpdateInfo({ Component: TestComponent, - prevProps: { a: 'aa' }, - prevState: { a: 'aa' }, - nextProps: { a: 'aa' }, - nextState: { a: 'aa' }, + prevProps: {a: 'aa'}, + prevState: {a: 'aa'}, + nextProps: {a: 'aa'}, + nextState: {a: 'aa'}, }); defaultNotifier(updateInfo); @@ -213,14 +213,14 @@ describe('For different hook', () => { React.__REVERT_WHY_DID_YOU_RENDER__(); }); - Object.values(testInputAndExpects).forEach(({ description, userOptions, expects }) => { + Object.values(testInputAndExpects).forEach(({description, userOptions, expects}) => { test(description, () => { whyDidYouRender(React, userOptions); const updateInfo = getUpdateInfo({ Component: TestComponent, - prevHookResult: { a: 'aa' }, - nextHookResult: { a: 'aa' }, + prevHookResult: {a: 'aa'}, + nextHookResult: {a: 'aa'}, }); defaultNotifier(updateInfo); @@ -235,15 +235,15 @@ describe('For different deep equal props', () => { React.__REVERT_WHY_DID_YOU_RENDER__(); }); - Object.values(testInputAndExpects).forEach(({ description, userOptions, expects }) => { + Object.values(testInputAndExpects).forEach(({description, userOptions, expects}) => { test(description, () => { whyDidYouRender(React, userOptions); const updateInfo = getUpdateInfo({ Component: TestComponent, - prevProps: { a: { b: 'b' } }, + prevProps: {a: {b: 'b'}}, prevState: null, - nextProps: { a: { b: 'b' } }, + nextProps: {a: {b: 'b'}}, nextState: null, }); @@ -259,16 +259,16 @@ describe('For different deep equal state', () => { React.__REVERT_WHY_DID_YOU_RENDER__(); }); - Object.values(testInputAndExpects).forEach(({ description, userOptions, expects }) => { + Object.values(testInputAndExpects).forEach(({description, userOptions, expects}) => { test(description, () => { whyDidYouRender(React, userOptions); const updateInfo = getUpdateInfo({ Component: TestComponent, prevProps: null, - prevState: { a: { b: 'b' } }, + prevState: {a: {b: 'b'}}, nextProps: null, - nextState: { a: { b: 'b' } }, + nextState: {a: {b: 'b'}}, }); defaultNotifier(updateInfo); @@ -283,16 +283,16 @@ describe('For different deep equal state and props', () => { React.__REVERT_WHY_DID_YOU_RENDER__(); }); - Object.values(testInputAndExpects).forEach(({ description, userOptions, expects }) => { + Object.values(testInputAndExpects).forEach(({description, userOptions, expects}) => { test(description, () => { whyDidYouRender(React, userOptions); const updateInfo = getUpdateInfo({ Component: TestComponent, - prevProps: { a: { b: 'b' } }, - prevState: { a: { b: 'b' } }, - nextProps: { a: { b: 'b' } }, - nextState: { a: { b: 'b' } }, + prevProps: {a: {b: 'b'}}, + prevState: {a: {b: 'b'}}, + nextProps: {a: {b: 'b'}}, + nextState: {a: {b: 'b'}}, }); defaultNotifier(updateInfo); @@ -307,15 +307,15 @@ describe('For different functions by the same name', () => { React.__REVERT_WHY_DID_YOU_RENDER__(); }); - Object.values(testInputAndExpects).forEach(({ description, userOptions, expects }) => { + Object.values(testInputAndExpects).forEach(({description, userOptions, expects}) => { test(description, () => { whyDidYouRender(React, userOptions); const updateInfo = getUpdateInfo({ Component: TestComponent, - prevProps: { fn: function something() {} }, + prevProps: {fn: function something() {}}, prevState: null, - nextProps: { fn: function something() {} }, + nextProps: {fn: function something() {}}, nextState: null, }); @@ -331,16 +331,16 @@ describe('Mix of changes', () => { React.__REVERT_WHY_DID_YOU_RENDER__(); }); - Object.values(testInputAndExpects).forEach(({ description, userOptions, expects }) => { + Object.values(testInputAndExpects).forEach(({description, userOptions, expects}) => { test(description, () => { whyDidYouRender(React, userOptions); const updateInfo = getUpdateInfo({ Component: TestComponent, - prevProps: { fn: function something() {} }, - prevState: { a: { b: 'b' } }, - nextProps: { fn: function something() {} }, - nextState: { a: { b: 'b' } }, + prevProps: {fn: function something() {}}, + prevState: {a: {b: 'b'}}, + nextProps: {fn: function something() {}}, + nextState: {a: {b: 'b'}}, }); defaultNotifier(updateInfo); @@ -356,13 +356,13 @@ describe('logOnDifferentProps option', () => { }); test('For different props', () => { - whyDidYouRender(React, { onlyLogs: true }); + whyDidYouRender(React, {onlyLogs: true}); const updateInfo = getUpdateInfo({ Component: TestComponent, - prevProps: { a: 'aaaa' }, + prevProps: {a: 'aaaa'}, prevState: null, - nextProps: { a: 'bbbb' }, + nextProps: {a: 'bbbb'}, nextState: null, }); @@ -373,14 +373,14 @@ describe('logOnDifferentProps option', () => { }); test('For different state', () => { - whyDidYouRender(React, { onlyLogs: true }); + whyDidYouRender(React, {onlyLogs: true}); const updateInfo = getUpdateInfo({ Component: TestComponent, prevProps: null, - prevState: { a: 'aaaa' }, + prevState: {a: 'aaaa'}, nextProps: null, - nextState: { a: 'bbbb' }, + nextState: {a: 'bbbb'}, }); defaultNotifier(updateInfo); @@ -390,13 +390,13 @@ describe('logOnDifferentProps option', () => { }); test('For different props with logOnDifferentValues', () => { - whyDidYouRender(React, { logOnDifferentValues: true, onlyLogs: true }); + whyDidYouRender(React, {logOnDifferentValues: true, onlyLogs: true}); const updateInfo = getUpdateInfo({ Component: TestComponent, - prevProps: { a: 'aaaa' }, + prevProps: {a: 'aaaa'}, prevState: null, - nextProps: { a: 'bbbb' }, + nextProps: {a: 'bbbb'}, nextState: null, }); @@ -412,10 +412,10 @@ describe('logOnDifferentProps option', () => { }); test('For different props with logOnDifferentValues for a specific component', () => { - whyDidYouRender(React, { onlyLogs: true }); + whyDidYouRender(React, {onlyLogs: true}); class OwnTestComponent extends React.Component { - static whyDidYouRender = { logOnDifferentValues: true }; + static whyDidYouRender = {logOnDifferentValues: true}; render() { return
      hi!
      ; } @@ -423,9 +423,9 @@ describe('logOnDifferentProps option', () => { const updateInfo = getUpdateInfo({ Component: OwnTestComponent, - prevProps: { a: 'aaaa' }, + prevProps: {a: 'aaaa'}, prevState: null, - nextProps: { a: 'bbbb' }, + nextProps: {a: 'bbbb'}, nextState: null, }); diff --git a/tests/findObjectsDifferences.test.js b/tests/findObjectsDifferences.test.js index de2385d..11fe76d 100644 --- a/tests/findObjectsDifferences.test.js +++ b/tests/findObjectsDifferences.test.js @@ -1,5 +1,5 @@ import findObjectsDifferences from '~/findObjectsDifferences'; -import { diffTypes } from '~/consts'; +import {diffTypes} from '~/consts'; describe('findObjectsDifferences shallow', () => { test('for empty values', () => { @@ -10,7 +10,7 @@ describe('findObjectsDifferences shallow', () => { }); test('For no differences', () => { - const prev = { prop: 'value' }; + const prev = {prop: 'value'}; const next = prev; const diffs = findObjectsDifferences(prev, next); expect(diffs).toEqual(false); @@ -18,7 +18,7 @@ describe('findObjectsDifferences shallow', () => { test('For prev empty value', () => { const prev = null; - const next = { prop: 'value' }; + const next = {prop: 'value'}; const diffs = findObjectsDifferences(prev, next); expect(diffs).toEqual([ { @@ -31,7 +31,7 @@ describe('findObjectsDifferences shallow', () => { }); test('For next empty value', () => { - const prev = { prop: 'value' }; + const prev = {prop: 'value'}; const next = null; const diffs = findObjectsDifferences(prev, next); expect(diffs).toEqual([ @@ -45,16 +45,16 @@ describe('findObjectsDifferences shallow', () => { }); test('For objects different by reference but equal by value', () => { - const prop2 = { a: 'a' }; - const prev = { prop: 'value', prop2 }; - const next = { prop: 'value', prop2 }; + const prop2 = {a: 'a'}; + const prev = {prop: 'value', prop2}; + const next = {prop: 'value', prop2}; const diffs = findObjectsDifferences(prev, next); expect(diffs).toEqual([]); }); test('For props inside the object different by reference but equal by value', () => { - const prev = { prop: { a: 'a' } }; - const next = { prop: { a: 'a' } }; + const prev = {prop: {a: 'a'}}; + const next = {prop: {a: 'a'}}; const diffs = findObjectsDifferences(prev, next); expect(diffs).toEqual([ { @@ -67,8 +67,8 @@ describe('findObjectsDifferences shallow', () => { }); test('For functions inside the object with the same name', () => { - const prev = { fn: function something() {} }; - const next = { fn: function something() {} }; + const prev = {fn: function something() {}}; + const next = {fn: function something() {}}; const diffs = findObjectsDifferences(prev, next); expect(diffs).toEqual([ { @@ -81,8 +81,8 @@ describe('findObjectsDifferences shallow', () => { }); test('Mix of differences inside the objects', () => { - const prev = { prop: 'value', prop2: { a: 'a' }, prop3: 'AA', fn: function something() {} }; - const next = { prop: 'value', prop2: { a: 'a' }, prop3: 'ZZ', fn: function something() {} }; + const prev = {prop: 'value', prop2: {a: 'a'}, prop3: 'AA', fn: function something() {}}; + const next = {prop: 'value', prop2: {a: 'a'}, prop3: 'ZZ', fn: function something() {}}; const diffs = findObjectsDifferences(prev, next); expect(diffs).toEqual([ { @@ -111,56 +111,56 @@ describe('findObjectsDifferences not shallow', () => { test('for empty values', () => { const prev = null; const next = null; - const diffs = findObjectsDifferences(prev, next, { shallow: false }); + const diffs = findObjectsDifferences(prev, next, {shallow: false}); expect(diffs).toEqual(false); }); test('For no differences', () => { - const prev = { prop: 'value' }; + const prev = {prop: 'value'}; const next = prev; - const diffs = findObjectsDifferences(prev, next, { shallow: false }); + const diffs = findObjectsDifferences(prev, next, {shallow: false}); expect(diffs).toEqual(false); }); test('For prev empty value', () => { const prev = null; - const next = { prop: 'value' }; - const diffs = findObjectsDifferences(prev, next, { shallow: false }); + const next = {prop: 'value'}; + const diffs = findObjectsDifferences(prev, next, {shallow: false}); expect(diffs).toEqual([ { pathString: '', diffType: diffTypes.different, prevValue: null, - nextValue: { prop: 'value' }, + nextValue: {prop: 'value'}, }, ]); }); test('For next empty value', () => { - const prev = { prop: 'value' }; + const prev = {prop: 'value'}; const next = null; - const diffs = findObjectsDifferences(prev, next, { shallow: false }); + const diffs = findObjectsDifferences(prev, next, {shallow: false}); expect(diffs).toEqual([ { pathString: '', diffType: diffTypes.different, - prevValue: { prop: 'value' }, + prevValue: {prop: 'value'}, nextValue: null, }, ]); }); test('For objects different by reference but equal by value', () => { - const prop2 = { a: 'a' }; - const prev = { prop: 'value', prop2 }; - const next = { prop: 'value', prop2 }; - const diffs = findObjectsDifferences(prev, next, { shallow: false }); + const prop2 = {a: 'a'}; + const prev = {prop: 'value', prop2}; + const next = {prop: 'value', prop2}; + const diffs = findObjectsDifferences(prev, next, {shallow: false}); expect(diffs).toEqual([ { pathString: '', diffType: diffTypes.deepEquals, - prevValue: { prop: 'value', prop2 }, - nextValue: { prop: 'value', prop2 }, + prevValue: {prop: 'value', prop2}, + nextValue: {prop: 'value', prop2}, }, ]); }); @@ -168,7 +168,7 @@ describe('findObjectsDifferences not shallow', () => { test('For sets with same values', () => { const prev = new Set([1, 2, 3]); const next = new Set([1, 2, 3]); - const diffs = findObjectsDifferences(prev, next, { shallow: false }); + const diffs = findObjectsDifferences(prev, next, {shallow: false}); expect(diffs).toEqual([{ pathString: '', diffType: diffTypes.deepEquals, @@ -180,7 +180,7 @@ describe('findObjectsDifferences not shallow', () => { test('For sets with different values', () => { const prev = new Set([1, 2, 3]); const next = new Set([4, 5, 6]); - const diffs = findObjectsDifferences(prev, next, { shallow: false }); + const diffs = findObjectsDifferences(prev, next, {shallow: false}); expect(diffs).toEqual([ { pathString: '', @@ -194,7 +194,7 @@ describe('findObjectsDifferences not shallow', () => { test('For sets with different value length', () => { const prev = new Set([1, 2, 3]); const next = new Set([1, 2, 3, 4]); - const diffs = findObjectsDifferences(prev, next, { shallow: false }); + const diffs = findObjectsDifferences(prev, next, {shallow: false}); expect(diffs).toEqual([ { pathString: '', diff --git a/tests/getUpdateInfo.test.js b/tests/getUpdateInfo.test.js index 293f022..926a0b0 100644 --- a/tests/getUpdateInfo.test.js +++ b/tests/getUpdateInfo.test.js @@ -1,6 +1,6 @@ import React from 'react'; -import { diffTypes } from '~/consts'; +import {diffTypes} from '~/consts'; import getUpdateInfo from '~/getUpdateInfo'; import getDisplayName from '~/getDisplayName'; import whyDidYouRender from '~'; @@ -48,9 +48,9 @@ describe('getUpdateInfo', () => { const input = { Component: TestComponent, displayName: getDisplayName(TestComponent), - prevProps: { a: 1 }, + prevProps: {a: 1}, prevState: null, - nextProps: { a: 1 }, + nextProps: {a: 1}, nextState: null, }; @@ -73,9 +73,9 @@ describe('getUpdateInfo', () => { Component: TestComponent, displayName: getDisplayName(TestComponent), prevProps: {}, - prevState: { a: 1 }, + prevState: {a: 1}, nextProps: {}, - nextState: { a: 1 }, + nextState: {a: 1}, }; const updateInfo = getUpdateInfo(input); @@ -96,10 +96,10 @@ describe('getUpdateInfo', () => { const input = { Component: TestComponent, displayName: getDisplayName(TestComponent), - prevProps: { b: 1 }, - prevState: { a: 1 }, - nextProps: { b: 1 }, - nextState: { a: 1 }, + prevProps: {b: 1}, + prevState: {a: 1}, + nextProps: {b: 1}, + nextState: {a: 1}, }; const updateInfo = getUpdateInfo(input); @@ -120,9 +120,9 @@ describe('getUpdateInfo', () => { const input = { Component: TestComponent, displayName: getDisplayName(TestComponent), - prevProps: { a: 1 }, + prevProps: {a: 1}, prevState: null, - nextProps: { a: 2 }, + nextProps: {a: 2}, nextState: null, }; @@ -152,9 +152,9 @@ describe('getUpdateInfo', () => { Component: TestComponent, displayName: getDisplayName(TestComponent), prevProps: {}, - prevState: { a: 1 }, + prevState: {a: 1}, nextProps: {}, - nextState: { a: 2 }, + nextState: {a: 2}, }; const updateInfo = getUpdateInfo(input); @@ -182,10 +182,10 @@ describe('getUpdateInfo', () => { const input = { Component: TestComponent, displayName: getDisplayName(TestComponent), - prevProps: { b: 1 }, - prevState: { a: 1 }, - nextProps: { b: 2 }, - nextState: { a: 2 }, + prevProps: {b: 1}, + prevState: {a: 1}, + nextProps: {b: 2}, + nextState: {a: 2}, }; const updateInfo = getUpdateInfo(input); @@ -220,9 +220,9 @@ describe('getUpdateInfo', () => { const input = { Component: TestComponent, displayName: getDisplayName(TestComponent), - prevProps: { a: { b: 'b' } }, + prevProps: {a: {b: 'b'}}, prevState: null, - nextProps: { a: { b: 'b' } }, + nextProps: {a: {b: 'b'}}, nextState: null, }; @@ -254,9 +254,9 @@ describe('getUpdateInfo', () => { Component: TestComponent, displayName: getDisplayName(TestComponent), prevProps: {}, - prevState: { a: { b: 'b' } }, + prevState: {a: {b: 'b'}}, nextProps: {}, - nextState: { a: { b: 'b' } }, + nextState: {a: {b: 'b'}}, }; const updateInfo = getUpdateInfo(input); @@ -286,10 +286,10 @@ describe('getUpdateInfo', () => { const input = { Component: TestComponent, displayName: getDisplayName(TestComponent), - prevProps: { b: { c: 'c' } }, - prevState: { a: { d: 'd' } }, - nextProps: { b: { c: 'c' } }, - nextState: { a: { d: 'd' } }, + prevProps: {b: {c: 'c'}}, + prevState: {a: {d: 'd'}}, + nextProps: {b: {c: 'c'}}, + nextState: {a: {d: 'd'}}, }; const updateInfo = getUpdateInfo(input); @@ -324,9 +324,9 @@ describe('getUpdateInfo', () => { const input = { Component: TestComponent, displayName: getDisplayName(TestComponent), - prevProps: { a: () => {} }, + prevProps: {a: () => {}}, prevState: null, - nextProps: { a: () => {} }, + nextProps: {a: () => {}}, nextState: null, }; @@ -356,9 +356,9 @@ describe('getUpdateInfo', () => { Component: TestComponent, displayName: getDisplayName(TestComponent), prevProps: {}, - prevState: { a: () => {} }, + prevState: {a: () => {}}, nextProps: {}, - nextState: { a: () => {} }, + nextState: {a: () => {}}, }; const updateInfo = getUpdateInfo(input); @@ -386,10 +386,10 @@ describe('getUpdateInfo', () => { const input = { Component: TestComponent, displayName: getDisplayName(TestComponent), - prevProps: { a: () => {} }, - prevState: { b: () => {} }, - nextProps: { a: () => {} }, - nextState: { b: () => {} }, + prevProps: {a: () => {}}, + prevState: {b: () => {}}, + nextProps: {a: () => {}}, + nextState: {b: () => {}}, }; const updateInfo = getUpdateInfo(input); @@ -424,10 +424,10 @@ describe('getUpdateInfo', () => { const input = { Component: TestComponent, displayName: getDisplayName(TestComponent), - prevProps: { a: () => {}, b: '123', c: { d: 'e' }, f: 3 }, + prevProps: {a: () => {}, b: '123', c: {d: 'e'}, f: 3}, prevState: null, - nextProps: { a: () => {}, b: '12345', c: { d: 'e' }, f: 3 }, - nextState: { a: 4 }, + nextProps: {a: () => {}, b: '12345', c: {d: 'e'}, f: 3}, + nextState: {a: 4}, }; const updateInfo = getUpdateInfo(input); @@ -471,10 +471,10 @@ describe('getUpdateInfo', () => { }); test('deep equals and same object', () => { - const sameProp = { a: { b: 'c' } }; + const sameProp = {a: {b: 'c'}}; - const prevProps = { className: 'aa', style: { width: '100%' }, sameProp }; - const nextProps = { className: 'aa', style: { width: '100%' }, sameProp }; + const prevProps = {className: 'aa', style: {width: '100%'}, sameProp}; + const nextProps = {className: 'aa', style: {width: '100%'}, sameProp}; const input = getUpdateInfo({ Component: TestComponent, diff --git a/tests/hooks/childrenUsingHookResults.test.js b/tests/hooks/childrenUsingHookResults.test.js index 1289b64..b64f2dc 100644 --- a/tests/hooks/childrenUsingHookResults.test.js +++ b/tests/hooks/childrenUsingHookResults.test.js @@ -2,7 +2,7 @@ import React from 'react'; import * as rtl from '@testing-library/react'; import whyDidYouRender from '~'; -import { diffTypes } from '~/consts'; +import {diffTypes} from '~/consts'; let updateInfos = []; @@ -28,10 +28,10 @@ describe('children using hook results', () => { AChild.whyDidYouRender = true; const ComponentWithMemoHook = () => { - const [currentState, setCurrentState] = React.useState({ c: 'c' }); + const [currentState, setCurrentState] = React.useState({c: 'c'}); React.useLayoutEffect(() => { - setCurrentState({ c: 'c' }); + setCurrentState({c: 'c'}); }, []); const fnUseCallback = React.useCallback(() => someFn(currentState.c)); @@ -71,9 +71,9 @@ describe('children using hook results', () => { differences: [ { diffType: 'deepEquals', - nextValue: { c: 'c' }, + nextValue: {c: 'c'}, pathString: '', - prevValue: { c: 'c' }, + prevValue: {c: 'c'}, }, ], hookName: 'useState', @@ -90,10 +90,10 @@ describe('children using hook results', () => { Child.whyDidYouRender = true; const ComponentWithMemoHook = () => { - const [currentState, setCurrentState] = React.useState({ c: 'c' }); + const [currentState, setCurrentState] = React.useState({c: 'c'}); React.useLayoutEffect(() => { - setCurrentState({ c: 'd' }); + setCurrentState({c: 'd'}); }, []); const fnUseCallback = React.useCallback(() => someFn(currentState.c), [currentState]); @@ -148,8 +148,8 @@ describe('children using hook results', () => { { diffType: diffTypes.different, pathString: '', - prevValue: { c: 'c' }, - nextValue: { c: 'd' }, + prevValue: {c: 'c'}, + nextValue: {c: 'd'}, }, ], hookName: 'useState', @@ -166,10 +166,10 @@ describe('children using hook results', () => { Child.whyDidYouRender = true; const ComponentWithMemoHook = () => { - const [currentState, setCurrentState] = React.useState({ c: 'c' }); + const [currentState, setCurrentState] = React.useState({c: 'c'}); React.useLayoutEffect(() => { - setCurrentState({ c: 'c' }); + setCurrentState({c: 'c'}); }, []); const fnUseCallback = React.useCallback(() => someFn(currentState.c), [currentState]); @@ -218,8 +218,8 @@ describe('children using hook results', () => { { diffType: diffTypes.deepEquals, pathString: '', - prevValue: { c: 'c' }, - nextValue: { c: 'c' }, + prevValue: {c: 'c'}, + nextValue: {c: 'c'}, }, ], hookName: 'useState', diff --git a/tests/hooks/hooks.test.js b/tests/hooks/hooks.test.js index 830c4de..9ee518f 100644 --- a/tests/hooks/hooks.test.js +++ b/tests/hooks/hooks.test.js @@ -2,7 +2,7 @@ import React from 'react'; import * as rtl from '@testing-library/react'; import whyDidYouRender from '~'; -import { diffTypes } from '~/consts'; +import {diffTypes} from '~/consts'; describe('hooks - simple', () => { describe('hooks - track', () => { @@ -22,15 +22,15 @@ describe('hooks - simple', () => { }); test('no whyDidYouRender=true', () => { - const ComponentWithHooks = ({ a }) => { - const [currentState] = React.useState({ b: 'b' }); + const ComponentWithHooks = ({a}) => { + const [currentState] = React.useState({b: 'b'}); return (
      hi! {a} {currentState.b}
      ); }; - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); rerender( @@ -41,10 +41,10 @@ describe('hooks - simple', () => { }); test('simple hooks tracking', () => { - const ComponentWithHooks = ({ a }) => { - const [currentState, setCurrentState] = React.useState({ b: 'b' }); + const ComponentWithHooks = ({a}) => { + const [currentState, setCurrentState] = React.useState({b: 'b'}); React.useLayoutEffect(() => { - setCurrentState({ b: 'b' }); + setCurrentState({b: 'b'}); }, []); return (
      hi! {a} {currentState.b}
      @@ -62,10 +62,10 @@ describe('hooks - simple', () => { test('after removing WDYR', () => { React.__REVERT_WHY_DID_YOU_RENDER__(); - const ComponentWithHooks = ({ a }) => { - const [currentState, setCurrentState] = React.useState({ b: 'b' }); + const ComponentWithHooks = ({a}) => { + const [currentState, setCurrentState] = React.useState({b: 'b'}); React.useLayoutEffect(() => { - setCurrentState({ b: 'b' }); + setCurrentState({b: 'b'}); }, []); return (
      hi! {a} {currentState.b}
      @@ -81,8 +81,8 @@ describe('hooks - simple', () => { }); test('track component', () => { - const ComponentWithHooks = ({ a }) => { - const [currentState] = React.useState({ b: 'b' }); + const ComponentWithHooks = ({a}) => { + const [currentState] = React.useState({b: 'b'}); return (
      hi! {a} {currentState.b}
      @@ -91,7 +91,7 @@ describe('hooks - simple', () => { ComponentWithHooks.whyDidYouRender = true; - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); rerender( @@ -113,8 +113,8 @@ describe('hooks - simple', () => { }); test('track memoized component', () => { - const ComponentWithHooks = React.memo(({ a }) => { - const [currentState] = React.useState({ b: 'b' }); + const ComponentWithHooks = React.memo(({a}) => { + const [currentState] = React.useState({b: 'b'}); return (
      hi! {a} {currentState.b}
      @@ -123,7 +123,7 @@ describe('hooks - simple', () => { ComponentWithHooks.whyDidYouRender = true; - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); rerender( @@ -163,15 +163,15 @@ describe('hooks - simple', () => { }); test('no whyDidYouRender=true', () => { - const ComponentWithHooks = ({ a }) => { - const [currentState] = React.useState({ b: 'b' }); + const ComponentWithHooks = ({a}) => { + const [currentState] = React.useState({b: 'b'}); return (
      hi! {a} {currentState.b}
      ); }; - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); rerender( @@ -182,10 +182,10 @@ describe('hooks - simple', () => { }); test('with whyDidYouRender=true', () => { - const ComponentWithHooks = ({ a }) => { - const [currentState, setCurrentState] = React.useState({ b: 'b' }); + const ComponentWithHooks = ({a}) => { + const [currentState, setCurrentState] = React.useState({b: 'b'}); React.useLayoutEffect(() => { - setCurrentState({ b: 'b' }); + setCurrentState({b: 'b'}); }, []); return (
      hi! {a} {currentState.b}
      @@ -203,10 +203,10 @@ describe('hooks - simple', () => { test('after removing WDYR', () => { React.__REVERT_WHY_DID_YOU_RENDER__(); - const ComponentWithHooks = ({ a }) => { - const [currentState, setCurrentState] = React.useState({ b: 'b' }); + const ComponentWithHooks = ({a}) => { + const [currentState, setCurrentState] = React.useState({b: 'b'}); React.useLayoutEffect(() => { - setCurrentState({ b: 'b' }); + setCurrentState({b: 'b'}); }, []); return (
      hi! {a} {currentState.b}
      diff --git a/tests/hooks/useContext.test.js b/tests/hooks/useContext.test.js index 99e68fe..b4ff922 100644 --- a/tests/hooks/useContext.test.js +++ b/tests/hooks/useContext.test.js @@ -2,7 +2,7 @@ import React from 'react'; import * as rtl from '@testing-library/react'; import whyDidYouRender from '~'; -import { diffTypes } from '~/consts'; +import {diffTypes} from '~/consts'; describe('hooks - useContext', () => { let updateInfos = []; @@ -21,7 +21,7 @@ describe('hooks - useContext', () => { test('same value', () => { const MyContext = React.createContext('c'); - const ComponentWithContextHook = ({ a, b }) => { + const ComponentWithContextHook = ({a, b}) => { const valueFromContext = React.useContext(MyContext); return ( @@ -54,9 +54,9 @@ describe('hooks - useContext', () => { }); test('deep equals - memoized', () => { - const MyContext = React.createContext({ c: 'c' }); + const MyContext = React.createContext({c: 'c'}); - const ComponentWithContextHook = React.memo(({ a, b }) => { + const ComponentWithContextHook = React.memo(({a, b}) => { const valueFromContext = React.useContext(MyContext); return ( @@ -66,10 +66,10 @@ describe('hooks - useContext', () => { ComponentWithContextHook.whyDidYouRender = true; const OuterComponent = () => { - const [currentState, setCurrentState] = React.useState({ c: 'c' }); + const [currentState, setCurrentState] = React.useState({c: 'c'}); React.useLayoutEffect(() => { - setCurrentState({ c: 'c' }); + setCurrentState({c: 'c'}); }, []); return ( @@ -90,8 +90,8 @@ describe('hooks - useContext', () => { hookDifferences: [{ diffType: diffTypes.deepEquals, pathString: '', - nextValue: { c: 'c' }, - prevValue: { c: 'c' }, + nextValue: {c: 'c'}, + prevValue: {c: 'c'}, }], propsDifferences: false, stateDifferences: false, @@ -100,9 +100,9 @@ describe('hooks - useContext', () => { }); test('deep equals - not memoized', () => { - const MyContext = React.createContext({ c: 'c' }); + const MyContext = React.createContext({c: 'c'}); - const ComponentWithContextHook = ({ a, b }) => { + const ComponentWithContextHook = ({a, b}) => { const valueFromContext = React.useContext(MyContext); return ( @@ -112,10 +112,10 @@ describe('hooks - useContext', () => { ComponentWithContextHook.whyDidYouRender = true; const OuterComponent = () => { - const [currentState, setCurrentState] = React.useState({ c: 'c' }); + const [currentState, setCurrentState] = React.useState({c: 'c'}); React.useLayoutEffect(() => { - setCurrentState({ c: 'c' }); + setCurrentState({c: 'c'}); }, []); return ( @@ -141,8 +141,8 @@ describe('hooks - useContext', () => { differences: [{ diffType: diffTypes.deepEquals, pathString: '', - nextValue: { c: 'c' }, - prevValue: { c: 'c' }, + nextValue: {c: 'c'}, + prevValue: {c: 'c'}, }], hookName: 'useState', }], @@ -156,8 +156,8 @@ describe('hooks - useContext', () => { hookDifferences: [{ diffType: diffTypes.deepEquals, pathString: '', - nextValue: { c: 'c' }, - prevValue: { c: 'c' }, + nextValue: {c: 'c'}, + prevValue: {c: 'c'}, }], propsDifferences: false, stateDifferences: false, diff --git a/tests/hooks/useReducer.test.js b/tests/hooks/useReducer.test.js index 785a5b8..7aa0708 100644 --- a/tests/hooks/useReducer.test.js +++ b/tests/hooks/useReducer.test.js @@ -2,7 +2,7 @@ import React from 'react'; import * as rtl from '@testing-library/react'; import whyDidYouRender from '~'; -import { diffTypes } from '~/consts'; +import {diffTypes} from '~/consts'; describe('hooks - useReducer', () => { let updateInfos = []; @@ -19,7 +19,7 @@ describe('hooks - useReducer', () => { }); test('same value', () => { - const initialState = { b: 'b' }; + const initialState = {b: 'b'}; function reducer() { return initialState; @@ -31,7 +31,7 @@ describe('hooks - useReducer', () => { const [state, dispatch] = React.useReducer(reducer, initialState); React.useLayoutEffect(() => { - dispatch({ type: 'something' }); + dispatch({type: 'something'}); }, []); return ( @@ -50,17 +50,17 @@ describe('hooks - useReducer', () => { }); test('different value', () => { - const initialState = { b: 'b' }; + const initialState = {b: 'b'}; function reducer() { - return { a: 'a' }; + return {a: 'a'}; } - const ComponentWithHooks = ({ a }) => { + const ComponentWithHooks = ({a}) => { const [state, dispatch] = React.useReducer(reducer, initialState); React.useLayoutEffect(() => { - dispatch({ type: 'something' }); + dispatch({type: 'something'}); }, []); return ( @@ -79,8 +79,8 @@ describe('hooks - useReducer', () => { hookDifferences: [{ pathString: '', diffType: diffTypes.different, - prevValue: { b: 'b' }, - nextValue: { a: 'a' }, + prevValue: {b: 'b'}, + nextValue: {a: 'a'}, }], propsDifferences: false, stateDifferences: false, @@ -89,17 +89,17 @@ describe('hooks - useReducer', () => { }); test('deep equals', () => { - const initialState = { b: 'b' }; + const initialState = {b: 'b'}; function reducer() { - return { b: 'b' }; + return {b: 'b'}; } - const ComponentWithHooks = ({ a }) => { + const ComponentWithHooks = ({a}) => { const [state, dispatch] = React.useReducer(reducer, initialState); React.useLayoutEffect(() => { - dispatch({ type: 'something' }); + dispatch({type: 'something'}); }, []); return ( @@ -118,8 +118,8 @@ describe('hooks - useReducer', () => { hookDifferences: [{ diffType: diffTypes.deepEquals, pathString: '', - nextValue: { b: 'b' }, - prevValue: { b: 'b' }, + nextValue: {b: 'b'}, + prevValue: {b: 'b'}, }], propsDifferences: false, stateDifferences: false, diff --git a/tests/hooks/useState.test.js b/tests/hooks/useState.test.js index 408aa67..f3ffe14 100644 --- a/tests/hooks/useState.test.js +++ b/tests/hooks/useState.test.js @@ -2,7 +2,7 @@ import React from 'react'; import * as rtl from '@testing-library/react'; import whyDidYouRender from '~'; -import { diffTypes } from '~/consts'; +import {diffTypes} from '~/consts'; describe('hooks - useState', () => { let updateInfos = []; @@ -19,7 +19,7 @@ describe('hooks - useState', () => { }); test('setState - same value', () => { - const initialState = { b: 'b' }; + const initialState = {b: 'b'}; const ComponentWithHooks = () => { const [currentState, setCurrentState] = React.useState(initialState); @@ -43,10 +43,10 @@ describe('hooks - useState', () => { test('setState of different values', () => { const ComponentWithHooks = () => { - const [currentState, setCurrentState] = React.useState({ b: 'b' }); + const [currentState, setCurrentState] = React.useState({b: 'b'}); React.useLayoutEffect(() => { - setCurrentState({ b: 'c' }); + setCurrentState({b: 'c'}); }, []); return ( @@ -74,8 +74,8 @@ describe('hooks - useState', () => { { pathString: '', diffType: diffTypes.different, - prevValue: { b: 'b' }, - nextValue: { b: 'c' }, + prevValue: {b: 'b'}, + nextValue: {b: 'c'}, }, ], ownerDifferences: false, @@ -83,11 +83,11 @@ describe('hooks - useState', () => { }); test('setState of deep equals values', () => { - const ComponentWithHooks = ({ a }) => { - const [currentState, setCurrentState] = React.useState({ b: 'b' }); + const ComponentWithHooks = ({a}) => { + const [currentState, setCurrentState] = React.useState({b: 'b'}); React.useLayoutEffect(() => { - setCurrentState({ b: 'b' }); + setCurrentState({b: 'b'}); }, []); return ( @@ -108,8 +108,8 @@ describe('hooks - useState', () => { hookDifferences: [{ pathString: '', diffType: diffTypes.deepEquals, - prevValue: { b: 'b' }, - nextValue: { b: 'b' }, + prevValue: {b: 'b'}, + nextValue: {b: 'b'}, }], ownerDifferences: false, }); @@ -133,11 +133,11 @@ describe('track hooks', () => { }); test('same value', () => { - const value = { b: 'b' }; + const value = {b: 'b'}; let effectCalled = false; - const ComponentWithHooks = ({ a }) => { + const ComponentWithHooks = ({a}) => { const [currentState, setCurrentState] = React.useState(value); React.useLayoutEffect(() => { @@ -186,11 +186,11 @@ describe('track hooks', () => { }); test('deep equals', () => { - const ComponentWithHooks = ({ a }) => { - const [currentState, setCurrentState] = React.useState({ b: 'b' }); + const ComponentWithHooks = ({a}) => { + const [currentState, setCurrentState] = React.useState({b: 'b'}); React.useLayoutEffect(() => { - setCurrentState({ b: 'b' }); + setCurrentState({b: 'b'}); }, []); return ( @@ -209,8 +209,8 @@ describe('track hooks', () => { hookDifferences: [{ diffType: diffTypes.deepEquals, pathString: '', - nextValue: { b: 'b' }, - prevValue: { b: 'b' }, + nextValue: {b: 'b'}, + prevValue: {b: 'b'}, }], propsDifferences: false, stateDifferences: false, @@ -219,11 +219,11 @@ describe('track hooks', () => { }); test('deep equals direct import', () => { - const ComponentWithHooks = ({ a }) => { - const [currentState, setCurrentState] = React.useState({ b: 'b' }); + const ComponentWithHooks = ({a}) => { + const [currentState, setCurrentState] = React.useState({b: 'b'}); React.useLayoutEffect(() => { - setCurrentState({ b: 'b' }); + setCurrentState({b: 'b'}); }, []); return ( @@ -242,8 +242,8 @@ describe('track hooks', () => { hookDifferences: [{ diffType: diffTypes.deepEquals, pathString: '', - nextValue: { b: 'b' }, - prevValue: { b: 'b' }, + nextValue: {b: 'b'}, + prevValue: {b: 'b'}, }], propsDifferences: false, stateDifferences: false, @@ -252,19 +252,19 @@ describe('track hooks', () => { }); test('many deep equals direct import', () => { - const ComponentWithHooks = ({ a }) => { - const [currentStateA, setCurrentStateA] = React.useState({ a: 'a' }); - const [currentStateB, setCurrentStateB] = React.useState({ b: 'b' }); - const [currentStateC, setCurrentStateC] = React.useState({ c: 'c' }); - const [currentStateD, setCurrentStateD] = React.useState({ d: 'd' }); - const [currentStateE, setCurrentStateE] = React.useState({ e: 'e' }); + const ComponentWithHooks = ({a}) => { + const [currentStateA, setCurrentStateA] = React.useState({a: 'a'}); + const [currentStateB, setCurrentStateB] = React.useState({b: 'b'}); + const [currentStateC, setCurrentStateC] = React.useState({c: 'c'}); + const [currentStateD, setCurrentStateD] = React.useState({d: 'd'}); + const [currentStateE, setCurrentStateE] = React.useState({e: 'e'}); React.useLayoutEffect(() => { - setCurrentStateA({ a: 'a' }); - setCurrentStateB({ b: 'b' }); - setCurrentStateC({ c: 'c' }); - setCurrentStateD({ d: 'd' }); - setCurrentStateE({ e: 'e' }); + setCurrentStateA({a: 'a'}); + setCurrentStateB({b: 'b'}); + setCurrentStateC({c: 'c'}); + setCurrentStateD({d: 'd'}); + setCurrentStateE({e: 'e'}); }, []); return ( @@ -283,8 +283,8 @@ describe('track hooks', () => { hookDifferences: [{ diffType: diffTypes.deepEquals, pathString: '', - nextValue: { a: 'a' }, - prevValue: { a: 'a' }, + nextValue: {a: 'a'}, + prevValue: {a: 'a'}, }], propsDifferences: false, stateDifferences: false, @@ -294,8 +294,8 @@ describe('track hooks', () => { hookDifferences: [{ diffType: diffTypes.deepEquals, pathString: '', - nextValue: { b: 'b' }, - prevValue: { b: 'b' }, + nextValue: {b: 'b'}, + prevValue: {b: 'b'}, }], propsDifferences: false, stateDifferences: false, @@ -305,8 +305,8 @@ describe('track hooks', () => { hookDifferences: [{ diffType: diffTypes.deepEquals, pathString: '', - nextValue: { c: 'c' }, - prevValue: { c: 'c' }, + nextValue: {c: 'c'}, + prevValue: {c: 'c'}, }], propsDifferences: false, stateDifferences: false, @@ -316,8 +316,8 @@ describe('track hooks', () => { hookDifferences: [{ diffType: diffTypes.deepEquals, pathString: '', - nextValue: { d: 'd' }, - prevValue: { d: 'd' }, + nextValue: {d: 'd'}, + prevValue: {d: 'd'}, }], propsDifferences: false, stateDifferences: false, @@ -327,8 +327,8 @@ describe('track hooks', () => { hookDifferences: [{ diffType: diffTypes.deepEquals, pathString: '', - nextValue: { e: 'e' }, - prevValue: { e: 'e' }, + nextValue: {e: 'e'}, + prevValue: {e: 'e'}, }], propsDifferences: false, stateDifferences: false, @@ -337,11 +337,11 @@ describe('track hooks', () => { }); test('deep equals functional use', () => { - const ComponentWithHooks = ({ a }) => { - const [currentState, setCurrentState] = React.useState({ b: 'b' }); + const ComponentWithHooks = ({a}) => { + const [currentState, setCurrentState] = React.useState({b: 'b'}); React.useLayoutEffect(() => { - setCurrentState(() => ({ b: 'b' })); + setCurrentState(() => ({b: 'b'})); }, []); return ( @@ -360,8 +360,8 @@ describe('track hooks', () => { hookDifferences: [{ diffType: diffTypes.deepEquals, pathString: '', - nextValue: { b: 'b' }, - prevValue: { b: 'b' }, + nextValue: {b: 'b'}, + prevValue: {b: 'b'}, }], propsDifferences: false, stateDifferences: false, diff --git a/tests/hooks/useSyncExternalStore.test.js b/tests/hooks/useSyncExternalStore.test.js index b9803a5..a1685ec 100644 --- a/tests/hooks/useSyncExternalStore.test.js +++ b/tests/hooks/useSyncExternalStore.test.js @@ -2,7 +2,7 @@ import React from 'react'; import * as rtl from '@testing-library/react'; import whyDidYouRender from '~'; -import { diffTypes } from '~/consts'; +import {diffTypes} from '~/consts'; describe('hooks - useSyncExternalStore', () => { let updateInfos = []; @@ -39,7 +39,7 @@ describe('hooks - useSyncExternalStore', () => { test('same value', () => { const store = createSimpleStore('c'); - const ComponentWithSyncExternalStore = ({ a, b }) => { + const ComponentWithSyncExternalStore = ({a, b}) => { const valueFromStore = React.useSyncExternalStore( store.subscribe, store.getState @@ -71,9 +71,9 @@ describe('hooks - useSyncExternalStore', () => { }); test('deep equals', () => { - const store = createSimpleStore({ c: 'c' }); + const store = createSimpleStore({c: 'c'}); - const ComponentWithSyncExternalStore = ({ a, b }) => { + const ComponentWithSyncExternalStore = ({a, b}) => { const valueFromStore = React.useSyncExternalStore( store.subscribe, store.getState @@ -89,7 +89,7 @@ describe('hooks - useSyncExternalStore', () => { const OuterComponent = () => { React.useLayoutEffect(() => { - store.setState({ c: 'c' }); + store.setState({c: 'c'}); }, []); return ( @@ -107,8 +107,8 @@ describe('hooks - useSyncExternalStore', () => { { diffType: diffTypes.deepEquals, pathString: '', - nextValue: { c: 'c' }, - prevValue: { c: 'c' }, + nextValue: {c: 'c'}, + prevValue: {c: 'c'}, }, ], propsDifferences: false, diff --git a/tests/librariesTests/react-redux.test.js b/tests/librariesTests/react-redux.test.js index bbc8590..f4dacd1 100644 --- a/tests/librariesTests/react-redux.test.js +++ b/tests/librariesTests/react-redux.test.js @@ -1,21 +1,21 @@ import React from 'react'; -import { legacy_createStore as createStore } from 'redux'; -import { cloneDeep } from 'lodash'; +import {legacy_createStore as createStore} from 'redux'; +import {cloneDeep} from 'lodash'; import * as rtl from '@testing-library/react'; -import { diffTypes } from '~/consts'; +import {diffTypes} from '~/consts'; import whyDidYouRender from '~'; -const ReactRedux = { ...require('react-redux') }; -const { connect, Provider } = ReactRedux; +const ReactRedux = {...require('react-redux')}; +const {connect, Provider} = ReactRedux; describe('react-redux - simple', () => { - const initialState = { a: { b: 'c' } }; + const initialState = {a: {b: 'c'}}; const rootReducer = (state, action) => { if (action.type === 'differentState') { - return { a: { b: 'd' } }; + return {a: {b: 'd'}}; } if (action.type === 'deepEqlState') { @@ -43,11 +43,11 @@ describe('react-redux - simple', () => { }); test('same state after dispatch', () => { - const SimpleComponent = ({ a }) => ( + const SimpleComponent = ({a}) => (
      {a.b}
      ); const ConnectedSimpleComponent = connect( - state => ({ a: state.a }) + state => ({a: state.a}) )(SimpleComponent); SimpleComponent.whyDidYouRender = true; @@ -63,7 +63,7 @@ describe('react-redux - simple', () => { expect(store.getState().a.b).toBe('c'); rtl.act(() => { - store.dispatch({ type: 'sameState' }); + store.dispatch({type: 'sameState'}); }); expect(store.getState().a.b).toBe('c'); @@ -72,11 +72,11 @@ describe('react-redux - simple', () => { }); test('different state after dispatch', () => { - const SimpleComponent = ({ a }) => ( + const SimpleComponent = ({a}) => (
      {a.b}
      ); const ConnectedSimpleComponent = connect( - state => ({ a: state.a }) + state => ({a: state.a}) )(SimpleComponent); SimpleComponent.whyDidYouRender = true; @@ -92,7 +92,7 @@ describe('react-redux - simple', () => { expect(store.getState().a.b).toBe('c'); rtl.act(() => { - store.dispatch({ type: 'differentState' }); + store.dispatch({type: 'differentState'}); }); expect(store.getState().a.b).toBe('d'); @@ -100,8 +100,8 @@ describe('react-redux - simple', () => { expect(updateInfos).toHaveLength(1); expect(updateInfos[0].reason).toEqual({ propsDifferences: [ - expect.objectContaining({ diffType: diffTypes.different }), - expect.objectContaining({ diffType: diffTypes.different }), + expect.objectContaining({diffType: diffTypes.different}), + expect.objectContaining({diffType: diffTypes.different}), ], stateDifferences: false, hookDifferences: false, @@ -110,14 +110,14 @@ describe('react-redux - simple', () => { }); test('deep equals state after dispatch', () => { - const SimpleComponent = ({ a }) => ( + const SimpleComponent = ({a}) => (
      {a.b}
      ); const ConnectedSimpleComponent = connect( - state => ({ a: state.a }) + state => ({a: state.a}) )(SimpleComponent); SimpleComponent.whyDidYouRender = true; @@ -133,7 +133,7 @@ describe('react-redux - simple', () => { expect(store.getState().a.b).toBe('c'); rtl.act(() => { - store.dispatch({ type: 'deepEqlState' }); + store.dispatch({type: 'deepEqlState'}); }); expect(store.getState().a.b).toBe('c'); @@ -141,7 +141,7 @@ describe('react-redux - simple', () => { expect(updateInfos).toHaveLength(1); expect(updateInfos[0].reason).toEqual({ propsDifferences: [ - expect.objectContaining({ diffType: diffTypes.deepEquals }), + expect.objectContaining({diffType: diffTypes.deepEquals}), ], stateDifferences: false, hookDifferences: false, @@ -151,11 +151,11 @@ describe('react-redux - simple', () => { }); describe('react-redux - hooks', () => { - const initialState = { a: { b: 'c' } }; + const initialState = {a: {b: 'c'}}; const rootReducer = (state, action) => { if (action.type === 'differentState') { - return { a: { b: 'd' } }; + return {a: {b: 'd'}}; } if (action.type === 'deepEqlState') { @@ -205,7 +205,7 @@ describe('react-redux - hooks', () => { expect(store.getState().a.b).toBe('c'); rtl.act(() => { - store.dispatch({ type: 'sameState' }); + store.dispatch({type: 'sameState'}); }); expect(store.getState().a.b).toBe('c'); @@ -234,7 +234,7 @@ describe('react-redux - hooks', () => { expect(store.getState().a.b).toBe('c'); rtl.act(() => { - store.dispatch({ type: 'differentState' }); + store.dispatch({type: 'differentState'}); }); expect(store.getState().a.b).toBe('d'); @@ -246,8 +246,8 @@ describe('react-redux - hooks', () => { propsDifferences: false, stateDifferences: false, hookDifferences: [ - { diffType: diffTypes.different, pathString: '.b', prevValue: 'c', nextValue: 'd' }, - { diffType: diffTypes.different, pathString: '', prevValue: { b: 'c' }, nextValue: { b: 'd' } }, + {diffType: diffTypes.different, pathString: '.b', prevValue: 'c', nextValue: 'd'}, + {diffType: diffTypes.different, pathString: '', prevValue: {b: 'c'}, nextValue: {b: 'd'}}, ], ownerDifferences: false, }, @@ -276,7 +276,7 @@ describe('react-redux - hooks', () => { expect(store.getState().a.b).toBe('c'); rtl.act(() => { - store.dispatch({ type: 'deepEqlState' }); + store.dispatch({type: 'deepEqlState'}); }); expect(store.getState().a.b).toBe('c'); @@ -288,7 +288,7 @@ describe('react-redux - hooks', () => { propsDifferences: false, stateDifferences: false, hookDifferences: [ - { diffType: diffTypes.deepEquals, pathString: '', prevValue: { b: 'c' }, nextValue: { b: 'c' } }, + {diffType: diffTypes.deepEquals, pathString: '', prevValue: {b: 'c'}, nextValue: {b: 'c'}}, ], ownerDifferences: false, }, diff --git a/tests/librariesTests/react-router-dom.test.js b/tests/librariesTests/react-router-dom.test.js index b5bdcd7..f1c74cc 100644 --- a/tests/librariesTests/react-router-dom.test.js +++ b/tests/librariesTests/react-router-dom.test.js @@ -1,17 +1,17 @@ import React from 'react'; -import { legacy_createStore as createStore } from 'redux'; +import {legacy_createStore as createStore} from 'redux'; import { BrowserRouter, useLocation, Routes, Route, } from 'react-router-dom'; -import { connect, Provider } from 'react-redux'; -import { cloneDeep } from 'lodash'; +import {connect, Provider} from 'react-redux'; +import {cloneDeep} from 'lodash'; import * as rtl from '@testing-library/react'; import whyDidYouRender from '~'; -import { diffTypes } from '~/consts'; +import {diffTypes} from '~/consts'; let updateInfos = []; beforeEach(() => { @@ -27,7 +27,7 @@ afterEach(() => { describe('react-router-dom', () => { test('simple', () => { - const InnerComp = ({ a }) => { + const InnerComp = ({a}) => { const location = useLocation(); const [state, setState] = React.useState(0); @@ -48,20 +48,20 @@ describe('react-router-dom', () => { const Comp = () => ( - }/> + }/> ); - const { rerender } = rtl.render(); + const {rerender} = rtl.render(); rerender(); const consoleOutputs = flushConsoleOutput(); expect(consoleOutputs).toEqual([ - expect.objectContaining({ args: ['location is: /'] }), - expect.objectContaining({ args: ['location is: /'] }), - expect.objectContaining({ args: ['location is: /'] }), + expect.objectContaining({args: ['location is: /']}), + expect.objectContaining({args: ['location is: /']}), + expect.objectContaining({args: ['location is: /']}), ]); expect(updateInfos).toHaveLength(2); @@ -77,9 +77,9 @@ describe('react-router-dom', () => { stateDifferences: false, propsDifferences: [{ diffType: 'deepEquals', - nextValue: { b: 'c' }, + nextValue: {b: 'c'}, pathString: 'a', - prevValue: { b: 'c' }, + prevValue: {b: 'c'}, }], ownerDifferences: { hookDifferences: false, @@ -92,11 +92,11 @@ describe('react-router-dom', () => { }); test('with redux', () => { - const initialState = { a: { b: 'c' } }; + const initialState = {a: {b: 'c'}}; const rootReducer = (state, action) => { if (action.type === 'differentState') { - return { a: { b: 'd' } }; + return {a: {b: 'd'}}; } if (action.type === 'deepEqlState') { @@ -108,7 +108,7 @@ describe('react-router-dom', () => { const store = createStore(rootReducer, initialState); - const InnerFn = ({ a, setDeepEqlState }) => { + const InnerFn = ({a, setDeepEqlState}) => { const location = useLocation(); React.useLayoutEffect(() => { @@ -122,8 +122,8 @@ describe('react-router-dom', () => { }; const InnerComp = connect( - state => ({ a: state.a }), - { setDeepEqlState: () => ({ type: 'deepEqlState' }) } + state => ({a: state.a}), + {setDeepEqlState: () => ({type: 'deepEqlState'})} )(InnerFn); InnerFn.whyDidYouRender = true; @@ -142,8 +142,8 @@ describe('react-router-dom', () => { const consoleOutputs = flushConsoleOutput(); expect(consoleOutputs).toEqual([ - expect.objectContaining({ args: ['location is: /'] }), - expect.objectContaining({ args: ['location is: /'] }), + expect.objectContaining({args: ['location is: /']}), + expect.objectContaining({args: ['location is: /']}), ]); expect(updateInfos).toHaveLength(1); @@ -151,8 +151,8 @@ describe('react-router-dom', () => { propsDifferences: [{ diffType: diffTypes.deepEquals, pathString: 'a', - prevValue: { b: 'c' }, - nextValue: { b: 'c' }, + prevValue: {b: 'c'}, + nextValue: {b: 'c'}, }], stateDifferences: false, hookDifferences: false, diff --git a/tests/librariesTests/styled-components.test.js b/tests/librariesTests/styled-components.test.js index 29c217c..078b893 100644 --- a/tests/librariesTests/styled-components.test.js +++ b/tests/librariesTests/styled-components.test.js @@ -4,7 +4,7 @@ import styled from 'styled-components/dist/styled-components.js'; import * as rtl from '@testing-library/react'; import whyDidYouRender from '~'; -import { diffTypes } from '~/consts'; +import {diffTypes} from '~/consts'; let updateInfos = []; beforeEach(() => { @@ -24,7 +24,7 @@ test('simple styled-components', () => { StyledInnerComponent.whyDidYouRender = true; - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); rerender( @@ -51,7 +51,7 @@ test('styled-components wrap of a memoized component', () => { StyledInnerComponent.whyDidYouRender = true; - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); rerender( @@ -86,7 +86,7 @@ test('styled-components with forward ref', () => { return ; }; - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); rerender( @@ -132,7 +132,7 @@ test('styled-components with memoized forward ref', () => { return ; }; - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); rerender( diff --git a/tests/logOnDifferentValues.test.js b/tests/logOnDifferentValues.test.js index 1cedde5..9cf80ff 100644 --- a/tests/logOnDifferentValues.test.js +++ b/tests/logOnDifferentValues.test.js @@ -38,13 +38,13 @@ test('hook value change', () => { {text}
      - - + +
      ); }); - const { getByTestId } = rtl.render( + const {getByTestId} = rtl.render( ); @@ -52,14 +52,14 @@ test('hook value change', () => { rtl.fireEvent.click(button); expect(updateInfos).toEqual([ - expect.objectContaining({ displayName: 'App' }), - expect.objectContaining({ displayName: 'Foo' }), - expect.objectContaining({ displayName: 'Foo' }), + expect.objectContaining({displayName: 'App'}), + expect.objectContaining({displayName: 'Foo'}), + expect.objectContaining({displayName: 'Foo'}), ]); }); test('Non simple objects', () => { - const Foo = React.memo(function Foo({ error }) { + const Foo = React.memo(function Foo({error}) { return (

      {error.message}

      @@ -85,7 +85,7 @@ test('Non simple objects', () => { ); }); - const { getByTestId } = rtl.render( + const {getByTestId} = rtl.render( ); @@ -93,6 +93,6 @@ test('Non simple objects', () => { rtl.fireEvent.click(button); expect(updateInfos[1].reason.propsDifferences[0]).toEqual( - expect.objectContaining({ diffType: 'deepEquals', 'pathString': 'error' }), + expect.objectContaining({diffType: 'deepEquals', 'pathString': 'error'}), ); }); diff --git a/tests/logOwnerReasons.test.js b/tests/logOwnerReasons.test.js index deb4cc0..09703ab 100644 --- a/tests/logOwnerReasons.test.js +++ b/tests/logOwnerReasons.test.js @@ -2,7 +2,7 @@ import React from 'react'; import * as rtl from '@testing-library/react'; import whyDidYouRender from '~'; -import { diffTypes } from '~/consts'; +import {diffTypes} from '~/consts'; let updateInfos = []; @@ -23,9 +23,9 @@ function createOwners(Child) { const FunctionalOwner = () => ; class ClassOwner extends React.Component { - state = { a: 1 }; + state = {a: 1}; componentDidMount() { - this.setState({ a: 2 }); + this.setState({a: 2}); } render() { @@ -46,10 +46,10 @@ function createOwners(Child) { return ; } - return { FunctionalOwner, ClassOwner, HooksOwner }; + return {FunctionalOwner, ClassOwner, HooksOwner}; } -function CloneOwner({ children }) { +function CloneOwner({children}) { const [, setA] = React.useState(1); const [, setB] = React.useState(1); React.useLayoutEffect(() => { @@ -64,10 +64,10 @@ describe('logOwnerReasons - function child', () => { const Child = () => null; Child.whyDidYouRender = true; - const { FunctionalOwner, ClassOwner, HooksOwner } = createOwners(Child); + const {FunctionalOwner, ClassOwner, HooksOwner} = createOwners(Child); test('owner props changed', () => { - const { rerender } = rtl.render(); + const {rerender} = rtl.render(); rerender(); expect(updateInfos).toHaveLength(1); @@ -145,7 +145,7 @@ describe('logOwnerReasons - function child', () => { }); test('owner state updated during render', () => { - function DerivedStateOwner({ ready }) { + function DerivedStateOwner({ready}) { const [wasReady, setWasReady] = React.useState(ready); if (ready && !wasReady) { setWasReady(true); @@ -153,7 +153,7 @@ describe('logOwnerReasons - function child', () => { return ; } - const { rerender } = rtl.render(); + const {rerender} = rtl.render(); rerender(); rerender(); @@ -195,7 +195,7 @@ describe('logOwnerReasons - function child', () => { nextValue: false, }], stateDifferences: false, - hookDifferences: [{ hookName: 'useState', differences: false }], + hookDifferences: [{hookName: 'useState', differences: false}], }, }); }); @@ -245,10 +245,10 @@ describe('logOwnerReasons - class child', () => { } } - const { FunctionalOwner, ClassOwner, HooksOwner } = createOwners(Child); + const {FunctionalOwner, ClassOwner, HooksOwner} = createOwners(Child); test('owner props changed', () => { - const { rerender } = rtl.render(); + const {rerender} = rtl.render(); rerender(); expect(updateInfos).toHaveLength(1); diff --git a/tests/patches/patchClassComponent.test.js b/tests/patches/patchClassComponent.test.js index c4a949b..32ee70b 100644 --- a/tests/patches/patchClassComponent.test.js +++ b/tests/patches/patchClassComponent.test.js @@ -3,7 +3,7 @@ import * as rtl from '@testing-library/react'; import createReactClass from 'create-react-class'; import whyDidYouRender from '~'; -import { diffTypes } from '~/consts'; +import {diffTypes} from '~/consts'; class TestComponent extends React.Component { static whyDidYouRender = true; @@ -38,7 +38,7 @@ afterEach(() => { }); test('Empty props and state', () => { - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); rerender( @@ -55,7 +55,7 @@ test('Empty props and state', () => { }); test('Same props', () => { - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); rerender( @@ -72,7 +72,7 @@ test('Same props', () => { }); test('Same state', () => { - const StateTestComponent = createStateTestComponent({ a: 1 }, { a: 1 }); + const StateTestComponent = createStateTestComponent({a: 1}, {a: 1}); rtl.render( ); @@ -90,7 +90,7 @@ test('Same state', () => { }); test('Props change', () => { - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); rerender( @@ -123,7 +123,7 @@ test('With implemented "componentDidUpdate()"', () => { } } - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); rerender( @@ -149,14 +149,14 @@ test('With render as an arrow function', () => { class OwnTestComponent extends React.Component { static whyDidYouRender = true; componentDidMount() { - this.setState({ c: 'c' }); + this.setState({c: 'c'}); } render = () => { return
      hi!
      ; }; } - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); @@ -199,14 +199,14 @@ test('With render as a binded function', () => { this.render = this.render.bind(this); } componentDidMount() { - this.setState({ c: 'c' }); + this.setState({c: 'c'}); } render() { return
      hi!
      ; } } - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); @@ -255,7 +255,7 @@ test('With implemented "componentDidUpdate()" with a snapshot - not tracked', () } } - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); rerender( @@ -281,7 +281,7 @@ test('With implemented "componentDidUpdate()" with a snapshot', () => { } } - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); rerender( @@ -302,7 +302,7 @@ test('Component created with "createReactClass"', () => { CreateReactClassComponent.whyDidYouRender = true; - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); rerender( @@ -337,7 +337,7 @@ test('Component created with "createReactClass" with implemented "componentDidUp CreateReactClassComponent.whyDidYouRender = true; - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); rerender( @@ -362,11 +362,11 @@ test('Component created with "createReactClass" with implemented "componentDidUp test('Element created with "createFactory"', () => { const TestComponentElementCreator = React.createFactory(TestComponent); - const { rerender } = rtl.render( - TestComponentElementCreator({ a: 1 }) + const {rerender} = rtl.render( + TestComponentElementCreator({a: 1}) ); rerender( - TestComponentElementCreator({ a: 1 }) + TestComponentElementCreator({a: 1}) ); expect(updateInfos[0].reason).toEqual({ @@ -383,7 +383,7 @@ test('Element created with "cloneElement"', () => { const testElement = ; const testElement2 = React.cloneElement(testElement); - const { rerender } = rtl.render(testElement); + const {rerender} = rtl.render(testElement); rerender(testElement2); expect(updateInfos).toHaveLength(1); @@ -396,10 +396,10 @@ test('Element created with "cloneElement"', () => { }); test('Several class components', () => { - const { rerender } = rtl.render( + const {rerender} = rtl.render( <> - + ); @@ -407,7 +407,7 @@ test('Several class components', () => { rerender( <> - + ); @@ -425,8 +425,8 @@ test('Several class components', () => { propsDifferences: [{ diffType: diffTypes.deepEquals, pathString: 'a', - nextValue: { a: 'a' }, - prevValue: { a: 'a' }, + nextValue: {a: 'a'}, + prevValue: {a: 'a'}, }], stateDifferences: false, hookDifferences: false, diff --git a/tests/patches/patchForwardRefComponent.test.js b/tests/patches/patchForwardRefComponent.test.js index 8905175..63bac6a 100644 --- a/tests/patches/patchForwardRefComponent.test.js +++ b/tests/patches/patchForwardRefComponent.test.js @@ -2,7 +2,7 @@ import React from 'react'; import * as rtl from '@testing-library/react'; import whyDidYouRender from '~'; -import { diffTypes } from '~/consts'; +import {diffTypes} from '~/consts'; let updateInfos = []; beforeEach(() => { @@ -36,7 +36,7 @@ test('forward ref', () => { componentContentFromRef = ref.innerHTML; }; - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); @@ -84,7 +84,7 @@ test('forward ref a memo component', () => { componentContentFromRef = ref.innerHTML; }; - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); diff --git a/tests/patches/patchFunctionalOrStrComponent.test.js b/tests/patches/patchFunctionalOrStrComponent.test.js index 783a9c5..547575d 100644 --- a/tests/patches/patchFunctionalOrStrComponent.test.js +++ b/tests/patches/patchFunctionalOrStrComponent.test.js @@ -2,7 +2,7 @@ import React from 'react'; import * as rtl from '@testing-library/react'; import whyDidYouRender from '~'; -import { diffTypes } from '~/consts'; +import {diffTypes} from '~/consts'; const FunctionalTestComponent = () => (
      hi!
      @@ -27,7 +27,7 @@ test('simple inline component', () => { ); InlineComponent.whyDidYouRender = true; - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); rerender( @@ -49,10 +49,10 @@ test('simple inline component', () => { }); test('Several functional components', () => { - const { rerender } = rtl.render( + const {rerender} = rtl.render( <> - + ); @@ -60,7 +60,7 @@ test('Several functional components', () => { rerender( <> - + ); @@ -78,8 +78,8 @@ test('Several functional components', () => { propsDifferences: [{ diffType: diffTypes.deepEquals, pathString: 'a', - nextValue: { a: 'a' }, - prevValue: { a: 'a' }, + nextValue: {a: 'a'}, + prevValue: {a: 'a'}, }], stateDifferences: false, hookDifferences: false, diff --git a/tests/patches/patchMemoComponent.test.js b/tests/patches/patchMemoComponent.test.js index 139270b..6c3a3a9 100644 --- a/tests/patches/patchMemoComponent.test.js +++ b/tests/patches/patchMemoComponent.test.js @@ -2,7 +2,7 @@ import React from 'react'; import * as rtl from '@testing-library/react'; import whyDidYouRender from '~'; -import { diffTypes } from '~/consts'; +import {diffTypes} from '~/consts'; const ReactMemoTestComponent = React.memo(() => (
      hi!
      @@ -23,12 +23,12 @@ afterEach(() => { }); test('Memoize text component', () => { - const obj = { a: [] }; + const obj = {a: []}; const Svg = React.memo('svg'); Svg.whyDidYouRender = true; - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); rerender( @@ -39,9 +39,9 @@ test('Memoize text component', () => { }); test('Component memoized with React.memo - no change', () => { - const obj = { a: [] }; + const obj = {a: []}; - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); rerender( @@ -52,7 +52,7 @@ test('Component memoized with React.memo - no change', () => { }); test('Component memoized with React.memo - different prop values', () => { - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); rerender( @@ -74,7 +74,7 @@ test('Component memoized with React.memo - different prop values', () => { }); test('Component memoized with React.memo - deep equal prop values', () => { - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); rerender( @@ -99,7 +99,7 @@ test('React.memo Component memoized with another React.memo - deep equal prop va const ReactSecondMemoComponent = React.memo(ReactMemoTestComponent); ReactSecondMemoComponent.whyDidYouRender = true; - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); rerender( @@ -140,7 +140,7 @@ test('memo a forward ref component', () => { componentContentFromRef = ref.innerHTML; }; - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); @@ -178,7 +178,7 @@ test('memo a class component', () => { MyComponent.whyDidYouRender = true; - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); @@ -213,7 +213,7 @@ test('memo a pure class component', () => { MyComponent.whyDidYouRender = true; - const { rerender } = rtl.render( + const {rerender} = rtl.render( ); diff --git a/tests/shouldTrack.test.js b/tests/shouldTrack.test.js index 8c8edfb..a147dff 100644 --- a/tests/shouldTrack.test.js +++ b/tests/shouldTrack.test.js @@ -11,7 +11,7 @@ class TrackedTestComponent extends React.Component { } class TrackedTestComponentNoHooksTracking extends React.Component { - static whyDidYouRender = { trackHooks: false }; + static whyDidYouRender = {trackHooks: false}; render() { return
      hi!
      ; } @@ -49,13 +49,13 @@ describe('shouldTrack', () => { describe('component changes', () => { test('Do not track not tracked component (default)', () => { whyDidYouRender(React); - const isShouldTrack = shouldTrack(NotTrackedTestComponent, { isHookChange: false }); + const isShouldTrack = shouldTrack(NotTrackedTestComponent, {isHookChange: false}); expect(isShouldTrack).toBe(false); }); test('Track tracked component', () => { whyDidYouRender(React); - const isShouldTrack = shouldTrack(TrackedTestComponent, { isHookChange: false }); + const isShouldTrack = shouldTrack(TrackedTestComponent, {isHookChange: false}); expect(isShouldTrack).toBe(true); }); @@ -63,7 +63,7 @@ describe('shouldTrack', () => { whyDidYouRender(React, { include: [/TestComponent/], }); - const isShouldTrack = shouldTrack(NotTrackedTestComponent, { isHookChange: false }); + const isShouldTrack = shouldTrack(NotTrackedTestComponent, {isHookChange: false}); expect(isShouldTrack).toBe(true); }); @@ -71,7 +71,7 @@ describe('shouldTrack', () => { whyDidYouRender(React, { include: [/ExcludedTestComponent/], }); - const isShouldTrack = shouldTrack(ExcludedTestComponent, { isHookChange: false }); + const isShouldTrack = shouldTrack(ExcludedTestComponent, {isHookChange: false}); expect(isShouldTrack).toBe(false); }); @@ -79,7 +79,7 @@ describe('shouldTrack', () => { whyDidYouRender(React, { include: [/0/], }); - const isShouldTrack = shouldTrack(NotTrackedTestComponent, { isHookChange: false }); + const isShouldTrack = shouldTrack(NotTrackedTestComponent, {isHookChange: false}); expect(isShouldTrack).toBe(false); }); @@ -87,7 +87,7 @@ describe('shouldTrack', () => { whyDidYouRender(React, { exclude: [/TrackedTestComponent/], }); - const isShouldTrack = shouldTrack(TrackedTestComponent, { isHookChange: false }); + const isShouldTrack = shouldTrack(TrackedTestComponent, {isHookChange: false}); expect(isShouldTrack).toBe(false); }); @@ -95,7 +95,7 @@ describe('shouldTrack', () => { whyDidYouRender(React, { trackAllPureComponents: true, }); - const isShouldTrack = shouldTrack(PureComponent, { isHookChange: false }); + const isShouldTrack = shouldTrack(PureComponent, {isHookChange: false}); expect(isShouldTrack).toBe(true); }); @@ -103,7 +103,7 @@ describe('shouldTrack', () => { whyDidYouRender(React, { trackAllPureComponents: true, }); - const isShouldTrack = shouldTrack(MemoComponent, { isHookChange: false }); + const isShouldTrack = shouldTrack(MemoComponent, {isHookChange: false}); expect(isShouldTrack).toBe(true); }); @@ -112,7 +112,7 @@ describe('shouldTrack', () => { trackAllPureComponents: true, exclude: [/PureComponent/], }); - const isShouldTrack = shouldTrack(PureComponent, { isHookChange: false }); + const isShouldTrack = shouldTrack(PureComponent, {isHookChange: false}); expect(isShouldTrack).toBe(false); }); @@ -121,7 +121,7 @@ describe('shouldTrack', () => { trackAllPureComponents: true, exclude: [/MemoComponent/], }); - const isShouldTrack = shouldTrack(MemoComponent, { isHookChange: false }); + const isShouldTrack = shouldTrack(MemoComponent, {isHookChange: false}); expect(isShouldTrack).toBe(false); }); }); @@ -129,19 +129,19 @@ describe('shouldTrack', () => { describe('hooks changes', () => { test('Do not track not tracked component (default)', () => { whyDidYouRender(React); - const isShouldTrack = shouldTrack(NotTrackedTestComponent, { isHookChange: true }); + const isShouldTrack = shouldTrack(NotTrackedTestComponent, {isHookChange: true}); expect(isShouldTrack).toBe(false); }); test('Track tracked component', () => { whyDidYouRender(React); - const isShouldTrack = shouldTrack(TrackedTestComponent, { isHookChange: true }); + const isShouldTrack = shouldTrack(TrackedTestComponent, {isHookChange: true}); expect(isShouldTrack).toBe(true); }); test('Do not track hook changes with "trackHooks: false"', () => { whyDidYouRender(React); - const isShouldTrack = shouldTrack(TrackedTestComponentNoHooksTracking, { isHookChange: true }); + const isShouldTrack = shouldTrack(TrackedTestComponentNoHooksTracking, {isHookChange: true}); expect(isShouldTrack).toBe(false); }); }); diff --git a/tests/strictMode.test.js b/tests/strictMode.test.js index 010c6cf..06b879d 100644 --- a/tests/strictMode.test.js +++ b/tests/strictMode.test.js @@ -1,7 +1,7 @@ import React from 'react'; import * as rtl from '@testing-library/react'; -import { diffTypes } from '~/consts'; +import {diffTypes} from '~/consts'; import whyDidYouRender from '~'; class TestComponent extends React.Component { @@ -25,12 +25,12 @@ FunctionalTestComponent.whyDidYouRender = true; FunctionalTestComponent.dispalyName = 'FunctionalTestComponent'; const FunctionalTestComponentWithHooks = () => { - const [state1, setState1] = React.useState({ count1: 1 }); - const [state2, setState2] = React.useState({ count2: 2 }); + const [state1, setState1] = React.useState({count1: 1}); + const [state2, setState2] = React.useState({count2: 2}); React.useLayoutEffect(() => { - setState1({ count1: 1 }); - setState2({ count2: 2 }); + setState1({count1: 1}); + setState2({count2: 2}); }, []); return ( @@ -61,7 +61,7 @@ afterEach(() => { }); test('Strict mode- class component no props change', () => { - const { rerender } = rtl.render( + const {rerender} = rtl.render(
      @@ -87,7 +87,7 @@ test('Strict mode- class component no props change', () => { }); test('Strict mode- class component props change', () => { - const { rerender } = rtl.render( + const {rerender} = rtl.render(
      @@ -120,7 +120,7 @@ test('Strict mode- class component props change', () => { }); test('Strict mode- pure class component no props change', () => { - const { rerender } = rtl.render( + const {rerender} = rtl.render(
      @@ -140,7 +140,7 @@ test('Strict mode- pure class component no props change', () => { }); test('Strict mode- pure class component props change', () => { - const { rerender } = rtl.render( + const {rerender} = rtl.render(
      @@ -182,7 +182,7 @@ test('Strict mode- functional component no props change', () => { ); }; - const { rerender } = rtl.render( + const {rerender} = rtl.render(
      ); @@ -213,7 +213,7 @@ test('Strict mode- functional component with props change', () => { ); }; - const { rerender } = rtl.render( + const {rerender} = rtl.render(
      ); @@ -267,8 +267,8 @@ test('Strict mode- functional component with hooks no props change', () => { { diffType: diffTypes.deepEquals, pathString: '', - nextValue: { count1: 1 }, - prevValue: { count1: 1 }, + nextValue: {count1: 1}, + prevValue: {count1: 1}, }, ], ownerDifferences: false, @@ -280,8 +280,8 @@ test('Strict mode- functional component with hooks no props change', () => { { diffType: diffTypes.deepEquals, pathString: '', - nextValue: { count2: 2 }, - prevValue: { count2: 2 }, + nextValue: {count2: 2}, + prevValue: {count2: 2}, }, ], ownerDifferences: false, @@ -311,8 +311,8 @@ test('Strict mode- functional component with hooks with props change', () => { { diffType: diffTypes.deepEquals, pathString: '', - nextValue: { count1: 1 }, - prevValue: { count1: 1 }, + nextValue: {count1: 1}, + prevValue: {count1: 1}, }, ], ownerDifferences: false, @@ -324,8 +324,8 @@ test('Strict mode- functional component with hooks with props change', () => { { diffType: diffTypes.deepEquals, pathString: '', - nextValue: { count2: 2 }, - prevValue: { count2: 2 }, + nextValue: {count2: 2}, + prevValue: {count2: 2}, }, ], ownerDifferences: false, @@ -334,12 +334,12 @@ test('Strict mode- functional component with hooks with props change', () => { test('Strict mode- strict parent and child', () => { const App = React.memo(() => { - const [whatever, setWhatever] = React.useState({ a: 'b' }); - const [whatever2, setWhatever2] = React.useState({ a2: 'b2' }); + const [whatever, setWhatever] = React.useState({a: 'b'}); + const [whatever2, setWhatever2] = React.useState({a2: 'b2'}); const clickme = () => { - setWhatever({ a: 'b' }); - setWhatever2({ a2: 'b2' }); + setWhatever({a: 'b'}); + setWhatever2({a2: 'b2'}); }; return ( @@ -363,7 +363,7 @@ test('Strict mode- strict parent and child', () => { ); - const { getByText } = rtl.render(); + const {getByText} = rtl.render(); const buttonReference = getByText('test'); rtl.act(() => { @@ -386,8 +386,8 @@ test('Strict mode- strict parent and child', () => { { diffType: 'deepEquals', pathString: '', - prevValue: { a: 'b' }, - nextValue: { a: 'b' }, + prevValue: {a: 'b'}, + nextValue: {a: 'b'}, }, ], }, @@ -397,8 +397,8 @@ test('Strict mode- strict parent and child', () => { { diffType: 'deepEquals', pathString: '', - prevValue: { a2: 'b2' }, - nextValue: { a2: 'b2' }, + prevValue: {a2: 'b2'}, + nextValue: {a2: 'b2'}, }, ], }, diff --git a/tests/utils.test.js b/tests/utils.test.js index 1b192fb..1523b46 100644 --- a/tests/utils.test.js +++ b/tests/utils.test.js @@ -1,7 +1,7 @@ import React from 'react'; import * as rtl from '@testing-library/react'; -import { checkIfInsideAStrictModeTree } from '~/utils'; +import {checkIfInsideAStrictModeTree} from '~/utils'; describe('checkIfInsideAStrictModeTree', () => { test('class component', () => { diff --git a/yarn.lock b/yarn.lock index f0bda89..d0b50af 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15,22 +15,6 @@ "@jridgewell/gen-mapping" "^0.3.5" "@jridgewell/trace-mapping" "^0.3.24" -"@babel/cli@^7.26.4": - version "7.26.4" - resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.26.4.tgz#4101ff8ee5de8447a6c395397a97921056411d20" - integrity sha512-+mORf3ezU3p3qr+82WvJSnQNE1GAYeoCfEv4fik6B5/2cvKZ75AX8oawWQdXtM9MmndooQj15Jr9kelRFWsuRw== - dependencies: - "@jridgewell/trace-mapping" "^0.3.25" - commander "^6.2.0" - convert-source-map "^2.0.0" - fs-readdir-recursive "^1.1.0" - glob "^7.2.0" - make-dir "^2.1.0" - slash "^2.0.0" - optionalDependencies: - "@nicolo-ribaudo/chokidar-2" "2.1.8-no-fsevents.3" - chokidar "^3.6.0" - "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.25.9", "@babel/code-frame@^7.26.0", "@babel/code-frame@^7.26.2": version "7.26.2" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.26.2.tgz#4b5fab97d33338eff916235055f0ebc21e573a85" @@ -66,15 +50,6 @@ json5 "^2.2.3" semver "^6.3.1" -"@babel/eslint-parser@^7.25.9": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/eslint-parser/-/eslint-parser-7.25.9.tgz#603c68a63078796527bc9d0833f5e52dd5f9224c" - integrity sha512-5UXfgpK0j0Xr/xIdgdLEhOFxaDZ0bRPWJJchRpqOSur/3rZoPbqqki5mm0p4NE2cs28krBEiSM2MB7//afRSQQ== - dependencies: - "@nicolo-ribaudo/eslint-scope-5-internals" "5.1.1-v1" - eslint-visitor-keys "^2.1.0" - semver "^6.3.1" - "@babel/generator@^7.26.0", "@babel/generator@^7.26.3", "@babel/generator@^7.7.2": version "7.26.3" resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.3.tgz#ab8d4360544a425c90c248df7059881f4b2ce019" @@ -1386,18 +1361,6 @@ "@jridgewell/resolve-uri" "^3.1.0" "@jridgewell/sourcemap-codec" "^1.4.14" -"@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3": - version "2.1.8-no-fsevents.3" - resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz#323d72dd25103d0c4fbdce89dadf574a787b1f9b" - integrity sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ== - -"@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1": - version "5.1.1-v1" - resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz#dbf733a965ca47b1973177dc0bb6c889edcfb129" - integrity sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg== - dependencies: - eslint-scope "5.1.1" - "@nodelib/fs.scandir@2.1.5": version "2.1.5" resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5" @@ -2490,7 +2453,7 @@ check-more-types@2.24.0, check-more-types@^2.24.0: resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600" integrity sha512-Pj779qHxV2tuapviy1bSZNEL1maXr13bPYpsvSDB68HlYcYuhlDrmGd63i0JHMCLKzc7rUSNIrpdJlhVlNwrxA== -chokidar@^3.5.1, chokidar@^3.6.0: +chokidar@^3.5.1: version "3.6.0" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b" integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw== @@ -2592,7 +2555,7 @@ combined-stream@^1.0.8, combined-stream@~1.0.6: dependencies: delayed-stream "~1.0.0" -commander@^6.2.0, commander@^6.2.1: +commander@^6.2.1: version "6.2.1" resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c" integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA== @@ -2981,6 +2944,11 @@ duplexer@~0.1.1: resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6" integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg== +eastasianwidth@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb" + integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA== + ecc-jsbn@~0.1.1: version "0.1.2" resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9" @@ -3009,6 +2977,11 @@ emoji-regex@^8.0.0: resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37" integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A== +emoji-regex@^9.2.2: + version "9.2.2" + resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72" + integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg== + encodeurl@~1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59" @@ -3242,14 +3215,6 @@ eslint-plugin-react@^7.37.3: string.prototype.matchall "^4.0.12" string.prototype.repeat "^1.0.0" -eslint-scope@5.1.1: - version "5.1.1" - resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c" - integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw== - dependencies: - esrecurse "^4.3.0" - estraverse "^4.1.1" - eslint-scope@^8.2.0: version "8.2.0" resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-8.2.0.tgz#377aa6f1cb5dc7592cfd0b7f892fd0cf352ce442" @@ -3258,11 +3223,6 @@ eslint-scope@^8.2.0: esrecurse "^4.3.0" estraverse "^5.2.0" -eslint-visitor-keys@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303" - integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw== - eslint-visitor-keys@^3.4.3: version "3.4.3" resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800" @@ -3341,11 +3301,6 @@ esrecurse@^4.3.0: dependencies: estraverse "^5.2.0" -estraverse@^4.1.1: - version "4.3.0" - resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d" - integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw== - estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0: version "5.3.0" resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123" @@ -3703,11 +3658,6 @@ fs-extra@^9.1.0: jsonfile "^6.0.1" universalify "^2.0.0" -fs-readdir-recursive@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz#e32fc030a2ccee44a6b5371308da54be0b397d27" - integrity sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA== - fs.realpath@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" @@ -3832,7 +3782,7 @@ glob@^11.0.0: package-json-from-dist "^1.0.0" path-scurry "^2.0.0" -glob@^7.1.3, glob@^7.1.4, glob@^7.2.0: +glob@^7.1.3, glob@^7.1.4: version "7.2.3" resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b" integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q== @@ -5062,14 +5012,6 @@ magic-string@^0.30.3, magic-string@~0.30.0: dependencies: "@jridgewell/sourcemap-codec" "^1.5.0" -make-dir@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5" - integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA== - dependencies: - pify "^4.0.1" - semver "^5.6.0" - make-dir@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-4.0.0.tgz#c3c2307a771277cd9638305f915c29ae741b614e" @@ -5503,11 +5445,6 @@ pify@^2.2.0: resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c" integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog== -pify@^4.0.1: - version "4.0.1" - resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231" - integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g== - pirates@^4.0.4: version "4.0.6" resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9" @@ -6058,11 +5995,6 @@ scheduler@^0.25.0: resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.25.0.tgz#336cd9768e8cceebf52d3c80e3dcf5de23e7e015" integrity sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA== -semver@^5.6.0: - version "5.7.2" - resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8" - integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g== - semver@^6.3.0, semver@^6.3.1: version "6.3.1" resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4" @@ -6211,11 +6143,6 @@ sisteransi@^1.0.5: resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed" integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg== -slash@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44" - integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A== - slash@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634" @@ -6396,7 +6323,7 @@ string-length@^4.0.1: is-fullwidth-code-point "^3.0.0" strip-ansi "^6.0.1" -string-width@4.2.3, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3, string-width@^5.0.1, string-width@^5.1.2: +string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -6405,6 +6332,15 @@ string-width@4.2.3, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2. is-fullwidth-code-point "^3.0.0" strip-ansi "^6.0.1" +string-width@^5.0.1, string-width@^5.1.2: + version "5.1.2" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794" + integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA== + dependencies: + eastasianwidth "^0.2.0" + emoji-regex "^9.2.2" + strip-ansi "^7.0.1" + string.prototype.matchall@^4.0.12: version "4.0.12" resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz#6c88740e49ad4956b1332a911e949583a275d4c0"