chore: starting to get some place with the refactoring of create-app

Author: jherr

packages/cta-core/package.json

@@ -8,7 +8,8 @@
   "scripts": {
     "build": "tsc",
     "dev": "tsc --watch",
-    "test": "eslint ./src"
+    "test": "eslint ./src",
+    "test:watch": "vitest"
   },
   "repository": {
     "type": "git",
@@ -31,7 +32,8 @@
     "ejs": "^3.1.10",
     "execa": "^9.5.2",
     "memfs": "^4.17.0",
-    "prettier": "^3.5.0"
+    "prettier": "^3.5.0",
+    "vitest": "^3.1.1"
   },
   "devDependencies": {
     "@tanstack/config": "^0.16.2",

packages/cta-core/src/index.ts

@@ -22,7 +22,7 @@ export {
   getFrameworkByName,
   getFrameworks,
 } from './frameworks.js'
-export { jsSafeName, sortObject } from './utils.js'
+export { jsSafeName, relativePath, sortObject } from './utils.js'
 export { writeConfigFile, readConfigFile } from './config-file.js'
 export { readFileHelper } from './file-helper.js'
 

packages/cta-core/src/types.ts

@@ -98,7 +98,7 @@ export type AddOn = {
   type: 'add-on' | 'example' | 'starter'
   link: string
   templates: Array<string>
-  routes: Array<{
+  routes?: Array<{
     url: string
     name: string
     path: string

packages/cta-core/src/utils.ts

@@ -1,3 +1,5 @@
+import { basename } from 'node:path'
+;``
 export function sortObject(
   obj: Record<string, string>,
 ): Record<string, string> {
@@ -15,3 +17,34 @@ export function jsSafeName(name: string) {
     .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
     .join('')
 }
+
+export function relativePath(from: string, to: string) {
+  const fromSegments = from.replace(/^./, '').split('/')
+  const toSegments = to.replace(/^./, '').split('/')
+
+  fromSegments.pop()
+  toSegments.pop()
+
+  let commonIndex = 0
+  while (
+    commonIndex < fromSegments.length &&
+    commonIndex < toSegments.length &&
+    fromSegments[commonIndex] === toSegments[commonIndex]
+  ) {
+    commonIndex++
+  }
+
+  const upLevels = fromSegments.length - commonIndex
+  const downLevels = toSegments.slice(commonIndex)
+
+  if (upLevels === 0 && downLevels.length === 0) {
+    return `./${basename(to)}`
+  } else if (upLevels === 0 && downLevels.length > 0) {
+    return `./${downLevels.join('/')}/${basename(to)}`
+  } else {
+    const relativePath = [...Array(upLevels).fill('..'), ...downLevels].join(
+      '/',
+    )
+    return `${relativePath}/${basename(to)}`
+  }
+}

packages/cta-core/tests/utils.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest'
+
+import { relativePath } from '../src/utils'
+
+describe('relativePath', () => {
+  it('relative path with the same directory', () => {
+    expect(relativePath('src/utils.ts', 'src/index.ts')).toBe('./index.ts')
+  })
+  it('relative from a subdirectory', () => {
+    expect(relativePath('src/something/utils.ts', 'src/index.ts')).toBe(
+      '../index.ts',
+    )
+  })
+  it('relative to a subdirectory', () => {
+    expect(relativePath('src/utils.ts', 'src/something/index.ts')).toBe(
+      './something/index.ts',
+    )
+  })
+  it('same deep directory', () => {
+    expect(
+      relativePath('src/foo/bar/baz/utils.ts', 'src/foo/bar/baz/index.ts'),
+    ).toBe('./index.ts')
+  })
+  it('up several levels and down several levels', () => {
+    expect(relativePath('src/bar/baz/utils.ts', 'src/foo/bar/index.ts')).toBe(
+      '../../foo/bar/index.ts',
+    )
+  })
+})

packages/cta-engine/src/create-app.ts

@@ -2,7 +2,6 @@ import { basename, resolve } from 'node:path'
 
 import {
   copyAddOnFile,
-  jsSafeName,
   packageManagerExecute,
   writeConfigFile,
 } from '@tanstack/cta-core'
@@ -71,41 +70,9 @@ export async function createApp(
     )
   }
 
-  const isAddOnEnabled = (id: string) =>
-    options.chosenAddOns.find((a) => a.id === id)
-
-  async function runAddOn(addOn: AddOn) {
-    if (addOn.files) {
-      for (const file of Object.keys(addOn.files)) {
-        await copyAddOnFile(
-          environment,
-          addOn.files[file],
-          file,
-          resolve(targetDir, file),
-          (content, targetFileName) =>
-            templateFileFromContent(targetFileName, content),
-        )
-      }
-    }
-    if (addOn.deletedFiles) {
-      for (const file of addOn.deletedFiles) {
-        await environment.deleteFile(resolve(targetDir, file))
-      }
-    }
-
-    if (addOn.command && addOn.command.command) {
-      await environment.execute(
-        addOn.command.command,
-        addOn.command.args || [],
-        resolve(targetDir),
-      )
-    }
-  }
-
-  // Setup the .vscode directory
+  // Setup the base files
   await templateFile(templateDirBase, '_dot_vscode/settings.json.ejs')
 
-  // Fill the public directory
   copyFiles(templateDirBase, [
     './public/robots.txt',
     './public/favicon.ico',
@@ -114,15 +81,13 @@ export async function createApp(
     './public/logo512.png',
   ])
 
-  // Check for a .cursorrules file
   if (environment.exists(resolve(templateDirBase, '_dot_cursorrules'))) {
     await environment.copyFile(
       resolve(templateDirBase, '_dot_cursorrules'),
       resolve(targetDir, '.cursorrules'),
     )
   }
 
-  // Copy in Vite and Tailwind config and CSS
   if (!options.tailwind) {
     await copyFiles(templateDirBase, ['./src/App.css'])
   }
@@ -137,24 +102,42 @@ export async function createApp(
   await templateFile(templateDirBase, 'eslint.config.js.ejs')
   await templateFile(templateDirBase, 'prettier.config.js.ejs')
 
-  // Setup reportWebVitals
-  // TODO: This is a bit of a hack to check if the framework is react
   if (
     environment.exists(resolve(templateDirBase, './src/reportWebVitals.ts.ejs'))
   ) {
     await templateFile(templateDirBase, './src/reportWebVitals.ts.ejs')
   }
   await templateFile(templateDirBase, './index.html.ejs')
 
-  // Add .gitignore
   await environment.copyFile(
     resolve(templateDirBase, '_dot_gitignore'),
     resolve(targetDir, '.gitignore'),
   )
 
-  // Setup tsconfig
   await templateFile(templateDirBase, './tsconfig.json.ejs')
 
+  await templateFile(templateDirBase, './src/main.tsx.ejs', './src/main.tsx')
+
+  await templateFile(
+    templateDirBase,
+    './src/routes/__root.tsx.ejs',
+    './src/routes/__root.tsx',
+  )
+
+  if (options.framework.id === 'react-cra') {
+    await templateFile(templateDirBase, './src/App.test.tsx.ejs')
+  }
+  await templateFile(templateDirBase, './src/App.tsx.ejs')
+  await templateFile(templateDirBase, './src/routes/index.tsx.ejs')
+
+  await templateFile(
+    templateDirBase,
+    './src/components/Header.tsx.ejs',
+    './src/components/Header.tsx',
+  )
+
+  await templateFile(templateDirBase, 'README.md.ejs')
+
   // Setup the package.json file, optionally with typescript, tailwind and formatter/linter
   await createPackageJSON(
     environment,
@@ -165,6 +148,39 @@ export async function createApp(
     options.chosenAddOns.map((addOn) => addOn.packageAdditions),
   )
 
+  // Setup the add-ons
+
+  const isAddOnEnabled = (id: string) =>
+    options.chosenAddOns.find((a) => a.id === id)
+
+  async function runAddOn(addOn: AddOn) {
+    if (addOn.files) {
+      for (const file of Object.keys(addOn.files)) {
+        await copyAddOnFile(
+          environment,
+          addOn.files[file],
+          file,
+          resolve(targetDir, file),
+          (content, targetFileName) =>
+            templateFileFromContent(targetFileName, content),
+        )
+      }
+    }
+    if (addOn.deletedFiles) {
+      for (const file of addOn.deletedFiles) {
+        await environment.deleteFile(resolve(targetDir, file))
+      }
+    }
+
+    if (addOn.command && addOn.command.command) {
+      await environment.execute(
+        addOn.command.command,
+        addOn.command.args || [],
+        resolve(targetDir),
+      )
+    }
+  }
+
   // Copy all the asset files from the addons
   const s = silent ? null : environment.spinner()
   for (const type of ['add-on', 'example']) {
@@ -211,128 +227,13 @@ export async function createApp(
     }
   }
 
-  const integrations: Array<{
-    type: 'layout' | 'provider' | 'root-provider' | 'header-user'
-    name: string
-    path: string
-  }> = []
-  if (environment.exists(resolve(targetDir, 'src/integrations'))) {
-    for (const integration of environment.readdir(
-      resolve(targetDir, 'src/integrations'),
-    )) {
-      const integrationName = jsSafeName(integration)
-      if (
-        environment.exists(
-          resolve(targetDir, 'src/integrations', integration, 'layout.tsx'),
-        )
-      ) {
-        integrations.push({
-          type: 'layout',
-          name: `${integrationName}Layout`,
-          path: `integrations/${integration}/layout`,
-        })
-      }
-      if (
-        environment.exists(
-          resolve(targetDir, 'src/integrations', integration, 'provider.tsx'),
-        )
-      ) {
-        integrations.push({
-          type: 'provider',
-          name: `${integrationName}Provider`,
-          path: `integrations/${integration}/provider`,
-        })
-      }
-      if (
-        environment.exists(
-          resolve(
-            targetDir,
-            'src/integrations',
-            integration,
-            'root-provider.tsx',
-          ),
-        )
-      ) {
-        integrations.push({
-          type: 'root-provider',
-          name: integrationName,
-          path: `integrations/${integration}/root-provider`,
-        })
-      }
-      if (
-        environment.exists(
-          resolve(
-            targetDir,
-            'src/integrations',
-            integration,
-            'header-user.tsx',
-          ),
-        )
-      ) {
-        integrations.push({
-          type: 'header-user',
-          name: `${integrationName}Header`,
-          path: `integrations/${integration}/header-user`,
-        })
-      }
-    }
-  }
-
-  const routes: Array<{
-    path: string
-    name: string
-  }> = []
-  if (environment.exists(resolve(targetDir, 'src/routes'))) {
-    for (const file of environment.readdir(resolve(targetDir, 'src/routes'))) {
-      const name = file.replace(/\.tsx?|\.jsx?/, '')
-      const safeRouteName = jsSafeName(name)
-      routes.push({
-        path: `./routes/${name}`,
-        name: safeRouteName,
-      })
-    }
-  }
-
-  await templateFile(templateDirBase, './src/main.tsx.ejs', './src/main.tsx', {
-    routes,
-    integrations,
-  })
-
-  await templateFile(
-    templateDirBase,
-    './src/routes/__root.tsx.ejs',
-    './src/routes/__root.tsx',
-    {
-      integrations,
-    },
-  )
-
-  if (options.framework.id === 'react-cra') {
-    await templateFile(templateDirBase, './src/App.test.tsx.ejs')
-  }
-  await templateFile(templateDirBase, './src/App.tsx.ejs')
-  await templateFile(templateDirBase, './src/routes/index.tsx.ejs')
-
-  await templateFile(
-    templateDirBase,
-    './src/components/Header.tsx.ejs',
-    './src/components/Header.tsx',
-    {
-      integrations,
-      routes,
-    },
-  )
-
   const warnings: Array<string> = []
   for (const addOn of options.chosenAddOns) {
     if (addOn.warning) {
       warnings.push(addOn.warning)
     }
   }
 
-  // Create the README.md
-  await templateFile(templateDirBase, 'README.md.ejs')
-
   // Adding starter
   if (options.starter) {
     s?.start(`Setting up starter ${options.starter.name}...`)