Re-render when components prop changes

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",

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;
  }
 

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 = () =>
+ (<div class="x-foo">hello foo</div>);
+ const XBar = () =>
+ (<div class="x-bar">hello bar</div>);
+
+ let context = deep(
+ <Markup type="html" markup='<x-component />' components={{ XComponent: XFoo }} />,
+ { depth: Infinity }
+ );
+
+ expect(context.output()).to.eql(
+ <div class="markup">
+ <div class="x-foo">hello foo</div>
+ </div>
+ );
+
+ context.render(
+ <Markup type="html" markup='<x-component />' components={{ XComponent: XBar }} />
+ );
+
+ expect(context.output()).to.eql(
+ <div class="markup">
+ <div class="x-bar">hello bar</div>
+ </div>
+ );
+ });
+
  describe('allow-scripts option', () => {
  before( () => {
  window.stub = sinon.stub();