Re-render markup when components prop changes

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, or a new one was added:
+ 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) {

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();