Changes before error encountered

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

docs/CLI_GUIDE.md

@@ -171,15 +171,23 @@ Create a `pages/` directory with your schema files:
 my-app/
 ├── pages/
 │   ├── index.schema.json        → /
-│   ├── about.schema.json         → /about
+│   ├── about.page.json          → /about
 │   ├── blog/
-│   │   ├── index.schema.json    → /blog
-│   │   └── [id].schema.json     → /blog/:id
+│   │   ├── index.page.yml       → /blog
+│   │   └── [id].schema.yaml     → /blog/:id
 │   └── users/
-│       └── [userId].schema.json → /users/:userId
+│       └── [userId].page.json   → /users/:userId
 └── app.schema.json (optional, reserved for future layout support)
 ```
 
+**Supported File Extensions:**
+- `.schema.json` - JSON schema file
+- `.page.json` - Alternative JSON format
+- `.schema.yml` / `.schema.yaml` - YAML schema file
+- `.page.yml` / `.page.yaml` - Alternative YAML format
+
+All formats are equivalent - use whichever you prefer. YAML files are parsed automatically.
+
 #### Example Page Schemas
 
 **pages/index.schema.json:**
@@ -198,6 +206,18 @@ my-app/
 }
 ```
 
+**pages/about.page.yml (YAML format):**
+```yaml
+type: div
+className: p-8
+body:
+  type: card
+  title: About Page
+  body:
+    type: text
+    content: Learn more about us!
+```
+
 **pages/about.schema.json:**
 ```json
 {

packages/cli/package.json

@@ -36,12 +36,14 @@
     "vite": "^5.0.0",
     "@vitejs/plugin-react": "^4.2.1",
     "express": "^4.21.2",
+    "js-yaml": "^4.1.0",
     "@object-ui/react": "workspace:*",
     "@object-ui/components": "workspace:*"
   },
   "devDependencies": {
     "@types/express": "^4.17.21",
     "@types/node": "^24.10.8",
+    "@types/js-yaml": "^4.0.9",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0"
   }

packages/cli/src/commands/serve.ts

@@ -3,6 +3,7 @@ import react from '@vitejs/plugin-react';
 import { existsSync, readFileSync, writeFileSync, mkdirSync, readdirSync, statSync } from 'fs';
 import { join, resolve, relative, basename, dirname } from 'path';
 import chalk from 'chalk';
+import * as yaml from 'js-yaml';
 
 interface ServeOptions {
   port: string;
@@ -55,10 +56,9 @@ export async function serve(schemaPath: string, options: ServeOptions) {
 
     // Read and validate schema
     try {
-      const schemaContent = readFileSync(fullSchemaPath, 'utf-8');
-      schema = JSON.parse(schemaContent);
+      schema = parseSchemaFile(fullSchemaPath);
     } catch (error) {
-      throw new Error(`Invalid JSON in schema file: ${error instanceof Error ? error.message : error}`);
+      throw new Error(`Invalid schema file: ${error instanceof Error ? error.message : error}`);
     }
   }
 
@@ -362,6 +362,37 @@ export default {
   writeFileSync(join(tmpDir, 'tsconfig.json'), JSON.stringify(tsconfig, null, 2));
 }
 
+// Helper function to check if a file is a supported schema file
+function isSupportedSchemaFile(filename: string): boolean {
+  return filename.endsWith('.schema.json') || 
+         filename.endsWith('.page.json') ||
+         filename.endsWith('.schema.yml') ||
+         filename.endsWith('.schema.yaml') ||
+         filename.endsWith('.page.yml') ||
+         filename.endsWith('.page.yaml');
+}
+
+// Helper function to extract the base filename without extension
+function getBaseFileName(filename: string): string {
+  // Remove supported extensions
+  return filename
+    .replace(/\.schema\.(json|yml|yaml)$/, '')
+    .replace(/\.page\.(json|yml|yaml)$/, '');
+}
+
+// Helper function to parse schema file (JSON or YAML)
+function parseSchemaFile(filePath: string): any {
+  const content = readFileSync(filePath, 'utf-8');
+  
+  if (filePath.endsWith('.json')) {
+    return JSON.parse(content);
+  } else if (filePath.endsWith('.yml') || filePath.endsWith('.yaml')) {
+    return yaml.load(content);
+  }
+  
+  throw new Error(`Unsupported file format: ${filePath}`);
+}
+
 function scanPagesDirectory(pagesDir: string): RouteInfo[] {
   const routes: RouteInfo[] = [];
 
@@ -376,15 +407,15 @@ function scanPagesDirectory(pagesDir: string): RouteInfo[] {
         // Recursively scan subdirectories
         const newPrefix = routePrefix + '/' + entry;
         scanDir(fullPath, newPrefix);
-      } else if (entry.endsWith('.schema.json')) {
+      } else if (isSupportedSchemaFile(entry)) {
         // Process schema file
-        const fileName = basename(entry, '.schema.json');
+        const fileName = getBaseFileName(entry);
         let routePath: string;
         let isDynamic = false;
         let paramName: string | undefined;
 
         if (fileName === 'index') {
-          // index.schema.json maps to the directory path
+          // index.schema.json or index.page.json maps to the directory path
           routePath = routePrefix || '/';
         } else if (fileName.startsWith('[') && fileName.endsWith(']')) {
           // Dynamic route: [id].schema.json -> /:id
@@ -398,8 +429,7 @@ function scanPagesDirectory(pagesDir: string): RouteInfo[] {
 
         // Read and parse schema
         try {
-          const schemaContent = readFileSync(fullPath, 'utf-8');
-          const schema = JSON.parse(schemaContent);
+          const schema = parseSchemaFile(fullPath);
 
           routes.push({
             path: routePath,
@@ -409,7 +439,7 @@ function scanPagesDirectory(pagesDir: string): RouteInfo[] {
             paramName,
           });
         } catch (error) {
-          console.warn(chalk.yellow(`⚠ Warning: Failed to parse ${fullPath}`));
+          console.warn(chalk.yellow(`⚠ Warning: Failed to parse ${fullPath}: ${error instanceof Error ? error.message : error}`));
         }
       }
     }