From 131b8a4332f24b66989024eaa22611711566ddfa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sampo=20Kivist=C3=B6?= Date: Wed, 5 Dec 2018 16:01:27 +0200 Subject: [PATCH] Fixes an issue caused by code clean up in 7.0.1, updated to babel 7.2 --- package.json | 10 +-- .../__tests__/patching.spec.js | 3 - .../inferno/__tests__/patching-jsx.spec.jsx | 90 ++++++++++++++++++- packages/inferno/src/DOM/mounting.ts | 2 +- packages/inferno/src/DOM/patching.ts | 16 +--- packages/inferno/src/DOM/rendering.ts | 2 +- packages/inferno/src/core/component.ts | 3 +- 7 files changed, 100 insertions(+), 26 deletions(-) diff --git a/package.json b/package.json index beff6992a..80e30a64b 100644 --- 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 index 6513b8949..8827efe1a 100644 --- 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('

App

Not found

2018
'); this.setState({ ids: ['test'] }); - debugger; rerender(); expect(container.outerHTML).toEqual('

App

test

2018
'); @@ -249,7 +248,6 @@ describe('patching keyed lists (non-jsx)', () => { expect(container.outerHTML).toEqual('

App

Not found

2018
'); this.setState({ ids: ['test', 'test2'] }); - debugger; rerender(); expect(container.outerHTML).toEqual('

App

test

test2

2018
'); @@ -287,7 +285,6 @@ describe('patching keyed lists (non-jsx)', () => { expect(container.outerHTML).toEqual('

App

Not found

2018
'); this.setState({ ids: ['test', 'test2', 'test3'] }); - debugger; rerender(); expect(container.outerHTML).toEqual('

App

test

test2

test3

2018
'); diff --git a/packages/inferno/__tests__/patching-jsx.spec.jsx b/packages/inferno/__tests__/patching-jsx.spec.jsx index 042605a8b..c89a08d67 100644 --- 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 ( +
+ {this.state.value} + {props.children} +
+ ); + } + } + + 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(
{this.state.value}
); + + if (this.state.value > 1) { + arr.unshift(
{this.state.value}
); + } + + return ( +
+ +
{arr}
+ +
+ ); + } + } + + render(, container); + + expect(container.innerHTML).toBe('
1
1
'); + + container.querySelector('#child').click(); + rerender(); + + expect(container.innerHTML).toBe('
2
1
'); + + container.querySelector('#parent').click(); + rerender(); + + expect(container.innerHTML).toBe('
2
3
3
'); + + render(null, container); + + expect(container.innerHTML).toBe(''); + }); }); diff --git a/packages/inferno/src/DOM/mounting.ts b/packages/inferno/src/DOM/mounting.ts index 609c64599..1bd35f436 100644 --- 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 index c86a557bb..4d1fd7274 100644 --- 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 index d2b05bd60..92c5f168a 100644 --- 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 index 2aef1ba81..809627610 100644 --- 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> = []; const nextTick = typeof Promise !== 'undefined' ? Promise.resolve().then.bind(Promise.resolve()) : setTimeout.bind(window); @@ -74,7 +74,6 @@ function applyState(component: Component, force: boolean, callback?: return; } if (force || !component.$BR) { - const pendingState = component.$PS; component.$PS = null;