Skip to content

Instantly share code, notes, and snippets.

View marvinhagemeister's full-sized avatar
☀️

Marvin Hagemeister marvinhagemeister

☀️
1.4k followers · 34 following
View GitHub Profile
@marvinhagemeister
marvinhagemeister / metafile.json
Created October 15, 2023 20:52
fresh esbuild
{
"inputs": {
"../src/runtime/polyfills.ts": { "bytes": 134, "imports": [] },
"https://esm.sh/stable/preact@10.15.1/denonext/preact.mjs": {
"bytes": 10781,
"imports": [],
"format": "esm"
},
"https://esm.sh/preact@10.15.1": {
"bytes": 104,
@marvinhagemeister
marvinhagemeister / input-mask.html
Last active September 16, 2023 20:08
DOM input masking
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<label for="foo">Input mask demo</label>
<input id="foo" type="text" pattern="\d{6}" />
@marvinhagemeister
marvinhagemeister / jsx-dom.html
Last active September 24, 2023 19:00
JSX DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script type="module">
@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>;
}
}
@marvinhagemeister
marvinhagemeister / mod.ts
Created August 1, 2023 17:36
deno-test
export const foo = "it doesn't work";
@marvinhagemeister
marvinhagemeister / web-components-render-to-string.tsx
Last active May 28, 2023 01:53
Preact SSR collect web components
import { options, VNode } from 'preact';
import { renderToString } from 'preact-render-to-string';
// List of web components that were rendered
let webComponents = new Set<string>();
// Called when a vnode is rendered
let oldDiffedHook = options.diffed;
options.diffed = (vnode: VNode) => {
if (typeof vnode.type === 'string' && vnode.type.includes('-')) {
webComponents.add(vnode.type);
@marvinhagemeister
marvinhagemeister / diamond.js
Created September 11, 2022 12:40
usignal diamond scenario
import { signal, computed, effect } from "../esm/index.js";
const a = signal(1);
const b = computed(() => a.value);
const c = computed(() => a.value);
const d = computed(() => b.value + c.value);
effect(() => console.log(d.value));
a.value = 2; // Should log 4, but logs 2
@marvinhagemeister
marvinhagemeister / esbuild.js
Created February 2, 2022 23:06
Preact: esbuild vs custom Rollup + Terser config
var N = 1 << 0,
S = 1 << 1,
A = 1 << 2,
le = 1 << 3,
T = 1 << 4,
Y = N | S,
P = A | le | T,
h = 1 << 5,
d = 1 << 6,
D = 1 << 7,
@marvinhagemeister
marvinhagemeister / measure.js
Last active June 16, 2021 13:19
minimal-preact-measure
import { options } from "preact";
function getComponentName(vnode) {
return vnode.type.displayName || vnode.name || "Component";
}
let prevBeforeDiff = (options._diff = options.__b);
options._diff = options.__b = (vnode) => {
if (typeof vnode.type === "function") {
const name = getComponentName(vnode);
@marvinhagemeister
marvinhagemeister / little-vdom-decompiled.js
Created March 8, 2020 14:13
Jason little-vdom decompiled
/* eslint-disable no-unused-vars */
/* eslint-disable no-else-return */
// JSX constructor, similar to createElement()
export const h = (type, props, ...children) => {
return {
type,
// Props will be an object for components and DOM nodes, but a string for
// text nodes
props,