From 12b5c22f6d724730931e70661c630791e50527aa Mon Sep 17 00:00:00 2001
From: Luis Nabais <dextro@gmail.com>
Date: Wed, 10 Jul 2019 14:14:01 +0200
Subject: [PATCH] Re-render when components prop changes

---
 src/index.js  | 24 +++++++++++++++++++++---
 test/index.js | 37 +++++++++++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/src/index.js b/src/index.js
index 725e804..9d91a21 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,9 +8,27 @@ export default class Markup extends Component {
 		customReviver = h;
 	}
 
-	shouldComponentUpdate({ wrap, type, markup }) {
-		let p = this.props;
-		return wrap!==p.wrap || type!==p.type || markup!==p.markup;
+	shouldComponentUpdate({ wrap, type, markup, components }) {
+		const p = this.props;
+
+		if (components) {
+			// we have a list of components, but there wasn't one before:
+			if (!p.components) {
+				return true;
+			}
+
+			for (let i in components) {
+				// one of the components changed:
+				if (p.components[i]!==components[i]) return true;
+			}
+
+			for (let i in p.components) {
+				// one of the components was removed:
+				if (!(i in components)) return true;
+			}
+		}
+
+		return wrap!==p.wrap || type!==p.type || markup!==p.markup || (!components && p.components);
 	}
 
 	setComponents(components) {
diff --git a/test/index.js b/test/index.js
index a54f970..9f8eb6c 100644
--- a/test/index.js
+++ b/test/index.js
@@ -200,6 +200,43 @@ describe('Markup', () => {
 		);
 	});
 
+	it('should update when markup changes', () => {
+		render(
+			<Markup type="html" markup='<p>hello foo</p>' />,
+			scratch
+		);
+
+		expect(scratch.textContent).to.eql('hello foo');
+
+		render(
+			<Markup type="html" markup='<p>hello bar</p>' />,
+			scratch
+		);
+
+		expect(scratch.textContent).to.eql('hello bar');
+	});
+
+	it('should update when mapped components change', () => {
+		const XFoo = () =>
+			(<div class="x-foo">hello foo</div>);
+		const XBar = () =>
+			(<div class="x-bar">hello bar</div>);
+
+		render(
+			<Markup type="html" markup='<x-component />' components={{ XComponent: XFoo }} />,
+			scratch
+		);
+
+		expect(scratch.textContent).to.eql('hello foo');
+
+		render(
+			<Markup type="html" markup='<x-component />' components={{ XComponent: XBar }} />,
+			scratch
+		);
+
+		expect(scratch.textContent).to.eql('hello bar');
+	});
+
 	describe('allow-scripts option', () => {
 		before( () => {
 			window.stub = sinon.stub();