Jason Miller developit

Dead Simple Fetch Caching

Wrap fetch() in a memoize.

Not only does this cache repeated requests for the same resource, it also de-dupes concurrent requests!

Notes:

Caching the raw response object doesn't work, since the response body is a stream and can thus only be read once
Instead, cache your already read body (optionally still including the original request, just read the body prior)

pure() can be used as a higher order function or a decorator.

When passed a pure functional component, it wraps the function in a classful Component with a shouldComponentUpdate() that ignores renders for unchanged props.

When passed a classful Component, it injects a shouldComponentUpdate() method into the Component's prototype that ignores renders for unchanged props & state.

Functional Example

import pure from 'pure-component';

Experiment: Backbone-style events in Preact

What if we wanted to use backbone-style event delegation within the component paradigm afforded by react/preact/etc? Would that be useful?

Example

Basic usage:

DraftJS Preact Demo

Start

npm install

npm start

Go to localhost:8080

	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) {

	import { Component } from 'react'
	import { createStore, combineReducers } from 'redux'
	import parseLinkHeader from 'parse-link-header'

	const START = 'start'
	const SUCCEED = 'succeed'
	const ERROR = 'error'

	const inflight = (state={}, action) => (
	((state) => (

	// 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 => {

	// HoC
	// localize({ a:'b' })(MyFoo)
	const localize = dict => Child => class Connected extends Component {
	getChildContext() {
	return { dict }
	}
	render(props) {
	return <Child {...props} />
	}
	}

	/** Use the built-in document viewer in devtools to inspect your VDOM.
	* Usage in console:
	* viewComponentTree(document.body)
	*/
	function viewComponentTree(node) {
	let doc = new DOMParser().parseFromString('', 'application/xml');
	function visitor(dom) {
	let el, c;
	if (dom instanceof Node) {
	el = dom.cloneNode();

	<!--

	What?

	HTML Starter Template for rock-solid Web Apps

	Where?

	Get the latest template here: https://gist.github.com/matthewmueller/cb33e2c5f6834511cd45f17b59271052