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

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

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

treshugart

Flow / TypeScript definition files

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

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

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

/** @jsx h */

// You only need custom elements for this!!!
import 'skatejs-web-components/src/native-shim';
import { Component, define, h, prop } from 'skatejs';
import ShadowNode, { scopeCss, scopeTree } from './shadow-node';

// Converts real DOM nodes into Incremental DOM nodes.
//
// This is orthogonal to this gist, but makes it so we can distribute real

treshugart

const _context = Symbol();
let currentContext = null;

function getContext (elem) {
  elem.dispatchEvent(new Event('__context', {
    bubbles: true,
    cancelable: true,
    composed: true,
    scoped: true
  }));

treshugart

import React, { Component } from 'react';
import styled from 'styled-components';
import { mount } from 'enzyme';

describe("A suite", function() {
  it("should select an element using standard and non-standard DOM attributes", function() {
    const StyledComponent = styled.div`
      background-color: black;
    `;
    class Test extends Component {