Skip to content

Instantly share code, notes, and snippets.

Avatar
🦊
write, the codes

Jason Miller developit

🦊
write, the codes
View GitHub Profile
View signal-utils.js
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.
View useSignalRef.js
/**
* useSignal, but works as a ref on DOM elements.
* @template T
* @param {T} value
*/
export function useSignalRef(value) {
const ref = /** @type {Signal<T> & { current: T }} */ (useSignal(value));
if (!('current' in ref)) Object.defineProperty(ref, 'current', refSignalProto);
return ref;
}
View *preact-options-helper.md
import { hook, OptionsTypes } from './preact-options-helper.ts';

hook(OptionsTypes.RENDER, (old, vnode) => {
    let component = vnode.__c;
    if (component) {
        // do stuff with the component instance
    } else {
        console.log(vnode.props);
 }
@developit
developit / index.html
Last active June 7, 2022 19:04
bare-bones exhaust() vs ternary #jsbench #jsperf #jsbench #jsperf (https://jsbench.github.io/#ec47bed3cf0e424b78bdbc4d71cdd3a3) #jsbench #jsperf
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>bare-bones exhaust() vs ternary #jsbench #jsperf #jsbench #jsperf</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="./suite.js"></script>
</head>
<body>
<h1>Open the console to view the results</h1>
@developit
developit / index.html
Last active June 7, 2022 18:55
exhaust() vs ternary #jsbench #jsperf (https://jsbench.github.io/#3b6dbcf299369a9916a06f2e338e74bb) #jsbench #jsperf
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>exhaust() vs ternary #jsbench #jsperf</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="./suite.js"></script>
</head>
<body>
<h1>Open the console to view the results</h1>
View *Preact Without Build Tools.md

Preact, Without Build Tools

This is a demonstration of using Preact without any build tooling. The library is linked from the esm.sh CDN, however a standalone JS file exporting HTM + Preact + Hooks can also be downloaded here.

View *Preact Root Fragment - replaceNode for Preact 11+.md

preact-root-fragment: partial root rendering for Preact

This is a standalone Preact 10+ implementation of the deprecated replaceNode parameter from Preact 10.

It provides a way to render or hydrate a Preact tree using a subset of the children within the parent element passed to render():

<body>
  <div id="root">  ⬅ we pass this to render() as the parent DOM element...
View entry.client.jsx
import ReactDOM from "react-dom";
import { RemixBrowser } from "remix";
// hydrate a fake Document with the patch:
ReactDOM.hydrate(<RemixBrowser />, {
childNodes: [document.documentElement],
firstChild: document.documentElement,
appendChild(n) { document.replaceChild(n, document.documentElement); },
insertBefore(n) { this.appendChild(n); }
});
View hydrate-root.js
import { h, hydrate } from 'preact';
let C = 0;
export function Root({ href, data, children }) {
let json = data && JSON.stringify(data);
let id = 'root:'+++C;
return [
h(`!--${id}--`),
children,
h('component-root', { href, id },
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.