developit

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.

developit

Polkompress

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

pervognsen

// 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) \

lukastaegert

export const rollupLogo = "./logo.svg";

garybernhardt

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"

developit

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

tomhicks

/*
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)()

rsms

{
  "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%)",

developit

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

developit

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.