Discover gists

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)

Flow / TypeScript definition files

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

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:

	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.

	# coding: utf-8

	from selenium import webdriver
	import re

	asins=[]

	driver = webdriver.PhantomJS()

	for page in range(1,3):

	/** @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

 const _context = Symbol();
 let currentContext = null;
 function getContext (elem) {
   elem.dispatchEvent(new Event('__context', {
     bubbles: true,
     cancelable: true,
     composed: true,
     scoped: true
   }));

	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 {

	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: () => {}

	document.reduce = Element.prototype.reduce = function(cb) {
	const filter = node => cb(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;

	// Old IE requires a function other browsers require { acceptNode }.
	filter.acceptNode = filter;

	// Old IE requires the last parameter.
	const walker = document.createTreeWalker(this, NodeFilter.SHOW_ELEMENT, null, false);

	const nodels = [];