treshugart

const done = () => {}
const indent = (depth, info) => [...Array(depth)].reduce(p => `${p}  `, '') + info;
const reporter = {
  fail: ({ depth, message, name }) => {
    console.info(indent(depth, `✗ ${name}`));
    console.error(indent(depth + 1, message));
  },
  pass: ({ depth, name }) => console.info(indent(depth, `✓ ${name}`)),
  suite: ({ depth, name }) => console.info(indent(depth, name)),
  test: () => {}

treshugart

import hify from './create-element';
import React from 'react';
import { render } from 'react-dom';

const h = hify(React.createElement.bind(React));

class Test extends HTMLElement {
  static observedAttributes = ['attr']
  attributeChangedCallback (name, oldValue, newValue) {
    this.innerHTML = `Hello, ${this.getAttribute('attr')}!`;

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 {

treshugart

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

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

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

import { Component, h } from 'skatejs';

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

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

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

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/[\^~].*//'