| import { signal, effect } from "@preact/signals-core"; | |
| interface CustomStorage { | |
| getItem(key: string): void; | |
| setItem(key: string, value: string | null): void; | |
| } | |
| /** | |
| * A version of signal() that persists and recalls its value in localStorage. | |
| * |
| 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); |
All of the following values for the <script type=" ••• "> will cause inline or external JavaScript to execute:
| Value | Note |
|---|---|
"" |
The default value of script.type (eg: no type attribute present) |
"text/javascript" |
The official JavaScript MIME type |
"application/javascript" |
Legacy MIME type from when semantics mattered |
"text/x-javascript" |
Legacy MIME type from before JavaScript was accepted as a valid MIME type |
| 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. |
| /** | |
| * 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; | |
| } |
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);
}
| <!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> |
| <!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> |
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.
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...