README.md

Glimmer SkateJS (web component) renderer

Currently this is just a spike to see how to do a renderer in Skate for Glimmer.

Rationale

Custom element support for Glimmer is currently minimal and Skate already has most of this stuff solved, and since it is web component DOM abstarction over renderers, it makes sense for Glimmer to be one of those targets.

Things to work out:

• How do we pass props to the glimmer component to re-render with?
• How can we define the glimmer component within the web component so renderCallback() can return the template to render?

glimmer-web-component.js

import { withRender } from 'skatejs';

export default class extends withRender() {
  static props = {
    app: null
  }
  rendererCallback (renderCallback, shadowRoot) {
    const { localName, props } = this;
    const { app, ...componentProps } = props;

    // This renders the glimmer component to the shadow root but I don't know
    // how to pass componentProps to Glimmer yet. But it's worth noting that
    // when componentProps change, this will be called again so we just need
    // a way to keep passing them in to the Glimmer component.
    if (app) {
      app.renderComponent(localName, shadowRoot);
    }
  }
}

usage.js

import { props } from 'skatejs';
import myGlimmerApp from './somewhere';
import GlimmerComponent from './the-code-above';

customElements.define('my-component', class MyComponent extends GlimmerComponent {
  // These are the attrs / props that can be passed to Glimmer (if we knew how).
  static props = {...GlimmerComponent.props, ...{
    name: prop.string
  }}

  // This can also be passed after construction.
  app = myGlimmerApp
});

const elem = new MyComponent();
document.body.appendChild(elem);