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

webpack-plugin-modern-npm

Automatically transpile modern packages in node_modules.

Available in 3 fun flavours: plugin, loader and loader factory.

Plugin

Add the plugin to your webpack config, and it should handle everything for you.

developit

Greenlet for Node worker_threads

Works with ESM and CommonJS.

import greenlet from 'greenlet-node';

const add = greenlet(async (a, b) => {
  return a + b;
});

developit

package-lock.json
node_modules
.cache
dist

developit

developit

Unistore Hooks for Preact

Experimental hooks-based bindings for Unistore. Available on npm:

npm i unistore-hooks

Note: this should also work with React, just alias "preact" and "preact/hooks" to "react" in your bundler.

Usage

developit

resolve-export-map

import { resolveExportMap } from 'resolve-export-map';

const demoMeta = {
  exports: {
    '.': './index.mjs',
    './foo': {
 import: './dist/foo.mjs',

developit

Polkompress

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

developit

(function(c,b,cs,r,d){
  b.frameBorder=0;
  b.style = 'position:fixed;bottom:0;left:0;width:100%;height:30vh;background:#fff;border-top:4px solid #bbb;box-shadow:0 0 2px #000;z-index:999;cursor:ns-resize;';
  b.onpointerdown=function(e){b.setPointerCapture(e.pointerId);b.e=e;b.h=b.offsetHeight-4;b.style.borderTopColor='#59f'}
  b.onpointermove=function(e){if(b.e)b.style.height=(b.h-e.y+b.e.y)+'px'}
  b.onpointerup=function(){b.e=null;b.style.borderTopColor='#aaa'}
  document.documentElement.appendChild(b);
  (d=b.contentWindow.document).open();
  d.write('<style>html,body{width:100%;height:100%;overflow:hidden;font:12px/1.2 system-ui,sans-serif;flex:1;display:flex;flex-direction:column;margin:0;}*{box-sizing:border-box;}button{font:inherit;}pre{margin:0;padding:4px;border-bottom:1px solid #ddd;}</style><div style="background:#ddd;border-bottom:1px solid #ccc;display:flex;padding:3px 5px 4px;align-items:center;"><div style="color:#555;flex:1;">Console</div><button onclick="console.clear()">clear</button></div>

developit

Module Workers Polyfill

This is a 1.1kb polyfill for Module Workers.

It adds support for new Worker('..',{type:'module'}) to all modern browsers (those that support fetch).

Usage

Copy module-workers-polyfill.js to your web directory, then load it using an import or a script tag. It just needs to be loaded before instantiating your Worker.