Instantly share code, notes, and snippets.

View create-gif.js
function createGif(width, height) {
const b64wh = btoa(
String.fromCharCode(width & 0xFF) +
String.fromCharCode(width >> 8 & 0xFF) +
String.fromCharCode(height & 0xFF) +
String.fromCharCode(height >> 8 & 0xFF) +
String.fromCharCode(0) +
String.fromCharCode(0)
)
return `R0lGODlh${b64wh}ACwAAAAAAQABAAAC`
View create-gif.js
function createGif(width, height) {
const buffer = new ArrayBuffer(24)
const byteView = new Uint8Array(buffer)
// signature
byteView.set([ 71, 73, 70, 56, 57, 97 ], 0)
// size
byteView.set([width, width >> 8], 6)
byteView.set([height, height >> 8], 8)
View dropdown-menu.js
class DropdownMenu {
state = {
isMenuOpened: this.props.isMenuOpened
}
static defaultProps = {
togglerLabel: 'Show menu'
}
componentDidMount() {
View editor.js
const Editor = () => {
const update = (e, actions) => {
// strip html and get the text only
const source = e.target.innerText
// parse text into tokens stored in `state.tokens`
actions.parse(source)
}
// render tokens to vnodes
View example.js
import { Route, RouterEvents } from './router-exts'
const TrackScreen = html`
<section class="track-screen'
onenter=${() => console.log('enter track screen')}
onleave=${() => console.log('leave track screen')}
></section>
`
const HomeScreen = html`
View readme.md

The aim of hydratation is to avoid trashing out of existing DOM rendered by SSR, but use them and attach eventual event listeners (like a regular patch pass).

Hydratation would happen at the app level and at the first render. Basically it needs a way to know that some part of the DOM tree is something to patch so it does not have to mount.

Before going on, some terminology:

  • The root is the root DOM node generated by HyperApp, the toplevel DOM element.
  • The host is the DOM node that will hold the root, it's currently defined as app.root.
View recyling.js
/**
* Having a constructor tells the VM that this object as a given "shape".
* If this shape is constant, all the code manipulating it will eventually
* be optimized into specialized stubs. This has a HUGE performance impact
* and that's why sometimes JavaScript can be so close to the metal.
*/
function VNode(tag, data, children) {
this.tag = tag
this.data = data
this.children = children || []
View type-feedback-leak.js
// Need to generate core of the benchmark dynamically to ensure
// that type feedback does not leak between individual sample runs.
var code = " /* " + (UID++) + " */ " + " for (var i = 0; i < N; i++) {" +
" var obj = arr[i];" +
" result += obj.x + obj.y + i;" +
"}" +
"return result";
View output.txt
v6.5.0
3.10.3
/Users/ngryman/Projects/arbre
├─┬ babel-plugin-istanbul@2.0.1
│ ├─┬ find-up@1.1.2
│ │ └─┬ pinkie-promise@2.0.1
│ │ └── pinkie@2.0.4
│ ├─┬ istanbul-lib-instrument@1.1.1
│ │ ├─┬ babel-generator@6.14.0
│ │ │ └─┬ detect-indent@3.0.1
View index.js
'use strict'
const browserify = require('browserify')
const concat = require('concat-stream')
const delay = require('delay')
const fs = require('fs')
const incremental = require('browserify-incremental')
const forceMode = '--force' === process.argv[2]