Skip to content

Instantly share code, notes, and snippets.

View developit's full-sized avatar
🦊
write, the codes

Jason Miller developit

🦊
write, the codes
View GitHub Profile
View persisted-signal.ts
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.
*
View preact-slots.js
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);
View *DOM Fun: executable script type attribute values.md

Welcome to the wacky world of almost 30 years of web

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
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 July 25, 2023 12:44
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 July 25, 2023 12:44
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...