developit

Simple, unobtrusive add-on to support String refs in Preact, without needing to pull in preact-compat.

Option 1: Add-on

Calling linkRef(componentInstance, refName) returns a "ref proxy" function, which sets this.refs[refName] when called.

import { h, Component } from 'preact';
import linkRef from './linked-ref';

developit

import { h } from 'preact';

export default function cloneElement(vnode, props, ...children) {
  return h(
    vnode.nodeName,
    extend(extend({}, vnode.attributes || {}), props),
    children.length ? children : vnode.children
  );
}

developit

function fireEvent(element, type) {
	let e = document.createEvent('Event');
	e.initEvent(type);
	element.dispatchEvent(e);
}

tj

let rows = {}

export default function(props = [], state = []) {
  return function(target) {
    const proto = Object.create(target.prototype)

    proto.shouldComponentUpdate = function(newProps, newState) {
      let id = (this._update_id = this._update_id || Math.random())

developit

var document = global.document = createDocument();
export default document;

function createDocument() {
	const NODE_TYPES = {
		ELEMENT_NODE: 1,
		ATTRIBUTE_NODE: 2,
		TEXT_NODE: 3,
		CDATA_SECTION_NODE: 4,
		ENTITY_REFERENCE_NODE: 5,

iammerrick

<Ratio width={Ratio.OPTIONS.FLUID} x={3} y={4}>
  {(width, height) => (
    <Chart id={this.props.id} width={width} height={height} />
  )}
</Ratio>

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

PaulBGD

/// <reference path="typings/preact.d.ts"/>

import {h} from 'preact';

export function createElement<P>(type: any, props?: P, ...children: any[]): any {
    return h(type, props, children);
}

ryanflorence

const markdownIt = require('markdown-it')
const frontMatter = require('front-matter')
const Prism = require('prismjs')

const aliases = {
  'js': 'jsx',
  'html': 'markup'
}

const highlight = (str, lang) => {