Previous version with Demo Video
How to use, add the script to your existing Debug component:
---
import { Debug } from 'astro:components';
---
--- | |
type Props = { | |
json: unknown; | |
}; | |
--- | |
<view-as-json><pre data-target="view-as-json:pre" set:text={JSON.stringify(Astro.props.json, null, 2)} /></view-as-json> | |
<script is:inline type="module"> | |
// @ts-ignore | |
import { liftHtml } from 'https://esm.sh/@lift-html/core@0.0.4'; |
Previous version with Demo Video
How to use, add the script to your existing Debug component:
---
import { Debug } from 'astro:components';
---
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>
works--- | |
declare global { | |
interface Window { | |
had_hydration_error?: string; | |
} | |
} | |
--- | |
<script> | |
const prefix = 'Uncaught Error: '; |
<!DOCTYPE html> | |
<html> | |
<head is="my-head"> | |
<script> | |
customElements.define( | |
"my-head", | |
class extends HTMLHeadElement { | |
connectedCallback() { | |
this.setAttribute("live", "true"); | |
this.appendChild(document.createElement("title")).textContent = |
By using ReturnType
we don't have to manually write ContextType
See React gist for more examples https://gist.github.com/JLarky/5a1642abd8741f2683a817f36dd48e78
And original tweet https://twitter.com/JLarky/status/1554157252856033280
By using ReturnType
we don't have to manually write type for Context
See also gist for SolidJS https://gist.github.com/JLarky/a46055f673a2cb021db1a34449e3be07
And original tweet https://twitter.com/JLarky/status/1554152932425117697
// https://github.com/BuilderIO/builder/blob/21c96eff31434f51adc9ec3e6071256572cd261b/packages/sdks/src/blocks/embed/embed.lite.tsx | |
import { useEffect, useRef, useState } from 'react'; | |
export interface EmbedProps { | |
content: string; | |
} | |
const SCRIPT_MIME_TYPES = ['text/javascript', 'application/javascript', 'application/ecmascript']; | |
function isJsScript(script: HTMLScriptElement) { |
((raw)=>{let i = { 0: t => m(t), 1: t => a(t), 2: t => new RegExp(t), 3: t => new Date(t), 4: t => new Map(a(t)), 5: t => new Set(a(t)), 6: t => BigInt(t), 7: t => new URL(t), 8: t => new Uint8Array(t), 9: t => new Uint16Array(t), 10: t => new Uint32Array(t) } , o = t => { let[l,e] = t; return l in i ? i[l](e) : void 0 } , a = t => t.map(o) , m = t => typeof t != "object" || t === null ? t : Object.fromEntries(Object.entries(t).map( ([l,e]) => [l, o(e)])); return m(raw)})(JSON.parse($0.getAttribute('props'))) |