Skip to content

Instantly share code, notes, and snippets.

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

Jason Miller developit

🦊
write, the codes
12.4k followers · 361 following
View GitHub Profile
@marvinhagemeister
marvinhagemeister / bind-plugin.ts
Last active January 9, 2024 20:31
Preact Signals `bind:value`
import { options } from "preact";
import { Signal } from "@preact/signals";
// Add `bind:value` to JSX types
declare global {
namespace preact.createElement.JSX {
interface HTMLAttributes {
"bind:value"?: Signal<string | string[] | number | undefined>;
}
}
@developit
developit / signal-utils.js
Created March 4, 2023 15:02
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.
@surma
surma / .gitignore
Created February 1, 2023 15:48
Wasm GC
*.wasm
@WebReflection
WebReflection / esx.md
Last active May 26, 2024 02:33
Proposal: an ESX for JS implementation
@developit
developit / *preact-options-helper.md
Last active July 25, 2023 12:44 
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
<!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
<!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>
@developit
developit / *Preact Root Fragment - replaceNode for Preact 11+.md
Last active January 28, 2024 07:04

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...
@wonderful-panda
wonderful-panda / test.tsx
Last active December 6, 2021 22:32
difference behaviour between react and preact
/*
* With react@17.0.2, Effect-A is triggered, then Effect-B is triggered. (expected)
* With preact@10.6.2, Effect-B is triggered, then Effect-A is triggered.
*
* `useLayoutEffect` is more appropriate for Effect-A, maybe.
*
* BTW, behaviours will be same if removing React.memo call (line.39)
*/
const EditorWrapper_: React.VFC<{
@ryansolid
ryansolid / Comparison - Todo Sizes.md
Last active February 17, 2024 14:29
Looking at how frameworks scale using their official TodoMVC Example and Vite

Based on Evan You's comparison which included Svelte and Vue. https://github.com/yyx990803/vue-svelte-size-analysis

For Preact, React, and Solid I took their official TodoMVC and ran them through Vite (2.3.6) to get vendor. For the components I grabbed the unminified source, ran it through Terser Repl, removed the imports, and ran through Brotli.

I wanted to use hooks for React and Preact since those are much smaller but all the official demos use classes. Adding Hooks adds library weight to Preact but it is worth it for this comparison(Preact with classes was 1.60kb and 3.81kb). Honestly I couldn't find a good hooks implementation for React/Preact that was small so I made one myself based on Solid.

Preact React Solid Svelte Vue
component size (brotli) 1.21kb 1.23kb 1.26kb 1.88kb 1.10kb