Skip to content

Instantly share code, notes, and snippets.

View developit's full-sized avatar
🦊
write, the codes

Jason Miller developit

🦊
write, the codes
View GitHub Profile
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
developit / preact-deep-force-update.js
Last active March 21, 2017 14:05
Recursively invoke forceUpdate() on a tree of components. Demo: https://jsfiddle.net/developit/642ctu04/
/** 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);
module.exports = require("modify-babel-preset")("es2015", {
"transform-es2015-modules-commonjs": false,
"external-helpers": true
});
@developit
developit / deferred.js
Last active July 9, 2016 18:19 — forked from tec27/deferred.js
An extension of ES6 Promises that allows for easier deferred resolution/rejection
export class Deferred extends Promise {
constructor(executor) {
super( (resolve, reject) => {
this.resolve = resolve;
this.reject = reject;
if (executor) executor(resolve, reject);
});
}
}
@developit
developit / framed.js
Last active February 23, 2018 03:39
<Framed /> component. Demo: https://jsfiddle.net/developit/8bb0aejg/
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 {
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);
This file has been truncated, but you can view the full file.
[{"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
developit / example.js
Last active February 16, 2026 16:23
Preact + Web Components = <333 Demo: http://www.webpackbin.com/VJyU9wK5W
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
developit / _Dead Simple Fetch Caching.md
Created August 28, 2016 15:36
Dead simple fetch caching

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
developit / _preact-pure-component.md
Created September 7, 2016 14:14
pure-component for Preact

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