Skip to content

Instantly share code, notes, and snippets.

View marvinhagemeister's full-sized avatar
☀️

Marvin Hagemeister marvinhagemeister

☀️
1.5k followers · 34 following
View GitHub Profile
@marvinhagemeister
marvinhagemeister / use.ts
Last active December 6, 2024 11:20
preact use hook
function use<T>(promiseOrContext: Promise<T> | Context<T>): T {
if ('__c' in promiseOrContext) {
return useContext(promiseOrContext)
}
return usePromise(promiseOrContext)
}
function usePromise<T>(promise: Promise<T>): T {
const resolving = useRef(false);
@marvinhagemeister
marvinhagemeister / noscript.html
Created May 23, 2024 22:53
cursed noscript
<!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>
<h1>hello</h1>
@marvinhagemeister
marvinhagemeister / home.html
Created May 21, 2024 07:23
home.html
This file has been truncated, but you can view the full file.
<!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>
<h1>hello world</h1>
<p>
@marvinhagemeister
marvinhagemeister / metafile.json
Created October 15, 2023 20:52
fresh esbuild
{
"inputs": {
"../src/runtime/polyfills.ts": { "bytes": 134, "imports": [] },
"https://esm.sh/stable/[email protected]/denonext/preact.mjs": {
"bytes": 10781,
"imports": [],
"format": "esm"
},
"https://esm.sh/[email protected]": {
"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 August 27, 2024 18:52
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 December 16, 2024 14:38
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