Skip to content

Instantly share code, notes, and snippets.

Avatar
🦊
write, the codes

Jason Miller developit

🦊
write, the codes
View GitHub Profile
View *Preact Progressive Hydration.md

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 webpack.md

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
      autoBabel(),
View *greenlet-node.md

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

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

View *resolve-export-map.md

resolve-export-map

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

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

Polkompress

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

View tiny-console.js
(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>
View *Module Workers Polyfill.md

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

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.

@developit
developit / worlds-worst-jsx-transform.js
Created May 18, 2020
worlds-worst-jsx-transform.js
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.