diff --git a/README.md b/README.md index a6187188a..b228efceb 100755 --- a/README.md +++ b/README.md @@ -795,22 +795,6 @@ hydrate(
, document.getElementById("app")); Same as `render()`, but is used to hydrate a container whose HTML contents were rendered by `inferno-server`. Inferno will attempt to attach event listeners to the existing markup. -### `options.componentComparator` ( package `inferno`) DEV only - -This option can be used during **development** to create custom component comparator method. -This option will be called on every Component update. -It gets two parameters: lastVNode and nextVNode. When it returns `true` lastVNode will be replaced with nextVNode. -If anything else than `true` is returned it falls to normal behavior. - -```javascript -import {options} from 'inferno'; - -options.componentComparator = function (lastVNode, nextVNode) { - /* custom logic */ - return true; // Replaces lastVNode with nextVNode -} -``` - ### `findDOMNode` (package: `inferno-extras`) This feature has been moved from inferno to inferno-compat in v6. No options are needed anymore. diff --git a/packages/inferno/README.md b/packages/inferno/README.md index 10d7fdee4..732517aa5 100755 --- a/packages/inferno/README.md +++ b/packages/inferno/README.md @@ -787,22 +787,6 @@ hydrate(
, document.getElementById("app")); Same as `render()`, but is used to hydrate a container whose HTML contents were rendered by `inferno-server`. Inferno will attempt to attach event listeners to the existing markup. -### `options.componentComparator` ( package `inferno`) DEV only - -This option can be used during **development** to create custom component comparator method. -This option will be called on every Component update. -It gets two parameters: lastVNode and nextVNode. When it returns `true` lastVNode will be replaced with nextVNode. -If anything else than `true` is returned it falls to normal behavior. - -```javascript -import {options} from 'inferno'; - -options.componentComparator = function (lastVNode, nextVNode) { - /* custom logic */ - return true; // Replaces lastVNode with nextVNode -} -``` - ### `findDOMNode` (package: `inferno-extras`) This feature has been moved from inferno to inferno-compat in v6. No options are needed anymore. diff --git a/packages/inferno/__tests__/component.comparator.spec.tsx b/packages/inferno/__tests__/component.comparator.spec.tsx deleted file mode 100644 index 49fe0f255..000000000 --- a/packages/inferno/__tests__/component.comparator.spec.tsx +++ /dev/null @@ -1,218 +0,0 @@ -import { Component, options, render } from 'inferno'; - -describe('top level context', () => { - let container; - - beforeEach(function () { - container = document.createElement('div'); - document.body.appendChild(container); - }); - - afterEach(function () { - render(null, container); - container.innerHTML = ''; - document.body.removeChild(container); - - options.componentComparator = null; - }); - - it('Should be possible to use custom component comparator to avoid replacing whole subtree', () => { - class ComponentA extends Component { - constructor(props) { - super(props); - - this.state = { - abc: 123 - }; - } - - public render() { - return
{this.state!.abc}
; - } - } - - class ComponentB extends Component { - constructor(props) { - super(props); - - this.state = { - abc: 333 - }; - } - - public render() { - return
{this.state!.abc} new
; - } - } - - options.componentComparator = function () { - // Simulate ComponentA being changed - ComponentA.prototype.render = ComponentB.prototype.render; - ComponentA.constructor = ComponentB.constructor; - - return false; - }; - - render(, container); - - expect(container.innerHTML).toBe('
123
'); - - const oldNode = container.firstChild; - - render(, container); - - expect(container.innerHTML).toBe('
123 new
'); - - expect(container.firstChild).toBe(oldNode); - }); - - it('Should be possible to use custom component comparator to avoid replacing whole subtree', () => { - class ComponentA extends Component { - constructor(props) { - super(props); - - this.state = { - abc: 123 - }; - } - - public render() { - return
{this.state!.abc}
; - } - } - - class ComponentB extends Component { - constructor(props) { - super(props); - - this.state = { - abc: 333 - }; - } - - public render() { - return
{this.state!.abc} new
; - } - } - - options.componentComparator = function () { - // Simulate ComponentA being changed - ComponentA.prototype.render = ComponentB.prototype.render; - ComponentA.constructor = ComponentB.constructor; - - return false; - }; - - render(, container); - - expect(container.innerHTML).toBe('
123
'); - - const oldNode = container.firstChild; - - render(, container); - - expect(container.innerHTML).toBe('
123 new
'); - - expect(container.firstChild).toBe(oldNode); - }); - - it('Should override keys, flags, reCreate', () => { - class ComponentA extends Component { - constructor(props) { - super(props); - - this.state = { - abc: 123 - }; - } - - public render() { - return
{this.state!.abc}
; - } - } - - class ComponentB extends Component { - constructor(props) { - super(props); - - this.state = { - abc: 333 - }; - } - - public render() { - return
{this.state!.abc} new
; - } - } - - options.componentComparator = function () { - // Simulate ComponentA being changed - ComponentA.prototype.render = ComponentB.prototype.render; - ComponentA.constructor = ComponentB.constructor; - - return false; - }; - - render(, container); - - expect(container.innerHTML).toBe('
123
'); - - const oldNode = container.firstChild; - - render(, container); - - expect(container.innerHTML).toBe('
123 new
'); - - expect(container.firstChild).toBe(oldNode); - }); - - it('Should do normal replace if comparator returns true', () => { - class ComponentA extends Component { - constructor(props) { - super(props); - - this.state = { - abc: 123 - }; - } - - public render() { - return
{this.state!.abc}
; - } - } - - class ComponentB extends Component { - constructor(props) { - super(props); - - this.state = { - abc: 333 - }; - } - - public render() { - return
{this.state!.abc} new
; - } - } - - options.componentComparator = function () { - // Simulate ComponentA being changed - ComponentA.prototype.render = ComponentB.prototype.render; - ComponentA.constructor = ComponentB.constructor; - - return true; - }; - - render(, container); - - expect(container.innerHTML).toBe('
123
'); - - const oldNode = container.firstChild; - - render(, container); - - expect(container.innerHTML).toBe('
333 new
'); - - expect(container.firstChild).not.toBe(oldNode); - }); -});