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
import {
signal,
effect,
useSignal,
type useSignalEffect,
type Signal,
type ReadonlySignal,
} from '@preact/signals';
import { VNode, type ComponentChildren } from 'preact';
import {
@developit
developit / .gitignore
Last active July 19, 2024 13:23
run2: Node, but faster
node_modules
@developit
developit / run
Last active June 5, 2024 13:34
chmod +x run
#!/usr/bin/env node
/* eslint-disable no-param-reassign, no-fallthrough, guard-for-in, require-atomic-updates */
const path = require('node:path');
const {Worker} = require('node:worker_threads');
const DEBUG = {parsing: false, timing: false};
const debugEnv = process.env.DEBUG;
if (debugEnv) {
for (const name in DEBUG) {

computedWithMemo()

It's computed(), but with a second argument that gets passed each newly returned value in order to produce a string cache key. If you return the same cache key as the previous run of the computed, no update will be performed (no effects, no renders, etc).

JSFiddle Demo

- computed(
-   () => ['an', 'unstable', 'return', 'value'],
- )
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);

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