Nikolai Sivertsen nsivertsen

Preact: Progressive Hydration

Preact now supports seamless progressive hydration.

Any component can throw during hydration (or new tree creation like a route change!), and if a component somewhere higher in the tree catches that via componentDidCatch, hydration gets paused.

Re-rendering the tree (via setState, etc) simply resumes hydration where it left off.

Polkompress

A tiny zero-dependency compression middleware for polka (& express!) with native Brotli support.

Proposal: Importable Constructable Stylesheets

We're getting Constructable Stylesheets. This seems like an intuitive value to obtain when importing CSS from JavaScript, since it's the DOM's representation of a Stylesheet:

import stylesheet from './style.css';
console.log(stylesheet);  // CSSStyleSheet

No such system is in place to allow this to work (see [whatwg/loader]), however frontend build tooling has congregated around this approach as a mechanism for bringing CSS assets into the JavaScript module graph. There are many benefits to be obtained from moving CSS into this graph, however the most important is that imported CSS can be attributed to the consuming JS Module. This allows it to be bundled, optimized, and potentially dead-code-eliminated leveraging static analysis performed on the surrounding module graph.

	// Lexer

	#define TOK_CHAR(ch1, tok1) \
	case ch1: \
	next_ch(); \
	tok = TOK_##tok1; \
	tok_prec = 0; \
	break;

	#define TOK_EXPR(ch1, tok1, prec1, lexpr1, rexpr1) \

	import React, { useEffect } from "react"

	import { META_DESCRIPTION } from "../../util"

	export const Page: React.FC<{
	title?: string
	metaDescription?: string
	}> = props => {
	useEffect(() => {
	document.title = props.title ?? "Execute Program"

	export const h=(t,p,...c)=>({t,p,c,k:p&&p.key})
	export const render=(e,d,t=d.t\|\|(d.t={}),p,r,c,m,y)=>
	// arrays
	e.map?e.map((e,p)=>render(e,d,t.o&&t.o[p])):
	// components
	e.t.call?(e.i=render((render.c=e).t(Object.assign({children:e.c},e.p),e.s=t.s\|\|{},t=>
	render(Object.assign(e.s,t)&&e,d,e)),t.i\|\|d,t&&t.i\|\|{}),d.t=t=e):(
	// create notes
	m=t.d\|\|(e.t?document.createElement(e.t):new Text(e.p)),
	// diff props

	/*
	Copy this into the console of any web page that is interactive and doesn't
	do hard reloads. You will hear your DOM changes as different pitches of
	audio.

	I have found this interesting for debugging, but also fun to hear web pages
	render like UIs do in movies.
	*/

	const audioCtx = new (window.AudioContext \|\| window.webkitAudioContext)()

	{
	"name": "rsms dark v2 mono",
	"author": "rsms",
	"variables": {
	"red": "hsl(5, 0%, 50%)",
	"orange": "hsl(27, 0%, 50%)",
	"yellow": "hsl(60, 0%, 50%)",
	"green": "hsl(150, 0%, 43%)",
	"cyan": "hsl(180, 0%, 50%)",
	"blue": "hsl(210, 0%, 50%)",

	module.exports = (babel, options = {}) => {
	const { types: t } = babel;

	return {
	name: "optimize-tagged-templates",
	visitor: {
	TemplateLiteral(path) {
	for (let i=0; i<path.node.expressions.length; i++) {
	const expr = path.node.expressions[i];
	let isLiteral = t.isStringLiteral(expr);