@viji-dev/sdk 1.0.0 → 1.0.1

package/src/App.tsx

@@ -1,279 +0,0 @@
-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/init.js

@@ -1,262 +0,0 @@
-/**
- * Init Command - Initialize a new Viji workspace
- */
-
-import { mkdir, writeFile, readFile, copyFile, readdir, stat } from 'fs/promises';
-import { existsSync, readFileSync } from 'fs';
-import { join, resolve, dirname, basename } from 'path';
-import { fileURLToPath } from 'url';
-import { spawn } from 'child_process';
-import { createRequire } from 'module';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-export async function initCommand(workspaceName, options) {
-  try {
-    console.log('🎨 Initializing Viji workspace...');
-    
-    // Determine workspace path
-    let workspacePath;
-    if (workspaceName === '.' || workspaceName === './') {
-      workspacePath = process.cwd();
-      workspaceName = basename(workspacePath);
-      console.log(`📁 Initializing in current directory: ${workspacePath}`);
-      console.log(`🏷️  Workspace name: ${workspaceName}`);
-    } else {
-      workspacePath = resolve(process.cwd(), workspaceName);
-      console.log(`📁 Creating workspace: ${workspacePath}`);
-    }
-    
-    // Check if directory exists and is not empty
-    if (existsSync(workspacePath)) {
-      const files = await readdir(workspacePath);
-      if (files.length > 0) {
-        console.error(`❌ Directory ${workspacePath} is not empty`);
-        console.log('💡 Use "viji init ." to initialize in current directory');
-        process.exit(1);
-      }
-    }
-    
-    // Find SDK directory (where this command is running from)
-    const sdkDir = findSDKDirectory();
-    if (!sdkDir) {
-      console.error('❌ Could not find Viji SDK installation');
-      process.exit(1);
-    }
-    
-    console.log('🛠️ SDK directory:', sdkDir);
-    console.log('🚀 Copying workspace files...');
-    
-    // Create workspace directory if it doesn't exist
-    await mkdir(workspacePath, { recursive: true });
-    
-    // Copy SDK structure to workspace
-    await copyWorkspaceFiles(sdkDir, workspacePath, workspaceName);
-    
-    console.log('📦 Installing dependencies...');
-    
-    // Install dependencies in the new workspace
-    await installDependencies(workspacePath);
-    
-    console.log('✅ Workspace initialized successfully!');
-    console.log('');
-    console.log('🎯 Next steps:');
-    if (workspaceName !== basename(process.cwd())) {
-      console.log(`   cd ${workspaceName}`);
-    }
-    console.log('   viji create my-first-scene --lang=js');
-    console.log('   viji dev');
-    console.log('');
-    console.log('🚀 Happy creating!');
-    
-  } catch (error) {
-    console.error('💥 Failed to initialize workspace:', error.message);
-    process.exit(1);
-  }
-}
-
-async function copyWorkspaceFiles(sdkDir, workspacePath, workspaceName) {
-  // Files and directories to copy from SDK to workspace
-  const filesToCopy = [
-    'src',
-    'scenes', 
-    'public',
-    'index.html',
-    'vite.config.ts',
-    'tsconfig.json',
-    'tsconfig.app.json', 
-    'tsconfig.node.json',
-    'tailwind.config.js',
-    'postcss.config.js',
-    'eslint.config.js',
-    '.gitignore'
-  ];
-  
-  // Files to exclude from copying
-  const excludePatterns = [
-    'node_modules',
-    'dist',
-    'build', 
-    '.git',
-    'package-lock.json',
-    'tsconfig.tsbuildinfo',
-    'vite.config.d.ts'
-  ];
-  
-  for (const item of filesToCopy) {
-    const sourcePath = join(sdkDir, item);
-    const targetPath = join(workspacePath, item);
-    
-    if (existsSync(sourcePath)) {
-      await copyRecursive(sourcePath, targetPath, excludePatterns);
-    }
-  }
-  
-  // Create workspace-specific package.json
-  await createWorkspacePackageJson(sdkDir, workspacePath, workspaceName);
-}
-
-async function copyRecursive(source, target, excludePatterns = []) {
-  const stats = await stat(source);
-  
-  // Check if this path should be excluded
-  const sourceName = basename(source);
-  if (excludePatterns.some(pattern => sourceName.includes(pattern))) {
-    return;
-  }
-  
-  if (stats.isDirectory()) {
-    await mkdir(target, { recursive: true });
-    const files = await readdir(source);
-    
-    for (const file of files) {
-      await copyRecursive(
-        join(source, file),
-        join(target, file),
-        excludePatterns
-      );
-    }
-  } else {
-    await copyFile(source, target);
-  }
-}
-
-async function createWorkspacePackageJson(sdkDir, workspacePath, workspaceName) {
-  // Read the SDK package.json as template
-  const sdkPackageJson = JSON.parse(readFileSync(join(sdkDir, 'package.json'), 'utf8'));
-  
-  // Create workspace package.json
-  const workspacePackageJson = {
-    name: workspaceName,
-    private: true,
-    version: "0.1.0",
-    type: "module",
-    description: `Viji workspace: ${workspaceName}`,
-    scripts: {
-      dev: "vite",
-      build: "tsc -b && vite build", 
-      lint: "eslint .",
-      preview: "vite preview"
-    },
-    dependencies: {
-      // Copy runtime dependencies from SDK
-      "@heroicons/react": sdkPackageJson.dependencies["@heroicons/react"],
-      "@heroui/react": sdkPackageJson.dependencies["@heroui/react"],
-      "@viji-dev/core": sdkPackageJson.dependencies["@viji-dev/core"],
-      "autoprefixer": sdkPackageJson.dependencies["autoprefixer"],
-      "chokidar": sdkPackageJson.dependencies["chokidar"],
-      "clsx": sdkPackageJson.dependencies["clsx"],
-      "framer-motion": sdkPackageJson.dependencies["framer-motion"],
-      "react": sdkPackageJson.dependencies["react"],
-      "react-dom": sdkPackageJson.dependencies["react-dom"],
-      "tailwind-merge": sdkPackageJson.dependencies["tailwind-merge"],
-      "tailwindcss": sdkPackageJson.dependencies["tailwindcss"],
-      "zustand": sdkPackageJson.dependencies["zustand"]
-    },
-    devDependencies: {
-      // Copy dev dependencies from SDK
-      "@eslint/js": sdkPackageJson.devDependencies["@eslint/js"],
-      "@types/node": sdkPackageJson.devDependencies["@types/node"],
-      "@types/react": sdkPackageJson.devDependencies["@types/react"],
-      "@types/react-dom": sdkPackageJson.devDependencies["@types/react-dom"],
-      "@vitejs/plugin-react": sdkPackageJson.devDependencies["@vitejs/plugin-react"],
-      "eslint": sdkPackageJson.devDependencies["eslint"],
-      "eslint-plugin-react-hooks": sdkPackageJson.devDependencies["eslint-plugin-react-hooks"],
-      "eslint-plugin-react-refresh": sdkPackageJson.devDependencies["eslint-plugin-react-refresh"],
-      "globals": sdkPackageJson.devDependencies["globals"],
-      "typescript": sdkPackageJson.devDependencies["typescript"],
-      "typescript-eslint": sdkPackageJson.devDependencies["typescript-eslint"],
-      "vite": sdkPackageJson.devDependencies["vite"]
-    },
-    viji: {
-      sdkVersion: sdkPackageJson.version,
-      initDate: new Date().toISOString(),
-      workspaceVersion: "1.0.0"
-    }
-  };
-  
-  await writeFile(
-    join(workspacePath, 'package.json'),
-    JSON.stringify(workspacePackageJson, null, 2)
-  );
-}
-
-async function installDependencies(workspacePath) {
-  return new Promise((resolve, reject) => {
-    // Use platform-specific npm command
-    const npmCommand = process.platform === 'win32' ? 'npm.cmd' : 'npm';
-    
-    const installProcess = spawn(npmCommand, ['install'], {
-      cwd: workspacePath,
-      stdio: 'inherit',
-      shell: true
-    });
-    
-    installProcess.on('exit', (code) => {
-      if (code === 0) {
-        resolve();
-      } else {
-        reject(new Error(`npm install failed with code ${code}`));
-      }
-    });
-    
-    installProcess.on('error', (error) => {
-      reject(error);
-    });
-  });
-}
-
-function findSDKDirectory() {
-  // Try relative to this CLI file first (for development)
-  const relativeSDK = resolve(__dirname, '..', '..', '..');
-  if (existsSync(join(relativeSDK, 'package.json'))) {
-    const packageJson = JSON.parse(readFileSync(join(relativeSDK, 'package.json'), 'utf8'));
-    if (packageJson.name === 'viji-sdk') {
-      return relativeSDK;
-    }
-  }
-  
-  // Try to find 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 to find in node_modules
-  let currentPath = process.cwd();
-  while (currentPath !== dirname(currentPath)) {
-    const potentialSDK = join(currentPath, 'node_modules', 'viji-sdk');
-    if (existsSync(potentialSDK)) {
-      return potentialSDK;
-    }
-    currentPath = dirname(currentPath);
-  }
-  
-  return null;
-}