so we have tes.jsx:
export default function SearchField() {
return (
<form>
<label>1</label>
<input id="sidebar-search-input" />
</form>
);
delay 2004 | |
delay 1003 | |
delay2 1002 | |
delay 1001 |
so we have tes.jsx:
export default function SearchField() {
return (
<form>
<label>1</label>
<input id="sidebar-search-input" />
</form>
);
-rw-r--r-- 1 jlarky wheel 22137 Aug 6 17:44 index.html.gz
-rw-r--r-- 1 jlarky wheel 19815 Aug 6 17:45 rest.html.gz
-rw-r--r-- 1 jlarky wheel 2347 Aug 6 17:46 script.html.gz
So
19815+2347 = 22162 vs
I created this demo :)
The main point is that it allows you to compare two apps, one is in React, one in HTMX.
Then I introduce this concept of "hey, what if I wanted to store data in HTML or markdown or whatever instead of just text,
how would I do that in HTMX? The main idea is that modern backend frameworks (in this case Astro) allow you to work
with HTML pretty safely, but you still have to be careful with HTMX specifically because data-
attributes are
executable in HTMX 🫠, but I have an example how to workaround it as well :)
here are the shadow banned tweets :)
<div title="hi"> | |
<Suspense> | |
<ClientComponent prop={await 123}> | |
</Suspense> | |
</div> | |
<ClientRoot url="/" /> | |
next 12: send from server to client: ["client.js", {url: '/'}] | |
^^ |
So you are trying out that new fangled useFormStatus
hook but it doesn't actually react to the status of your form?
Now you tried to Google it and all you get is RTFM "go read docs again". Because hook useFormStatus
shows you the status of parent form, not a sibling one.
Let's explain that in English.
<form><Spinner></form>
worksexport function IsolateCSS(props: { children: React.ReactNode }) { | |
const onceRef = useRef(false); | |
const [shadowRoot, setShadowRoot] = useState<ShadowRoot>(); | |
const ref = useCallback((ref: HTMLDivElement | null) => { | |
if (ref && onceRef.current === false) { | |
onceRef.current = true; | |
setShadowRoot(ref.attachShadow({ mode: 'open' })); | |
} | |
}, []); |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8" /> | |
</head> | |
<body> | |
<script> | |
window.startClerk = async () => { | |
function formRedirect(){ | |
const form = '<form method="get" action="" name="redirect"></form>'; |
// src/t3Env.ts | |
import { createEnv, LooseOptions, StrictOptions } from '@t3-oss/env-core'; | |
import { z, ZodType, ZodString } from 'zod'; | |
function validateEnv< | |
TPrefix extends string, | |
TServer extends Record<string, ZodType> = NonNullable<unknown>, | |
TClient extends Record<string, ZodType> = NonNullable<unknown> | |
>(opts: LooseOptions<TPrefix, TServer, TClient> | StrictOptions<TPrefix, TServer, TClient>) { | |
return opts; |