tbranyen

it('will hold off rendering until detached (during replace) promise resolves', () => {
  const promise = Promise.resolve();
  const { use, innerHTML, addTransitionState } = diff;
  const { fixture } = this;

  // Run each assertion after a successful render.
  const assertions = [
    () => ok(fixture.querySelector('p')),
    () => {
      equal(fixture.querySelector('p'), null);

tbranyen

import React, { Component, PropTypes } from 'react';
import htr from 'hooks-theme-refs';

export class Chip extends Component {
  render() {
    const { label, hooks, theme, refs, children, ...rest } = htr(this);

    return (
      <div {...rest} className={theme.chip} onClick={hooks.onClick} ref={refs.chip}>
        {children}

tbranyen

// Documentation for authoring middleware in diffHTML v1.0

// Usage of the middleware we'll write below, I added it up top, since it's a
// single line:
diff.use(myFirstMiddleware());

// To make a diffHTML middleware, start by creating a normal function that
// accepts options. We don't need to configure our middleware yet, but we want
// to keep all middleware consistent with this convention.
functon myFirstMiddleware(options = {}) {

tbranyen

import { html } from 'diffhtml';
import { WebComponent, PropTypes } from 'diffhtml-components';

export default class DevtoolsPanels extends WebComponent {
  static propTypes = {
    route: PropTypes.string,
    activeRoute: PropTypes.string,
  }

  render() {

tbranyen

toggleExpanded() {
  this.setState({ isExpanded: !this.state.isExpanded });

  // Close siblings w/o needing a store or global container!
  [...this.parentNode.children].filter(x => x !== this).forEach(row => {
    row.setState({ isExpanded: false });
  });
}

tbranyen

import { createTree, innerHTML } from 'diffhtml';

class Display {
  render({ message, children }) {
    return [
      <li>{message}</li>,
      ...children,
    ];
  }
}

tbranyen

import { html } from 'diffhtml';
import { WebComponent } from 'diffhtml-components';

class CocktailEditor extends WebComponent(['recipe']) {
  render() {
    return html`${this.state.markup}`;
  }

  constructor() {
    super();

tbranyen

import { html, innerHTML } from 'diffhtml';

// Import arbitrary template engine...
import combyne from 'combyne';

// Create the combyne template instance and set context to be the component's props.
const combyneProcessor = props => text => combyne(text).render(props);

// Experimental stateful components.
class MyComponent {

tbranyen

Promise.makeCancellable = promise => {
  const deferred = {};
  const promise = new Promise((resolve, reject) => {
    deferred.reject = reject;

    // Invoke the fetch argument with the matching args... only resolve if not
    // aborted.
    promise
      .then(resp => !deferred.aborted && resolve(resp))
      .catch(ex => !deferred.aborted && reject(ex));

tbranyen

import { html } from 'diffhtml';
import { ReactiveElement } from 'diffhtml-components';

class DevtoolsNavigation extends ReactiveElement {
  styles(props, state) {
    return html`
      <style>
        :host {
          display: flex;
          height: 100%;