Fixes an issue caused by code clean up in 7.0.1, updated to babel 7.2

infernojs · Dec 5, 2018 · 131b8a4 · 131b8a4
1 parent faddb21
commit 131b8a4
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -78,16 +78,16 @@
     "test:package": "node fixtures/packaging/build-all.js"
   },
   "devDependencies": {
-    "@babel/core": "^7.1.6",
-    "@babel/plugin-proposal-class-properties": "7.1.0",
-    "@babel/preset-env": "7.1.6",
+    "@babel/core": "^7.2.0",
+    "@babel/plugin-proposal-class-properties": "7.2.1",
+    "@babel/preset-env": "7.2.0",
     "@babel/preset-typescript": "^7.1.0",
     "@types/history": "^4.7.2",
     "@types/jest": "^23.3.10",
-    "@types/node": "^10.12.11",
+    "@types/node": "^10.12.12",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^23.6.0",
-    "babel-plugin-inferno": "6.0.3",
+    "babel-plugin-inferno": "6.0.4",
     "cli-table": "^0.3.1",
     "colors": "^1.3.2",
     "concat-stream-es6": "0.0.1",

diff --git a/packages/inferno-create-element/__tests__/patching.spec.js b/packages/inferno-create-element/__tests__/patching.spec.js
@@ -211,7 +211,6 @@ describe('patching keyed lists (non-jsx)', () => {
         expect(container.outerHTML).toEqual('<div><h1>App</h1><p>Not found</p><button>Create</button><footer>2018</footer></div>');
 
         this.setState({ ids: ['test'] });
-        debugger;
         rerender();
         expect(container.outerHTML).toEqual('<div><h1>App</h1><h2>test</h2><footer>2018</footer></div>');
 
@@ -249,7 +248,6 @@ describe('patching keyed lists (non-jsx)', () => {
         expect(container.outerHTML).toEqual('<div><h1>App</h1><p>Not found</p><button>Create</button><footer>2018</footer></div>');
 
         this.setState({ ids: ['test', 'test2'] });
-        debugger;
         rerender();
         expect(container.outerHTML).toEqual('<div><h1>App</h1><h2>test</h2><h2>test2</h2><footer>2018</footer></div>');
 
@@ -287,7 +285,6 @@ describe('patching keyed lists (non-jsx)', () => {
         expect(container.outerHTML).toEqual('<div><h1>App</h1><p>Not found</p><button>Create</button><footer>2018</footer></div>');
 
         this.setState({ ids: ['test', 'test2', 'test3'] });
-        debugger;
         rerender();
         expect(container.outerHTML).toEqual('<div><h1>App</h1><h2>test</h2><h2>test2</h2><h2>test3</h2><footer>2018</footer></div>');
 

diff --git a/packages/inferno/__tests__/patching-jsx.spec.jsx b/packages/inferno/__tests__/patching-jsx.spec.jsx
@@ -1,5 +1,4 @@
-import { createVNode, render } from 'inferno';
-import { VNodeFlags } from 'inferno-vnode-flags';
+import { createVNode, render, Component, rerender } from 'inferno';
 import sinon from 'sinon';
 
 describe('patching routine (JSX)', () => {
@@ -59,4 +58,91 @@ describe('patching routine (JSX)', () => {
     expect(spy2.getCall(0).args.length).toBe(1);
     expect(spy2.getCall(0).args[0]).toEqual(container.firstChild);
   });
+
+  it('Should be able to patch references', () => {
+    class Component1 extends Component {
+      constructor(p, c) {
+        super(p, c);
+
+        this.state = {
+          value: 1
+        };
+
+        this.add = this.add.bind(this);
+      }
+
+      add(e) {
+        e.stopPropagation();
+
+        this.setState({
+          value: ++this.state.value
+        });
+      }
+
+      render(props) {
+        return (
+          <div id="child" onclick={this.add}>
+            <span>{this.state.value}</span>
+            {props.children}
+          </div>
+        );
+      }
+    }
+
+    class Parent extends Component {
+      constructor(p, c) {
+        super(p, c);
+
+        this.state = {
+          value: 1
+        };
+
+        this.add = this.add.bind(this);
+      }
+
+      add(e) {
+        e.stopPropagation();
+
+        this.setState({
+          value: 3
+        });
+      }
+
+      render() {
+        const arr = [];
+
+        arr.push(<div>{this.state.value}</div>);
+
+        if (this.state.value > 1) {
+          arr.unshift(<div>{this.state.value}</div>);
+        }
+
+        return (
+          <div id="parent" onclick={this.add}>
+            <Component1>
+              <div $HasNonKeyedChildren>{arr}</div>
+            </Component1>
+          </div>
+        );
+      }
+    }
+
+    render(<Parent />, container);
+
+    expect(container.innerHTML).toBe('<div id="parent"><div id="child"><span>1</span><div><div>1</div></div></div></div>');
+
+    container.querySelector('#child').click();
+    rerender();
+
+    expect(container.innerHTML).toBe('<div id="parent"><div id="child"><span>2</span><div><div>1</div></div></div></div>');
+
+    container.querySelector('#parent').click();
+    rerender();
+
+    expect(container.innerHTML).toBe('<div id="parent"><div id="child"><span>2</span><div><div>3</div><div>3</div></div></div></div>');
+
+    render(null, container);
+
+    expect(container.innerHTML).toBe('');
+  });
 });
diff --git a/packages/inferno/src/DOM/mounting.ts b/packages/inferno/src/DOM/mounting.ts
@@ -2,7 +2,7 @@ import { isFunction, isNull, isNullOrUndef, isString, isStringOrNumber, throwErr
 import { ChildFlags, VNodeFlags } from 'inferno-vnode-flags';
 import { createVoidVNode, directClone } from '../core/implementation';
 import { VNode } from '../core/types';
-import { documentCreateElement, EMPTY_OBJ, findDOMfromVNode, insertOrAppend } from "./utils/common";
+import { documentCreateElement, EMPTY_OBJ, findDOMfromVNode, insertOrAppend } from './utils/common';
 import { mountProps } from './props';
 import { createClassComponentInstance, handleComponentInput } from './utils/componentutil';
 import { validateKeys } from '../core/validate';

diff --git a/packages/inferno/src/DOM/patching.ts b/packages/inferno/src/DOM/patching.ts
@@ -4,17 +4,7 @@ import { createVoidVNode, directClone } from '../core/implementation';
 import { VNode } from '../core/types';
 import { mount, mountArrayChildren, mountTextContent } from './mounting';
 import { clearDOM, remove, removeAllChildren, unmount, unmountAllChildren } from './unmounting';
-import {
-  appendChild,
-  createDerivedState,
-  EMPTY_OBJ,
-  findDOMfromVNode,
-  moveVNodeDOM,
-  options,
-  removeChild,
-  removeVNodeDOM,
-  replaceChild
-} from "./utils/common";
+import { appendChild, createDerivedState, EMPTY_OBJ, findDOMfromVNode, moveVNodeDOM, options, removeChild, removeVNodeDOM, replaceChild } from './utils/common';
 import { isControlledFormElement, processElement } from './wrappers/processElement';
 import { patchProp } from './props';
 import { handleComponentInput, renderNewInput } from './utils/componentutil';
@@ -496,15 +486,17 @@ function patchNonKeyedChildren(
   const commonLength = lastChildrenLength > nextChildrenLength ? nextChildrenLength : lastChildrenLength;
   let i = 0;
   let nextChild;
+  let lastChild;
 
   for (; i < commonLength; ++i) {
     nextChild = nextChildren[i];
+    lastChild = lastChildren[i];
 
     if (nextChild.flags & VNodeFlags.InUse) {
       nextChild = nextChildren[i] = directClone(nextChild);
     }
 
-    patch(lastChildren[i], nextChild, dom, context, isSVG, nextNode, lifecycle);
+    patch(lastChild, nextChild, dom, context, isSVG, nextNode, lifecycle);
     lastChildren[i] = nextChild;
   }
   if (lastChildrenLength < nextChildrenLength) {

diff --git a/packages/inferno/src/DOM/rendering.ts b/packages/inferno/src/DOM/rendering.ts
@@ -5,7 +5,7 @@ import { InfernoNode, VNode } from '../core/types';
 import { mount } from './mounting';
 import { patch } from './patching';
 import { remove } from './unmounting';
-import { callAll, options, EMPTY_OBJ, renderCheck } from "./utils/common";
+import { callAll, options, EMPTY_OBJ, renderCheck } from './utils/common';
 
 const hasDocumentAvailable: boolean = typeof document !== 'undefined';
 

diff --git a/packages/inferno/src/core/component.ts b/packages/inferno/src/core/component.ts
@@ -1,7 +1,7 @@
 import { IComponent, InfernoNode, StatelessComponent } from './types';
 import { combineFrom, isFunction, isNullOrUndef, throwError } from 'inferno-shared';
 import { updateClassComponent } from '../DOM/patching';
-import { callAll, EMPTY_OBJ, findDOMfromVNode, renderCheck } from "../DOM/utils/common";
+import { callAll, EMPTY_OBJ, findDOMfromVNode, renderCheck } from '../DOM/utils/common';
 
 const QUEUE: Array<Component<any, any>> = [];
 const nextTick = typeof Promise !== 'undefined' ? Promise.resolve().then.bind(Promise.resolve()) : setTimeout.bind(window);
@@ -74,7 +74,6 @@ function applyState<P, S>(component: Component<P, S>, force: boolean, callback?:
     return;
   }
   if (force || !component.$BR) {
-
     const pendingState = component.$PS;
 
     component.$PS = null;