Merge pull request #6 from skatejs/match-to-skate-api

match to skate latest api and fix preact unmounting cleanup

src/index.js

@@ -9,14 +9,21 @@ export default (Base = HTMLElement) =>
       // cases for children by using a slot.
       return {
         ...super.props,
-        ...{ children: <slot /> }
+        ...{ children: <slot /> },
       };
     }
-    rendererCallback(renderRoot, renderCallback) {
+    renderer(renderRoot, renderCallback) {
+      this._renderRoot = renderRoot;
       this._preactDom = render(
         renderCallback(),
-        renderRoot,
-        this._preactDom || renderRoot.children[0]
+        this._renderRoot,
+        this._preactDom || this._renderRoot.children[0]
       );
     }
+    disconnectedCallback() {
+      super.disconnectedCallback && super.disconnectedCallback();
+      // Preact hack https://github.com/developit/preact/issues/53
+      const Nothing = () => null;
+      this._preactDom = render(<Nothing />, this._renderRoot, this._preactDom);
+    }
   };

test/index.test.js

@@ -4,22 +4,24 @@ import { Component, h } from 'preact';
 import withRenderer from '../src';
 
 class MyElement extends withRenderer() {
-  renderCallback({ name }) {
+  render({ name }) {
     return <div>Hello, {name}!</div>;
   }
 }
 customElements.define('my-element', MyElement);
 
 test('renders', () => {
-  function testContent(text) {
-    return `<div>Hello, ${text}!</div>`;
-  }
-
+  const testContent = text => `<div>Hello, ${text}!</div>`;
   const el = new MyElement();
+
   expect(el.innerHTML).toEqual('');
-  el.rendererCallback(el, el.renderCallback.bind(el, { name: 'World' }));
+
+  el.renderer(el, el.render.bind(el, { name: 'World' }));
+
   expect(el.innerHTML).toEqual(testContent('World'));
-  el.rendererCallback(el, el.renderCallback.bind(el, { name: 'Bob' }));
+
+  el.renderer(el, el.render.bind(el, { name: 'Bob' }));
+
   expect(el.innerHTML).toEqual(testContent('Bob'));
 });
 
@@ -35,7 +37,7 @@ test('wrappers', () => {
       super();
       this.attachShadow({ mode: 'open' });
     }
-    renderCallback() {
+    render() {
       return <PreactComponent {...this.props} />;
     }
   }
@@ -44,8 +46,47 @@ test('wrappers', () => {
 
   const el = new PreactComponentWrapper();
   const { shadowRoot } = el;
-  el.rendererCallback(shadowRoot, el.renderCallback.bind(el));
-  expect(shadowRoot.innerHTML).toEqual(
-    '<div>Hello, <slot></slot>!</div>'
-  );
+  el.renderer(shadowRoot, el.render.bind(el));
+
+  expect(shadowRoot.innerHTML).toEqual('<div>Hello, <slot></slot>!</div>');
+});
+
+test('wrappers cleanup', () => {
+  const didMountSpy = jest.fn();
+  const willUnmountSpy = jest.fn();
+  class PreactComponent extends Component {
+    render() {
+      return <div>Hello, {this.props.children}!</div>;
+    }
+    componentDidMount() {
+      didMountSpy();
+    }
+    componentWillUnmount() {
+      willUnmountSpy();
+    }
+  }
+
+  class PreactComponentWrapper extends withRenderer() {
+    constructor() {
+      super();
+      this.attachShadow({ mode: 'open' });
+    }
+    render() {
+      return <PreactComponent {...this.props} />;
+    }
+  }
+
+  customElements.define('preact-component-wrapper', PreactComponentWrapper);
+
+  const root = document.createElement('div');
+  let el = new PreactComponentWrapper();
+  root.appendChild(el);
+  const { shadowRoot } = el;
+  el.renderer(shadowRoot, el.render.bind(el));
+
+  expect(didMountSpy).toHaveBeenCalled();
+
+  root.removeChild(el);
+
+  expect(willUnmountSpy).toHaveBeenCalled();
 });