developit

import { options } from 'preact';

// Fix Preact rendering when Google Translate breaks the DOM
const FONT_AS_TEXT = {
  localName: {
    value: null
  },
  nodeType: {
    value: 3
  },

developit

/**
 * Usage:
 * class FancyButton extends HTMLElement {
 *   constructor() {
 *     super();
 *     ensureShadowRoot(el);
 *     // if a declarative shadow root was present, it'll be here:
 *     console.log(this.shadowRoot);
 *   }
 * }

developit

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

developit

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

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