Add CLI tool for building and serving apps from JSON/YAML schemas with file-system routing#47
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
|
@copilot 文档应该全英文，如何定义路由 |
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Documentation updated to English-only and added comprehensive routing guide. The guide explains how to:
See commit 2d52763 for full changes to docs/CLI_GUIDE.md |
|
@copilot 是否应该通过文件夹路径实现旅游按照nextjs思路 |
实现路由 |
|
@copilot 继续 |
|
@copilot 继续 |
Support for Supported File Extensions:
How it works: All file extensions work with both single-file and file-system routing modes. You can mix formats in the same project: YAML Example (index.page.yml): type: div
className: min-h-screen flex items-center justify-center
body:
type: card
title: Home Page
body:
- type: text
content: Welcome!
- type: button
label: Get StartedConsole Output: The CLI automatically detects the format and parses JSON or YAML accordingly. |
|
@copilot 是否删除.schema,因为后期还有.menu, .layout |
Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>
File extensions simplified to Changes:
Before: After: Console output: The simplified naming makes it cleaner and more extensible for future file types like menus and layouts. |
huangyiirene
requested review from
Copilot
and removed request for
hotlong and
huangyiirene
There was a problem hiding this comment.
Pull request overview
This PR implements a standalone CLI tool that enables developers to build and serve applications using pure JSON or YAML schema definitions, eliminating the need for React code. The implementation includes automatic file-system routing following Next.js conventions with simplified file naming for extensibility.
Changes:
- Added new
@object-ui/clipackage withinitandservecommands for scaffolding and running applications - Implemented file-system based routing that automatically generates routes from
pages/directory structure - Added support for both JSON and YAML schema formats with simplified file extensions (
.json,.yml,.yaml) - Created comprehensive English documentation covering CLI usage, routing guide, and schema examples
Reviewed changes
Copilot reviewed 15 out of 17 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/cli/package.json | Package configuration for CLI with dependencies and build scripts |
| packages/cli/tsup.config.ts | Build configuration using tsup for ESM output |
| packages/cli/tsconfig.json | TypeScript configuration for CLI package |
| packages/cli/src/cli.ts | Main CLI entry point with command definitions and bilingual help text |
| packages/cli/src/commands/init.ts | Init command implementation with template scaffolding |
| packages/cli/src/commands/serve.ts | Serve command with Vite dev server, file-system routing, and YAML support |
| packages/cli/src/index.ts | Package exports for init and serve functions |
| packages/cli/README.md | CLI package documentation |
| docs/CLI_GUIDE.md | Comprehensive user guide with routing examples and schema format documentation |
| docs/CLI_IMPLEMENTATION_SUMMARY.md | Implementation summary in bilingual format |
| examples/cli-demo/app.schema.json | Demo application showcasing CLI features |
| examples/cli-demo/README.md | Demo usage instructions |
| examples/cli-demo/.gitignore | Git ignore file for demo |
| package.json | Root package.json with CLI convenience scripts |
| README.md | Updated main README with CLI quick start section |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
Comments suppressed due to low confidence (3)
packages/cli/src/commands/serve.ts:1
- Default schema filename uses 'app.schema.json' with double extension, inconsistent with the simplified naming convention (.json, .yml, .yaml) documented in the PR description and CLI_GUIDE.md. Consider changing default to 'app.json' for consistency.
import { createServer } from 'vite';
packages/cli/README.md:1
- Documentation references 'app.schema.json' throughout, but the PR emphasizes simplified file naming (.json, .yml, .yaml) without the .schema middle extension. Update examples to use 'app.json' or 'app.yml' for consistency with the documented file format conventions.
# Object UI CLI
docs/CLI_GUIDE.md:1
- Documentation examples use '.schema.json' extension in route mapping examples, contradicting the simplified naming convention. Update to use '.json' extension for consistency.
# Object UI CLI User Guide
| } | ||
|
|
||
| // Create schema file | ||
| const schemaPath = join(targetDir, 'app.schema.json'); |
There was a problem hiding this comment.
The filename 'app.schema.json' uses double extension naming (.schema.json), but the PR description and CLI_GUIDE.md emphasize simplified file naming with single extensions (.json, .yml, .yaml) for extensibility. This creates inconsistency with the documented file format support. Consider renaming to 'app.json' to align with the simplified naming convention described in the PR.
| Or use with npx: | ||
|
|
||
| ```bash | ||
| npx @object-ui/cli serve app.schema.json |
There was a problem hiding this comment.
Documentation references 'app.schema.json' throughout, but the PR emphasizes simplified file naming (.json, .yml, .yaml) without the .schema middle extension. Update examples to use 'app.json' or 'app.yml' for consistency with the documented file format conventions.
|
|
||
| 2. Start the development server: | ||
| ```bash | ||
| objectui serve app.schema.json |
There was a problem hiding this comment.
Documentation references 'app.schema.json' throughout, but the PR emphasizes simplified file naming (.json, .yml, .yaml) without the .schema middle extension. Update examples to use 'app.json' or 'app.yml' for consistency with the documented file format conventions.
| cd my-app | ||
|
|
||
| # Start server | ||
| objectui serve app.schema.json |
There was a problem hiding this comment.
Multiple references to 'app.schema.json' throughout the documentation conflict with the simplified naming convention described in the PR. The file format section explicitly states supported extensions are .json, .yml, .yaml (not .schema.json). Update all schema file references to use simplified naming like 'app.json' or 'app.yml'.
|
|
||
| 2. Start the development server: | ||
| \`\`\`bash | ||
| objectui serve app.schema.json |
There was a problem hiding this comment.
Generated README.md content references 'app.schema.json', creating inconsistency with the simplified file naming convention. Users following the generated README will use double-extension naming contrary to the documented best practices.
|
|
||
| ## Commands | ||
|
|
||
| - \`objectui serve [schema]\` - Start development server |
There was a problem hiding this comment.
Generated README.md content references 'app.schema.json', creating inconsistency with the simplified file naming convention. Users following the generated README will use double-extension naming contrary to the documented best practices.
| if (name !== '.') { | ||
| console.log(chalk.cyan(` cd ${name}`)); | ||
| } | ||
| console.log(chalk.cyan(' objectui serve app.schema.json')); |
There was a problem hiding this comment.
Generated README.md content references 'app.schema.json', creating inconsistency with the simplified file naming convention. Users following the generated README will use double-extension naming contrary to the documented best practices.
| /about → pages/about.json | ||
| /blog → pages/blog/index.json | ||
| /blog/:id → pages/blog/[id].json | ||
| /users/:userId → pages/users/[userId].schema.json |
There was a problem hiding this comment.
Documentation examples use '.schema.json' extension in route mapping examples, contradicting the simplified naming convention. Update to use '.json' extension for consistency.
|
✅ All checks passed!
|
|
@copilot 全部用英文 |
… of app.schema.json Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>
All Chinese text removed and file naming updated to Changes:
CLI Help (before): CLI Help (after): Generated files:
The CLI is now fully English with consistent, simplified naming. |
|
✅ All checks passed!
|
Object UI CLI Implementation - Complete ✅
Problem Statement
Can I build an application using JSON and start it with a CLI command?
Solution
✅ Fully Implemented - Object UI CLI tool that allows users to build and run applications from JSON/YAML schemas
Key Features
objectui init [name]- Create new applicationsapp.jsonwith chosen templateobjectui serve [schema]- Start development serverapp.jsonRecent Updates ✅
Consistency and Localization:
app.json(removed.schemaprefix)File Extensions:
.json- JSON format.yml/.yaml- YAML format.menu.json,.layout.json)File-System Based Routing ✅ IMPLEMENTED
Automatic Route Detection:
pages/index.json→/pages/about.yml→/aboutpages/blog/[id].yaml→/blog/:id(dynamic routes)Directory Structure:
Package Structure
packages/cli/- CLI tool with simplified, English-only interfaceexamples/cli-demo/- Demo applicationdocs/CLI_GUIDE.md- English documentationdocs/CLI_IMPLEMENTATION_SUMMARY.md- Implementation summaryDocumentation
app.json)CLI Interface
Code Quality
Ready for Release
The CLI package is ready to be published to npm.
Usage:
CLI Help:
Original prompt
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.