feat: add webcontainer connect route and new preview functionality

- Add new route `webcontainer.connect.$id.tsx` for WebContainer connection - Implement `openInNewTab` function in `Preview.tsx` for opening previews in new tabs - Update GitHub template fetching logic to include lock files for improved install times - Add new Expo starter template to constants - Extend prompts with mobile app development instructions -Templates now use Releases from github as a work around for rate limits
2025-04-15 15:32:40 +01:00
parent 2f09d512bc
commit 63129a93cd
6 changed files with 405 additions and 81 deletions
--- a/app/routes/webcontainer.connect.$id.tsx
+++ b/app/routes/webcontainer.connect.$id.tsx
@@ -0,0 +1,32 @@
+import { type LoaderFunction } from '@remix-run/cloudflare';
+
+export const loader: LoaderFunction = async ({ request }) => {
+  const url = new URL(request.url);
+  const editorOrigin = url.searchParams.get('editorOrigin') || 'https://stackblitz.com';
+  console.log('editorOrigin', editorOrigin);
+
+  const htmlContent = `
+    <!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Connect to WebContainer</title>
+      </head>
+      <body>
+        <script type="module">
+          (async () => {
+            const { setupConnect } = await import('https://cdn.jsdelivr.net/npm/@webcontainer/api@latest/dist/connect.js');
+            setupConnect({
+              editorOrigin: '${editorOrigin}'
+            });
+          })();
+        </script>
+      </body>
+    </html>
+  `;
+
+  return new Response(htmlContent, {
+    headers: { 'Content-Type': 'text/html' },
+  });
+};