diff --git a/package-lock.json b/package-lock.json index 0f308e4..6d329fa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6572,6 +6572,12 @@ "integrity": "sha1-Gmo16s5AEoDH8G3d7DUWWrJ+PlM=", "dev": true }, + "lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", + "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=", + "dev": true + }, "lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -7627,6 +7633,18 @@ "object-keys": "^1.0.11" } }, + "object.entries": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.0.tgz", + "integrity": "sha512-l+H6EQ8qzGRxbkHOd5I/aHRhHDKoQXQ8g0BYt4uSweQU1/J6dZUOyWh9a2Vky35YCKjzmgxOzta2hH6kf9HuXA==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "es-abstract": "^1.12.0", + "function-bind": "^1.1.1", + "has": "^1.0.3" + } + }, "object.getownpropertydescriptors": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz", @@ -9141,6 +9159,17 @@ "preact-render-to-string": "^3.2.0" } }, + "preact-render-spy": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/preact-render-spy/-/preact-render-spy-1.2.1.tgz", + "integrity": "sha1-X0EByPFfORYtt9J0Iwk1z7Pwf1w=", + "dev": true, + "requires": { + "lodash.isequal": "^4.5.0", + "object.entries": "^1.0.4", + "preact-render-to-string": "^3.6.3" + } + }, "preact-render-to-string": { "version": "3.8.2", "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-3.8.2.tgz", diff --git a/package.json b/package.json index 5c64362..8384aa1 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ "npm-run-all": "^4.1.5", "preact": "^8.4.2", "preact-jsx-chai": "^2.2.1", + "preact-render-spy": "1.2.1", "rollup": "^1.16.7", "sinon": "^7.3.2", "sinon-chai": "^3.3.0", diff --git a/src/index.js b/src/index.js index 725e804..dade5bb 100644 --- a/src/index.js +++ b/src/index.js @@ -8,8 +8,16 @@ export default class Markup extends Component { customReviver = h; } - shouldComponentUpdate({ wrap, type, markup }) { - let p = this.props; + shouldComponentUpdate({ wrap, type, markup, components }) { + const p = this.props; + if (Object.keys(components).join()!==Object.keys(p.components).join()) { + return true; + } + for (let i in Object(components)) { + if (components[i]!==p.components[i]) { + return true; + } + } return wrap!==p.wrap || type!==p.type || markup!==p.markup; } diff --git a/test/index.js b/test/index.js index 45f5d3b..fa74d51 100644 --- a/test/index.js +++ b/test/index.js @@ -1,4 +1,5 @@ import { h, render, rerender, Component } from 'preact'; +import deep from 'preact-render-spy'; import assertJsx from 'preact-jsx-chai'; import sinonChai from 'sinon-chai'; chai.use(assertJsx); @@ -200,6 +201,34 @@ describe('Markup', () => { ); }); + it('should update when mapped components change', () => { + const XFoo = () => + (
hello foo
); + const XBar = () => + (
hello bar
); + + let context = deep( + , + { depth: Infinity } + ); + + expect(context.output()).to.eql( +
+
hello foo
+
+ ); + + context.render( + + ); + + expect(context.output()).to.eql( +
+
hello bar
+
+ ); + }); + describe('allow-scripts option', () => { before( () => { window.stub = sinon.stub();