the-platform with the platform

example.js

import {LitElement, html} from 'lit-element';
import {UseWindowSize} from './useWindowSize.js';

class extends UseWindowSize()(LitElement) {
  render() {
    return html`
      <p>
        width: ${window.innerWidth}
        height: ${window.innerHeight}
      </p>
    `;
  }
}

useWindowSize.js

import throttle from 'lodash/throttle';

const onResize = Symbol();

export const UseWindowSize = (options = {}) => (base) => {
  const { throttleMs = 100 } = options;
  return class exrends base {
    
    [onResize] = throttle(() => {
      // We don't have a standard platform way to request a re-render,
      // but any base class implementing requestUpdate() will work
      this.requestUpdate();
    }, throttleMs););      
    
    connectedCallback() {
      if (super.connectedCallback) super.connectedCallback();
      window.addEventListener('resize', this[onResize]);
    }
    
    disconnectedCallback() {
      if (super.connectedCallback) super.disconnectedCallback();
      window.removeEventListener('resize', this[onResize]);
    }
  }
}

useWindowSize.js:7 — exrends ⇒ extends

typo in useWIndowsSize L21, should be:

      if (super.disconnectedCallback) super.disconnectedCallback();

I like the example a lot!