From eb7f4d7e0e67a94d12f5c63040ead680e227369f Mon Sep 17 00:00:00 2001 From: Drew Keller Date: Fri, 8 Mar 2019 21:09:40 -0600 Subject: [PATCH 1/3] Fix context of events wrapped by withEvents() Allow user-supplied lifecycle events to reference the component as "this". --- src/withEvents.js | 8 ++++---- src/withEvents.spec.js | 23 +++++++++++++++++++++++ 2 files changed, 27 insertions(+), 4 deletions(-) diff --git a/src/withEvents.js b/src/withEvents.js index bcd7787..300e074 100644 --- a/src/withEvents.js +++ b/src/withEvents.js @@ -4,25 +4,25 @@ function noop() {} export default function withEvents(config) { function willMountCustom(nativeFunc = noop, ...args) { - const result = nativeFunc(...args); + const result = nativeFunc.call(this, ...args); this.componentWillMountOrReceiveProps(this.props); return result; } function didMountCustom(nativeFunc = noop, ...args) { - const result = nativeFunc(...args); + const result = nativeFunc.call(this, ...args); this.componentDidMountOrUpdate(this.props, this.state); return result; } function willReceivePropsCustom(nativeFunc = noop, ...args) { - const result = nativeFunc(...args); + const result = nativeFunc.call(this, ...args); this.componentWillMountOrReceiveProps(...args); return result; } function didUpdateCustom(nativeFunc = noop, ...args) { - const result = nativeFunc(...args); + const result = nativeFunc.call(this, ...args); this.componentDidMountOrUpdate(...args); return result; } diff --git a/src/withEvents.spec.js b/src/withEvents.spec.js index a655b1d..3f67c3d 100644 --- a/src/withEvents.spec.js +++ b/src/withEvents.spec.js @@ -197,6 +197,10 @@ describe('withEvents extension with overrides', () => { expect(userComponentWillMount).to.have.been.calledBefore(callbackWill); }); + it('runs user code in override on mount with "this" context of component', () => { + expect(userComponentWillMount).to.have.been.calledOn(component.instance()); + }); + it('runs on props update', () => { component.setProps(getUniqueProps()); expect(callbackWill).to.have.been.calledTwice(); @@ -207,6 +211,11 @@ describe('withEvents extension with overrides', () => { expect(userComponentWillReceiveProps).to.have.been.calledBefore(callbackWill.secondCall); }); + it('runs user code in override on props update with "this" context of component', () => { + component.setProps(getUniqueProps()); + expect(userComponentWillReceiveProps).to.have.been.calledOn(component.instance()); + }); + it('does not run on state update', () => { component.setState(getUniqueState()); expect(callbackWill).to.have.been.calledOnce(); @@ -222,6 +231,10 @@ describe('withEvents extension with overrides', () => { expect(userComponentDidMount).to.have.been.calledBefore(callbackDid); }); + it('runs user code in override on mount with "this" context of component', () => { + expect(userComponentDidMount).to.have.been.calledOn(component.instance()); + }); + it('runs on props update', () => { component.setProps(getUniqueProps()); expect(callbackDid).to.have.been.calledTwice(); @@ -232,6 +245,11 @@ describe('withEvents extension with overrides', () => { expect(userComponentDidUpdate).to.have.been.calledBefore(callbackDid.secondCall); }); + it('runs user code in override on props update with "this" context of component', () => { + component.setProps(getUniqueProps()); + expect(userComponentDidUpdate).to.have.been.calledOn(component.instance()); + }); + it('runs on state update', () => { component.setState(getUniqueState()); expect(callbackDid).to.have.been.calledTwice(); @@ -241,5 +259,10 @@ describe('withEvents extension with overrides', () => { component.setState(getUniqueState()); expect(userComponentDidUpdate).to.have.been.calledBefore(callbackDid.secondCall); }); + + it('runs user code in override on state update with "this" context of component', () => { + component.setState(getUniqueState()); + expect(userComponentDidUpdate).to.have.been.calledOn(component.instance()); + }); }); }); From 29e50637ad2b609416dff50970d4aaaaa7d7c62a Mon Sep 17 00:00:00 2001 From: Drew Keller Date: Fri, 8 Mar 2019 21:21:08 -0600 Subject: [PATCH 2/3] Remove lodash wrap dependency Replace with a custom wrap implementation to reduce package size. --- package.json | 3 --- src/withEvents.js | 29 +++++++++++++++++++---------- 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index 33be2df..8104a04 100644 --- a/package.json +++ b/package.json @@ -73,8 +73,5 @@ "testMatch": [ "**/src/*.spec.js?(x)" ] - }, - "dependencies": { - "lodash.wrap": "^4.1.1" } } diff --git a/src/withEvents.js b/src/withEvents.js index 300e074..20fcd4b 100644 --- a/src/withEvents.js +++ b/src/withEvents.js @@ -1,28 +1,37 @@ -import wrap from 'lodash.wrap'; - function noop() {} +/** + * Intercept calls to nativeFunc and pass the arguments to customWrapperFunc. + * @param {function=} nativeFunc + * @param {function} customWrapperFunc + */ +function wrap(nativeFunc = noop, customWrapperFunc) { + return function wrappedNativeFunc(...args) { + customWrapperFunc.call(this, nativeFunc.bind(this), ...args); + }; +} + export default function withEvents(config) { - function willMountCustom(nativeFunc = noop, ...args) { - const result = nativeFunc.call(this, ...args); + function willMountCustom(nativeFunc, ...args) { + const result = nativeFunc(...args); this.componentWillMountOrReceiveProps(this.props); return result; } - function didMountCustom(nativeFunc = noop, ...args) { - const result = nativeFunc.call(this, ...args); + function didMountCustom(nativeFunc, ...args) { + const result = nativeFunc(...args); this.componentDidMountOrUpdate(this.props, this.state); return result; } - function willReceivePropsCustom(nativeFunc = noop, ...args) { - const result = nativeFunc.call(this, ...args); + function willReceivePropsCustom(nativeFunc, ...args) { + const result = nativeFunc(...args); this.componentWillMountOrReceiveProps(...args); return result; } - function didUpdateCustom(nativeFunc = noop, ...args) { - const result = nativeFunc.call(this, ...args); + function didUpdateCustom(nativeFunc, ...args) { + const result = nativeFunc(...args); this.componentDidMountOrUpdate(...args); return result; } From a386a4bd033661055bc810b5577916522ff77e5f Mon Sep 17 00:00:00 2001 From: Drew Keller Date: Fri, 8 Mar 2019 21:29:18 -0600 Subject: [PATCH 3/3] Bump minor version to 1.4.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8104a04..2a175c1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-component-update", - "version": "1.3.0", + "version": "1.4.0", "description": "Extends the native React Component to streamline updates", "main": "lib/index.js", "files": [