treshugart

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:

treshugart

Flow / TypeScript definition files

These are the definition files generated from the SkateJS source, written in Flow, for both Flow and TypeScript.

treshugart

git show-branch | grep '*' | grep -v "$(git rev-parse --abbrev-ref HEAD)" | head -n1 | sed 's/.*\[\(.*\)\].*/\1/' | sed 's/[\^~].*//'

treshugart

Trying to attempt a similar pattern in Web Components that was done here in React. Props to James Kyle for the original idea :)

treshugart

import { Component, h } from 'skatejs';

class Deferred extends Component {
  renderCallback () {
    return <span>Yay! Loaded!!!</span>;
  }
}

customElements.define('x-deferred', Deferred);

treshugart

const $slotRendered = Symbol();
const Slot = (props, chren) => {
  const { changed } = props;

  function onSlotchange(e) {
    const slot = e.target;
    if (slot[$slotRendered]) {
      if (changed) {
        changed(slot);
      }

treshugart

This allows you to define a custom element declaratively in HTML using lit-html and SkateJS. Ideally you wouldn't need either, but they exemplify what a platform-like solution could look like that gives you:

• One-way attribute to property reflection.
• Semantic props (i.e. boolean)
• Functional rendering pipeline, like a vDOM (lit-html)

treshugart

import React, { Component } from 'react';
import { render } from 'react-dom';
import { props, withProps } from 'skatejs/esnext/with-props';
import { withRender } from 'skatejs/esnext/with-render';

// This is the React renderer mixin.
const withReact = Base => class extends withRender(withProps(Base || HTMLElement)) {
  get props () {
    // We override props so that we can satisfy most use
    // cases for children by using a slot.

treshugart

const express = require('express');
const app = express();

const delay = (...args) =>
  args.reduce(
    (prev, curr) =>
      prev.then(() => new Promise(yey => setTimeout(() => yey(curr()), 2000))),
    Promise.resolve()
  );

treshugart

Declarative / composed Shadow DOM

This is a light proposal for Shadow DOM (no pun intended). The purpose of this proposal is to flesh out how we can take the current state of Shadow DOM and allow certain aspects of it to be used separately and composed together. The goals are:

1. Being able to use CSS encapsulation separately from DOM encapsulation (SSR is one beneficiary of this)
2. Being able to enable DOM encapsulation on a previously CSS-only encapsulated node (rehydration)
3. Maintaining backward compatibility

CSS-only encapsulation