Spaces:
Runtime error
Runtime error
File size: 2,716 Bytes
c343876 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
import { json, type LoaderFunctionArgs } from '@remix-run/cloudflare';
import { useLoaderData } from '@remix-run/react';
import { useCallback, useEffect, useRef, useState } from 'react';
const PREVIEW_CHANNEL = 'preview-updates';
export async function loader({ params }: LoaderFunctionArgs) {
const previewId = params.id;
if (!previewId) {
throw new Response('Preview ID is required', { status: 400 });
}
return json({ previewId });
}
export default function WebContainerPreview() {
const { previewId } = useLoaderData<typeof loader>();
const iframeRef = useRef<HTMLIFrameElement>(null);
const broadcastChannelRef = useRef<BroadcastChannel>();
const [previewUrl, setPreviewUrl] = useState('');
// Handle preview refresh
const handleRefresh = useCallback(() => {
if (iframeRef.current && previewUrl) {
// Force a clean reload
iframeRef.current.src = '';
requestAnimationFrame(() => {
if (iframeRef.current) {
iframeRef.current.src = previewUrl;
}
});
}
}, [previewUrl]);
// Notify other tabs that this preview is ready
const notifyPreviewReady = useCallback(() => {
if (broadcastChannelRef.current && previewUrl) {
broadcastChannelRef.current.postMessage({
type: 'preview-ready',
previewId,
url: previewUrl,
timestamp: Date.now(),
});
}
}, [previewId, previewUrl]);
useEffect(() => {
// Initialize broadcast channel
broadcastChannelRef.current = new BroadcastChannel(PREVIEW_CHANNEL);
// Listen for preview updates
broadcastChannelRef.current.onmessage = (event) => {
if (event.data.previewId === previewId) {
if (event.data.type === 'refresh-preview' || event.data.type === 'file-change') {
handleRefresh();
}
}
};
// Construct the WebContainer preview URL
const url = `https://${previewId}.local-credentialless.webcontainer-api.io`;
setPreviewUrl(url);
// Set the iframe src
if (iframeRef.current) {
iframeRef.current.src = url;
}
// Notify other tabs that this preview is ready
notifyPreviewReady();
// Cleanup
return () => {
broadcastChannelRef.current?.close();
};
}, [previewId, handleRefresh, notifyPreviewReady]);
return (
<div className="w-full h-full">
<iframe
ref={iframeRef}
title="WebContainer Preview"
className="w-full h-full border-none"
sandbox="allow-scripts allow-forms allow-popups allow-modals allow-storage-access-by-user-activation allow-same-origin"
allow="cross-origin-isolated"
loading="eager"
onLoad={notifyPreviewReady}
/>
</div>
);
}
|