developit

const express = require('express');
const htm = require('htm');
const vhtml = require('vhtml');

// create an html`` tag function for vhtml:
const html = htm.bind(vhtml);

const App = (props) => html`
  <div class="app">
    <h1>This is an app</h1>

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

Modern Script Loading

Loading modern code for modern browsers while still supporting older browsers should be possible via module/nomodule:

<script type="module" src="/modern.js"></script>
<script nomodule src="/legacy.js"></script>

... however this results in over-fetching of scripts in Edge and Safari.

developit

🐻 valoo

just the bare necessities of state management.

Usage

Hotlink it from https://unpkg.com/valoo.

See Interactive Codepen Demo.

developit

export const h=(t,p,...c)=>({t,p,c,k:p&&p.key})
export const render=(e,d,t=d.t||(d.t={}),p,r,c,m,y)=>
  // arrays
  e.map?e.map((e,p)=>render(e,d,t.o&&t.o[p])):
  // components
  e.t.call?(e.i=render((render.c=e).t(Object.assign({children:e.c},e.p),e.s=t.s||{},t=>
    render(Object.assign(e.s,t)&&e,d,e)),t.i||d,t&&t.i||{}),d.t=t=e):(
  // create notes
  m=t.d||(e.t?document.createElement(e.t):new Text(e.p)),
  // diff props

developit

import { useSignal, signal, effect } from '@preact/signals';
import { useLayoutEffect, useMemo, useRef } from 'preact/hooks';

/** @template T @typedef {T extends (infer U)[] ? U : never} Items */

/** @param {{ v, k?, f }} props */
const Item = ({ v, k, f }) => f(v, k);

/**
 * Like signal.value.map(fn), but doesn't re-render.

developit

import { createContext } from 'preact';
import { useContext, useRef, useMemo, useState, useLayoutEffect } from 'preact/hooks';

function createSlotContext() {
	const slots = {};
	const owners = {};
	const subs = [];
	const sub = (name, fn) => {
		const e = [name, fn];
		subs.push(e);

developit

import regexparam from 'https://unpkg.com/regexparam@1/dist/regexparam.mjs';

/**
 * <url-route href="/profile/:user">
 *   <div>some content here</div>
 * </url-route>
 */
customElements.define('url-route', class UrlRoute extends HTMLElement {
  connectedCallback() {
    this.route = regexparam(this.getAttribute('href'));

developit

import { h, hydrate, Component } from 'preact';

function interopDefault(mod) {
	return mod && mod.default || mod;
}

export function ServerHydrator({ load, ...props }) {
	const Child = interopDefault(load());
	return (
		<section>

developit

Standalone forwardRef

import { forwardRef } from 'preact-forwardref';

const Foo = forwardRef((props, ref) => {
  return <div ref={ref} />
});

render( console.log(div)} /&gt;, document.body);