Repository: infernojs/inferno
Pull request #1461 (2019-03-20 20:32:31)

allow suppress warnings for polyfilled components using legacy life c…
**Objective**

This PR does not show warnings when using mix legacy life cycle API's (old and new) and they are suppressed by polyfilled components.

**Closes Issue**

It closes Issue #1458.

coveralls: 
[![Coverage Status](https://coveralls.io/builds/22307298/badge)](https://coveralls.io/builds/22307298)

Coverage increased (+0.03%) to 95.064% when pulling **2a0c3452d0bbf574aae397ce1d20b6bc060f8670 on alanlima:suppress-warnings** into **ddd874d104924d6e64ae0701f5e1f36b48ed76f8 on infernojs:master**.

Havunen: Hi @alanlima 
Thank you for your PR! LGTM 👍 

Patch:
diff --git a/packages/inferno/src/DOM/utils/componentutil.ts b/packages/inferno/src/DOM/utils/componentutil.ts
index b73e87e99..dfbfa4f15 100644
--- a/packages/inferno/src/DOM/utils/componentutil.ts
+++ b/packages/inferno/src/DOM/utils/componentutil.ts
@@ -7,15 +7,19 @@ import { VNode } from './../../core/types';
 function warnAboutOldLifecycles(component) {
   const oldLifecycles: string[] = [];
 
-  if (component.componentWillMount) {
+   // Don't warn about react polyfilled components.
+  if (component.componentWillMount
+      && component.componentWillMount.__suppressDeprecationWarning !== true) {
     oldLifecycles.push('componentWillMount');
   }
 
-  if (component.componentWillReceiveProps) {
+  if (component.componentWillReceiveProps
+      && component.componentWillReceiveProps.__suppressDeprecationWarning !== true) {
     oldLifecycles.push('componentWillReceiveProps');
   }
 
-  if (component.componentWillUpdate) {
+  if (component.componentWillUpdate
+      && component.componentWillUpdate.__suppressDeprecationWarning !== true) {
     oldLifecycles.push('componentWillUpdate');
   }
 


Test patch:
diff --git a/packages/inferno/__tests__/componentlifecycle.spec.tsx b/packages/inferno/__tests__/componentlifecycle.spec.tsx
index a42fad75b..265018c6e 100644
--- a/packages/inferno/__tests__/componentlifecycle.spec.tsx
+++ b/packages/inferno/__tests__/componentlifecycle.spec.tsx
@@ -1,5 +1,6 @@
 import { Component, render, rerender } from 'inferno';
 import { innerHTML } from 'inferno-utils';
+import sinon from 'sinon';
 
 describe('Component lifecycle', () => {
   let container;
@@ -203,3 +204,99 @@ describe('Component lifecycle', () => {
     render(<Com ref={inst => (c = inst)} value={2} />, container);
   });
 });
+
+
+describe('legacy life cycle', () => {
+  let consoleErrorStub;
+  let container;
+
+  beforeEach(() => {
+    consoleErrorStub = sinon.stub(console, 'error');
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    consoleErrorStub.restore();
+    render(null, container);
+    container.innerHTML = '';
+    document.body.removeChild(container);
+  });
+
+  it('should warn when mix legacy life cycle with new ones', () => {
+    /* tslint:disable:member-access no-empty */
+
+    // build the component and element to be rendered
+    class Foo extends Component {
+        // just added to force the warnings
+        static getDerivedStateFromProps() { }
+
+        componentWillMount() { }
+
+        componentWillReceiveProps() { }
+
+        componentWillUpdate() { }
+
+        render() { return <div>Foo</div> }
+    }
+
+    const element = <Foo />;
+
+    // render the element
+    render(element, container);
+
+    // retrieve the arguments of all calls for console.error
+    // so multiple calls to console.error should not broke this test
+    const callArgs = consoleErrorStub
+                        .getCalls()
+                        .map(c => c.args.length && c.args[0]);
+
+    // should have at least one warnings containing:
+    // componentWillMount, componentWillReceiveProps, componentWillUpdate
+
+    expect(callArgs.length).toBeGreaterThan(0);
+
+    for(let i = 0; i < callArgs.length; i++) {
+      expect(callArgs[i]).toMatch(/(componentWillMount)|(componentWillReceiveProps)|(componentWillUpdate)/);
+    }
+
+    /* tslint:enable:member-access no-empty */
+  });
+
+  it('should allow suppress legacy life cycles when mixed with new APIs', () => {
+    /* tslint:disable:member-access no-empty */
+    // build the component and element to be rendered
+    class Foo extends Component {
+        // just added to force the warnings
+        static getDerivedStateFromProps() { }
+
+        componentWillMount() { }
+
+        componentWillReceiveProps() { }
+
+        componentWillUpdate() { }
+
+        render() { return <div>Foo</div> }
+    }
+    // suppress the warnings
+    // @ts-ignore
+    Foo.prototype.componentWillMount.__suppressDeprecationWarning = true;
+    // @ts-ignore
+    Foo.prototype.componentWillReceiveProps.__suppressDeprecationWarning = true;
+    // @ts-ignore
+    Foo.prototype.componentWillUpdate.__suppressDeprecationWarning = true;
+
+    const element = <Foo />;
+    // render the element
+    render(element, container);
+
+    const callArgs = consoleErrorStub
+                        .getCalls()
+                        .map(c => c.args.length && c.args[0]);
+
+    for(let i = 0; i < callArgs.length;i++) {
+      expect(callArgs[i]).not.toMatch(/(componentWillMount)|(componentWillReceiveProps)|(componentWillUpdate)/);
+    }
+    /* tslint:enable:member-access no-empty */
+  });
+})
\ No newline at end of file