From 48d3e16ef92762d8a8837bb6bdf02b78940964f5 Mon Sep 17 00:00:00 2001 From: Edgar Date: Tue, 26 Feb 2019 15:25:09 +0300 Subject: [PATCH] Revert "add tests infrastructure and simple test" This reverts commit 9870ea3922f17711a7c5f56657f7097a14b48201. --- .babelrc | 14 ++ .babelrc.js | 3 - package.json | 21 +-- src/__tests__/components/SimpleComponent.js | 27 ---- src/__tests__/patch.spec.js | 24 ---- src/index.js | 134 ++++++++++++++++++-- src/logger.js | 116 ----------------- src/patch.js | 32 ----- 8 files changed, 139 insertions(+), 232 deletions(-) create mode 100755 .babelrc delete mode 100755 .babelrc.js delete mode 100644 src/__tests__/components/SimpleComponent.js delete mode 100644 src/__tests__/patch.spec.js delete mode 100644 src/logger.js delete mode 100644 src/patch.js diff --git a/.babelrc b/.babelrc new file mode 100755 index 0000000..9d26b84 --- /dev/null +++ b/.babelrc @@ -0,0 +1,14 @@ +{ + "presets": [ + "es2015" + ], + "plugins": [ + ["transform-es2015-modules-umd", { + "globals": { + "src/index": "clearRender" + }, + "exactGlobals": true + }] + ], + "moduleId": "src/index" +} \ No newline at end of file diff --git a/.babelrc.js b/.babelrc.js deleted file mode 100755 index 0a6fc13..0000000 --- a/.babelrc.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - presets: ['@babel/preset-env', '@babel/preset-react'], -}; \ No newline at end of file diff --git a/package.json b/package.json index 6243566..0cb5b72 100755 --- a/package.json +++ b/package.json @@ -15,27 +15,14 @@ "render" ], "devDependencies": { - "@babel/core": "*", - "@babel/preset-env": "*", - "@babel/preset-react": "*", - "babel-jest": "*", - "enzyme": "*", - "enzyme-adapter-react-16": "*", - "jest": "*", - "react": "^16.4.0", - "react-dom": "^16.4.0" + "babel-cli": "^6.26.0", + "babel-plugin-transform-es2015-modules-umd": "6.24.1", + "babel-preset-es2015": "^6.24.1" }, "main": "build/index.js", "scripts": { "build": "babel src/index.js --no-babelrc --presets es2015 --out-file build/index.js", - "build-umd": "babel src/index.js --out-file build/umd/index.js", - "test": "jest", - "format": "prettier --single-quote --trailing-comma es5 --write \"src/**/*.js\"" - }, - "jest": { - "testPathIgnorePatterns": [ - "/src/__tests__/components/" - ] + "build-umd": "babel src/index.js --out-file build/umd/index.js" }, "repository": { "type": "git", diff --git a/src/__tests__/components/SimpleComponent.js b/src/__tests__/components/SimpleComponent.js deleted file mode 100644 index 66d582b..0000000 --- a/src/__tests__/components/SimpleComponent.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; - -export default class SimpleComponent extends React.Component { - constructor(props) { - super(props); - this.state = { isChecked: false }; - - this.onChange = this.onChange.bind(this); - } - - onChange() { - this.setState({ isChecked: !this.state.isChecked }); - } - - render() { - return ( - - ); - } -} diff --git a/src/__tests__/patch.spec.js b/src/__tests__/patch.spec.js deleted file mode 100644 index f405ea2..0000000 --- a/src/__tests__/patch.spec.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import Enzyme, { shallow } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; - -Enzyme.configure({ adapter: new Adapter() }); - -import SimpleComponent from './components/SimpleComponent'; -import patch from '../patch'; - -it('changed state', () => { - const PatchedSimpleComponent = patch(SimpleComponent, 'test-name', console); - - const checkbox = shallow( - - ); - - expect(checkbox.text()).toEqual('Off'); - - checkbox.find('input').simulate('change'); - - expect(checkbox.text()).toEqual('On'); - - checkbox.setProps({ labelOn: 'Off' }); -}); diff --git a/src/index.js b/src/index.js index 5bb8107..f10833a 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,118 @@ -import patch from './patch'; +class Logger { + constructor(componentName) { + this._componentName = componentName; + this._propsChanges = []; + this._stateChanges = []; + this._renderCount = 0; + } + + init() { + console.log('%c[clear-render] init for', 'color: #848d95;', this._componentName); + console.log('%c[clear-render] render', 'color: #848d95;', this._componentName); + } + + _printChange(change) { + if (typeof change === 'object') { + console.groupCollapsed(`${change.key} %c [${change.type}]`, 'color: #848d95; font-style: italic;'); + console.log('%c old ', 'background: #ff6347; color: #fff', change.oldValue); + console.log('%c new ', 'background: #5fba7d; color: #fff', change.nextValue); + console.groupEnd(); + } else { + console.log(change); + } + } + + printComparisonsResults() { + console.group(`%c[clear-render] re-render #${this._renderCount}`, 'color: #848d95;', this._componentName); + this._printComparisonResult('props', this._propsChanges); + this._printComparisonResult('state', this._stateChanges); + console.groupEnd(); + } + + _printComparisonResult(title, changes = []) { + if (changes.length === 0) { + return; + } + console.group(title); + changes.forEach(this._printChange); + console.groupEnd(); + } + + _differenceBetweenObjects(oldObj = {}, nextObj = {}) { + if (!nextObj || !oldObj) { + return []; + } + let difference = []; + Object.keys(nextObj).forEach(key => { + if (nextObj[key] !== oldObj[key]) { + const type = typeof nextObj[key]; + difference.push({ + key, + type, + oldValue: oldObj[key], + nextValue: nextObj[key], + }); + } + }); + return difference; + } + + shallowCompareProps(prevProps, nextProps) { + this._propsChanges = this._differenceBetweenObjects(prevProps, nextProps); + } + + shallowCompareState(prevState, nextState) { + this._stateChanges = this._differenceBetweenObjects(prevState, nextState); + } + + get isFirstRender() { + return !this._renderCount; + } -export default (...args) => { + incrementRenderCount() { + this._renderCount++; + } +}; + +const wrap = (ComponentClass, forcedDisplayedName) => { + const componentClassName = ComponentClass.name; + + const logger = new Logger(forcedDisplayedName || componentClassName); + + const originalRender = ComponentClass.prototype.render; + ComponentClass.prototype.render = function () { + if (logger.isFirstRender) { + logger.init(); + } + + logger.incrementRenderCount(); + + if (originalRender) { + return originalRender.call(this); + } else { + return null; + } + } + + const originalСomponentDidUpdate = ComponentClass.prototype.componentDidUpdate; + ComponentClass.prototype.componentDidUpdate = function (...args) { + const [prevProps, prevState] = args; + const nextProps = this.props; + const nextState = this.state; + + logger.shallowCompareState(prevState, nextState); + logger.shallowCompareProps(prevProps, nextProps); + logger.printComparisonsResults(); + + if (originalСomponentDidUpdate) { + return originalСomponentDidUpdate.call(this, ...args); + } + } + + return ComponentClass; +}; + +module.exports = function (...args) { if (args.length > 2) { console.error('[clear-render] Error: Too many arguments'); return null; @@ -19,15 +131,13 @@ export default (...args) => { switch (type) { case 'symbol': - case 'string': - { - forcedDisplayedName = arg; - } + case 'string': { + forcedDisplayedName = arg; + } break; - default: - { - ComponentClass = arg; - } + default: { + ComponentClass = arg; + } break; } }); @@ -37,7 +147,5 @@ export default (...args) => { return null; } - const name = forcedDisplayedName || ComponentClass.name; - - return patch(ComponentClass, name, console); + return wrap(ComponentClass, forcedDisplayedName); }; diff --git a/src/logger.js b/src/logger.js deleted file mode 100644 index d9af292..0000000 --- a/src/logger.js +++ /dev/null @@ -1,116 +0,0 @@ -class Logger { - constructor(componentName, log) { - this._componentName = componentName; - this._propsChanges = []; - this._stateChanges = []; - this._renderCount = 0; - - this._log = log; - } - - init() { - if (this._isFirstRender) { - this._printInit(); - } - - this._incrementRenderCount(); - } - - processChanges(stateChange, propsChange) { - this._shallowCompareState(...stateChange); - this._shallowCompareProps(...propsChange); - this._printComparisonsResults(); - } - - _printInit() { - this._log.log( - '%c[clear-render] init for', - 'color: #848d95;', - this._componentName - ); - this._log.log( - '%c[clear-render] render', - 'color: #848d95;', - this._componentName - ); - } - - _printChange(change) { - if (typeof change === 'object') { - this._log.groupCollapsed( - `${change.key} %c [${change.type}]`, - 'color: #848d95; font-style: italic;' - ); - this._log.log( - '%c old ', - 'background: #ff6347; color: #fff', - change.oldValue - ); - this._log.log( - '%c new ', - 'background: #5fba7d; color: #fff', - change.nextValue - ); - this._log.groupEnd(); - } else { - this._log.log(change); - } - } - - _printComparisonsResults() { - this._log.group( - `%c[clear-render] re-render #${this._renderCount}`, - 'color: #848d95;', - this._componentName - ); - this._printComparisonResult('props', this._propsChanges); - this._printComparisonResult('state', this._stateChanges); - this._log.groupEnd(); - } - - _printComparisonResult(title, changes = []) { - if (changes.length === 0) { - return; - } - this._log.group(title); - changes.forEach(this._printChange.bind(this)); - this._log.groupEnd(); - } - - _differenceBetweenObjects(oldObj = {}, nextObj = {}) { - if (!nextObj || !oldObj) { - return []; - } - let difference = []; - Object.keys(nextObj).forEach(key => { - if (nextObj[key] !== oldObj[key]) { - const type = typeof nextObj[key]; - difference.push({ - key, - type, - oldValue: oldObj[key], - nextValue: nextObj[key], - }); - } - }); - return difference; - } - - _shallowCompareProps(prevProps, nextProps) { - this._propsChanges = this._differenceBetweenObjects(prevProps, nextProps); - } - - _shallowCompareState(prevState, nextState) { - this._stateChanges = this._differenceBetweenObjects(prevState, nextState); - } - - get _isFirstRender() { - return !this._renderCount; - } - - _incrementRenderCount() { - this._renderCount++; - } -} - -export default Logger; diff --git a/src/patch.js b/src/patch.js deleted file mode 100644 index 89902bd..0000000 --- a/src/patch.js +++ /dev/null @@ -1,32 +0,0 @@ -import Logger from './logger'; - -export default (ComponentClass, name, log) => { - const logger = new Logger(name, log); - - const originalRender = ComponentClass.prototype.render; - ComponentClass.prototype.render = function() { - logger.init(); - - if (originalRender) { - return originalRender.call(this); - } - - return null; - }; - - const originalСomponentDidUpdate = - ComponentClass.prototype.componentDidUpdate; - ComponentClass.prototype.componentDidUpdate = function(...args) { - const [prevProps, prevState] = args; - const nextProps = this.props; - const nextState = this.state; - - logger.processChanges([prevState, nextState], [prevProps, nextProps]); - - if (originalСomponentDidUpdate) { - return originalСomponentDidUpdate.call(this, ...args); - } - }; - - return ComponentClass; -};