@tanstack/cta-cli 0.10.0-alpha.19 → 0.10.0-alpha.21

package/src/ui-prompts.ts

@@ -0,0 +1,187 @@
+import {
+  cancel,
+  confirm,
+  isCancel,
+  multiselect,
+  select,
+  text,
+} from '@clack/prompts'
+
+import {
+  CODE_ROUTER,
+  DEFAULT_PACKAGE_MANAGER,
+  FILE_ROUTER,
+  SUPPORTED_PACKAGE_MANAGERS,
+  getAllAddOns,
+} from '@tanstack/cta-engine'
+
+import type { AddOn, Mode, PackageManager } from '@tanstack/cta-engine'
+
+import type { Framework } from '@tanstack/cta-engine/dist/types/types.js'
+
+export async function getProjectName(): Promise<string> {
+  const value = await text({
+    message: 'What would you like to name your project?',
+    defaultValue: 'my-app',
+    validate(value) {
+      if (!value) {
+        return 'Please enter a name'
+      }
+    },
+  })
+
+  if (isCancel(value)) {
+    cancel('Operation cancelled.')
+    process.exit(0)
+  }
+
+  return value
+}
+
+export async function selectRouterType(): Promise<Mode> {
+  const routerType = await select({
+    message: 'Select the router type:',
+    options: [
+      {
+        value: FILE_ROUTER,
+        label: 'File Router - File-based routing structure',
+      },
+      {
+        value: CODE_ROUTER,
+        label: 'Code Router - Traditional code-based routing',
+      },
+    ],
+    initialValue: FILE_ROUTER,
+  })
+
+  if (isCancel(routerType)) {
+    cancel('Operation cancelled.')
+    process.exit(0)
+  }
+
+  return routerType as Mode
+}
+
+export async function selectTypescript(): Promise<boolean> {
+  const typescriptEnable = await confirm({
+    message: 'Would you like to use TypeScript?',
+    initialValue: true,
+  })
+  if (isCancel(typescriptEnable)) {
+    cancel('Operation cancelled.')
+    process.exit(0)
+  }
+  return typescriptEnable
+}
+
+export async function selectTailwind(): Promise<boolean> {
+  const tailwind = await confirm({
+    message: 'Would you like to use Tailwind CSS?',
+    initialValue: true,
+  })
+
+  if (isCancel(tailwind)) {
+    cancel('Operation cancelled.')
+    process.exit(0)
+  }
+
+  return tailwind
+}
+
+export async function selectPackageManager(): Promise<PackageManager> {
+  const packageManager = await select({
+    message: 'Select package manager:',
+    options: SUPPORTED_PACKAGE_MANAGERS.map((pm) => ({
+      value: pm,
+      label: pm,
+    })),
+    initialValue: DEFAULT_PACKAGE_MANAGER,
+  })
+  if (isCancel(packageManager)) {
+    cancel('Operation cancelled.')
+    process.exit(0)
+  }
+  return packageManager
+}
+
+export async function selectAddOns(
+  framework: Framework,
+  mode: Mode,
+  type: string,
+  message: string,
+  forcedAddOns: Array<string> = [],
+): Promise<Array<string>> {
+  const allAddOns = await getAllAddOns(framework, mode)
+  const addOns = allAddOns.filter((addOn) => addOn.type === type)
+  if (addOns.length === 0) {
+    return []
+  }
+
+  const value = await multiselect({
+    message,
+    options: addOns
+      .filter((addOn) => !forcedAddOns.includes(addOn.id))
+      .map((addOn) => ({
+        value: addOn.id,
+        label: addOn.name,
+        hint: addOn.description,
+      })),
+    required: false,
+  })
+
+  if (isCancel(value)) {
+    cancel('Operation cancelled.')
+    process.exit(0)
+  }
+
+  return value
+}
+
+export async function selectGit(): Promise<boolean> {
+  const git = await confirm({
+    message: 'Would you like to initialize a new git repository?',
+    initialValue: true,
+  })
+  if (isCancel(git)) {
+    cancel('Operation cancelled.')
+    process.exit(0)
+  }
+  return git
+}
+
+export async function selectToolchain(
+  framework: Framework,
+  toolchain?: string,
+): Promise<string | undefined> {
+  const toolchains = new Set<AddOn>()
+  for (const addOn of framework.getAddOns()) {
+    if (addOn.type === 'toolchain') {
+      toolchains.add(addOn)
+      if (toolchain && addOn.id === toolchain) {
+        return toolchain
+      }
+    }
+  }
+
+  const tc = await select({
+    message: 'Select toolchain',
+    options: [
+      {
+        value: undefined,
+        label: 'None',
+      },
+      ...Array.from(toolchains).map((tc) => ({
+        value: tc.id,
+        label: tc.name,
+      })),
+    ],
+    initialValue: undefined,
+  })
+
+  if (isCancel(tc)) {
+    cancel('Operation cancelled.')
+    process.exit(0)
+  }
+
+  return tc
+}

package/src/utils.ts

@@ -0,0 +1,11 @@
+import { CODE_ROUTER, FILE_ROUTER } from '@tanstack/cta-engine'
+import type { Mode } from '@tanstack/cta-engine'
+
+import type { TemplateOptions } from './types.js'
+
+export function convertTemplateToMode(template: TemplateOptions): Mode {
+  if (template === 'typescript' || template === 'javascript') {
+    return CODE_ROUTER
+  }
+  return FILE_ROUTER
+}

package/tests/command-line.test.ts

@@ -0,0 +1,205 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { normalizeOptions } from '../src/command-line.js'
+import {
+  __testRegisterFramework,
+  __testClearFrameworks,
+} from '@tanstack/cta-engine/dist/frameworks.js'
+
+beforeEach(() => {
+  __testClearFrameworks()
+})
+
+describe('normalizeOptions', () => {
+  it('should return undefined if project name is not provided', async () => {
+    const options = await normalizeOptions({})
+    expect(options).toBeUndefined()
+  })
+
+  it('should return enable typescript based on the framework', async () => {
+    const jsOptions = await normalizeOptions({
+      projectName: 'test',
+      template: 'javascript',
+    })
+    expect(jsOptions?.typescript).toBe(false)
+    expect(jsOptions?.mode).toBe('code-router')
+
+    const tsOptions = await normalizeOptions({
+      projectName: 'test',
+      template: 'typescript',
+    })
+    expect(tsOptions?.typescript).toBe(true)
+    expect(tsOptions?.mode).toBe('code-router')
+
+    const frOptions = await normalizeOptions({
+      projectName: 'test',
+      template: 'file-router',
+    })
+    expect(frOptions?.typescript).toBe(true)
+    expect(frOptions?.mode).toBe('file-router')
+  })
+
+  it('should return enable tailwind if the framework is solid', async () => {
+    const solidOptions = await normalizeOptions({
+      projectName: 'test',
+      framework: 'solid',
+    })
+    expect(solidOptions?.tailwind).toBe(true)
+
+    const twOptions = await normalizeOptions({
+      projectName: 'test',
+      tailwind: true,
+    })
+    expect(twOptions?.tailwind).toBe(true)
+
+    const noOptions = await normalizeOptions({
+      projectName: 'test',
+    })
+    expect(noOptions?.tailwind).toBe(false)
+  })
+
+  it('should handle a starter url', async () => {
+    __testRegisterFramework({
+      id: 'solid',
+      name: 'Solid',
+      getAddOns: () => [],
+    })
+    fetch.mockResponseOnce(
+      JSON.stringify({
+        id: 'https://github.com/cta-dev/cta-starter-solid',
+        tailwind: true,
+        typescript: false,
+        framework: 'solid',
+        mode: 'file-router',
+        type: 'starter',
+        description: 'A starter for Solid',
+        name: 'My Solid Starter',
+        dependsOn: [],
+        files: {},
+        deletedFiles: [],
+      }),
+    )
+
+    const options = await normalizeOptions({
+      projectName: 'test',
+      starter: 'https://github.com/cta-dev/cta-starter-solid',
+    })
+    expect(options?.mode).toBe('file-router')
+    expect(options?.tailwind).toBe(true)
+    expect(options?.typescript).toBe(false)
+    expect(options?.framework?.id).toBe('solid')
+  })
+
+  it('should default to react-cra if no framework is provided', async () => {
+    __testRegisterFramework({
+      id: 'react-cra',
+      name: 'react',
+    })
+    const options = await normalizeOptions({
+      projectName: 'test',
+    })
+    expect(options?.framework?.id).toBe('react-cra')
+  })
+
+  it('should handle forced addons', async () => {
+    __testRegisterFramework({
+      id: 'react-cra',
+      name: 'react',
+      getAddOns: () => [
+        {
+          id: 'foo',
+          name: 'foobar',
+          modes: ['file-router'],
+        },
+      ],
+    })
+    const options = await normalizeOptions(
+      {
+        projectName: 'test',
+        framework: 'react-cra',
+      },
+      'file-router',
+      ['foo'],
+    )
+    expect(options?.chosenAddOns.map((a) => a.id).includes('foo')).toBe(true)
+  })
+
+  it('should handle additional addons from the CLI', async () => {
+    __testRegisterFramework({
+      id: 'react-cra',
+      name: 'react',
+      getAddOns: () => [
+        {
+          id: 'foo',
+          name: 'foobar',
+          modes: ['file-router'],
+        },
+        {
+          id: 'baz',
+          name: 'baz',
+          modes: ['file-router'],
+        },
+      ],
+    })
+    const options = await normalizeOptions(
+      {
+        projectName: 'test',
+        addOns: ['baz'],
+        framework: 'react-cra',
+        template: 'file-router',
+      },
+      'file-router',
+      ['foo'],
+    )
+    expect(options?.chosenAddOns.map((a) => a.id).includes('foo')).toBe(true)
+    expect(options?.chosenAddOns.map((a) => a.id).includes('baz')).toBe(true)
+    expect(options?.tailwind).toBe(true)
+    expect(options?.typescript).toBe(true)
+  })
+
+  it('should handle toolchain as an addon', async () => {
+    __testRegisterFramework({
+      id: 'react-cra',
+      name: 'react',
+      getAddOns: () => [
+        {
+          id: 'biome',
+          name: 'Biome',
+          modes: ['file-router', 'code-router'],
+        },
+      ],
+    })
+    const options = await normalizeOptions({
+      projectName: 'test',
+      toolchain: 'biome',
+    })
+    expect(options?.chosenAddOns.map((a) => a.id).includes('biome')).toBe(true)
+    expect(options?.tailwind).toBe(true)
+    expect(options?.typescript).toBe(true)
+  })
+
+  it('should handle the funky Windows edge case with CLI parsing', async () => {
+    __testRegisterFramework({
+      id: 'react-cra',
+      name: 'react',
+      getAddOns: () => [
+        {
+          id: 'foo',
+          name: 'foobar',
+          modes: ['file-router', 'code-router'],
+        },
+        {
+          id: 'baz',
+          name: 'baz',
+          modes: ['file-router', 'code-router'],
+        },
+      ],
+    })
+    const options = await normalizeOptions({
+      projectName: 'test',
+      addOns: ['baz foo'],
+    })
+    expect(options?.chosenAddOns.map((a) => a.id).includes('foo')).toBe(true)
+    expect(options?.chosenAddOns.map((a) => a.id).includes('baz')).toBe(true)
+  })
+})

package/tests/index.test.ts

@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest'
+
+import { cli } from '../src/index.js'
+
+describe('cli', () => {
+  it('should call the cli with the correct arguments', async () => {
+    expect(cli).toBeDefined()
+  })
+})

package/tests/options.test.ts

@@ -0,0 +1,287 @@
+import { beforeEach, describe, it, expect, vi } from 'vitest'
+
+import { promptForOptions } from '../src/options'
+import {
+  __testClearFrameworks,
+  __testRegisterFramework,
+} from '@tanstack/cta-engine/dist/frameworks'
+
+import * as prompts from '../src/ui-prompts'
+
+import type { Framework } from '@tanstack/cta-engine'
+
+import type { CliOptions } from '../src/types'
+
+vi.mock('../src/ui-prompts')
+
+beforeEach(() => {
+  __testClearFrameworks()
+  __testRegisterFramework({
+    id: 'react-cra',
+    name: 'react',
+    getAddOns: () => [
+      {
+        id: 'react-query',
+        type: 'add-on',
+        modes: ['file-router', 'code-router'],
+      },
+      {
+        id: 'tanstack-chat',
+        type: 'add-on',
+        modes: ['file-router', 'code-router'],
+      },
+      {
+        id: 'biome',
+        type: 'toolchain',
+        modes: ['file-router', 'code-router'],
+      },
+    ],
+  } as unknown as Framework)
+
+  __testRegisterFramework({
+    id: 'solid',
+    name: 'solid',
+    getAddOns: () => [],
+  } as unknown as Framework)
+})
+
+const baseCliOptions: CliOptions = {
+  framework: 'react-cra',
+  addOns: [],
+  toolchain: undefined,
+  projectName: undefined,
+  git: undefined,
+}
+
+function setBasicSpies() {
+  vi.spyOn(prompts, 'getProjectName').mockImplementation(async () => 'hello')
+  vi.spyOn(prompts, 'selectRouterType').mockImplementation(
+    async () => 'file-router',
+  )
+  vi.spyOn(prompts, 'selectTypescript').mockImplementation(async () => true)
+  vi.spyOn(prompts, 'selectTailwind').mockImplementation(async () => true)
+  vi.spyOn(prompts, 'selectPackageManager').mockImplementation(
+    async () => 'npm',
+  )
+  vi.spyOn(prompts, 'selectToolchain').mockImplementation(async () => undefined)
+  vi.spyOn(prompts, 'selectAddOns').mockImplementation(async () => [])
+}
+
+describe('promptForOptions', () => {
+  //// Project name
+
+  it('prompt for a project name', async () => {
+    setBasicSpies()
+
+    const options = await promptForOptions(baseCliOptions, {})
+
+    expect(options?.projectName).toBe('hello')
+  })
+
+  it('accept incoming project name', async () => {
+    setBasicSpies()
+
+    const options = await promptForOptions(
+      { ...baseCliOptions, projectName: 'override' },
+      {},
+    )
+
+    expect(options?.projectName).toBe('override')
+  })
+
+  //// Mode (router type)
+
+  it('forceMode should override template', async () => {
+    setBasicSpies()
+
+    const options = await promptForOptions(
+      { ...baseCliOptions, template: 'javascript' },
+      { forcedMode: 'file-router' },
+    )
+
+    expect(options?.mode).toBe('file-router')
+    expect(options?.typescript).toBe(true)
+  })
+
+  it('takes template from cli options - code-router', async () => {
+    setBasicSpies()
+
+    vi.spyOn(prompts, 'selectRouterType').mockImplementation(
+      async () => 'code-router',
+    )
+
+    const options = await promptForOptions(
+      { ...baseCliOptions, template: 'javascript' },
+      {},
+    )
+
+    expect(options?.mode).toBe('code-router')
+  })
+
+  it('takes template from cli options - file-router', async () => {
+    setBasicSpies()
+
+    vi.spyOn(prompts, 'selectRouterType').mockImplementation(
+      async () => 'code-router',
+    )
+
+    const options = await promptForOptions(
+      { ...baseCliOptions, template: 'file-router' },
+      {},
+    )
+
+    expect(options?.mode).toBe('file-router')
+  })
+
+  it('prompt for router type when unspecified', async () => {
+    setBasicSpies()
+
+    vi.spyOn(prompts, 'selectRouterType').mockImplementation(
+      async () => 'code-router',
+    )
+
+    const options = await promptForOptions(
+      { ...baseCliOptions, tailwind: false, framework: undefined },
+      {},
+    )
+
+    expect(options?.mode).toBe('code-router')
+  })
+
+  //// Tailwind
+
+  it('prompt for tailwind when unspecified in react-cra', async () => {
+    setBasicSpies()
+    vi.spyOn(prompts, 'selectTailwind').mockImplementation(async () => false)
+    const options = await promptForOptions(
+      { ...baseCliOptions, tailwind: undefined },
+      {},
+    )
+
+    expect(options?.tailwind).toBe(false)
+  })
+
+  it('prompt for tailwind when unspecified in react-cra - true', async () => {
+    setBasicSpies()
+    vi.spyOn(prompts, 'selectTailwind').mockImplementation(async () => true)
+    const options = await promptForOptions(
+      { ...baseCliOptions, tailwind: undefined },
+      {},
+    )
+
+    expect(options?.tailwind).toBe(true)
+  })
+
+  it('set tailwind when solid', async () => {
+    setBasicSpies()
+    const options = await promptForOptions(
+      { ...baseCliOptions, tailwind: undefined, framework: 'solid' },
+      {},
+    )
+
+    expect(options?.tailwind).toBe(true)
+  })
+
+  //// Package manager
+
+  it('uses the package manager from the cli options', async () => {
+    setBasicSpies()
+
+    const options = await promptForOptions(
+      { ...baseCliOptions, packageManager: 'bun' },
+      {},
+    )
+
+    expect(options?.packageManager).toBe('bun')
+  })
+
+  it('uses the package manager from the cli options', async () => {
+    setBasicSpies()
+
+    process.env.npm_config_userconfig = 'blarg'
+
+    const options = await promptForOptions(
+      { ...baseCliOptions, packageManager: undefined },
+      {},
+    )
+
+    expect(options?.packageManager).toBe('pnpm')
+  })
+
+  //// Add-ons
+  it('should be clean when no add-ons are selected', async () => {
+    setBasicSpies()
+
+    const options = await promptForOptions({ ...baseCliOptions }, {})
+
+    expect(options?.chosenAddOns).toEqual([])
+  })
+
+  it('should select biome when toolchain is specified', async () => {
+    setBasicSpies()
+
+    vi.spyOn(prompts, 'selectToolchain').mockImplementation(async () => 'biome')
+
+    const options = await promptForOptions(
+      { ...baseCliOptions, toolchain: 'biome' },
+      {},
+    )
+
+    expect(options?.chosenAddOns.map((a) => a.id).sort()).toEqual(['biome'])
+  })
+
+  it('should handle forced add-ons', async () => {
+    setBasicSpies()
+
+    vi.spyOn(prompts, 'selectToolchain').mockImplementation(
+      async () => undefined,
+    )
+
+    const options = await promptForOptions(
+      { ...baseCliOptions },
+      { forcedAddOns: ['react-query'] },
+    )
+
+    expect(options?.chosenAddOns.map((a) => a.id).sort()).toEqual([
+      'react-query',
+    ])
+    expect(options?.tailwind).toBe(true)
+    expect(options?.typescript).toBe(true)
+  })
+
+  it('should handle add-ons from the CLI', async () => {
+    setBasicSpies()
+
+    const options = await promptForOptions(
+      { ...baseCliOptions, addOns: ['biome', 'react-query'] },
+      {},
+    )
+
+    expect(options?.chosenAddOns.map((a) => a.id).sort()).toEqual([
+      'biome',
+      'react-query',
+    ])
+    expect(options?.tailwind).toBe(true)
+    expect(options?.typescript).toBe(true)
+  })
+
+  it('should handle user-selected add-ons', async () => {
+    setBasicSpies()
+
+    vi.spyOn(prompts, 'selectAddOns').mockImplementation(async () =>
+      Promise.resolve(['biome', 'react-query']),
+    )
+
+    const options = await promptForOptions(
+      { ...baseCliOptions, addOns: undefined },
+      {},
+    )
+
+    expect(options?.chosenAddOns.map((a) => a.id).sort()).toEqual([
+      'biome',
+      'react-query',
+    ])
+    expect(options?.tailwind).toBe(true)
+    expect(options?.typescript).toBe(true)
+  })
+})

package/tests/setupVitest.ts

@@ -0,0 +1,6 @@
+import createFetchMock from 'vitest-fetch-mock'
+import { vi } from 'vitest'
+
+const fetchMocker = createFetchMock(vi)
+
+fetchMocker.enableMocks()