developit

import { h, Component } from 'preact';
import { describe, it } from 'mocha';
import chai, { expect } from 'chai';
import jsxAssert from 'preact-jsx-chai';
chai.use(jsxAssert);

// example stateful list component
class List extends Component {
  state = {
    items: this.props.items || []

developit

/** Invoke `.forceUpdate()` on a component and all descendants. */
export default function deepForceUpdate(component) {
  component.forceUpdate();

  // high-order child recursion
  if (component._component) {
    deepForceUpdate(component._component);
  }
  else if (component.base) {
    updateComponentsFromDom(component.base);

developit

module.exports = require("modify-babel-preset")("es2015", {
  "transform-es2015-modules-commonjs": false,
  "external-helpers": true
});

developit

export class Deferred extends Promise {
  constructor(executor) {
    super( (resolve, reject) => {
      this.resolve = resolve;
      this.reject = reject;
      if (executor) executor(resolve, reject);
    });
  }
}

developit

import { h, Component, render } from 'preact';

/** Renders its children inside an iframe.
 *  @example
 *    <Framed>
 *      This is all rendered into
 *      <strong>an iframe!</strong>.
 *    </Framed>
 */
export default class Framed extends Component {

developit

function shallowEqual(a, b) {
	if (a!==b) {
		for (let i in a) if (a[i]!==b[i]) return false;
		for (let i in b) if (!(i in a)) return false;
	}
	return true;
}

export function shouldComponentUpdate(props, state) {
	return !shallowEqual(props, this.props) || !shallowEqual(state, this.state);

developit

[{"pid":84686,"tid":17667,"ts":226916098163,"ph":"X","cat":"toplevel","name":"MessagePumpLibevent::OnLibeventNotification","args":{"fd":3},"dur":83,"tdur":35,"tts":3734},
{"pid":84686,"tid":17667,"ts":226916098203,"ph":"X","cat":"ipc,toplevel","name":"ChannelReader::DispatchInputData","args":{"class":61,"line":61},"dur":38,"tdur":14,"tts":3753,"bind_id":"0xb32d5c02","flow_in":true},
{"pid":84686,"tid":17667,"ts":226916598252,"ph":"X","cat":"toplevel","name":"MessagePumpLibevent::OnLibeventNotification","args":{"fd":3},"dur":42,"tdur":20,"tts":3779},
{"pid":84686,"tid":17667,"ts":226916598269,"ph":"X","cat":"ipc,toplevel","name":"ChannelReader::DispatchInputData","args":{"class":61,"line":61},"dur":20,"tdur":10,"tts":3787,"bind_id":"0xb32de502","flow_in":true},
{"pid":84686,"tid":17667,"ts":226917098451,"ph":"X","cat":"toplevel","name":"MessagePumpLibevent::OnLibeventNotification","args":{"fd":3},"dur":78,"tdur":32,"tts":3813},
{"pid":84686,"tid":17667,"ts":226917098483,"ph":"X","cat":"ipc,toplevel","name":"Ch

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

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)

developit

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';