feat: moved to cli cac

Author: gerardnico

apps/site/pages/reference/debug.md

@@ -2,17 +2,45 @@
 title: Debug
 ---
 
-
 ## Log
 
 To get verbose log and [enable output of debug](https://github.com/debug-js/debug), you need to call the [cli](cli.md)
 with the `DEBUG=interact:*` environment
 
 Example
+
 ```bash
 DEBUG=interact:* interact
 DEBUG=interact:image* interact
 # or for the vite build 
 DEBUG=vite:*
 ```
 
+## IDE Debugger
+
+If your IDE cannot start cleanly a debug session or does not stop at breakpoint, here a clean method
+
+* Start interact from the cli with the `--inspect` or `--inspect-brk` node options
+
+```bash
+NODE_OPTIONS=--inspect interact start
+```
+
+* The debug process listener will print the listening address
+
+Example:
+
+```bash
+Debugger listening on ws://127.0.0.1:9229/60d0f660-3811-4b87-ab68-7e1ee95e373f
+For help, see: https://nodejs.org/en/docs/inspector
+```
+
+* Attach to it with your IDE to create a debug session. In Idea JetBrains, you can
+  then [attach the debugger](https://www.jetbrains.com/help/idea/running-and-debugging-node-js.html#ws_node_debug_remote_chrome)
+
+* No breakpoints should hit as the source map is likely missing, use the `debugger` word in your script and reload your
+  page.
+
+```javascript
+debugger
+```

package.json

@@ -4,7 +4,7 @@
   "license": "FSL-1.1-ALv2",
   "type": "module",
   "description": "A React publication framework to create documentation where users can log in and interact with it",
-  "bin": "src/interact/cli/dev.js",
+  "bin": "src/interact/cli/cli.ts",
   "repository": "https://github.com/combostrap/interact",
   "scripts": {
     "build": "tsc -p src/interact/tsconfig.json --listEmittedFiles",
@@ -14,10 +14,10 @@
     "check:resources": "tsc -p src/resources/tsconfig.json",
     "watch": "tsc --watch",
     "deploy": "yarn check && git tag -f early-access && git push -f origin early-access",
-    "start": "src/interact/cli/dev.js start --confPath=apps/site",
-    "site": "cd ../../gerardnico/com-gerardnico && node_modules/@combostrap/interact/src/interact/cli/dev.js start",
-    "ssg": "src/interact/cli/dev.js build --confPath=apps/site",
-    "preview": "src/interact/cli/dev.js preview --confPath=apps/site",
+    "start": "interact start --confPath=apps/site",
+    "site": "cd ../../gerardnico/com-gerardnico && interact start",
+    "ssg": "interact build --confPath=apps/site",
+    "preview": "interact preview --confPath=apps/site",
     "registry": "shadcn build --output apps/site/public/r"
   },
   "files": [
@@ -45,7 +45,6 @@
   "dependencies": {
     "@base-ui/react": "1.3.0",
     "@mdx-js/rollup": "3.1.1",
-    "@oclif/core": "4.8.2",
     "@realfavicongenerator/generate-favicon": "0.6.3",
     "@realfavicongenerator/image-adapter-node": "0.6.3",
     "@stefanprobst/rehype-extract-toc": "3.0.0",
@@ -57,6 +56,7 @@
     "@vitejs/plugin-react": "6.0.2",
     "@vitejs/plugin-rsc": "0.5.26",
     "bootstrap-icons": "1.13.1",
+    "cac": "^7.0.0",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "debug": "4.4.3",
@@ -108,14 +108,6 @@
     "vitest": "4.1.0"
   },
   "packageManager": "yarn@4.12.0",
-  "oclif": {
-    "description": "Interact Cli",
-    "version": "0.1.0",
-    "bin": "interact",
-    "dirname": "interact",
-    "commands": "dist/interact/cli/commands",
-    "topicSeparator": " "
-  },
   "resolutions": {
     "sharp": "0.34.5",
     "@types/react": "19.2.14",

src/interact/cli/baseCommand.ts

@@ -0,0 +1,119 @@
+#!/usr/bin/env -S node -r tsx/cjs
+import {cac} from 'cac'
+import {build} from './commands/build.ts'
+import {start} from './commands/start.ts'
+import {previewCommand} from './commands/preview.ts'
+import {config} from './commands/config.ts'
+import {favicon} from './commands/favicon.ts'
+import {schema} from './commands/schema.ts'
+import type {LogLevel} from './shared/vite.config.ts'
+
+const cli = cac('interact')
+
+// Global option shared by every command.
+// The default is derived (cli, env or current dir) so no default is set here.
+cli.option('--confPath <path>', 'Project root directory or configuration file path')
+
+cli
+    .command('build', 'Build project for production')
+    .option('--outDir <dir>', 'The output directory', {default: 'dist'})
+    .option('--logLevel <level>', 'Specify level for logging (info|warn|error|silent)', {default: 'info'})
+    .action(async (options) => {
+        await build({
+            confPath: options.confPath,
+            outDir: options.outDir,
+            logLevel: options.logLevel as LogLevel,
+        })
+    })
+
+cli
+    .command('start', 'Start development server')
+    .option('--port <port>', 'Dev server port', {default: 5173})
+    .option('--outDir <dir>', 'The output directory', {default: 'dist'})
+    .option('--logLevel <level>', 'Specify level for logging (info|warn|error|silent)', {default: 'info'})
+    .action(async (options) => {
+        await start({
+            confPath: options.confPath,
+            port: Number(options.port),
+            outDir: options.outDir,
+            logLevel: options.logLevel as LogLevel,
+        })
+    })
+
+cli
+    .command('preview', 'Preview the static build')
+    .option('--logLevel <level>', 'Specify level for logging (info|warn|error|silent)', {default: 'info'})
+    .action(async (options) => {
+        await previewCommand({
+            confPath: options.confPath,
+            logLevel: options.logLevel as LogLevel,
+        })
+    })
+
+cli
+    .command('config', 'Print the interact configuration (YAML by default)')
+    .option('-f, --filter <key>', 'Filter configuration by key path (e.g., "theme.colors")')
+    .option('-j, --json', 'Output in JSON format')
+    .option('-y, --yaml', 'Output in YAML format (default)')
+    .option('--no-pretty', 'Disable colorized output')
+    .option('--plain', 'Disable colorized output (alias for --no-pretty)')
+    .example('  $ interact config')
+    .example('  $ interact config --json')
+    .example('  $ interact config --filter theme.colors')
+    .example('  $ interact config --json --no-pretty')
+    .action(async (options) => {
+        await config({
+            confPath: options.confPath,
+            filter: options.filter,
+            json: options.tson,
+            yaml: options.yaml,
+            // cac maps --no-pretty to options.pretty === false
+            noPretty: !options.pretty,
+            plain: options.plain,
+        })
+    })
+
+cli
+    .command('favicon [filePath]', 'Generate the favicons and app manifest from a master icon file')
+    .option('--dryRun', "Don't create the files")
+    .option('-o, --outputDirectory <dir>', 'The output directory (default to the public directory)')
+    .example('  $ interact favicon path/to/master-icon.svg')
+    .action(async (filePath, options) => {
+        await favicon({
+            confPath: options.confPath,
+            filePath,
+            dryRun: options.dryRun,
+            outputDirectory: options.outputDirectory,
+        })
+    })
+
+cli
+    .command('schema', 'Generate JSON schema')
+    .example('  $ interact schema')
+    .action(async (options) => {
+        await schema({
+            confPath: options.confPath,
+        })
+    })
+
+cli.help()
+cli.version('0.1.0')
+
+export async function run(argv: string[] = process.argv): Promise<void> {
+    try {
+        cli.parse(argv, {run: false})
+        // Show help when no command was provided
+        if (!cli.matchedCommand) {
+            cli.outputHelp()
+            return
+        }
+        await cli.runMatchedCommand()
+    } catch (e) {
+        const error = e as Error
+        console.error(error.message)
+        process.exit(1)
+    }
+}
+
+// Run when executed directly (e.g. via tsx / node).
+run()

src/interact/cli/cli.ts

@@ -1,35 +1,34 @@
 import {createBuilder, createLogger} from 'vite'
 import pc from "picocolors";
-import {BaseCommand} from "../baseCommand.js";
-import {resolveViteConfig} from "../shared/vite.config.js";
+import {resolveViteConfig} from "../shared/vite.config.ts";
+import type {LogLevel} from "../shared/vite.config.ts";
 
-export default class Build extends BaseCommand<typeof Build> {
-    static description = 'Build project for production'
+export interface BuildActionOptions {
+    confPath?: string;
+    outDir?: string;
+    logLevel?: LogLevel;
+}
 
-
-    async run(): Promise<void> {
-        const {flags} = await this.parse(Build)
-
-        try {
-            const builder = await createBuilder(await resolveViteConfig({
-                confPath: flags.confPath,
-                outDir: flags.outDir,
-                logLevel: flags.logLevel,
-                command: 'build'
-            }))
-            console.log(Object.keys(builder.environments))
-            this.log('Interact Build Command: Starting Building')
-            // build App will call the environment in order and is equivalent to:
-            //   await builder.build(builder.environments.rsc)
-            //   await builder.build(builder.environments.ssr)
-            //   await builder.build(builder.environments.client)
-            // and calling the buildApp Hook (static generation uses this hook)
-            await builder.buildApp();
-            this.log('Interact Build Command: Build completed successfully!')
-        } catch (e) {
-            let error = e as Error;
-            createLogger('error').error(pc.red(`error when building:\n${error.stack}`), {error: error});
-            process.exit(1);
-        }
+export async function build({confPath, outDir, logLevel}: BuildActionOptions): Promise<void> {
+    try {
+        const builder = await createBuilder(await resolveViteConfig({
+            confPath,
+            outDir,
+            logLevel,
+            command: 'build'
+        }))
+        console.log(Object.keys(builder.environments))
+        console.log('Interact Build Command: Starting Building')
+        // build App will call the environment in order and is equivalent to:
+        //   await builder.build(builder.environments.rsc)
+        //   await builder.build(builder.environments.ssr)
+        //   await builder.build(builder.environments.client)
+        // and calling the buildApp Hook (static generation uses this hook)
+        await builder.buildApp();
+        console.log('Interact Build Command: Build completed successfully!')
+    } catch (e) {
+        let error = e as Error;
+        createLogger('error').error(pc.red(`error when building:\n${error.stack}`), {error: error});
+        process.exit(1);
     }
-}
+}