From 7a6aa44cff35acaf60e779a63e1fb5f08f288259 Mon Sep 17 00:00:00 2001 From: hoshinotsuyoshi Date: Thu, 7 Nov 2024 15:08:12 +0900 Subject: [PATCH 1/9] $ pnpm add commander --- frontend/packages/cli/package.json | 1 + frontend/pnpm-lock.yaml | 3 +++ 2 files changed, 4 insertions(+) diff --git a/frontend/packages/cli/package.json b/frontend/packages/cli/package.json index 530cca7d4..67526c17d 100644 --- a/frontend/packages/cli/package.json +++ b/frontend/packages/cli/package.json @@ -15,6 +15,7 @@ }, "dependencies": { "@liam/erd-core": "workspace:*", + "commander": "^12.1.0", "react": "^18", "react-dom": "^18" }, diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index daeb31858..73e504859 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -26,6 +26,9 @@ importers: '@liam/erd-core': specifier: workspace:* version: link:../erd-core + commander: + specifier: ^12.1.0 + version: 12.1.0 react: specifier: ^18 version: 18.3.1 From 5270bee0dfc694a7e415d74e94a829ad1f5a0f04 Mon Sep 17 00:00:00 2001 From: hoshinotsuyoshi Date: Fri, 8 Nov 2024 15:55:49 +0900 Subject: [PATCH 2/9] Update dependencies - `@types/node` for bin/cli.ts - move vite to dependencies from devDependencies --- frontend/packages/cli/package.json | 7 ++-- frontend/pnpm-lock.yaml | 53 ++++++++++++++++-------------- 2 files changed, 32 insertions(+), 28 deletions(-) diff --git a/frontend/packages/cli/package.json b/frontend/packages/cli/package.json index 67526c17d..7fcf6134b 100644 --- a/frontend/packages/cli/package.json +++ b/frontend/packages/cli/package.json @@ -17,14 +17,15 @@ "@liam/erd-core": "workspace:*", "commander": "^12.1.0", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "vite": "^5.4.10" }, "devDependencies": { "@biomejs/biome": "1.9.3", + "@types/node": "^22.9.0", "@types/react": "^18", "@types/react-dom": "^18", "@vitejs/plugin-react": "^4.3.3", - "typescript": "^5", - "vite": "^5.4.10" + "typescript": "^5" } } diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 73e504859..32d0015e6 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -10,7 +10,7 @@ importers: devDependencies: '@turbo/gen': specifier: ^2.1.2 - version: 2.1.3(@types/node@22.7.4)(typescript@5.6.2) + version: 2.1.3(@types/node@22.9.0)(typescript@5.6.2) concurrently: specifier: ^9.0.1 version: 9.0.1 @@ -35,10 +35,16 @@ importers: react-dom: specifier: ^18 version: 18.3.1(react@18.3.1) + vite: + specifier: ^5.4.10 + version: 5.4.10(@types/node@22.9.0) devDependencies: '@biomejs/biome': specifier: 1.9.3 version: 1.9.3 + '@types/node': + specifier: ^22.9.0 + version: 22.9.0 '@types/react': specifier: ^18 version: 18.3.12 @@ -47,13 +53,10 @@ importers: version: 18.3.1 '@vitejs/plugin-react': specifier: ^4.3.3 - version: 4.3.3(vite@5.4.10(@types/node@22.7.4)) + version: 4.3.3(vite@5.4.10(@types/node@22.9.0)) typescript: specifier: ^5 version: 5.6.2 - vite: - specifier: ^5.4.10 - version: 5.4.10(@types/node@22.7.4) packages/configs: devDependencies: @@ -1065,12 +1068,12 @@ packages: '@types/minimatch@5.1.2': resolution: {integrity: sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==} - '@types/node@20.16.10': - resolution: {integrity: sha512-vQUKgWTjEIRFCvK6CyriPH3MZYiYlNy0fKiEYHWbcoWLEgs4opurGGKlebrTLqdSMIbXImH6XExNiIyNUv3WpA==} - '@types/node@22.7.4': resolution: {integrity: sha512-y+NPi1rFzDs1NdQHHToqeiX2TIS79SWEAw9GYhkkx8bD0ChpfqC+n2j5OXOCpzfojBEBt6DnEnnG9MY0zk1XLg==} + '@types/node@22.9.0': + resolution: {integrity: sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==} + '@types/prop-types@15.7.13': resolution: {integrity: sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==} @@ -3984,7 +3987,7 @@ snapshots: '@tsconfig/strictest@2.0.5': {} - '@turbo/gen@2.1.3(@types/node@22.7.4)(typescript@5.6.2)': + '@turbo/gen@2.1.3(@types/node@22.9.0)(typescript@5.6.2)': dependencies: '@turbo/workspaces': 2.1.3 commander: 10.0.1 @@ -3994,7 +3997,7 @@ snapshots: node-plop: 0.26.3 picocolors: 1.0.1 proxy-agent: 6.4.0 - ts-node: 10.9.2(@types/node@22.7.4)(typescript@5.6.2) + ts-node: 10.9.2(@types/node@22.9.0)(typescript@5.6.2) update-check: 1.5.4 validate-npm-package-name: 5.0.1 transitivePeerDependencies: @@ -4046,11 +4049,11 @@ snapshots: '@types/body-parser@1.19.5': dependencies: '@types/connect': 3.4.38 - '@types/node': 22.7.4 + '@types/node': 22.9.0 '@types/connect@3.4.38': dependencies: - '@types/node': 22.7.4 + '@types/node': 22.9.0 '@types/escodegen@0.0.6': {} @@ -4060,7 +4063,7 @@ snapshots: '@types/express-serve-static-core@4.19.6': dependencies: - '@types/node': 22.7.4 + '@types/node': 22.9.0 '@types/qs': 6.9.16 '@types/range-parser': 1.2.7 '@types/send': 0.17.4 @@ -4075,7 +4078,7 @@ snapshots: '@types/glob@7.2.0': dependencies: '@types/minimatch': 5.1.2 - '@types/node': 20.16.10 + '@types/node': 22.7.4 '@types/http-errors@2.0.4': {} @@ -4088,11 +4091,11 @@ snapshots: '@types/minimatch@5.1.2': {} - '@types/node@20.16.10': + '@types/node@22.7.4': dependencies: undici-types: 6.19.8 - '@types/node@22.7.4': + '@types/node@22.9.0': dependencies: undici-types: 6.19.8 @@ -4119,28 +4122,28 @@ snapshots: '@types/send@0.17.4': dependencies: '@types/mime': 1.3.5 - '@types/node': 22.7.4 + '@types/node': 22.9.0 '@types/serve-static@1.15.7': dependencies: '@types/http-errors': 2.0.4 - '@types/node': 22.7.4 + '@types/node': 22.9.0 '@types/send': 0.17.4 '@types/through@0.0.33': dependencies: - '@types/node': 20.16.10 + '@types/node': 22.7.4 '@types/tinycolor2@1.4.6': {} - '@vitejs/plugin-react@4.3.3(vite@5.4.10(@types/node@22.7.4))': + '@vitejs/plugin-react@4.3.3(vite@5.4.10(@types/node@22.9.0))': dependencies: '@babel/core': 7.26.0 '@babel/plugin-transform-react-jsx-self': 7.25.9(@babel/core@7.26.0) '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.26.0) '@types/babel__core': 7.20.5 react-refresh: 0.14.2 - vite: 5.4.10(@types/node@22.7.4) + vite: 5.4.10(@types/node@22.9.0) transitivePeerDependencies: - supports-color @@ -6087,14 +6090,14 @@ snapshots: ts-dedent@2.2.0: {} - ts-node@10.9.2(@types/node@22.7.4)(typescript@5.6.2): + ts-node@10.9.2(@types/node@22.9.0)(typescript@5.6.2): dependencies: '@cspotcode/source-map-support': 0.8.1 '@tsconfig/node10': 1.0.11 '@tsconfig/node12': 1.0.11 '@tsconfig/node14': 1.0.3 '@tsconfig/node16': 1.0.4 - '@types/node': 22.7.4 + '@types/node': 22.9.0 acorn: 8.12.1 acorn-walk: 8.3.4 arg: 4.1.3 @@ -6237,13 +6240,13 @@ snapshots: vary@1.1.2: {} - vite@5.4.10(@types/node@22.7.4): + vite@5.4.10(@types/node@22.9.0): dependencies: esbuild: 0.21.5 postcss: 8.4.47 rollup: 4.24.4 optionalDependencies: - '@types/node': 22.7.4 + '@types/node': 22.9.0 fsevents: 2.3.3 wcwidth@1.0.1: From 27ba0106f4b6ccf4428bcde49184bcca1893fafd Mon Sep 17 00:00:00 2001 From: hoshinotsuyoshi Date: Fri, 8 Nov 2024 16:01:59 +0900 Subject: [PATCH 3/9] Add 'incremental' option to avoid TS5111 error - Fixed TS5111 error: "Option 'tsBuildInfoFile' cannot be specified without specifying option 'incremental' or 'composite' or if not running 'tsc -b'." - Added `"incremental": true` to both `tsconfig.app.json` and `tsconfig.node.json` to ensure TypeScript incremental builds are enabled. --- frontend/packages/cli/tsconfig.app.json | 1 + frontend/packages/cli/tsconfig.node.json | 1 + 2 files changed, 2 insertions(+) diff --git a/frontend/packages/cli/tsconfig.app.json b/frontend/packages/cli/tsconfig.app.json index d9fda5fcf..0b8352a79 100644 --- a/frontend/packages/cli/tsconfig.app.json +++ b/frontend/packages/cli/tsconfig.app.json @@ -1,6 +1,7 @@ { "compilerOptions": { "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "incremental": true, "target": "ES2020", "useDefineForClassFields": true, "lib": ["ES2020", "DOM", "DOM.Iterable"], diff --git a/frontend/packages/cli/tsconfig.node.json b/frontend/packages/cli/tsconfig.node.json index fbd305d55..355a5d154 100644 --- a/frontend/packages/cli/tsconfig.node.json +++ b/frontend/packages/cli/tsconfig.node.json @@ -1,6 +1,7 @@ { "compilerOptions": { "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "incremental": true, "target": "ES2022", "lib": ["ES2023"], "module": "ESNext", From f9c2de609162bad0569855a19903884c17b43fce Mon Sep 17 00:00:00 2001 From: hoshinotsuyoshi Date: Fri, 8 Nov 2024 15:58:38 +0900 Subject: [PATCH 4/9] Update tsconfig files to specify output directories - Added `"outDir": "dist"` to `tsconfig.app.json` to define the output directory for compiled web application files. - Added `"outDir": "dist-cli"` and set `"noEmit": false` in `tsconfig.node.json` to enable emitting compiled files for the CLI. - Updated `tsconfig.node.json` to include `bin` in the `include` paths for TypeScript compilation. --- frontend/packages/cli/tsconfig.app.json | 1 + frontend/packages/cli/tsconfig.node.json | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/frontend/packages/cli/tsconfig.app.json b/frontend/packages/cli/tsconfig.app.json index 0b8352a79..77f01d261 100644 --- a/frontend/packages/cli/tsconfig.app.json +++ b/frontend/packages/cli/tsconfig.app.json @@ -14,6 +14,7 @@ "noEmit": true, "jsx": "react-jsx", "strict": true, + "outDir": "dist", "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, diff --git a/frontend/packages/cli/tsconfig.node.json b/frontend/packages/cli/tsconfig.node.json index 355a5d154..95019a698 100644 --- a/frontend/packages/cli/tsconfig.node.json +++ b/frontend/packages/cli/tsconfig.node.json @@ -7,15 +7,15 @@ "module": "ESNext", "skipLibCheck": true, "moduleResolution": "Bundler", - "allowImportingTsExtensions": true, "isolatedModules": true, "moduleDetection": "force", - "noEmit": true, + "noEmit": false, "strict": true, + "outDir": "dist-cli", "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, "noUncheckedSideEffectImports": true }, - "include": ["vite.config.ts"] + "include": ["vite.config.ts", "bin"] } From a6d8b887fe698c5ad434558f9768c523867954c0 Mon Sep 17 00:00:00 2001 From: hoshinotsuyoshi Date: Fri, 8 Nov 2024 15:59:40 +0900 Subject: [PATCH 5/9] Implement initial CLI functionality and update package configuration - Added `liam-cli` implementation using `commander` to run `build`, `dev`, and `preview` commands. - Implemented SQL file preprocessing that converts `.sql` content to JSON and outputs it in the `public/schema.json`. - Configured Vite options in `bin/cli.ts` for building and previewing the web application. - Added `fixtures/input.sql` as a sample SQL file for testing. - Updated `.gitignore` to exclude `dist-cli` and `public/schema.json`. - Updated `package.json`: - Added `bin` configuration to expose `liam-cli`. - Defined npm scripts for building and running the CLI. - Added a placeholder `.keep` file in the `public` directory. --- frontend/packages/cli/.gitignore | 3 + frontend/packages/cli/bin/cli.ts | 106 +++++++++++++++++++++++ frontend/packages/cli/fixtures/input.sql | 5 ++ frontend/packages/cli/package.json | 10 ++- frontend/packages/cli/public/.keep | 0 5 files changed, 121 insertions(+), 3 deletions(-) create mode 100755 frontend/packages/cli/bin/cli.ts create mode 100644 frontend/packages/cli/fixtures/input.sql create mode 100644 frontend/packages/cli/public/.keep diff --git a/frontend/packages/cli/.gitignore b/frontend/packages/cli/.gitignore index a547bf36d..d4ca93f2b 100644 --- a/frontend/packages/cli/.gitignore +++ b/frontend/packages/cli/.gitignore @@ -22,3 +22,6 @@ dist-ssr *.njsproj *.sln *.sw? + +dist-cli +public/schema.json diff --git a/frontend/packages/cli/bin/cli.ts b/frontend/packages/cli/bin/cli.ts new file mode 100755 index 000000000..715d4304d --- /dev/null +++ b/frontend/packages/cli/bin/cli.ts @@ -0,0 +1,106 @@ +import fs from 'node:fs' +import path from 'node:path' +import { fileURLToPath } from 'node:url' +import { Command } from 'commander' +import { build, createServer, preview } from 'vite' + +const __filename = fileURLToPath(import.meta.url) +const __dirname = path.dirname(__filename) +const root = path.resolve(__dirname, '../..') +const publicDir = path.join(process.cwd(), 'public') +const outDir = path.join(process.cwd(), 'dist') + +function runPreprocess(inputPath: string | null) { + if (inputPath && !fs.existsSync(inputPath)) { + throw new Error('Invalid input path. Please provide a valid .sql file.') + } + + const sqlContent = inputPath ? fs.readFileSync(inputPath, 'utf8') : '{}' + const filePath = path.join(publicDir, 'schema.json') + + if (!fs.existsSync(publicDir)) { + fs.mkdirSync(publicDir, { recursive: true }) + } + + try { + const jsonContent = JSON.stringify({ sql: sqlContent }, null, 2) + fs.writeFileSync(filePath, jsonContent, 'utf8') + return filePath + } catch (error) { + console.error( + `Error during preprocessing: ${error instanceof Error ? error.message : 'Unknown error'}`, + ) + return null + } +} + +const program = new Command() + +program + .name('liam-cli') + .description('CLI for running build and dev commands') + .version('0.0.0') + +program + .command('build') + .description('Run Vite build') + .option('--input ', 'Path to the .sql file') + .action(async (options) => { + try { + const inputPath = options.input + runPreprocess(inputPath) + await build({ + publicDir, + root, + build: { + outDir, + emptyOutDir: false, + }, + }) + } catch (error) { + console.error('Build failed:', error) + process.exit(1) + } + }) + +program + .command('dev') + .description('Run Vite dev server') + .option('--input ', 'Path to the .sql file') + .action(async (options) => { + try { + const inputPath = options.input + runPreprocess(inputPath) + const server = await createServer({ publicDir, root }) + const address = server.httpServer?.address() + const port = typeof address === 'object' && address ? address.port : 5173 + console.info(`Dev server is running at http://localhost:${port}`) + await server.listen() + } catch (error) { + console.error('Failed to start dev server:', error) + process.exit(1) + } + }) + +program + .command('preview') + .description('Preview the production build') + .action(async () => { + try { + const previewServer = await preview({ + publicDir, + root, + build: { + outDir, + emptyOutDir: false, + }, + }) + const address = previewServer.httpServer?.address() + const port = typeof address === 'object' && address ? address.port : 4173 + console.info(`Preview server is running at http://localhost:${port}`) + } catch (error) { + console.error('Failed to start preview server:', error) + process.exit(1) + } + }) +program.parse(process.argv) diff --git a/frontend/packages/cli/fixtures/input.sql b/frontend/packages/cli/fixtures/input.sql new file mode 100644 index 000000000..691c79079 --- /dev/null +++ b/frontend/packages/cli/fixtures/input.sql @@ -0,0 +1,5 @@ +CREATE TABLE products ( + brand VARCHAR(255), + model VARCHAR(255), + year INT +); diff --git a/frontend/packages/cli/package.json b/frontend/packages/cli/package.json index 7fcf6134b..6cd304059 100644 --- a/frontend/packages/cli/package.json +++ b/frontend/packages/cli/package.json @@ -3,10 +3,14 @@ "private": true, "version": "0.0.0", "type": "module", + "bin": { + "liam-cli": "./dist-cli/bin/cli.js" + }, "scripts": { - "dev": "vite", - "build": "tsc -b && vite build", - "preview": "vite preview", + "dev": "pnpm run build:cli && node ./dist-cli/bin/cli.js dev --input ./fixtures/input.sql", + "build": "pnpm run build:cli && node ./dist-cli/bin/cli.js build --input ./fixtures/input.sql", + "preview": "pnpm run build:cli && node ./dist-cli/bin/cli.js preview", + "build:cli": "tsc -p tsconfig.node.json", "lint": "conc -c auto pnpm:lint:*", "lint:biome": "biome check .", "lint:tsc": "tsc --noEmit", diff --git a/frontend/packages/cli/public/.keep b/frontend/packages/cli/public/.keep new file mode 100644 index 000000000..e69de29bb From 2ccf5882d3baabf1906da68199e4a963d10d0db1 Mon Sep 17 00:00:00 2001 From: hoshinotsuyoshi Date: Fri, 8 Nov 2024 15:59:53 +0900 Subject: [PATCH 6/9] Display file content in a 
 tag for demo purposes in
 App.tsx

- Added state and useEffect hook to fetch and display `/schema.json` content.
- Rendered the file content inside a styled 
 tag for demonstration.
---
 frontend/packages/cli/src/App.tsx | 32 ++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/frontend/packages/cli/src/App.tsx b/frontend/packages/cli/src/App.tsx
index 9c7e28a61..28a61bdf4 100644
--- a/frontend/packages/cli/src/App.tsx
+++ b/frontend/packages/cli/src/App.tsx
@@ -1,7 +1,37 @@
 import { ERDRenderer } from '@liam/erd-core'
+import { useEffect, useState } from 'react'
 
 function App() {
-  return 
+  const [fileContent, setFileContent] = useState(null)
+
+  useEffect(() => {
+    async function loadSchemaContent() {
+      const response = await fetch('/schema.json')
+      const data = (await response.json()) || 'No file content available'
+      setFileContent(JSON.stringify(data, null, 2))
+    }
+
+    loadSchemaContent()
+  }, [])
+
+  return (
+    <>
+      
+
+      {/* TODO: Remove this */}
+      {/* Display the file content in a pre tag for demo purposes */}
+      
+        {fileContent || 'Loading...'}
+      

+    
+  )
 }
 
 export default App

From 7bcd8d2920ba5e05e3e1b475e2e5e98a895d5db7 Mon Sep 17 00:00:00 2001
From: hoshinotsuyoshi 
Date: Fri, 8 Nov 2024 16:00:30 +0900
Subject: [PATCH 7/9] Update README

---
 frontend/packages/cli/README.md | 61 +++++++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)

diff --git a/frontend/packages/cli/README.md b/frontend/packages/cli/README.md
index baabaa1e8..695b6f900 100644
--- a/frontend/packages/cli/README.md
+++ b/frontend/packages/cli/README.md
@@ -1 +1,62 @@
 # @liam/cli
+
+`liam-cli` is a command-line tool designed to generate a web application that displays ER diagrams.
+
+```bash
+$ liam-cli build --input {your .sql}
+# Outputs the web application to the ./public and ./dist directories
+
+$ liam-cli preview
+# Launches the web application for preview
+```
+
+## Building and Installing the Standalone CLI for Development
+
+To build the CLI for development purposes, run:
+
+```bash
+pnpm run build:cli
+# The executable will be output to dist-cli/bin/cli.js.
+```
+
+After building, you can invoke it locally with:
+
+```bash
+node ./dist-cli/bin/cli.js build --input ./fixtures/input.sql
+```
+
+To make it globally accessible as `liam-cli`, use:
+
+```bash
+pnpm link --global
+```
+
+## Explanation of npm Scripts for Development
+
+### Commands
+
+1. **Build**
+   ```bash
+   pnpm run build
+   ```
+   - Internally, `./fixtures/input.sql` is passed as the `build --input` argument.
+   - Runs Vite's build process.
+
+2. **Dev**
+   ```bash
+   pnpm run dev
+   ```
+   - Internally, `./fixtures/input.sql` is passed as the `dev --input` argument.
+   - Starts the Vite development server.
+
+3. **Preview**
+   ```bash
+   pnpm run preview
+   ```
+   - Previews the production build using Vite's built-in preview functionality.
+
+## File Structure
+
+- **bin/cli.ts**: The main CLI script.
+- **fixtures/input.sql**: A sample `.sql` file for testing purposes.
+- **src/**: The web application that displays ER diagrams.

From 8ccc65acbc75424677db165c826de88b6fc50b5b Mon Sep 17 00:00:00 2001
From: hoshinotsuyoshi 
Date: Fri, 8 Nov 2024 17:18:59 +0900
Subject: [PATCH 8/9] Rename command name: `liam-cli` -> `liam`

---
 frontend/packages/cli/README.md    | 8 ++++----
 frontend/packages/cli/bin/cli.ts   | 2 +-
 frontend/packages/cli/package.json | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/packages/cli/README.md b/frontend/packages/cli/README.md
index 695b6f900..4b5bd698d 100644
--- a/frontend/packages/cli/README.md
+++ b/frontend/packages/cli/README.md
@@ -1,12 +1,12 @@
 # @liam/cli
 
-`liam-cli` is a command-line tool designed to generate a web application that displays ER diagrams.
+Command-line tool designed to generate a web application that displays ER diagrams.
 
 ```bash
-$ liam-cli build --input {your .sql}
+$ liam build --input {your .sql}
 # Outputs the web application to the ./public and ./dist directories
 
-$ liam-cli preview
+$ liam preview
 # Launches the web application for preview
 ```
 
@@ -25,7 +25,7 @@ After building, you can invoke it locally with:
 node ./dist-cli/bin/cli.js build --input ./fixtures/input.sql
 ```
 
-To make it globally accessible as `liam-cli`, use:
+To make it globally accessible as `liam`, use:
 
 ```bash
 pnpm link --global
diff --git a/frontend/packages/cli/bin/cli.ts b/frontend/packages/cli/bin/cli.ts
index 715d4304d..4739f966a 100755
--- a/frontend/packages/cli/bin/cli.ts
+++ b/frontend/packages/cli/bin/cli.ts
@@ -37,7 +37,7 @@ function runPreprocess(inputPath: string | null) {
 const program = new Command()
 
 program
-  .name('liam-cli')
+  .name('liam')
   .description('CLI for running build and dev commands')
   .version('0.0.0')
 
diff --git a/frontend/packages/cli/package.json b/frontend/packages/cli/package.json
index 6cd304059..5bd82dbd8 100644
--- a/frontend/packages/cli/package.json
+++ b/frontend/packages/cli/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "bin": {
-    "liam-cli": "./dist-cli/bin/cli.js"
+    "liam": "./dist-cli/bin/cli.js"
   },
   "scripts": {
     "dev": "pnpm run build:cli && node ./dist-cli/bin/cli.js dev --input ./fixtures/input.sql",

From 52e18ad9e6e18d4ffeb58d588e2ba3a9f94e0bee Mon Sep 17 00:00:00 2001
From: hoshinotsuyoshi 
Date: Fri, 8 Nov 2024 17:25:05 +0900
Subject: [PATCH 9/9] Change to subcommand `liam erd`

---
 frontend/packages/cli/README.md    |  6 +++---
 frontend/packages/cli/bin/cli.ts   | 15 ++++++++-------
 frontend/packages/cli/package.json |  6 +++---
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/frontend/packages/cli/README.md b/frontend/packages/cli/README.md
index 4b5bd698d..5eda6fd44 100644
--- a/frontend/packages/cli/README.md
+++ b/frontend/packages/cli/README.md
@@ -3,10 +3,10 @@
 Command-line tool designed to generate a web application that displays ER diagrams.
 
 ```bash
-$ liam build --input {your .sql}
+$ liam erd build --input {your .sql}
 # Outputs the web application to the ./public and ./dist directories
 
-$ liam preview
+$ liam erd preview
 # Launches the web application for preview
 ```
 
@@ -22,7 +22,7 @@ pnpm run build:cli
 After building, you can invoke it locally with:
 
 ```bash
-node ./dist-cli/bin/cli.js build --input ./fixtures/input.sql
+node ./dist-cli/bin/cli.js erd build --input ./fixtures/input.sql
 ```
 
 To make it globally accessible as `liam`, use:
diff --git a/frontend/packages/cli/bin/cli.ts b/frontend/packages/cli/bin/cli.ts
index 4739f966a..e1e49d3ff 100755
--- a/frontend/packages/cli/bin/cli.ts
+++ b/frontend/packages/cli/bin/cli.ts
@@ -36,12 +36,13 @@ function runPreprocess(inputPath: string | null) {
 
 const program = new Command()
 
-program
-  .name('liam')
-  .description('CLI for running build and dev commands')
-  .version('0.0.0')
+program.name('liam').description('CLI tool for Liam').version('0.0.0')
 
-program
+const erdCommand = new Command('erd').description('ERD commands')
+
+program.addCommand(erdCommand)
+
+erdCommand
   .command('build')
   .description('Run Vite build')
   .option('--input ', 'Path to the .sql file')
@@ -63,7 +64,7 @@ program
     }
   })
 
-program
+erdCommand
   .command('dev')
   .description('Run Vite dev server')
   .option('--input ', 'Path to the .sql file')
@@ -82,7 +83,7 @@ program
     }
   })
 
-program
+erdCommand
   .command('preview')
   .description('Preview the production build')
   .action(async () => {
diff --git a/frontend/packages/cli/package.json b/frontend/packages/cli/package.json
index 5bd82dbd8..02e585c2d 100644
--- a/frontend/packages/cli/package.json
+++ b/frontend/packages/cli/package.json
@@ -7,9 +7,9 @@
     "liam": "./dist-cli/bin/cli.js"
   },
   "scripts": {
-    "dev": "pnpm run build:cli && node ./dist-cli/bin/cli.js dev --input ./fixtures/input.sql",
-    "build": "pnpm run build:cli && node ./dist-cli/bin/cli.js build --input ./fixtures/input.sql",
-    "preview": "pnpm run build:cli && node ./dist-cli/bin/cli.js preview",
+    "dev": "pnpm run build:cli && node ./dist-cli/bin/cli.js erd dev --input ./fixtures/input.sql",
+    "build": "pnpm run build:cli && node ./dist-cli/bin/cli.js erd build --input ./fixtures/input.sql",
+    "preview": "pnpm run build:cli && node ./dist-cli/bin/cli.js erd preview",
     "build:cli": "tsc -p tsconfig.node.json",
     "lint": "conc -c auto pnpm:lint:*",
     "lint:biome": "biome check .",