@illuma-ai/code-sandbox 1.4.0 → 1.4.1

package/src/templates/index.ts

@@ -1,607 +0,0 @@
-/**
- * Template registry — built-in project templates.
- *
- * The "express-react" template is a proper full-stack app:
- * - Express backend with API routes that proxy JSONPlaceholder
- * - React frontend as separate component files under public/
- * - Express serves static files via fs.readFileSync (Nodepod doesn't support
- *   res.sendFile or express.static)
- * - React + Tailwind loaded from CDN — no build step needed
- *
- * WHY THIS ARCHITECTURE:
- * Nodepod can't run Vite/Next.js/Webpack. But Express works perfectly.
- * By loading React/Tailwind from CDN and splitting the React app into
- * separate script files, we get a realistic full-stack project structure
- * that users can explore and edit in the code sandbox.
- */
-
-import type { FileMap } from "../types";
-import { fullstackStarterTemplate } from "./fullstack-starter";
-
-// ---------------------------------------------------------------------------
-// server.js — Express backend
-// ---------------------------------------------------------------------------
-
-const SERVER_JS = `const express = require('express');
-const fs = require('fs');
-const path = require('path');
-const app = express();
-const PORT = 3000;
-
-const API_BASE = 'https://jsonplaceholder.typicode.com';
-
-// Middleware
-app.use(express.json());
-
-// -----------------------------------------------------------------------
-// Static file serving
-// Nodepod doesn't support express.static() or res.sendFile(), so we
-// serve files manually via fs.readFileSync + res.send.
-// -----------------------------------------------------------------------
-
-const MIME_TYPES = {
-  '.html': 'text/html',
-  '.js':   'application/javascript',
-  '.css':  'text/css',
-  '.json': 'application/json',
-  '.svg':  'image/svg+xml',
-  '.png':  'image/png',
-};
-
-function serveStatic(req, res, next) {
-  // Only serve GET requests for paths with extensions
-  if (req.method !== 'GET') return next();
-
-  var filePath = path.join(__dirname, 'public', req.path === '/' ? 'index.html' : req.path);
-  var ext = path.extname(filePath);
-
-  // If no extension, try .html
-  if (!ext) {
-    filePath += '.html';
-    ext = '.html';
-  }
-
-  try {
-    var data = fs.readFileSync(filePath, ext === '.png' ? undefined : 'utf-8');
-    res.setHeader('Content-Type', MIME_TYPES[ext] || 'application/octet-stream');
-    res.send(data);
-  } catch (e) {
-    next();
-  }
-}
-
-// -----------------------------------------------------------------------
-// API proxy routes — proxy to JSONPlaceholder
-// -----------------------------------------------------------------------
-
-app.get('/api/posts', async function(req, res) {
-  try {
-    var userId = req.query.userId;
-    var url = userId ? API_BASE + '/posts?userId=' + userId : API_BASE + '/posts';
-    var resp = await fetch(url);
-    var data = await resp.json();
-    res.json(data);
-  } catch (err) {
-    res.status(500).json({ error: 'Failed to fetch posts', details: err.message });
-  }
-});
-
-app.get('/api/posts/:id', async function(req, res) {
-  try {
-    var resp = await fetch(API_BASE + '/posts/' + req.params.id);
-    var data = await resp.json();
-    res.json(data);
-  } catch (err) {
-    res.status(500).json({ error: 'Failed to fetch post', details: err.message });
-  }
-});
-
-app.get('/api/posts/:id/comments', async function(req, res) {
-  try {
-    var resp = await fetch(API_BASE + '/posts/' + req.params.id + '/comments');
-    var data = await resp.json();
-    res.json(data);
-  } catch (err) {
-    res.status(500).json({ error: 'Failed to fetch comments', details: err.message });
-  }
-});
-
-app.get('/api/users', async function(req, res) {
-  try {
-    var resp = await fetch(API_BASE + '/users');
-    var data = await resp.json();
-    res.json(data);
-  } catch (err) {
-    res.status(500).json({ error: 'Failed to fetch users', details: err.message });
-  }
-});
-
-app.get('/api/users/:id', async function(req, res) {
-  try {
-    var resp = await fetch(API_BASE + '/users/' + req.params.id);
-    var data = await resp.json();
-    res.json(data);
-  } catch (err) {
-    res.status(500).json({ error: 'Failed to fetch user', details: err.message });
-  }
-});
-
-// -----------------------------------------------------------------------
-// Catch-all: serve static files (must be after API routes)
-// -----------------------------------------------------------------------
-app.use(serveStatic);
-
-app.listen(PORT, function() {
-  console.log('Server running on port ' + PORT);
-});
-`;
-
-// ---------------------------------------------------------------------------
-// public/index.html — HTML shell that loads React app
-// ---------------------------------------------------------------------------
-
-const INDEX_HTML = `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>JSONPlaceholder Explorer</title>
-  <script src="https://cdn.tailwindcss.com"><\/script>
-  <script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"><\/script>
-  <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"><\/script>
-  <link rel="stylesheet" href="/styles.css">
-</head>
-<body class="bg-gray-50 min-h-screen">
-  <div id="root"></div>
-  <!-- Load components in dependency order -->
-  <script src="/components/PostCard.js"><\/script>
-  <script src="/components/UserCard.js"><\/script>
-  <script src="/components/CommentCard.js"><\/script>
-  <script src="/components/PostDetail.js"><\/script>
-  <script src="/components/UserDetail.js"><\/script>
-  <script src="/App.js"><\/script>
-</body>
-</html>`;
-
-// ---------------------------------------------------------------------------
-// public/styles.css — App styles
-// ---------------------------------------------------------------------------
-
-const STYLES_CSS = `.tab-active {
-  border-bottom: 2px solid #3b82f6;
-  color: #3b82f6;
-}
-.card-hover:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-}
-.fade-in {
-  animation: fadeIn 0.3s ease-in;
-}
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(8px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-`;
-
-// ---------------------------------------------------------------------------
-// public/components/PostCard.js
-// ---------------------------------------------------------------------------
-
-const POST_CARD_JS = `var e = React.createElement;
-
-/**
- * PostCard — Renders a single post as a clickable card.
- */
-window.PostCard = function PostCard(props) {
-  var post = props.post;
-  var onSelect = props.onSelect;
-
-  return e('div', {
-    className: 'bg-white rounded-lg p-5 border border-gray-200 card-hover transition-all duration-200 cursor-pointer fade-in',
-    onClick: function() { onSelect(post); }
-  },
-    e('div', { className: 'flex items-start justify-between mb-2' },
-      e('span', { className: 'text-xs font-medium text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full' },
-        'Post #' + post.id),
-      e('span', { className: 'text-xs text-gray-400' }, 'User ' + post.userId)
-    ),
-    e('h3', { className: 'font-semibold text-gray-800 mb-2 line-clamp-1' }, post.title),
-    e('p', { className: 'text-sm text-gray-500 line-clamp-2' }, post.body)
-  );
-};
-`;
-
-// ---------------------------------------------------------------------------
-// public/components/UserCard.js
-// ---------------------------------------------------------------------------
-
-const USER_CARD_JS = `var e = React.createElement;
-
-/**
- * UserCard — Renders a user profile card with avatar.
- */
-window.UserCard = function UserCard(props) {
-  var user = props.user;
-  var onSelect = props.onSelect;
-
-  return e('div', {
-    className: 'bg-white rounded-lg p-5 border border-gray-200 card-hover transition-all duration-200 cursor-pointer fade-in',
-    onClick: function() { onSelect(user); }
-  },
-    e('div', { className: 'flex items-center gap-3 mb-3' },
-      e('div', {
-        className: 'w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center text-white font-bold text-sm'
-      }, user.name.charAt(0)),
-      e('div', null,
-        e('h3', { className: 'font-semibold text-gray-800' }, user.name),
-        e('p', { className: 'text-xs text-gray-400' }, '@' + user.username)
-      )
-    ),
-    e('div', { className: 'space-y-1 text-sm text-gray-500' },
-      e('p', null, user.email),
-      e('p', null, user.company ? user.company.name : '')
-    )
-  );
-};
-`;
-
-// ---------------------------------------------------------------------------
-// public/components/CommentCard.js
-// ---------------------------------------------------------------------------
-
-const COMMENT_CARD_JS = `var e = React.createElement;
-
-/**
- * CommentCard — Renders a single comment.
- */
-window.CommentCard = function CommentCard(props) {
-  var c = props.comment;
-
-  return e('div', { className: 'bg-gray-50 rounded-lg p-4 border border-gray-100 fade-in' },
-    e('div', { className: 'flex items-center gap-2 mb-2' },
-      e('div', {
-        className: 'w-6 h-6 rounded-full bg-gray-300 flex items-center justify-center text-[10px] font-bold text-gray-600'
-      }, c.name.charAt(0).toUpperCase()),
-      e('span', { className: 'text-xs font-medium text-gray-600 truncate flex-1' }, c.name),
-      e('span', { className: 'text-xs text-gray-400 truncate' }, c.email)
-    ),
-    e('p', { className: 'text-sm text-gray-600' }, c.body)
-  );
-};
-`;
-
-// ---------------------------------------------------------------------------
-// public/components/PostDetail.js
-// ---------------------------------------------------------------------------
-
-const POST_DETAIL_JS = `var e = React.createElement;
-
-/**
- * PostDetail — Full post view with comments.
- */
-window.PostDetail = function PostDetail(props) {
-  var post = props.post;
-  var onBack = props.onBack;
-  var comments = props.comments;
-  var loading = props.loading;
-
-  return e('div', { className: 'fade-in' },
-    e('button', {
-      onClick: onBack,
-      className: 'text-sm text-blue-600 hover:text-blue-700 mb-4 flex items-center gap-1'
-    }, '\\u2190 Back to posts'),
-
-    e('div', { className: 'bg-white rounded-lg p-6 border border-gray-200 mb-6' },
-      e('div', { className: 'flex items-center gap-2 mb-3' },
-        e('span', { className: 'text-xs font-medium text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full' },
-          'Post #' + post.id),
-        e('span', { className: 'text-xs text-gray-400' }, 'User ' + post.userId)
-      ),
-      e('h2', { className: 'text-xl font-bold text-gray-800 mb-3' }, post.title),
-      e('p', { className: 'text-gray-600 leading-relaxed' }, post.body)
-    ),
-
-    e('h3', { className: 'text-lg font-semibold text-gray-700 mb-3' },
-      'Comments (' + (comments ? comments.length : '...') + ')'
-    ),
-
-    loading
-      ? e('div', { className: 'text-center py-8 text-gray-400' }, 'Loading comments...')
-      : comments && comments.length > 0
-        ? e('div', { className: 'space-y-3' },
-            comments.map(function(c) {
-              return e(window.CommentCard, { key: c.id, comment: c });
-            })
-          )
-        : e('p', { className: 'text-gray-400 text-sm' }, 'No comments found.')
-  );
-};
-`;
-
-// ---------------------------------------------------------------------------
-// public/components/UserDetail.js
-// ---------------------------------------------------------------------------
-
-const USER_DETAIL_JS = `var e = React.createElement;
-
-/**
- * UserDetail — Full user profile with their posts.
- */
-window.UserDetail = function UserDetail(props) {
-  var user = props.user;
-  var posts = props.posts;
-  var onBack = props.onBack;
-  var onSelectPost = props.onSelectPost;
-  var loading = props.loading;
-
-  return e('div', { className: 'fade-in' },
-    e('button', {
-      onClick: onBack,
-      className: 'text-sm text-blue-600 hover:text-blue-700 mb-4 flex items-center gap-1'
-    }, '\\u2190 Back to users'),
-
-    e('div', { className: 'bg-white rounded-lg p-6 border border-gray-200 mb-6' },
-      e('div', { className: 'flex items-center gap-4 mb-4' },
-        e('div', {
-          className: 'w-14 h-14 rounded-full bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center text-white font-bold text-xl'
-        }, user.name.charAt(0)),
-        e('div', null,
-          e('h2', { className: 'text-xl font-bold text-gray-800' }, user.name),
-          e('p', { className: 'text-sm text-gray-400' }, '@' + user.username)
-        )
-      ),
-      e('div', { className: 'grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm' },
-        e('div', null,
-          e('span', { className: 'text-gray-400' }, 'Email'),
-          e('p', { className: 'text-gray-700' }, user.email)
-        ),
-        e('div', null,
-          e('span', { className: 'text-gray-400' }, 'Phone'),
-          e('p', { className: 'text-gray-700' }, user.phone || 'N/A')
-        ),
-        e('div', null,
-          e('span', { className: 'text-gray-400' }, 'Website'),
-          e('p', { className: 'text-gray-700' }, user.website || 'N/A')
-        ),
-        e('div', null,
-          e('span', { className: 'text-gray-400' }, 'Company'),
-          e('p', { className: 'text-gray-700' }, user.company ? user.company.name : 'N/A')
-        )
-      )
-    ),
-
-    e('h3', { className: 'text-lg font-semibold text-gray-700 mb-3' },
-      'Posts by ' + user.name + ' (' + (posts ? posts.length : '...') + ')'
-    ),
-
-    loading
-      ? e('div', { className: 'text-center py-8 text-gray-400' }, 'Loading posts...')
-      : posts && posts.length > 0
-        ? e('div', { className: 'grid gap-3' },
-            posts.map(function(p) {
-              return e(window.PostCard, { key: p.id, post: p, onSelect: onSelectPost });
-            })
-          )
-        : e('p', { className: 'text-gray-400 text-sm' }, 'No posts found.')
-  );
-};
-`;
-
-// ---------------------------------------------------------------------------
-// public/App.js — Main application component + mount
-// ---------------------------------------------------------------------------
-
-const APP_JS = `var e = React.createElement;
-
-/**
- * App — Main application component.
- * Manages tabs (Posts/Users), fetches data from the Express API,
- * and renders detail views when items are selected.
- */
-function App() {
-  var TAB_POSTS = 'posts';
-  var TAB_USERS = 'users';
-
-  var tabState = React.useState(TAB_POSTS);
-  var activeTab = tabState[0], setActiveTab = tabState[1];
-
-  var postsState = React.useState(null);
-  var posts = postsState[0], setPosts = postsState[1];
-
-  var usersState = React.useState(null);
-  var users = usersState[0], setUsers = usersState[1];
-
-  var loadingState = React.useState(true);
-  var loading = loadingState[0], setLoading = loadingState[1];
-
-  var selectedPostState = React.useState(null);
-  var selectedPost = selectedPostState[0], setSelectedPost = selectedPostState[1];
-
-  var selectedUserState = React.useState(null);
-  var selectedUser = selectedUserState[0], setSelectedUser = selectedUserState[1];
-
-  var commentsState = React.useState(null);
-  var comments = commentsState[0], setComments = commentsState[1];
-
-  var userPostsState = React.useState(null);
-  var userPosts = userPostsState[0], setUserPosts = userPostsState[1];
-
-  var detailLoadingState = React.useState(false);
-  var detailLoading = detailLoadingState[0], setDetailLoading = detailLoadingState[1];
-
-  // Fetch posts on mount
-  React.useEffect(function() {
-    setLoading(true);
-    fetch('/api/posts')
-      .then(function(r) { return r.json(); })
-      .then(function(data) { setPosts(data); setLoading(false); })
-      .catch(function() { setLoading(false); });
-  }, []);
-
-  // Fetch users when tab switches
-  React.useEffect(function() {
-    if (activeTab === TAB_USERS && !users) {
-      setLoading(true);
-      fetch('/api/users')
-        .then(function(r) { return r.json(); })
-        .then(function(data) { setUsers(data); setLoading(false); })
-        .catch(function() { setLoading(false); });
-    }
-  }, [activeTab]);
-
-  function handleSelectPost(post) {
-    setSelectedPost(post);
-    setSelectedUser(null);
-    setComments(null);
-    setDetailLoading(true);
-    fetch('/api/posts/' + post.id + '/comments')
-      .then(function(r) { return r.json(); })
-      .then(function(data) { setComments(data); setDetailLoading(false); })
-      .catch(function() { setDetailLoading(false); });
-  }
-
-  function handleSelectUser(user) {
-    setSelectedUser(user);
-    setSelectedPost(null);
-    setUserPosts(null);
-    setDetailLoading(true);
-    fetch('/api/posts?userId=' + user.id)
-      .then(function(r) { return r.json(); })
-      .then(function(data) { setUserPosts(data); setDetailLoading(false); })
-      .catch(function() { setDetailLoading(false); });
-  }
-
-  function handleBackFromPost() { setSelectedPost(null); setComments(null); }
-  function handleBackFromUser() { setSelectedUser(null); setUserPosts(null); }
-  function switchTab(tab) { setActiveTab(tab); setSelectedPost(null); setSelectedUser(null); }
-
-  // Loading spinner
-  function Spinner() {
-    return e('div', { className: 'text-center py-12' },
-      e('div', { className: 'inline-block w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full animate-spin mb-2' }),
-      e('p', { className: 'text-gray-400 text-sm' }, 'Loading...')
-    );
-  }
-
-  // Render
-  return e('div', { className: 'min-h-screen bg-gray-50' },
-    // Header
-    e('header', { className: 'bg-white border-b border-gray-200 sticky top-0 z-10' },
-      e('div', { className: 'max-w-4xl mx-auto px-4 py-4' },
-        e('div', { className: 'flex items-center justify-between mb-3' },
-          e('div', null,
-            e('h1', { className: 'text-xl font-bold text-gray-800' }, 'JSONPlaceholder Explorer'),
-            e('p', { className: 'text-xs text-gray-400' }, 'Full-stack Express + React')
-          ),
-          e('span', {
-            className: 'text-xs text-emerald-600 bg-emerald-50 px-2 py-1 rounded-full font-medium'
-          }, '\\u2022 Live')
-        ),
-        // Tab bar
-        e('div', { className: 'flex gap-0 border-b border-gray-200 -mb-[1px]' },
-          e('button', {
-            onClick: function() { switchTab(TAB_POSTS); },
-            className: 'px-4 py-2 text-sm font-medium transition-colors ' +
-              (activeTab === TAB_POSTS ? 'tab-active' : 'text-gray-500 hover:text-gray-700')
-          }, 'Posts'),
-          e('button', {
-            onClick: function() { switchTab(TAB_USERS); },
-            className: 'px-4 py-2 text-sm font-medium transition-colors ' +
-              (activeTab === TAB_USERS ? 'tab-active' : 'text-gray-500 hover:text-gray-700')
-          }, 'Users')
-        )
-      )
-    ),
-
-    // Content
-    e('main', { className: 'max-w-4xl mx-auto px-4 py-6' },
-      selectedPost
-        ? e(window.PostDetail, { post: selectedPost, comments: comments, loading: detailLoading, onBack: handleBackFromPost })
-      : selectedUser
-        ? e(window.UserDetail, { user: selectedUser, posts: userPosts, loading: detailLoading, onBack: handleBackFromUser, onSelectPost: handleSelectPost })
-      : activeTab === TAB_POSTS
-        ? (loading ? e(Spinner) : posts && posts.length > 0
-            ? e('div', { className: 'grid gap-3 sm:grid-cols-2' },
-                posts.slice(0, 20).map(function(p) {
-                  return e(window.PostCard, { key: p.id, post: p, onSelect: handleSelectPost });
-                })
-              )
-            : e('p', { className: 'text-gray-400 text-center py-12' }, 'No posts found.'))
-      : activeTab === TAB_USERS
-        ? (loading ? e(Spinner) : users && users.length > 0
-            ? e('div', { className: 'grid gap-3 sm:grid-cols-2' },
-                users.map(function(u) {
-                  return e(window.UserCard, { key: u.id, user: u, onSelect: handleSelectUser });
-                })
-              )
-            : e('p', { className: 'text-gray-400 text-center py-12' }, 'No users found.'))
-      : null
-    )
-  );
-}
-
-// Mount
-ReactDOM.createRoot(document.getElementById('root')).render(e(App));
-`;
-
-// ---------------------------------------------------------------------------
-// Template registry
-// ---------------------------------------------------------------------------
-
-/**
- * Template registry — maps template names to file maps.
- */
-export const templates: Record<
-  string,
-  { files: FileMap; entryCommand: string; port: number }
-> = {
-  "express-react": {
-    entryCommand: "node server.js",
-    port: 3000,
-    files: {
-      "package.json": JSON.stringify(
-        {
-          name: "sandbox-app",
-          version: "1.0.0",
-          dependencies: {
-            express: "^4.18.0",
-          },
-        },
-        null,
-        2,
-      ),
-
-      "server.js": SERVER_JS,
-
-      // Frontend files — served by Express's static middleware
-      "public/index.html": INDEX_HTML,
-      "public/styles.css": STYLES_CSS,
-      "public/App.js": APP_JS,
-      "public/components/PostCard.js": POST_CARD_JS,
-      "public/components/UserCard.js": USER_CARD_JS,
-      "public/components/CommentCard.js": COMMENT_CARD_JS,
-      "public/components/PostDetail.js": POST_DETAIL_JS,
-      "public/components/UserDetail.js": USER_DETAIL_JS,
-    },
-  },
-
-  "fullstack-starter": fullstackStarterTemplate,
-};
-
-/**
- * Get a project template by name.
- *
- * @param name - Template name (e.g., 'express-react')
- * @returns Template config or null if not found
- */
-export function getTemplate(
-  name: string,
-): { files: FileMap; entryCommand: string; port: number } | null {
-  return templates[name] || null;
-}
-
-/** List available template names */
-export function listTemplates(): string[] {
-  return Object.keys(templates);
-}