developit

import { h, Component } from 'preact';
import Markup from 'preact-markup';
import register from './preact-custom-element';

// just a proxy component: WC -> Preact -> WC
const A = () => <x-b foo="initial foo from <x-a>" />;

// stateful component that can re-render
class B extends Component {
  render(props, state) {

gaearon

/*
  This replaces <Sequencer> + multiple <Sampler>s with a marble diagram sequencer.
  You can use it like this:

      <Marble
        resolution={16}
        samples={[
          'samples/kick.wav',
          'samples/snare.wav',
        ]}

ilfroloff

const ABORTABLE_ERROR_KEY = '__abortablePromise';

/**
 * @typedef {Promise.<*>} AbortablePromise
 *
 * @property {function} abort       Additional method for abort original promise
 */

/**
 *

iammerrick

import React from 'react';

const toPromise = (load) => (new Promise((resolve) => (
  load(resolve)
)));

class LazilyLoad extends React.Component {

  constructor() {
    super(...arguments);

acdlite

// getComponent is a function that returns a promise for a component
// It will not be called until the first mount
function asyncComponent(getComponent) {
  return class AsyncComponent extends React.Component {
    static Component = null;
    state = { Component: AsyncComponent.Component };

    componentWillMount() {
      if (!this.state.Component) {
        getComponent().then(Component => {

addyosmani

Route-based chunking

Many of us building single-page apps today use JavaScript module bundling tools that trend towards a monolithic "bundle.js" file including the full app and vendor code for multiple routes. This means if a user lands on any arbitrary route they need to wait for a large bundle of JS to be fetched, parsed and executed before the application is fully rendered and interactive.

This is a little backwards, especially when apps are used under real-world network (3G) and device

surma

// Implements stale-while-revalidate
self.addEventListener('fetch', event => {
  const cached = caches.match(event.request);
  const fetched = fetch(event.request);
  const fetchedCopy = fetched.then(resp => resp.clone());

  // Call respondWith() with whatever we get first.
  // If the fetch fails (e.g disconnected), wait for the cache.
  // If there’s nothing in cache, wait for the fetch. 
  // If neither yields a response, return a 404.

bevacqua

import { Component, PropTypes } from 'react'
import { noop } from 'lodash'
import raf from 'raf'

const cache = new Map()

export function createNonBlockingRenderLoop({ key, concurrencyLevel = 1 }) {
  if (cache.has(key)) {
    return cache.get(key)
  }

ryanflorence

import React, { PropTypes, Component } from 'react'
import { getRef, listToArray } from '../utils/firebase'
import { ErrorMessage, Loading } from '../Theme'

/*

```js
<Ref path="/somewhere">
  {({ error, loaded, value }) => (
    // `value` is an object w/ keys

eiriklv

/**
 * WHY? - BECAUSE EXCEPTIONS/TRY/CATCH IS A GLOBAL HORRIBLE MESS :-(
 * Check out error handling in golang: https://blog.golang.org/error-handling-and-go
 */

/**
 * Wrap an "unsafe" promise
 */
function safePromise(promise) {
  return promise