Skip to content

Instantly share code, notes, and snippets.

write, the codes

Jason Miller developit

write, the codes
View GitHub Profile
View *Preact Progressive

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.

View *automatic babel for npm deps in

Automatically transpile modern packages in node_modules

const autoBabel = require('./webpack-babel-modern-npm');

module.exports = {
  module: {
    rules: [
      // auto-transpile modern stuff found in node_modules
View *

Greenlet for Node worker_threads

Works with ESM and CommonJS.

import greenlet from 'greenlet-node';

const add = greenlet(async (a, b) => {
  return a + b;
View preact.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View *

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.


View *


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

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


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

View tiny-console.js
b.frameBorder=0; = '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;';
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>
View *Module Workers

Module Workers Polyfill npm version

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


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.

developit / worlds-worst-jsx-transform.js
Created May 18, 2020
View worlds-worst-jsx-transform.js
* Write JSX, but make sure you have `import html from 'htm/preact'` in your files.
* Run them through this horrid attrocity and get JSX support with basically no overhead.
export function transformJsxToHtm(code) {
const tokenizer = /(^|)(?:<\/([a-z$_][a-z0-9_.-:]*)>|<([a-z$_][a-z0-9_.-:]*)(\s+[a-z0-9._-]+(?:=(?:".*?"|'.*?'|\{.+?\}))?)*(\s*\/\s*)?>|<(\/?)>)/gi;
let out='', index=0, token;
let depth = 0;
let stacks = [];
let shouldPop = false;
You can’t perform that action at this time.