A lot more developed add-on-developer

jherr · jherr · commit a7080aff925b · 2025-04-01T21:03:47.000-07:00
diff --git a/cli/add-on-developer/package.json b/cli/add-on-developer/package.json
@@ -11,6 +11,10 @@
     "dev": "vinxi dev"
   },
   "dependencies": {
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/lang-javascript": "^6.2.3",
+    "@codemirror/lang-json": "^6.0.1",
     "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-slot": "^1.1.2",
@@ -24,6 +28,8 @@
     "@tanstack/react-router-with-query": "^1.114.3",
     "@tanstack/react-start": "^1.114.3",
     "@tanstack/router-plugin": "^1.114.3",
+    "@uiw/codemirror-theme-okaidia": "^4.23.10",
+    "@uiw/react-codemirror": "^4.23.10",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "execa": "^9.5.2",
diff --git a/cli/add-on-developer/src/components/ui/tree-view.tsx b/cli/add-on-developer/src/components/ui/tree-view.tsx
@@ -27,6 +27,7 @@ interface TreeDataItem {
   onClick?: () => void
   draggable?: boolean
   droppable?: boolean
+  className?: string
 }
 
 type TreeProps = React.HTMLAttributes<HTMLDivElement> & {
@@ -200,6 +201,7 @@ const TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>(
                   handleDragStart={handleDragStart}
                   handleDrop={handleDrop}
                   draggedItem={draggedItem}
+                  className={item.className}
                 />
               )}
             </li>
diff --git a/cli/add-on-developer/src/routes/index.tsx b/cli/add-on-developer/src/routes/index.tsx
@@ -2,99 +2,189 @@ import { useMemo, useState } from 'react'
 import { createFileRoute } from '@tanstack/react-router'
 import { FileText, Folder } from 'lucide-react'
 import { createServerFn } from '@tanstack/react-start'
+import CodeMirror from '@uiw/react-codemirror'
 
-import type { TreeDataItem } from '@/components/ui/tree-view'
+import { javascript } from '@codemirror/lang-javascript'
+import { json } from '@codemirror/lang-json'
+import { css } from '@codemirror/lang-css'
+import { html } from '@codemirror/lang-html'
+
+import { okaidia } from '@uiw/codemirror-theme-okaidia'
+import { readFileSync } from 'node:fs'
+import { basename, resolve } from 'node:path'
 
 import {
   getAllAddOns,
   createApp,
   createMemoryEnvironment,
+  createAppOptionsFromPersisted,
 } from '@tanstack/cta-engine'
 
 import { TreeView } from '@/components/ui/tree-view'
 
+import type { TreeDataItem } from '@/components/ui/tree-view'
+import type { AddOn, PersistedOptions } from '@tanstack/cta-engine'
+
 const getAddons = createServerFn({
   method: 'GET',
 }).handler(() => {
   return getAllAddOns('react', 'file-router')
 })
 
+const getAddonInfo = createServerFn({
+  method: 'GET',
+}).handler(async () => {
+  const addOnInfo = readFileSync(
+    resolve(process.env.PROJECT_PATH, 'add-on.json'),
+  )
+  return JSON.parse(addOnInfo.toString())
+})
+
+const getOriginalOptions = createServerFn({
+  method: 'GET',
+}).handler(async () => {
+  const addOnInfo = readFileSync(resolve(process.env.PROJECT_PATH, '.cta.json'))
+  return JSON.parse(addOnInfo.toString()) as PersistedOptions
+})
+
 const runCreateApp = createServerFn({
   method: 'POST',
-}).handler(async () => {
-  const { output, environment } = createMemoryEnvironment()
-  await createApp(
-    {
-      addOns: false,
-      framework: 'react',
-      chosenAddOns: [],
-      git: true,
-      mode: 'code-router',
-      packageManager: 'npm',
-      projectName: 'foo',
-      tailwind: false,
-      toolchain: 'none',
-      typescript: false,
-      variableValues: {},
-    },
-    {
-      silent: true,
-      environment,
-      cwd: process.env.PROJECT_PATH,
+})
+  .validator((data: unknown) => {
+    return data as { withAddOn: boolean; options: PersistedOptions }
+  })
+  .handler(
+    async ({
+      data: { withAddOn, options: persistedOptions },
+    }: {
+      data: { withAddOn: boolean; options: PersistedOptions }
+    }) => {
+      const { output, environment } = createMemoryEnvironment()
+      const options = await createAppOptionsFromPersisted(persistedOptions)
+      options.chosenAddOns = withAddOn
+        ? [...options.chosenAddOns, (await getAddonInfo()) as AddOn]
+        : []
+      await createApp(
+        {
+          ...options,
+        },
+        {
+          silent: true,
+          environment,
+          cwd: process.env.PROJECT_PATH,
+        },
+      )
+
+      output.files = Object.keys(output.files).reduce<Record<string, string>>(
+        (acc, file) => {
+          if (basename(file) !== '.cta.json') {
+            acc[file] = output.files[file]
+          }
+          return acc
+        },
+        {},
+      )
+
+      return output
     },
   )
-  return output
-})
 
 export const Route = createFileRoute('/')({
   component: App,
   loader: async () => {
+    const originalOptions = await getOriginalOptions()
     return {
       addOns: await getAddons(),
       projectPath: process.env.PROJECT_PATH!,
-      output: await runCreateApp(),
+      output: await runCreateApp({
+        data: { withAddOn: true, options: originalOptions },
+      }),
+      outputWithoutAddon: await runCreateApp({
+        data: { withAddOn: false, options: originalOptions },
+      }),
+      addOnInfo: await getAddonInfo(),
+      originalOptions,
     }
   },
 })
 
 function App() {
-  const { projectPath, output } = Route.useLoaderData()
+  const {
+    projectPath,
+    output,
+    addOnInfo,
+    outputWithoutAddon,
+    originalOptions,
+  } = Route.useLoaderData()
   const [selectedFile, setSelectedFile] = useState<string | null>(null)
 
   const tree = useMemo(() => {
     const treeData: Array<TreeDataItem> = []
-    Object.keys(output.files).forEach((file) => {
-      const parts = file.replace(`${projectPath}/`, '').split('/')
-
-      let currentLevel = treeData
-      parts.forEach((part, index) => {
-        const existingNode = currentLevel.find((node) => node.name === part)
-        if (existingNode) {
-          currentLevel = existingNode.children || []
-        } else {
-          const newNode: TreeDataItem = {
-            id: index === parts.length - 1 ? file : `${file}-${index}`,
-            name: part,
-            children: index < parts.length - 1 ? [] : undefined,
-            icon:
-              index < parts.length - 1
-                ? () => <Folder className="w-4 h-4 mr-2" />
-                : () => <FileText className="w-4 h-4 mr-2" />,
-            onClick:
-              index === parts.length - 1
-                ? () => {
-                    setSelectedFile(file)
-                  }
-                : undefined,
+
+    function changed(file: string) {
+      if (!outputWithoutAddon.files[file]) {
+        return true
+      }
+      return output.files[file] !== outputWithoutAddon.files[file]
+    }
+
+    Object.keys(output.files)
+      .sort()
+      .forEach((file) => {
+        const parts = file.replace(`${projectPath}/`, '').split('/')
+
+        let currentLevel = treeData
+        parts.forEach((part, index) => {
+          const existingNode = currentLevel.find((node) => node.name === part)
+          if (existingNode) {
+            currentLevel = existingNode.children || []
+          } else {
+            const newNode: TreeDataItem = {
+              id: index === parts.length - 1 ? file : `${file}-${index}`,
+              name: part,
+              children: index < parts.length - 1 ? [] : undefined,
+              icon:
+                index < parts.length - 1
+                  ? () => <Folder className="w-4 h-4 mr-2" />
+                  : () => <FileText className="w-4 h-4 mr-2" />,
+              onClick:
+                index === parts.length - 1
+                  ? () => {
+                      setSelectedFile(file)
+                    }
+                  : undefined,
+              className:
+                index === parts.length - 1 && changed(file)
+                  ? 'text-green-300'
+                  : '',
+            }
+            currentLevel.push(newNode)
+            currentLevel = newNode.children!
           }
-          currentLevel.push(newNode)
-          currentLevel = newNode.children!
-        }
+        })
       })
-    })
     return treeData
   }, [projectPath, output])
 
+  function getLanguage(file: string) {
+    if (file.endsWith('.js') || file.endsWith('.jsx')) {
+      return javascript({ jsx: true })
+    }
+    if (file.endsWith('.ts') || file.endsWith('.tsx')) {
+      return javascript({ typescript: true, jsx: true })
+    }
+    if (file.endsWith('.json')) {
+      return json()
+    }
+    if (file.endsWith('.css')) {
+      return css()
+    }
+    if (file.endsWith('.html')) {
+      return html()
+    }
+    return javascript()
+  }
+
   return (
     <div className="p-5 flex flex-row">
       <TreeView
@@ -105,9 +195,17 @@ function App() {
       />
       <div className="max-w-3/4 w-3/4 pl-2">
         <pre>
-          {selectedFile
-            ? output.files[selectedFile] || 'Select a file to view its content'
-            : null}
+          {selectedFile && output.files[selectedFile] ? (
+            <CodeMirror
+              value={output.files[selectedFile]}
+              theme={okaidia}
+              height="100vh"
+              width="100%"
+              readOnly
+              extensions={[getLanguage(selectedFile)]}
+              className="text-lg"
+            />
+          ) : null}
         </pre>
       </div>
     </div>
diff --git a/example/mui-add-on/.add-on/info.json b/example/mui-add-on/.add-on/info.json
@@ -1,5 +1,5 @@
 {
-  "name": "mui-add-on-add-on",
+  "name": "mui-add-on",
   "version": "0.0.1",
   "description": "Add-on",
   "author": "Jane Smith <jane.smith@example.com>",
@@ -20,6 +20,7 @@
   "variables": {},
   "phase": "add-on",
   "type": "add-on",
+  "framework": "react",
   "packageAdditions": {
     "scripts": {},
     "dependencies": {
diff --git a/example/mui-add-on/add-on.json b/example/mui-add-on/add-on.json
@@ -1,5 +1,5 @@
 {
-  "name": "mui-add-on-add-on",
+  "name": "mui-add-on",
   "version": "0.0.1",
   "description": "Add-on",
   "author": "Jane Smith <jane.smith@example.com>",
@@ -20,14 +20,21 @@
   "variables": {},
   "phase": "add-on",
   "type": "add-on",
+  "framework": "react",
   "packageAdditions": {
     "scripts": {},
-    "dependencies": {},
+    "dependencies": {
+      "@emotion/styled": "^11.14.0",
+      "@fontsource/roboto": "^5.2.5",
+      "@mui/icons-material": "^7.0.1",
+      "@mui/material": "^7.0.1",
+      "@mui/styled-engine-sc": "^7.0.1",
+      "styled-components": "^6.1.16"
+    },
     "devDependencies": {}
   },
   "files": {
     "./src/routes/demo.mui.tsx.ejs": "import Button from \"@mui/material/Button\";\nimport Box from \"@mui/material/Box\";\nimport { createFileRoute } from \"@tanstack/react-router\";\n\n<% if (codeRouter) { %>\nimport type { RootRoute } from '@tanstack/react-router'\n<% } else { %>\nexport const Route = createFileRoute('/demo/mui')({\n  component: MUIDemo,\n})\n<% } %>;\n\nfunction MUIDemo() {\n  return (\n    <Box sx={{ px: 2, py: 4 }}>\n      <Button variant=\"contained\">Hello world</Button>\n    </Box>\n  );\n}\n\n<% if (codeRouter) { %>\nexport default (parentRoute: RootRoute) => createRoute({\n  path: '/demo/mui',\n  \n  component: MUIDemo,\n\n  getParentRoute: () => parentRoute,\n})\n<% } %>\n"
   },
-  "framework": "react",
   "addDependencies": []
 }
diff --git a/packages/cta-engine/src/custom-add-on.ts b/packages/cta-engine/src/custom-add-on.ts
@@ -102,7 +102,7 @@ export default (parentRoute: RootRoute) => createRoute({
   return { url: path, code, name }
 }
 
-async function createOptions(
+export async function createAppOptionsFromPersisted(
   json: PersistedOptions,
 ): Promise<Required<Options>> {
   return {
@@ -204,6 +204,7 @@ To create an add-on, the project must be created with TypeScript.`)
         link: `https://github.com/jane-smith/${persistedOptions.projectName}-${mode}`,
         command: {},
         shadcnComponents: [],
+        framework: persistedOptions.framework,
         templates: [persistedOptions.mode],
         routes: [],
         warning: '',
@@ -220,7 +221,7 @@ To create an add-on, the project must be created with TypeScript.`)
   const compiledInfo = JSON.parse(JSON.stringify(info))
 
   const originalOutput = await runCreateApp(
-    await createOptions(persistedOptions),
+    await createAppOptionsFromPersisted(persistedOptions),
   )
 
   const originalPackageJson = JSON.parse(
@@ -302,6 +303,7 @@ To create an add-on, the project must be created with TypeScript.`)
   compiledInfo.routes = info.routes
   compiledInfo.framework = persistedOptions.framework
   compiledInfo.addDependencies = persistedOptions.existingAddOns
+  compiledInfo.packageAdditions = info.packageAdditions
 
   if (mode === 'overlay') {
     compiledInfo.mode = persistedOptions.mode
diff --git a/packages/cta-engine/src/index.ts b/packages/cta-engine/src/index.ts
@@ -1,7 +1,11 @@
 export { cli } from './cli.js'
 export { getAllAddOns } from './add-ons.js'
 export { createApp } from './create-app.js'
+export { createAppOptionsFromPersisted } from './custom-add-on.js'
 export {
   createMemoryEnvironment,
   createDefaultEnvironment,
 } from './environment.js'
+
+export type { AddOn } from './types.js'
+export type { PersistedOptions } from './config-file.js'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
