Jason Miller developit

[based on a true story]

So. Your friend's about to teach you how to make a website. Great!

You make a file, and you save it as 'index.html'. Why it's called 'index' isn't really explained to you, but whatever.

You type the following.

hello world

Notes

The client must help create applications that are very small. This means not only should the runtime be small, but also the query artifacts that will be included in the bundle. Including the entire query AST could be counter to this goal. Other options are only including the query text, or only including a query identifier (persisted queries) in the bundle.
In order to serve the first principle queries must be statically defined outside of JavaScript. GraphQL AST “selection sets” should be transformed into minimal viable data shape representations to inform the client. These transformed “data shapes” can be imported and used by the client.
Static type checking of query data should be a feature of the client and not an afterthought. GraphQL is statically typed after all. Since we are building query files, and importing the built artifcats adding types should be easy.
Data from newer queries must be merged with data from older queries automatically so the UI stays consistent.

	/** Async version of Array.prototype.reduce()
	* await reduce(['/foo', '/bar', '/baz'], async (acc, v) => {
	* acc[v] = await (await fetch(v)).json();
	* return acc;
	* }, {});
	*/
	export async function reduce(arr, fn, val, pure) {
	for (let i=0; i<arr.length; i++) {
	let v = await fn(val, arr[i], i, arr);
	if (pure!==false) val = v;

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

	/**
	* <Views view="home">
	* <Home name="home" />
	* <Other name="other" />
	* </Views>
	*/
	class Views extends Component {
	state = {

	/**
	* Normalizes recursive VNode lists by flattening all nodes, filtering out `null` children and converting strings to
	* text nodes.
	*/
	export function normalizeVNodes(nodes: VNodeRecursiveList): VNode<any>[] {
	for (let i = 0; i < nodes.length; i++) {
	const n = nodes[i];

	if (n === null \|\| Array.isArray(n)) {
	let copy = nodes.slice(i);

	import { h, Component } from 'preact';

	/**
	* <SplitPoint load={require('bundle?lazy!./foo')} fallbackContent={(
	* <div class="loading" />
	* )} />
	*/
	class SplitPoint extends Component {
	componentWillMount() {
	let cb = this.linkState('child'),

	function ssr(req, res, url) {
	let user = req.user //comes from passport
	const preloadedState = { user, url } // Compile an initial state
	const store = configureStore(preloadedState) // Create a new Redux store instance
	const html = render(<Provider store={store}><Html /></Provider>) // Render the component to a string
	const finalState = store.getState() // Grab the initial state from our Redux store
	res.send(renderFullPage(html, finalState)) // Send the rendered page back to the client
	}

	function renderFullPage(html, preloadedState) {

	// The problem looks like a race condition, because I'm doing the following. isLoading can change pretty quickly

	{!isLoading && <AutoSizer disableWidth>{({ height }) => <div>{height}</div>}</AutoSizer>}

	import { options } from 'preact';

	let old = options.vnode;
	options.vnode = vnode => {
	if (!vnode.nodeName) throw Error('Undefined component');
	old(vnode);
	};

	[].filter.call(document.querySelectorAll('*'), el => {
	if (el._component) {
	var p = el._priority = el.offsetHeight ? (1 - el.getBoundingClientRect().top/window.innerHeight) : -1;
	if (p>0) {
	el.setAttribute('data-priority', p);
	return true;
	}
	}
	});