Skip to content

Instantly share code, notes, and snippets.

Avatar
🦊
write, the codes

Jason Miller developit

🦊
write, the codes
View GitHub Profile
View *preact-async-component.md

AsyncComponent for preact

This is the guts of preact-cli's import X from 'async!./x' feature, extracted into a standalone library.

It creates a wrapper component that, when rendered, lazy-loads your real component. While loading, any SSR'd DOM is preserved intact.

Option 1: lazy()

This is the API of React.lazy() or preact-iso's lazy(), but it does not use Suspense.

View *Rendering Interactive HTML using Preact.md

Rendering Interactive HTML using Preact

It's possible to render HTML in Preact using the dangerouslySetInnerHTML prop, however doing so bypasses the Virtual DOM entirely. This may be reasonable for static HTML, but interactivity can be a little painful to graft on without VDOM.

There is another technique available that melds HTML to Virtual DOM without such limitations.

Enter DOMParser

View *jsx.js.md

Horrible JSX Transform

import { jsx } from './jsx.js';

const out = jsx(`
  const App = props => (
    <div class="app">
      <h1>Hello {"World"}</h1>
      <ul>{['a','b','c'].map(item => <li>{item}</li>)}</ul>
View preact-google-translate-patch.js
import { options } from 'preact';
// Fix Preact rendering when Google Translate breaks the DOM
const FONT_AS_TEXT = {
localName: {
value: null
},
nodeType: {
value: 3
},
View *ensure-shadow-root.js
/**
* Usage:
* class FancyButton extends HTMLElement {
* constructor() {
* super();
* ensureShadowRoot(el);
* // if a declarative shadow root was present, it'll be here:
* console.log(this.shadowRoot);
* }
* }
View getInnerHTML-polyfill.js
if (!Element.prototype.getInnerHTML) {
Element.prototype.getInnerHTML = function(opts) {
var html = this.innerHTML;
if (!opts || !opts.includeShadowRoots) return html;
var m = new (self.WeakMap || Map)();
for (var c of (opts.closedRoots || [])) m.set(c.host, c);
var p = [];
function walk(node) {
var c, shadow = node.shadowRoot || m.get(node);
if (shadow) p.push(node.innerHTML, `<template shadowroot="${shadow.mode}">${shadow.innerHTML}</template>`);
View clone-with-shadow-roots.js
/**
* cloneNode(true), but also clones shadow roots.
* @param {Element}
* @param {ShadowRoot[]} [shadowRoots] Any closed shadow roots passed here will be included.
*/
function cloneWithShadowRoots(node, shadowRoots) {
function walk(node, clone) {
let shadow = node.shadowRoot || shadowRoots.find(r => r.host === node);
if (shadow) {
clone.attachShadow({ mode: shadow.mode }).append(...[].map.call(shadow.childNodes, c => c.cloneNode(true)));
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 *webpack-plugin-modern-npm.md

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.

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