These are the definition files generated from the SkateJS source, written in Flow, for both Flow and TypeScript.
Discover gists
# coding: utf-8 | |
from selenium import webdriver | |
import re | |
asins=[] | |
driver = webdriver.PhantomJS() | |
for page in range(1,3): |
Currently this is just a spike to see how to do a renderer in Skate for Glimmer.
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:
/** @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 = []; |
Right now, we have vdom.element()
and vdom.text()
. Currently they map directly off to Incremental DOM. However, we could create adaptors that could map to any backend. For example, we could serialise data to JSON that could be consumed by a web worker that returns diff / patch instructions for a different virtual DOM implementation.
In the same way we could keep support for Incremental DOM directly via a separate adaptor. This would allow us to create a server-renderer all without changing anything in our components' render()
functions. Consumers could leverage whatever vDOM implementation they want via separate modules that they just plug in to their components, or we could just create base-classes / composable functions they call on their definitions to apply support for whatever the plugin is.
Our functions could also attain the same API as Hyperscript / React so it'd inherently be compatible with current JSX transpilers.
const $slotRendered = Symbol(); | |
const Slot = (props, chren) => { | |
const { changed } = props; | |
function onSlotchange(e) { | |
const slot = e.target; | |
if (slot[$slotRendered]) { | |
if (changed) { | |
changed(slot); | |
} |