/** @jsxImportSource https://esm.sh/react@18.3.1 **/ import build from "https://esm.sh/build"; const ret = await build({ dependencies: { "react-dom": "18.3.1", "react": "18.3.1", "tldraw": "2.3.0", "@reecelucas/react-use-hotkeys": "2.0.0", }, source: ` export * as ReactDOM from "react-dom"; export * as React from "react"; export * as tldraw from "tldraw"; import useHotkeys from "@reecelucas/react-use-hotkeys"; export { useHotkeys }; `, }); const { ReactDOM, React, tldraw, useHotkeys, } = await import(ret.url + "?bundle-deps"); const { useCallback, useRef, useEffect } = React; const { Tldraw, useEditor, useToasts, createShapeId, BaseBoxShapeUtil, DefaultSpinner, HTMLContainer, SvgExportContext, TLBaseShape, TldrawUiIcon, Vec, stopEventPropagation, toDomPrecision, useIsEditing, useValue, sortByIndex, } = tldraw; function MakeRealButton() { const editor = useEditor(); const { addToast } = useToasts(); const handleClick = useCallback(async () => { try { const selectedShapes = editor.getSelectedShapes(); if (selectedShapes.length === 0) throw Error("First select something to make real."); const { maxX, midY } = editor.getSelectionPageBounds(); const text = `export default async function main(req: Request): Promise { return new Response("Hello, World!", { headers: { "Content-Type": "text/plain" }, }); }`; let previewHeight = (540 * 2) / 3; let previewWidth = (960 * 2) / 3; // const highestPreview = selectedShapes // .filter((s) => s.type === "preview") // .sort(sortByIndex) // .reverse()[0]; // if (highestPreview) { // previewHeight = highestPreview.props.h; // previewWidth = highestPreview.props.w; // } const prompt = `Make an HTTP Val that outputs HTML (there is no need to import stevekrouse/html).\n` + selectedShapes.filter((s) => s.type === "text").map((s) => s.props.text).join("\n"); const loadValName = selectedShapes.filter((s) => s.type === "preview" && s.props.finishedValName ).map((s) => s.props.finishedValName)[0] || ""; const newShapeId = createShapeId(); editor.createShape({ id: `${newShapeId}_preview`, type: "preview", x: maxX + 60, y: midY - previewHeight / 2, props: { prompt, loadValName, w: previewWidth, h: previewHeight, iframeWidth: 800, source: "", }, meta: {}, }); } catch (e: any) { console.error(e); addToast({ title: "Something went wrong", description: `${e.message.slice(0, 200)}`, }); } }, [editor, addToast]); useHotkeys("q", handleClick); return ( ); } export function App() { return ( <>

}} />

); } // The app will be rendered inside the root div const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); // // // // // // https://github.com/tldraw/make-real/blob/3093e7d528683370b2ac60c1346ce3694e07ccae/app/PreviewShape/PreviewShape.tsx export class PreviewShapeUtil extends BaseBoxShapeUtil { static type = "preview" as const; getDefaultProps() { return { prompt: "", loadValName: "", finishedValName: "", w: (960 * 2) / 3, h: (540 * 2) / 3, previewWidth: (960 * 2) / 3 * 2, dateCreated: Date.now(), }; } canEdit = (_shape) => true; isAspectRatioLocked = (_shape) => false; canResize = (_shape) => true; component(shape) { const isEditing = useIsEditing(shape.id); const boxShadow = useValue( "box shadow", () => { const rotation = this.editor.getShapePageTransform(shape)!.rotation(); return getRotatedBoxShadow(rotation); }, [this.editor], ); const hasSubmitted = useRef(); useEffect(() => { if (hasSubmitted.current) { return; } if (shape.props.finishedValName) { (document.getElementById(`${shape.id}_iframe`) as HTMLIFrameElement).src = `https://janpaul123-valle2.web.val.run/?fullscreen=1&loadValName=${shape.props.finishedValName}`; } else { (document.getElementById(`${shape.id}_form`) as HTMLFormElement).submit(); } hasSubmitted.current = true; }); const onMessage = useCallback((event) => { if ( event.source.window === (document.getElementById(`${shape.id}_iframe`) as HTMLIFrameElement).contentWindow && event.data.messageType === "generationFinished" ) { this.editor.updateShape({ id: shape.id, type: "preview", props: { finishedValName: event.data.tempValName } }); } }, []); useEffect(() => { window.addEventListener("message", onMessage); return () => window.removeEventListener("message", onMessage); }, [onMessage]); return (

d3vobed