@viji-dev/sdk 1.0.0 → 1.0.2

package/src/cli/server/dev-server.js

@@ -0,0 +1,233 @@
+import http from 'node:http';
+import fs from 'node:fs';
+import path from 'node:path';
+import { exec } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+import { WebSocketServer } from 'ws';
+import chokidar from 'chokidar';
+import { scanScenes, scanSingleScene, readSceneCode } from './scene-scanner.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const MIME_TYPES = {
+  '.html': 'text/html',
+  '.js': 'application/javascript',
+  '.mjs': 'application/javascript',
+  '.css': 'text/css',
+  '.json': 'application/json',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.svg': 'image/svg+xml',
+  '.ico': 'image/x-icon',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+  '.wasm': 'application/wasm',
+  '.map': 'application/json',
+};
+
+function resolveSDKRoot() {
+  return path.resolve(__dirname, '..', '..', '..');
+}
+
+function resolveCoreDist() {
+  const sdkRoot = resolveSDKRoot();
+
+  const localCore = path.join(sdkRoot, 'node_modules', '@viji-dev', 'core', 'dist');
+  if (fs.existsSync(localCore)) return localCore;
+
+  let dir = sdkRoot;
+  while (true) {
+    const candidate = path.join(dir, 'node_modules', '@viji-dev', 'core', 'dist');
+    if (fs.existsSync(candidate)) return candidate;
+    const parent = path.dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+
+  return null;
+}
+
+function serveFile(res, filePath) {
+  const ext = path.extname(filePath);
+  const mime = MIME_TYPES[ext] || 'application/octet-stream';
+
+  try {
+    const data = fs.readFileSync(filePath);
+    res.writeHead(200, {
+      'Content-Type': mime,
+      'Cache-Control': 'no-cache',
+      'Access-Control-Allow-Origin': '*',
+    });
+    res.end(data);
+  } catch {
+    res.writeHead(404, { 'Content-Type': 'text/plain' });
+    res.end('Not Found');
+  }
+}
+
+function sendJSON(res, data, status = 200) {
+  res.writeHead(status, {
+    'Content-Type': 'application/json',
+    'Access-Control-Allow-Origin': '*',
+  });
+  res.end(JSON.stringify(data));
+}
+
+export async function startDevServer({ port, host, open, scenesDir }) {
+  const sdkRoot = resolveSDKRoot();
+  const distDir = path.join(sdkRoot, 'dist');
+  const coreDist = resolveCoreDist();
+
+  if (!fs.existsSync(distDir) || !fs.existsSync(path.join(distDir, 'index.html'))) {
+    console.error('SDK UI not found. The dist/ folder is missing or incomplete.');
+    console.error(`Expected at: ${distDir}`);
+    process.exit(1);
+  }
+
+  const server = http.createServer(async (req, res) => {
+    const url = new URL(req.url, `http://${host}:${port}`);
+    const pathname = url.pathname;
+
+    if (req.method === 'OPTIONS') {
+      res.writeHead(204, {
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Methods': 'GET, OPTIONS',
+        'Access-Control-Allow-Headers': 'Content-Type',
+      });
+      res.end();
+      return;
+    }
+
+    if (pathname === '/api/scenes') {
+      try {
+        const scenes = await scanScenes(scenesDir);
+        sendJSON(res, scenes);
+      } catch (err) {
+        sendJSON(res, { error: err.message }, 500);
+      }
+      return;
+    }
+
+    const codeMatch = pathname.match(/^\/api\/scenes\/([^/]+)\/code$/);
+    if (codeMatch) {
+      try {
+        const code = await readSceneCode(scenesDir, decodeURIComponent(codeMatch[1]));
+        if (code === null) {
+          sendJSON(res, { error: 'Scene not found' }, 404);
+        } else {
+          sendJSON(res, { code });
+        }
+      } catch (err) {
+        sendJSON(res, { error: err.message }, 500);
+      }
+      return;
+    }
+
+    const sceneMatch = pathname.match(/^\/api\/scenes\/([^/]+)$/);
+    if (sceneMatch) {
+      try {
+        const scene = await scanSingleScene(scenesDir, decodeURIComponent(sceneMatch[1]));
+        if (!scene) {
+          sendJSON(res, { error: 'Scene not found' }, 404);
+        } else {
+          sendJSON(res, scene);
+        }
+      } catch (err) {
+        sendJSON(res, { error: err.message }, 500);
+      }
+      return;
+    }
+
+    if (coreDist && pathname.startsWith('/dist/assets/')) {
+      const assetPath = pathname.replace('/dist/assets/', '');
+      const fullPath = path.join(coreDist, 'assets', assetPath);
+      if (fs.existsSync(fullPath)) {
+        serveFile(res, fullPath);
+        return;
+      }
+    }
+
+    let filePath;
+    if (pathname === '/' || pathname === '/index.html') {
+      filePath = path.join(distDir, 'index.html');
+    } else {
+      filePath = path.join(distDir, pathname);
+    }
+
+    if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) {
+      serveFile(res, filePath);
+      return;
+    }
+
+    serveFile(res, path.join(distDir, 'index.html'));
+  });
+
+  const wss = new WebSocketServer({ server, path: '/ws' });
+  const clients = new Set();
+
+  wss.on('connection', (ws) => {
+    clients.add(ws);
+    ws.on('close', () => clients.delete(ws));
+    ws.on('error', () => clients.delete(ws));
+  });
+
+  function broadcast(message) {
+    const data = JSON.stringify(message);
+    for (const ws of clients) {
+      if (ws.readyState === 1) {
+        ws.send(data);
+      }
+    }
+  }
+
+  const watcher = chokidar.watch(scenesDir, {
+    ignoreInitial: true,
+    ignored: /(^|[/\\])\./,
+    persistent: true,
+    depth: 3,
+  });
+
+  watcher.on('add', async (filePath) => {
+    const sceneName = extractSceneName(scenesDir, filePath);
+    if (!sceneName) return;
+    const scene = await scanSingleScene(scenesDir, sceneName);
+    if (scene) broadcast({ type: 'scene:add', scene });
+  });
+
+  watcher.on('change', async (filePath) => {
+    const sceneName = extractSceneName(scenesDir, filePath);
+    if (!sceneName) return;
+    const scene = await scanSingleScene(scenesDir, sceneName);
+    if (scene) broadcast({ type: 'scene:update', scene });
+  });
+
+  watcher.on('unlink', (filePath) => {
+    const sceneName = extractSceneName(scenesDir, filePath);
+    if (!sceneName) return;
+    broadcast({ type: 'scene:remove', sceneId: sceneName });
+  });
+
+  return new Promise((resolve) => {
+    server.listen(port, host, () => {
+      const url = `http://${host}:${port}`;
+      console.log(`Viji dev server running at ${url}`);
+      console.log(`Watching scenes in: ${scenesDir}`);
+      console.log('');
+
+      if (open) {
+        const cmd = process.platform === 'win32' ? 'start' :
+                    process.platform === 'darwin' ? 'open' : 'xdg-open';
+        exec(`${cmd} ${url}`);
+      }
+
+      resolve({ server, wss, watcher });
+    });
+  });
+}
+
+function extractSceneName(scenesDir, filePath) {
+  const rel = path.relative(scenesDir, filePath);
+  const parts = rel.split(path.sep);
+  return parts.length >= 1 ? parts[0] : null;
+}

package/src/cli/server/scene-scanner.js

@@ -0,0 +1,93 @@
+import { readdir, stat, readFile } from 'fs/promises';
+import { join, extname } from 'path';
+import { existsSync } from 'fs';
+
+const SCENE_EXTENSIONS = new Set(['.js', '.ts', '.jsx', '.tsx', '.glsl']);
+
+function detectRenderer(code, ext) {
+  if (ext === '.glsl') return 'shader';
+
+  const directiveMatch = code.match(/\/\/\s*@renderer\s+(\w+)/);
+  if (directiveMatch) return directiveMatch[1];
+
+  if (/function\s+render\s*\(\s*viji\s*,\s*p5\s*\)/.test(code)) return 'p5';
+
+  return 'native';
+}
+
+export async function scanScenes(scenesDir) {
+  if (!existsSync(scenesDir)) return [];
+
+  const entries = await readdir(scenesDir, { withFileTypes: true });
+  const scenes = [];
+
+  for (const entry of entries) {
+    if (!entry.isDirectory()) continue;
+
+    const sceneDir = join(scenesDir, entry.name);
+    const mainFile = await findMainFile(sceneDir);
+    if (!mainFile) continue;
+
+    const mainPath = join(sceneDir, mainFile);
+    const fileStat = await stat(mainPath);
+    const code = await readFile(mainPath, 'utf-8');
+    const ext = extname(mainFile);
+
+    scenes.push({
+      id: entry.name,
+      name: entry.name,
+      renderer: detectRenderer(code, ext),
+      mainFile,
+      createdAt: fileStat.birthtime.toISOString(),
+      lastModified: fileStat.mtime.toISOString(),
+      code,
+    });
+  }
+
+  return scenes.sort((a, b) => a.name.localeCompare(b.name));
+}
+
+export async function scanSingleScene(scenesDir, sceneName) {
+  const sceneDir = join(scenesDir, sceneName);
+  if (!existsSync(sceneDir)) return null;
+
+  const mainFile = await findMainFile(sceneDir);
+  if (!mainFile) return null;
+
+  const mainPath = join(sceneDir, mainFile);
+  const fileStat = await stat(mainPath);
+  const code = await readFile(mainPath, 'utf-8');
+  const ext = extname(mainFile);
+
+  return {
+    id: sceneName,
+    name: sceneName,
+    renderer: detectRenderer(code, ext),
+    mainFile,
+    createdAt: fileStat.birthtime.toISOString(),
+    lastModified: fileStat.mtime.toISOString(),
+    code,
+  };
+}
+
+async function findMainFile(sceneDir) {
+  const candidates = ['main.js', 'main.ts', 'main.jsx', 'main.tsx', 'main.glsl'];
+  for (const name of candidates) {
+    if (existsSync(join(sceneDir, name))) return name;
+  }
+
+  try {
+    const files = await readdir(sceneDir);
+    return files.find(f => SCENE_EXTENSIONS.has(extname(f))) ?? null;
+  } catch {
+    return null;
+  }
+}
+
+export async function readSceneCode(scenesDir, sceneName) {
+  const sceneDir = join(scenesDir, sceneName);
+  const mainFile = await findMainFile(sceneDir);
+  if (!mainFile) return null;
+
+  return readFile(join(sceneDir, mainFile), 'utf-8');
+}

package/src/cli/server/vite-scene-plugin.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from 'vite';
+export function vijiScenePlugin(): Plugin;

package/src/cli/server/vite-scene-plugin.js

@@ -0,0 +1,134 @@
+import { join, relative, sep } from 'node:path';
+import { WebSocketServer } from 'ws';
+import chokidar from 'chokidar';
+import { scanScenes, scanSingleScene, readSceneCode } from './scene-scanner.js';
+
+export function vijiScenePlugin() {
+  const scenesDir = join(process.cwd(), 'scenes');
+  let wss;
+  let watcher;
+
+  return {
+    name: 'viji-scene-server',
+
+    configureServer(server) {
+      const clients = new Set();
+
+      wss = new WebSocketServer({ noServer: true });
+
+      server.httpServer.on('upgrade', (req, socket, head) => {
+        if (req.url === '/ws') {
+          wss.handleUpgrade(req, socket, head, (ws) => {
+            wss.emit('connection', ws, req);
+          });
+        }
+      });
+
+      wss.on('connection', (ws) => {
+        clients.add(ws);
+        ws.on('close', () => clients.delete(ws));
+        ws.on('error', () => clients.delete(ws));
+      });
+
+      function broadcast(message) {
+        const data = JSON.stringify(message);
+        for (const ws of clients) {
+          if (ws.readyState === 1) ws.send(data);
+        }
+      }
+
+      watcher = chokidar.watch(scenesDir, {
+        ignoreInitial: true,
+        ignored: /(^|[/\\])\./,
+        persistent: true,
+        depth: 3,
+      });
+
+      watcher.on('add', async (filePath) => {
+        const sceneName = extractSceneName(scenesDir, filePath);
+        if (!sceneName) return;
+        const scene = await scanSingleScene(scenesDir, sceneName);
+        if (scene) broadcast({ type: 'scene:add', scene });
+      });
+
+      watcher.on('change', async (filePath) => {
+        const sceneName = extractSceneName(scenesDir, filePath);
+        if (!sceneName) return;
+        const scene = await scanSingleScene(scenesDir, sceneName);
+        if (scene) broadcast({ type: 'scene:update', scene });
+      });
+
+      watcher.on('unlink', (filePath) => {
+        const sceneName = extractSceneName(scenesDir, filePath);
+        if (!sceneName) return;
+        broadcast({ type: 'scene:remove', sceneId: sceneName });
+      });
+
+      server.middlewares.use(async (req, res, next) => {
+        const url = new URL(req.url, `http://${req.headers.host}`);
+        const pathname = url.pathname;
+
+        if (pathname === '/api/scenes') {
+          try {
+            const scenes = await scanScenes(scenesDir);
+            sendJSON(res, scenes);
+          } catch (err) {
+            sendJSON(res, { error: err.message }, 500);
+          }
+          return;
+        }
+
+        const codeMatch = pathname.match(/^\/api\/scenes\/([^/]+)\/code$/);
+        if (codeMatch) {
+          try {
+            const code = await readSceneCode(scenesDir, decodeURIComponent(codeMatch[1]));
+            if (code === null) {
+              sendJSON(res, { error: 'Scene not found' }, 404);
+            } else {
+              sendJSON(res, { code });
+            }
+          } catch (err) {
+            sendJSON(res, { error: err.message }, 500);
+          }
+          return;
+        }
+
+        const sceneMatch = pathname.match(/^\/api\/scenes\/([^/]+)$/);
+        if (sceneMatch) {
+          try {
+            const scene = await scanSingleScene(scenesDir, decodeURIComponent(sceneMatch[1]));
+            if (!scene) {
+              sendJSON(res, { error: 'Scene not found' }, 404);
+            } else {
+              sendJSON(res, scene);
+            }
+          } catch (err) {
+            sendJSON(res, { error: err.message }, 500);
+          }
+          return;
+        }
+
+        next();
+      });
+    },
+
+    closeBundle() {
+      if (watcher) watcher.close();
+      if (wss) wss.close();
+    },
+  };
+}
+
+function sendJSON(res, data, status = 200) {
+  res.writeHead(status, {
+    'Content-Type': 'application/json',
+    'Access-Control-Allow-Origin': '*',
+  });
+  res.end(JSON.stringify(data));
+}
+
+function extractSceneName(scenesDir, filePath) {
+  const rel = relative(scenesDir, filePath);
+  const parts = rel.split(sep);
+  return parts.length >= 1 ? parts[0] : null;
+}

package/src/cli/utils/cli-utils.js

@@ -1,128 +1,61 @@
-/**
- * CLI Utilities - Common functions for CLI commands
- */
-
-import { existsSync, readFileSync } from 'fs';
-import { join, dirname } from 'path';
+import { existsSync } from 'fs';
+import { join } from 'path';
 
 export function validateProject(projectDir = process.cwd()) {
-  // Support two layouts:
-  // 1) SDK scene folder: scenes/<project>/main.(js|ts)
-  // 2) External project: src/main.(js|ts)
   const candidates = [
     join(projectDir, 'main.ts'),
     join(projectDir, 'main.js'),
     join(projectDir, 'main.tsx'),
     join(projectDir, 'main.jsx'),
-    join(projectDir, 'src', 'main.ts'),
-    join(projectDir, 'src', 'main.js'),
-    join(projectDir, 'src', 'main.tsx'),
-    join(projectDir, 'src', 'main.jsx')
+    join(projectDir, 'main.glsl'),
   ];
 
   const mainScenePath = candidates.find(p => existsSync(p));
-  const packageJsonPath = join(projectDir, 'package.json');
 
   const issues = [];
   if (!mainScenePath) {
-    issues.push('No main.(js|ts|jsx|tsx) found in current folder or src/');
+    issues.push('No main.(js|ts|jsx|tsx|glsl) found in scene folder');
   }
 
   return {
     valid: issues.length === 0,
     issues,
     paths: {
-      packageJson: packageJsonPath,
       mainScene: mainScenePath || join(projectDir, 'main.js'),
-      projectDir
-    }
+      projectDir,
+    },
   };
 }
 
-export function getProjectInfo(projectDir = process.cwd()) {
-  const validation = validateProject(projectDir);
-  
-  if (!validation.valid) {
-    return { valid: false, ...validation };
-  }
-  
-  try {
-    const packageJson = JSON.parse(readFileSync(validation.paths.packageJson, 'utf8'));
-    
-    return {
-      valid: true,
-      name: packageJson.name,
-      version: packageJson.version,
-      description: packageJson.description,
-      dependencies: packageJson.dependencies || {},
-      devDependencies: packageJson.devDependencies || {},
-      scripts: packageJson.scripts || {},
-      paths: validation.paths
-    };
-  } catch (error) {
-    return {
-      valid: false,
-      issues: ['Could not read project information'],
-      error: error.message
-    };
-  }
-}
-
-export function formatProjectPath(projectName, targetDir = process.cwd()) {
-  return join(targetDir, projectName);
-}
-
-export function generateProjectId() {
-  return Math.random().toString(36).substr(2, 9);
-}
-
 export function validateProjectName(name) {
   const issues = [];
-  
+
   if (!name || name.trim().length === 0) {
-    issues.push('Project name cannot be empty');
+    issues.push('Scene name cannot be empty');
   }
-  
-  if (name.length > 214) {
-    issues.push('Project name too long (max 214 characters)');
+
+  if (name && name.length > 214) {
+    issues.push('Scene name too long (max 214 characters)');
   }
-  
-  if (name.toLowerCase() !== name) {
-    issues.push('Project name should be lowercase');
+
+  if (name && name.toLowerCase() !== name) {
+    issues.push('Scene name should be lowercase');
   }
-  
-  if (!/^[a-z0-9-_]+$/.test(name)) {
-    issues.push('Project name can only contain lowercase letters, numbers, hyphens, and underscores');
+
+  if (name && !/^[a-z0-9-_]+$/.test(name)) {
+    issues.push('Scene name can only contain lowercase letters, numbers, hyphens, and underscores');
   }
-  
-  if (name.startsWith('.') || name.startsWith('-') || name.startsWith('_')) {
-    issues.push('Project name cannot start with a dot, hyphen, or underscore');
+
+  if (name && (name.startsWith('.') || name.startsWith('-') || name.startsWith('_'))) {
+    issues.push('Scene name cannot start with a dot, hyphen, or underscore');
   }
-  
-  const reservedNames = ['viji', 'viji-sdk', 'core', 'main', 'index', 'src', 'dist', 'build'];
-  if (reservedNames.includes(name.toLowerCase())) {
-    issues.push(`Project name "${name}" is reserved`);
+
+  const reserved = ['viji', 'viji-sdk', 'core', 'main', 'index', 'src', 'dist', 'build', 'node_modules'];
+  if (name && reserved.includes(name.toLowerCase())) {
+    issues.push(`Scene name "${name}" is reserved`);
   }
-  
-  return {
-    valid: issues.length === 0,
-    issues
-  };
-}
 
-export function logWithIcon(icon, message, color = 'white') {
-  const colors = {
-    red: '\x1b[31m',
-    green: '\x1b[32m',
-    yellow: '\x1b[33m',
-    blue: '\x1b[34m',
-    magenta: '\x1b[35m',
-    cyan: '\x1b[36m',
-    white: '\x1b[37m',
-    reset: '\x1b[0m'
-  };
-  
-  console.log(`${colors[color]}${icon} ${message}${colors.reset}`);
+  return { valid: issues.length === 0, issues };
 }
 
 export function formatDuration(ms) {
@@ -133,20 +66,18 @@ export function formatDuration(ms) {
 
 export function formatFileSize(bytes) {
   if (bytes === 0) return '0 B';
-  
   const k = 1024;
   const sizes = ['B', 'KB', 'MB', 'GB'];
   const i = Math.floor(Math.log(bytes) / Math.log(k));
-  
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
 }
 
 export function createSpinner(text = 'Loading...') {
-  const frames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+  const frames = ['\u28CB', '\u28D9', '\u28F9', '\u28F8', '\u28FC', '\u28F4', '\u28E6', '\u28E7', '\u28C7', '\u28CF'];
   let i = 0;
   let intervalId;
-  
-  const spinner = {
+
+  return {
     start() {
       process.stdout.write(`${frames[0]} ${text}`);
       intervalId = setInterval(() => {
@@ -154,55 +85,14 @@ export function createSpinner(text = 'Loading...') {
         i = (i + 1) % frames.length;
       }, 80);
     },
-    
     stop(finalText) {
       if (intervalId) {
         clearInterval(intervalId);
         process.stdout.write(`\r${finalText || text}\n`);
       }
     },
-    
     update(newText) {
       text = newText;
-    }
+    },
   };
-  
-  return spinner;
-}
-
-export function isVijiWorkspace(dir = process.cwd()) {
-  // Check for key workspace files
-  const requiredFiles = [
-    join(dir, 'src'),
-    join(dir, 'scenes'), 
-    join(dir, 'vite.config.ts'),
-    join(dir, 'package.json')
-  ];
-  
-  // All required files must exist
-  if (!requiredFiles.every(file => existsSync(file))) {
-    return false;
-  }
-  
-  // Check if package.json has viji workspace marker
-  try {
-    const packageJson = JSON.parse(readFileSync(join(dir, 'package.json'), 'utf8'));
-    return packageJson.viji && packageJson.viji.workspaceVersion;
-  } catch (error) {
-    return false;
-  }
 }
-
-export function findWorkspaceRoot(startDir = process.cwd()) {
-  let currentDir = startDir;
-  
-  while (currentDir !== dirname(currentDir)) {
-    if (isVijiWorkspace(currentDir)) {
-      return currentDir;
-    }
-    currentDir = dirname(currentDir);
-  }
-  
-  return null;
-}
-