Refactoring and a whole lot more functionality

Author: jherr

cli/add-on-developer/package.json

@@ -16,9 +16,12 @@
     "@codemirror/lang-javascript": "^6.2.3",
     "@codemirror/lang-json": "^6.0.1",
     "@radix-ui/react-accordion": "^1.2.3",
+    "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-toggle": "^1.1.2",
+    "@radix-ui/react-toggle-group": "^1.1.2",
     "@tailwindcss/vite": "^4.0.6",
     "@tanstack/cta-engine": "workspace:*",
     "@tanstack/react-query": "^5.66.5",
@@ -35,6 +38,7 @@
     "execa": "^9.5.2",
     "lucide-react": "^0.476.0",
     "react": "^19.0.0",
+    "react-codemirror-merge": "^4.23.10",
     "react-dom": "^19.0.0",
     "tailwind-merge": "^3.0.2",
     "tailwindcss": "^4.0.6",

cli/add-on-developer/src/components/file-viewer.tsx

@@ -0,0 +1,66 @@
+import CodeMirror from '@uiw/react-codemirror'
+import CodeMirrorMerge from 'react-codemirror-merge'
+
+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'
+
+export default function FileViewer({
+  originalFile,
+  modifiedFile,
+  filePath,
+}: {
+  originalFile: string
+  modifiedFile: string
+  filePath: string
+}) {
+  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()
+  }
+  const language = getLanguage(filePath)
+
+  if (!originalFile) {
+    return (
+      <CodeMirror
+        value={modifiedFile}
+        theme={okaidia}
+        height="100vh"
+        width="100%"
+        readOnly
+        extensions={[language]}
+        className="text-lg"
+      />
+    )
+  }
+  return (
+    <CodeMirrorMerge
+      orientation="b-a"
+      theme={okaidia}
+      height="100vh"
+      width="100%"
+      readOnly
+      className="text-lg"
+    >
+      <CodeMirrorMerge.Original value={originalFile} extensions={[language]} />
+      <CodeMirrorMerge.Modified value={modifiedFile} extensions={[language]} />
+    </CodeMirrorMerge>
+  )
+}

cli/add-on-developer/src/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

cli/add-on-developer/src/components/ui/toggle-group.tsx

@@ -0,0 +1,71 @@
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      className={cn(
+        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }

cli/add-on-developer/src/components/ui/toggle.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }

cli/add-on-developer/src/lib/server-fns.ts

@@ -0,0 +1,85 @@
+import { createServerFn } from '@tanstack/react-start'
+import { readFileSync } from 'node:fs'
+import { basename, resolve } from 'node:path'
+
+import {
+  getAllAddOns,
+  createApp,
+  createMemoryEnvironment,
+  createAppOptionsFromPersisted,
+} from '@tanstack/cta-engine'
+
+import type {
+  AddOn,
+  PersistedOptions,
+  Framework,
+  Mode,
+} from '@tanstack/cta-engine'
+
+export const getAddons = createServerFn({
+  method: 'GET',
+})
+  .validator((data: unknown) => {
+    return data as { platform: Framework; mode: Mode }
+  })
+  .handler(({ data: { platform, mode } }) => {
+    return getAllAddOns(platform, mode)
+  })
+
+export const getAddonInfo = createServerFn({
+  method: 'GET',
+}).handler(async () => {
+  const addOnInfo = readFileSync(
+    resolve(process.env.PROJECT_PATH, 'add-on.json'),
+  )
+  return JSON.parse(addOnInfo.toString())
+})
+
+export const getOriginalOptions = createServerFn({
+  method: 'GET',
+}).handler(async () => {
+  const addOnInfo = readFileSync(resolve(process.env.PROJECT_PATH, '.cta.json'))
+  return JSON.parse(addOnInfo.toString()) as PersistedOptions
+})
+
+export const runCreateApp = createServerFn({
+  method: 'POST',
+})
+  .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]
+        : [...options.chosenAddOns]
+      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
+    },
+  )