@viji-dev/sdk 1.0.0

package/src/App.tsx

@@ -0,0 +1,279 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { HeroUIProvider } from '@heroui/react';
+import SDKPage from './components/SDKPage';
+import { projectFileSystem } from './services/project-filesystem';
+// Force Vite to include /scenes files in module graph for HMR
+import { sceneHmrCount } from './scenes-hmr';
+
+
+interface Project {
+  id: string;
+  name: string;
+  path: string;
+  mainFile: string;
+  lastModified: Date;
+  sceneType: 'javascript' | 'typescript' | 'shader';
+  isBuilt: boolean;
+}
+
+const App: React.FC = () => {
+  // Transform ESM exports to runtime-friendly code for worker eval (initial load)
+  // No longer needed - parameter object API scenes are passed directly as strings to VijiCore
+
+  const [sceneError, setSceneError] = useState<string>('');
+  const [currentSceneCode, setCurrentSceneCode] = useState<string>('');
+  const [currentProject, setCurrentProject] = useState<Project | undefined>();
+  const hmrCooldownUntilRef = useRef<number>(0);
+  const lastCodeRef = useRef<string>('');
+  useEffect(() => { lastCodeRef.current = currentSceneCode; }, [currentSceneCode]);
+
+  const hashString = (str: string): string => {
+    let hash = 2166136261; // FNV offset basis
+    for (let i = 0; i < str.length; i++) {
+      hash ^= str.charCodeAt(i);
+      hash = (hash * 16777619) >>> 0; // FNV prime, convert to unsigned 32-bit
+    }
+    return hash.toString(16);
+  };
+  
+  // Load first available project on initial load
+  useEffect(() => {
+    console.log('🧷 scenes HMR files attached:', sceneHmrCount);
+    const loadInitialProject = async () => {
+      if (!currentProject) {
+        try {
+          const projects = await projectFileSystem.getProjects();
+          if (projects.length > 0) {
+            // Convert ProjectInfo to Project format
+            const firstProject: Project = {
+              id: projects[0].id,
+              name: projects[0].name,
+              path: projects[0].path,
+              mainFile: projects[0].mainFile,
+              lastModified: projects[0].lastModified,
+              sceneType: projects[0].projectType,
+              isBuilt: projects[0].isBuilt || false,
+            };
+            await handleProjectSwitch(firstProject);
+          }
+        } catch (error) {
+          console.error('❌ Failed to load initial project:', error);
+          setSceneError('No projects found. Create a project to get started.');
+        }
+      }
+    };
+    loadInitialProject();
+  }, [currentProject]);
+  // Vite HMR: watch current project's files and reload scene code on save
+  useEffect(() => {
+    const hot: any = (import.meta as any).hot;
+    if (!currentProject || !hot) return;
+
+    const stripQuery = (p: string) => (p || '').replace(/\?.*$/, '');
+    const normalize = (p: string) => stripQuery(p).replace(/^\/@fs\//, '/');
+
+    const onAfterUpdate = async (payload: any) => {
+      try {
+        if (Date.now() < hmrCooldownUntilRef.current) return;
+        const updates = payload?.updates || [];
+        console.log('🛰️ Vite HMR payload:', updates);
+        // Ignore HMR updates that come from virtual modules or outside /scenes
+        const changed = updates.some((u: any) => {
+          const p = normalize(u.path || u.acceptedPath || '');
+          // Any file change under the active project's folder triggers reload (multi-file support)
+          const hit = p.includes(`/scenes/${currentProject.id}/`);
+          if (hit) console.log('🔁 Matched HMR path:', p);
+          return hit;
+        });
+        if (!changed) return;
+
+        console.log(`🔥 HMR detected change in ${currentProject.name}, reloading scene code...`);
+        // For multi-file projects, bundle local relative imports too
+        const code = await projectFileSystem.loadBundledProjectCode(currentProject.id);
+        const prevHash = hashString(lastCodeRef.current || '');
+        const nextHash = hashString(code || '');
+        console.log('♻️ [HMR] reloading active project code', {
+          project: currentProject.id,
+          prevLen: lastCodeRef.current?.length || 0,
+          nextLen: code.length,
+          prevHash,
+          nextHash
+        });
+        setSceneError('');
+        setCurrentSceneCode(code);
+      } catch (e: any) {
+        console.error('❌ HMR reload failed:', e);
+        setSceneError(e?.message || 'Hot reload failed');
+      }
+    };
+
+    const onBeforeUpdate = (payload: any) => {
+      try {
+        console.log('🛰️ Vite HMR beforeUpdate:', payload?.updates);
+      } catch {}
+    };
+    const onInvalidate = (payload: any) => {
+      try {
+        console.log('🛰️ Vite HMR invalidate:', payload?.path || payload);
+      } catch {}
+    };
+
+    hot.on('vite:beforeUpdate', onBeforeUpdate);
+    hot.on('vite:afterUpdate', onAfterUpdate);
+    hot.on('vite:invalidate', onInvalidate);
+    return () => {
+      try {
+        hot.off?.('vite:beforeUpdate', onBeforeUpdate);
+        hot.off?.('vite:afterUpdate', onAfterUpdate);
+        hot.off?.('vite:invalidate', onInvalidate);
+      } catch {}
+    };
+  }, [currentProject?.id]);
+
+  // Also listen to custom scene file update events and reload code
+  useEffect(() => {
+    if (!currentProject) return;
+    const handler = async (e: any) => {
+      try {
+        const path = e?.detail?.path || '';
+        if (!path.includes(`/scenes/${currentProject.id}/`)) return;
+        
+        console.log('🧨 [Scenes HMR] event for active project:', path);
+        const code = await projectFileSystem.loadBundledProjectCode(currentProject.id);
+        // Debug logs disabled - HMR working correctly
+        
+        console.log('🧨 [Scenes HMR] applying bundle for active project', {
+          path,
+          project: currentProject.id,
+          prevLen: lastCodeRef.current?.length || 0,
+          nextLen: code.length,
+          codeChanged: lastCodeRef.current !== code
+        });
+        setSceneError('');
+        // Always force update when file is saved, regardless of content
+        // Add a timestamp comment to ensure React always sees it as a new value
+        const timestamp = Date.now();
+        const timestampedCode = `// File modified: ${timestamp}\n${code}`;
+        
+        console.log('🔄 [App] Setting new scene code with timestamp:', {
+          oldLen: currentSceneCode.length,
+          newLen: timestampedCode.length,
+          timestamp: timestamp
+        });
+        setCurrentSceneCode(timestampedCode);
+      } catch (err) {
+        console.error('❌ Scenes HMR event reload failed:', err);
+      }
+    };
+    window.addEventListener('viji-scene-file-updated', handler as any);
+    return () => {
+      window.removeEventListener('viji-scene-file-updated', handler as any);
+    };
+  }, [currentProject?.id]);
+
+  // Fallback dev polling: periodically re-read active project's code and update if changed
+  useEffect(() => {
+    if (!currentProject) return;
+    let cancelled = false;
+    const interval = window.setInterval(async () => {
+      if (cancelled) return;
+      if (Date.now() < hmrCooldownUntilRef.current) return;
+      try {
+        const code = await projectFileSystem.loadBundledProjectCode(currentProject.id);
+        if (code && code !== lastCodeRef.current) {
+          setSceneError('');
+          setCurrentSceneCode(code);
+        }
+      } catch {}
+    }, 900);
+    return () => {
+      cancelled = true;
+      try { window.clearInterval(interval); } catch {}
+    };
+  }, [currentProject?.id]);
+
+  const handleSceneError = (error: string) => {
+    setSceneError(error);
+  };
+
+
+  // Project management functions
+  const handleProjectSwitch = async (project: Project) => {
+    console.log('🎯 USER CLICKED PROJECT:', {
+      id: project.id,
+      name: project.name,
+      path: project.path,
+      mainFile: project.mainFile
+    });
+    
+    const requestId = Symbol(project.id);
+    const latestRequestRef = (handleProjectSwitch as any).latestRef || { current: requestId };
+    latestRequestRef.current = requestId;
+    (handleProjectSwitch as any).latestRef = latestRequestRef;
+    
+    try {
+      // Load scene code dynamically from the filesystem
+      // Scene code is now in parameter object API format - passed directly to VijiCore
+      console.log(`📂 Loading project with ID: "${project.id}"`);
+      const sceneCode = await projectFileSystem.loadBundledProjectCode(project.id);
+      // Guard against out-of-order async resolutions
+      if (latestRequestRef.current !== requestId) return;
+      // Update both the selected project and its code together so effects see a consistent pair
+      setCurrentProject(project);
+      setCurrentSceneCode(sceneCode);
+      setSceneError(''); // Clear any previous errors
+      // avoid immediate HMR loop right after loading
+      hmrCooldownUntilRef.current = Date.now() + 1000;
+      console.log('✅ Successfully loaded scene for:', project.name, `(${sceneCode.length} chars)`);
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      setSceneError(`Failed to load scene: ${errorMessage}`);
+      console.error('❌ Failed to load scene code for project ID:', project.id, 'Project name:', project.name, 'Error:', error);
+    }
+  };
+
+  // Note: UI CRUD handlers removed - project management now done manually/CLI
+
+  // Error display component
+  if (sceneError) {
+    return (
+      <HeroUIProvider>
+        <div className="fixed inset-0 bg-black flex items-center justify-center">
+          <div className="text-center text-white max-w-lg p-8">
+            <h2 className="text-xl font-bold mb-4 text-red-400">Scene Error</h2>
+            <pre className="text-sm bg-red-900/20 p-4 rounded border border-red-500/50 overflow-auto whitespace-pre-wrap">
+              {sceneError}
+            </pre>
+            <div className="flex space-x-2 mt-4">
+              <button 
+                onClick={() => setSceneError('')}
+                className="px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded"
+              >
+                Dismiss Error
+              </button>
+            </div>
+          </div>
+        </div>
+      </HeroUIProvider>
+    );
+  }
+
+
+
+  return (
+    <HeroUIProvider>
+      <div className="relative">
+        <SDKPage
+          sceneCode={currentSceneCode}
+          onSceneError={handleSceneError}
+          currentProject={currentProject}
+          onProjectSwitch={handleProjectSwitch}
+        />
+        
+      </div>
+    </HeroUIProvider>
+  );
+};
+
+export default App;
+

package/src/cli/commands/build.js

@@ -0,0 +1,147 @@
+/**
+ * Build Command - Compile scenes for platform deployment
+ */
+
+import { mkdir, writeFile } from 'fs/promises';
+import { dirname, resolve, join } from 'path';
+import { fileURLToPath } from 'url';
+import { SceneCompiler } from '../utils/scene-compiler.js';
+import { validateProject, createSpinner, formatFileSize, formatDuration, isVijiWorkspace, findWorkspaceRoot } from '../utils/cli-utils.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export async function buildCommand(sceneName, options) {
+  const startTime = Date.now();
+  const spinner = createSpinner('Building Viji scene...');
+  
+  try {
+    // Check if we're in a Viji workspace
+    const workspaceRoot = findWorkspaceRoot();
+    if (!workspaceRoot) {
+      console.error('❌ Not in a Viji workspace.');
+      console.log('💡 Run "viji init my-workspace" to create a workspace first');
+      process.exit(1);
+    }
+
+    console.log('🏠 Workspace:', workspaceRoot);
+    
+    // If no scene name provided, show available scenes
+    if (!sceneName) {
+      console.error('❌ Please specify a scene name to build');
+      console.log('💡 Usage: viji build <scene-name>');
+      // TODO: List available scenes
+      process.exit(1);
+    }
+    
+    // Validate scene exists
+    const scenePath = join(workspaceRoot, 'scenes', sceneName);
+    const validation = validateProject(scenePath);
+    if (!validation.valid) {
+      console.error(`❌ Invalid scene "${sceneName}":`);
+      validation.issues.forEach(issue => console.error(`  • ${issue}`));
+      process.exit(1);
+    }
+    
+    const { projectDir, mainScene } = validation.paths;
+    
+    // Parse build options
+    const outputFile = resolve(projectDir, options.output || 'dist/scene.js');
+    const outputDir = dirname(outputFile);
+    
+    console.log('📦 Building Viji scene for deployment...');
+    console.log('📁 Project:', projectDir);
+    console.log('📄 Scene file:', mainScene);
+    console.log('📤 Output:', outputFile);
+    console.log('');
+    
+    // Create output directory
+    await mkdir(outputDir, { recursive: true });
+    
+    // Initialize compiler with options
+    const compiler = new SceneCompiler({ minify: false });
+    
+    spinner.start();
+    spinner.update('Analyzing scene structure...');
+    
+    // Compile scene
+    const buildResult = await compiler.compile(mainScene, outputFile);
+    
+    spinner.update('Writing output files...');
+    
+    // Write main bundle
+    await writeFile(outputFile, buildResult.code);
+    
+    // No source maps/minify in current simple build
+    
+    // Write metadata
+    const metadataFile = outputFile.replace(/\.js$/i, '.meta.json');
+    await writeFile(metadataFile, JSON.stringify(buildResult.metadata, null, 2));
+    
+    const buildTime = Date.now() - startTime;
+    spinner.stop('✅ Build completed successfully!');
+    
+    // Display results
+    console.log('');
+    console.log('📊 Build Results:');
+    console.log(`  📦 Bundle size: ${formatFileSize(buildResult.code.length)}`);
+    console.log(`  ⏱️  Build time: ${formatDuration(buildTime)}`);
+    console.log(`  🎯 Scene file: ${outputFile}`);
+    console.log(`  📋 Metadata: ${metadataFile}`);
+    
+    if (options.sourceMap && buildResult.sourceMap) {
+      console.log(`  🗺️  Source map: ${outputFile}.map`);
+    }
+    
+    // Display scene info
+    const scene = buildResult.metadata.scene;
+    console.log('');
+    console.log('🎨 Scene Info:');
+    console.log(`  🎛️  Parameters: ${scene.parameters.length} groups`);
+    console.log(`  📤 Exports: ${scene.exports.join(', ')}`);
+    console.log(`  🔗 Dependencies: ${scene.dependencies}`);
+    console.log(`  🖼️  Assets: ${scene.assets}`);
+    console.log(`  🎨 Shaders: ${scene.shaders}`);
+    console.log(`  🚀 Complexity: ${buildResult.metadata.performance.complexity}`);
+    console.log(`  💾 Est. Memory: ${buildResult.metadata.performance.estimatedMemory}`);
+    
+    if (buildResult.metadata.performance.features.length > 0) {
+      console.log(`  ✨ Features: ${buildResult.metadata.performance.features.join(', ')}`);
+    }
+    
+    // Display warnings
+    if (buildResult.warnings.length > 0) {
+      console.log('');
+      console.log('⚠️  Warnings:');
+      buildResult.warnings.forEach(warning => {
+        console.log(`  • ${warning}`);
+      });
+    }
+    
+    // Display validation issues
+    if (!scene.validation.isValid) {
+      console.log('');
+      console.log('❌ Validation Issues:');
+      scene.validation.issues.forEach(issue => {
+        console.log(`  • ${issue}`);
+      });
+    }
+    
+    console.log('');
+    console.log('🚀 Your scene is ready for deployment!');
+    console.log('📋 Upload the bundle to the Viji platform to share your creation.');
+    
+  } catch (error) {
+    spinner.stop('💥 Build failed');
+    console.error('');
+    console.error('💥 Build failed:', error.message);
+    
+    if (error.stack && process.env.DEBUG) {
+      console.error('');
+      console.error('Stack trace:');
+      console.error(error.stack);
+    }
+    
+    process.exit(1);
+  }
+}

package/src/cli/commands/create.js

@@ -0,0 +1,71 @@
+/**
+ * Create Command - Generate new Viji scene projects (minimal)
+ */
+
+import { mkdir, writeFile } from 'fs/promises';
+import { existsSync } from 'fs';
+import { join, resolve } from 'path';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+import { isVijiWorkspace, findWorkspaceRoot } from '../utils/cli-utils.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Shared minimal template (single source of truth)
+import { getMinimalSceneTemplate } from '../../templates/minimal-template.js';
+
+export async function createCommand(sceneName, options) {
+  try {
+    console.log('🎨 Creating new Viji scene...');
+    console.log(`📁 Scene: ${sceneName}`);
+    console.log(`🎯 Language: ${options.lang || 'js'}`);
+
+    // Check if we're in a Viji workspace
+    const workspaceRoot = findWorkspaceRoot();
+    if (!workspaceRoot) {
+      console.error('❌ Not in a Viji workspace.');
+      console.log('💡 Run "viji init my-workspace" to create a workspace first');
+      process.exit(1);
+    }
+
+    console.log('🏠 Workspace:', workspaceRoot);
+
+    // Create scene inside workspace scenes/ directory
+    const scenesDir = join(workspaceRoot, 'scenes');
+    const scenePath = join(scenesDir, sceneName);
+
+    // Ensure scene doesn't already exist
+    if (existsSync(scenePath)) {
+      console.error(`❌ Scene already exists: ${scenePath}`);
+      process.exit(1);
+    }
+
+    // Create scene folder
+    await mkdir(scenePath, { recursive: true });
+    console.log(`✅ Created scene directory: ${scenePath}`);
+
+    // Write minimal scene
+    const lang = options.lang === 'ts' ? 'ts' : 'js';
+    const mainName = lang === 'ts' ? 'main.ts' : 'main.js';
+    const mainPath = join(scenePath, mainName);
+
+    const contents = getMinimalSceneTemplate(lang)
+      .replace('New TypeScript Scene', `${sceneName} - minimal scene`)
+      .replace('New JavaScript Scene', `${sceneName} - minimal scene`);
+
+    await writeFile(mainPath, contents);
+    console.log(`📝 Created scene file: ${join(scenePath, mainName)}`);
+
+    console.log('🎉 Scene created successfully!');
+    console.log('');
+    console.log('📚 Next steps:');
+    console.log('   viji dev                    # Start development server');
+    console.log(`   # Edit scenes/${sceneName}/${mainName} in your IDE`);
+    console.log('');
+    console.log('🚀 Happy coding!');
+  } catch (error) {
+    console.error('💥 Failed to create scene:', error.message);
+    process.exit(1);
+  }
+}

package/src/cli/commands/dev.js

@@ -0,0 +1,108 @@
+/**
+ * Dev Command - Start development server with hot reload
+ */
+
+import { spawn } from 'child_process';
+import { join, resolve } from 'path';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+import { existsSync } from 'fs';
+import { createRequire } from 'module';
+import { isVijiWorkspace, findWorkspaceRoot } from '../utils/cli-utils.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export async function devCommand(options) {
+  try {
+    console.log('🔥 Starting Viji development server...');
+    
+    // Check if we're in a Viji workspace
+    const workspaceRoot = findWorkspaceRoot();
+    if (!workspaceRoot) {
+      console.error('❌ Not in a Viji workspace.');
+      console.log('💡 Run "viji init my-workspace" to create a workspace first');
+      process.exit(1);
+    }
+    
+    console.log('🏠 Workspace:', workspaceRoot);
+    await startDevServer(workspaceRoot, options);
+  } catch (error) {
+    console.error('💥 Failed to start development server:', error.message);
+    process.exit(1);
+  }
+}
+
+async function startDevServer(workspaceRoot, options) {
+  const { port, host, open } = options;
+  
+  console.log(`🌐 Development server will start on: http://${host}:${port}`);
+
+  // Build Vite args and run in workspace directory
+  const viteArgs = ['run', 'dev', '--', '--port', String(port), '--host', host];
+  if (open) viteArgs.push('--open');
+
+  const viteProcess = spawn('npm', viteArgs, {
+    cwd: workspaceRoot,
+    stdio: 'inherit',
+    env: {
+      ...process.env
+    }
+  });
+  
+  // Handle process termination
+  process.on('SIGINT', () => {
+    console.log('\n🛑 Stopping development server...');
+    viteProcess.kill('SIGINT');
+    process.exit(0);
+  });
+  
+  process.on('SIGTERM', () => {
+    viteProcess.kill('SIGTERM');
+    process.exit(0);
+  });
+  
+  viteProcess.on('exit', (code) => {
+    if (code !== 0) {
+      console.error(`❌ Development server exited with code ${code}`);
+      process.exit(code);
+    }
+  });
+  
+  console.log('✅ Development server started!');
+}
+
+function findSDKDirectory() {
+  // Try to find SDK directory from current working directory upwards
+  let currentPath = process.cwd();
+  
+  while (currentPath !== '/') {
+    const potentialSDK = join(currentPath, 'node_modules', 'viji-sdk');
+    if (existsSync(potentialSDK)) {
+      return potentialSDK;
+    }
+    
+    const parentPath = dirname(currentPath);
+    if (parentPath === currentPath) break;
+    currentPath = parentPath;
+  }
+  
+  // Try global installation
+  try {
+    const require = createRequire(import.meta.url);
+    const globalSDK = require.resolve('viji-sdk');
+    if (globalSDK) {
+      return dirname(dirname(globalSDK)); // Go up from lib/index.js to root
+    }
+  } catch (error) {
+    // Not found globally
+  }
+  
+  // Try relative to this CLI file
+  const relativeSDK = resolve(__dirname, '..', '..', '..');
+  if (existsSync(join(relativeSDK, 'package.json'))) {
+    return relativeSDK;
+  }
+  
+  return null;
+}