fix: cli and manual install methods (#26)

* remove redundant option on cli install

* Unified code parser for components in installation guide & cli

* remove "import type * as" when cli & manual install

* handle relative import

* changeset

.changeset/great-ducks-add.md

@@ -0,0 +1,5 @@
+---
+"@dinui/cli": patch
+---
+
+chore: improve user code in cli and manual install methods

.changeset/wise-foxes-speak.md

@@ -0,0 +1,5 @@
+---
+"@dinui/cli": patch
+---
+
+fix: relative import when install by cli and manual

apps/web/src/components/installation-guide.astro

@@ -1,5 +1,6 @@
 ---
 import { Tabs, TabItem, Code, Steps } from '@astrojs/starlight/components'
+import CodeParser from '@dinui/cli/code-parser'
 
 const globComponentCodeImports = import.meta.glob<string>(
   '../../../../packages/react-ui/src/**/*.tsx',
@@ -25,11 +26,9 @@ const componentCode = await (async () => {
   return await loadCode()
 })()
 
-const componentDependencies = [
-  ...componentCode.matchAll(/from '((@[a-z0-9-~][a-z0-9-._~]*\/)?([a-z0-9-~][a-z0-9-._~]*))/g),
-]
-  .map((m) => m[1] as string)
-  .filter((d) => !['react'].includes(d))
+const componentCodeParser = new CodeParser(componentCode)
+const componentDependencies = componentCodeParser.getDependencies()
+const componentUserCode = componentCodeParser.getUserCode()
 ---
 
 <div class="pt-4">
@@ -75,28 +74,16 @@ const componentDependencies = [
             <p>Run the following command in your project</p>
             <Tabs>
               <TabItem label="npm">
-                <Code
-                  lang="bash"
-                  code={`npx @dinui/cli@latest add -d ./components/ui ${componentName}`}
-                />
+                <Code lang="bash" code={`npx @dinui/cli@latest add ${componentName}`} />
               </TabItem>
               <TabItem label="yarn">
-                <Code
-                  lang="bash"
-                  code={`yarn dlx @dinui/cli@latest add -d ./components/ui ${componentName}`}
-                />
+                <Code lang="bash" code={`yarn dlx @dinui/cli@latest add ${componentName}`} />
               </TabItem>
               <TabItem label="pnpm">
-                <Code
-                  lang="bash"
-                  code={`pnpm dlx @dinui/cli@latest add -d ./components/ui ${componentName}`}
-                />
+                <Code lang="bash" code={`pnpm dlx @dinui/cli@latest add ${componentName}`} />
               </TabItem>
               <TabItem label="bun">
-                <Code
-                  lang="bash"
-                  code={`bunx @dinui/cli@latest add -d ./components/ui ${componentName}`}
-                />
+                <Code lang="bash" code={`bunx @dinui/cli@latest add ${componentName}`} />
               </TabItem>
             </Tabs>
           </li>
@@ -147,7 +134,7 @@ const componentDependencies = [
 
           <li>
             <p>Copy and paste the following code into your project</p>
-            <Code code={componentCode} lang="tsx" />
+            <Code code={componentUserCode} lang="tsx" />
           </li>
 
           <slot />

apps/web/tsconfig.json

@@ -5,7 +5,8 @@
     "paths": {
       "@web/*": ["./*"],
       "@dinui/react/utils": ["../../../packages/react-ui/src/utils"],
-      "@dinui/react/*": ["../../../packages/react-ui/src/ui/*"]
+      "@dinui/react/*": ["../../../packages/react-ui/src/ui/*"],
+      "@dinui/cli/*": ["../../../packages/cli/src/*"]
     },
     "jsx": "react-jsx",
     "jsxImportSource": "react",
@@ -16,6 +17,9 @@
   "references": [
     {
       "path": "../../packages/react-ui/tsconfig.json"
+    },
+    {
+      "path": "../../packages/cli/tsconfig.json"
     }
   ]
 }

packages/cli/src/code-parser/index.ts

@@ -0,0 +1,3 @@
+import { CodeParser } from './parser'
+
+export default CodeParser

packages/cli/src/code-parser/parser.ts

@@ -0,0 +1,19 @@
+export class CodeParser {
+  constructor(public code: string) {}
+
+  getDependencies() {
+    return [
+      ...this.code.matchAll(/from '((@[a-z0-9-~][a-z0-9-._~]*\/)?([a-z0-9-~][a-z0-9-._~]*))/g),
+    ]
+      .map((m) => m[1] as string)
+      .filter((d) => !['react'].includes(d))
+  }
+
+  getUserCode() {
+    return this.code
+      .replaceAll(/import type \* as _.*\n/g, '')
+      .replaceAll(/import .* from '(.)\/.*\n/g, (line) => {
+        return line.replace("'./", "'@dinui/react/")
+      })
+  }
+}

packages/cli/src/commands/add.ts

@@ -1,13 +1,14 @@
 import { env } from '../env'
 import { getPersistedOption, setPersistedOption } from '../utils/options'
 import chalk from 'chalk'
+import CodeParser from 'code-parser'
 import { Command, program } from 'commander'
 import fs from 'fs-extra'
 import ora from 'ora'
 import path from 'path'
 import detachPreferredPM from 'preferred-pm'
 import prompts from 'prompts'
-import { getComponentDependencies, loadComponentCode, loadComponents } from 'utils/components'
+import { loadComponentCode, loadComponents } from 'utils/components'
 import { $ } from 'zx'
 
 export const add = new Command()
@@ -118,12 +119,16 @@ export const add = new Command()
             if (!answers.override) continue
           }
 
+          const componentCodeParser = new CodeParser(componentCode)
           spinner.start(`Adding "${component}" component...`)
           await fs.ensureDir(componentDir)
-          await fs.writeFile(path.resolve(cwd, directory, `${component}.tsx`), componentCode)
+          await fs.writeFile(
+            path.resolve(cwd, directory, `${component}.tsx`),
+            componentCodeParser.getUserCode(),
+          )
 
           spinner.text = `Installing dependencies for "${component}" component...`
-          const componentDependencies = getComponentDependencies({ code: componentCode })
+          const componentDependencies = componentCodeParser.getDependencies()
 
           if (componentDependencies.length) {
             try {

packages/cli/src/utils/components.ts

@@ -21,12 +21,6 @@ export async function loadComponentCode(opts: { name: string; cwd: string }) {
   return await fs.readFile(fullPath, { encoding: 'utf8' })
 }
 
-export function getComponentDependencies(opts: { code: string }) {
-  return [...opts.code.matchAll(/from '((@[a-z0-9-~][a-z0-9-._~]*\/)?([a-z0-9-~][a-z0-9-._~]*))/g)]
-    .map((m) => m[1] as string)
-    .filter((d) => !['react'].includes(d))
-}
-
 export function getBaseComponentPath(opts: { cwd: string }) {
   return path.resolve(opts.cwd, './node_modules/@dinui/react/src') + '/'
 }