@tanstack/create 0.49.1

package/src/custom-add-ons/add-on.ts

@@ -0,0 +1,265 @@
+import { readFile } from 'node:fs/promises'
+import { existsSync, mkdirSync, writeFileSync } from 'node:fs'
+import { basename, dirname, resolve } from 'node:path'
+
+import { AddOnCompiledSchema } from '../types.js'
+import { createIgnore, recursivelyGatherFiles } from '../file-helpers.js'
+import {
+  compareFilesRecursively,
+  createAppOptionsFromPersisted,
+  createPackageAdditions,
+  readCurrentProjectOptions,
+  runCreateApp,
+} from './shared.js'
+
+import type { PersistedOptions } from '../config-file'
+import type {
+  AddOn,
+  AddOnCompiled,
+  AddOnInfo,
+  Environment,
+  Options,
+} from '../types'
+
+const ADD_ON_DIR = '.add-on'
+
+export const ADD_ON_IGNORE_FILES: Array<string> = [
+  'main.jsx',
+  'App.jsx',
+  'main.tsx',
+  'App.tsx',
+  'routeTree.gen.ts',
+]
+
+const INFO_FILE = '.add-on/info.json'
+const COMPILED_FILE = 'add-on.json'
+
+const ASSETS_DIR = 'assets'
+
+export function camelCase(str: string) {
+  return str
+    .split(/(\.|-|\/)/)
+    .filter((part) => /^[a-zA-Z]+$/.test(part))
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('')
+}
+
+export function templatize(routeCode: string, routeFile: string) {
+  let code = routeCode
+
+  // Replace the import
+  code = code.replace(
+    /import { createFileRoute } from ['"]@tanstack\/react-router['"]/g,
+    `import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'`,
+  )
+
+  // Extract route path and definition, then transform the route declaration
+  const routeMatch = code.match(
+    /export\s+const\s+Route\s*=\s*createFileRoute\(['"]([^'"]+)['"]\)\s*\(\{([^}]+)\}\)/,
+  )
+
+  let path = ''
+
+  if (routeMatch) {
+    const fullMatch = routeMatch[0]
+    path = routeMatch[1]
+    const routeDefinition = routeMatch[2]
+    code = code.replace(
+      fullMatch,
+      `<% if (codeRouter) { %>
+import type { RootRoute } from '@tanstack/react-router'
+import tailwind from '@tailwindcss/vite';
+<% } else { %>
+export const Route = createFileRoute('${path}')({${routeDefinition}})
+<% } %>`,
+    )
+
+    code += `
+<% if (codeRouter) { %>
+export default (parentRoute: RootRoute) => createRoute({
+  path: '${path}',
+  ${routeDefinition}
+  getParentRoute: () => parentRoute,
+})
+<% } %>
+`
+  } else {
+    console.error(`No route found in the file: ${routeFile}`)
+  }
+
+  const name = basename(path)
+    .replace('.tsx', '')
+    .replace(/^demo/, '')
+    .replace('.', ' ')
+    .trim()
+
+  const jsName = camelCase(basename(path))
+
+  return { url: path, code, name, jsName }
+}
+
+export async function validateAddOnSetup(environment: Environment) {
+  const options = await readCurrentProjectOptions(environment)
+
+  if (options.mode === 'code-router') {
+    environment.error(
+      'This project is using code-router mode.',
+      'To create an add-on, the project must not use code-router mode.',
+    )
+    process.exit(1)
+  }
+  if (!options.tailwind) {
+    environment.error(
+      'This project is not using Tailwind CSS.',
+      'To create an add-on, the project must be created with Tailwind CSS.',
+    )
+    process.exit(1)
+  }
+  if (!options.typescript) {
+    environment.error(
+      'This project is not using TypeScript.',
+      'To create an add-on, the project must be created with TypeScript.',
+    )
+    process.exit(1)
+  }
+}
+
+export async function readOrGenerateAddOnInfo(
+  options: PersistedOptions,
+): Promise<AddOnInfo> {
+  const info = existsSync(INFO_FILE)
+    ? JSON.parse((await readFile(INFO_FILE)).toString())
+    : ({
+        id: `${options.projectName}-add-on`,
+        name: `${options.projectName}-add-on`,
+        version: '0.0.1',
+        description: 'Add-on',
+        author: 'Jane Smith <jane.smith@example.com>',
+        tailwind: options.tailwind || true,
+        license: 'MIT',
+        link: `https://github.com/jane-smith/${options.projectName}-add-on`,
+        shadcnComponents: [],
+        framework: options.framework,
+        modes: [options.mode],
+        routes: [],
+        warning: '',
+        phase: 'add-on',
+        type: 'add-on',
+        packageAdditions: {
+          scripts: {},
+          dependencies: {},
+          devDependencies: {},
+        },
+        dependsOn: options.chosenAddOns,
+      } as AddOnInfo)
+  info.tailwind = options.tailwind || true
+  return info
+}
+
+export async function generateProject(persistedOptions: PersistedOptions) {
+  const info = await readOrGenerateAddOnInfo(persistedOptions)
+
+  const output = await runCreateApp(
+    (await createAppOptionsFromPersisted(
+      persistedOptions,
+    )) as Required<Options>,
+  )
+
+  return { info, output }
+}
+
+export async function buildAssetsDirectory(
+  output: {
+    files: Record<string, string>
+  },
+  info: AddOnInfo,
+) {
+  const assetsDir = resolve(ADD_ON_DIR, ASSETS_DIR)
+  const ignore = createIgnore(process.cwd())
+
+  if (!existsSync(assetsDir)) {
+    const changedFiles: Record<string, string> = {}
+    await compareFilesRecursively('.', ignore, output.files, changedFiles)
+
+    for (const file of Object.keys(changedFiles).filter(
+      (file) => !ADD_ON_IGNORE_FILES.includes(basename(file)),
+    )) {
+      mkdirSync(dirname(resolve(assetsDir, file)), {
+        recursive: true,
+      })
+      if (file.includes('/routes/')) {
+        const { url, code, name, jsName } = templatize(changedFiles[file], file)
+        info.routes ||= []
+        if (!info.routes.find((r) => r.url === url)) {
+          info.routes.push({
+            url,
+            name,
+            jsName,
+            path: file,
+          })
+        }
+        writeFileSync(resolve(assetsDir, `${file}.ejs`), code)
+      } else {
+        writeFileSync(resolve(assetsDir, file), changedFiles[file])
+      }
+    }
+  }
+}
+
+export async function updateAddOnInfo(environment: Environment) {
+  const { info, output } = await generateProject(
+    await readCurrentProjectOptions(environment),
+  )
+
+  info.packageAdditions = createPackageAdditions(
+    JSON.parse(output.files['./package.json']),
+    JSON.parse((await readFile('package.json')).toString()),
+  )
+
+  await buildAssetsDirectory(output, info)
+
+  mkdirSync(resolve(dirname(INFO_FILE)), { recursive: true })
+  writeFileSync(INFO_FILE, JSON.stringify(info, null, 2))
+}
+
+export async function compileAddOn(environment: Environment) {
+  const info = await readOrGenerateAddOnInfo(
+    await readCurrentProjectOptions(environment),
+  )
+
+  const assetsDir = resolve(ADD_ON_DIR, ASSETS_DIR)
+
+  const compiledInfo: AddOnCompiled = {
+    ...info,
+    files: await recursivelyGatherFiles(assetsDir),
+    deletedFiles: [],
+  }
+
+  writeFileSync(COMPILED_FILE, JSON.stringify(compiledInfo, null, 2))
+}
+
+export async function initAddOn(environment: Environment) {
+  await validateAddOnSetup(environment)
+  await updateAddOnInfo(environment)
+  await compileAddOn(environment)
+}
+
+export async function loadRemoteAddOn(url: string): Promise<AddOn> {
+  const response = await fetch(url)
+  const jsonContent = await response.json()
+
+  const checked = AddOnCompiledSchema.safeParse(jsonContent)
+  if (!checked.success) {
+    throw new Error(`Invalid add-on: ${url}`)
+  }
+
+  const addOn = checked.data
+  addOn.id = url
+  const out = {
+    ...addOn,
+    getFiles: () => Promise.resolve(Object.keys(addOn.files)),
+    getFileContents: (path: string) => Promise.resolve(addOn.files[path]),
+    getDeletedFiles: () => Promise.resolve(addOn.deletedFiles),
+  }
+  return out
+}

package/src/custom-add-ons/shared.ts

@@ -0,0 +1,164 @@
+import { readdir } from 'node:fs/promises'
+import { resolve } from 'node:path'
+import { createApp } from '../create-app.js'
+import { createMemoryEnvironment } from '../environment.js'
+import { finalizeAddOns, populateAddOnOptionsDefaults } from '../add-ons.js'
+import { getFrameworkById } from '../frameworks.js'
+import { readConfigFileFromEnvironment } from '../config-file.js'
+import { readFileHelper, toCleanPath } from '../file-helpers.js'
+import { loadStarter } from '../custom-add-ons/starter.js'
+
+import type { Environment, Options, SerializedOptions } from '../types.js'
+import type { PersistedOptions } from '../config-file.js'
+
+export function createPackageAdditions(
+  originalPackageJson: Record<string, any>,
+  currentPackageJson: Record<string, any>,
+) {
+  const packageAdditions: Record<string, any> = {}
+
+  const scripts: Record<string, any> = {}
+  for (const script of Object.keys(currentPackageJson.scripts || {})) {
+    if (
+      originalPackageJson.scripts[script] !== currentPackageJson.scripts[script]
+    ) {
+      scripts[script] = currentPackageJson.scripts[script]
+    }
+  }
+  packageAdditions.scripts = Object.keys(scripts).length ? scripts : undefined
+
+  const dependencies: Record<string, string> = {}
+  for (const dependency of Object.keys(currentPackageJson.dependencies || {})) {
+    if (
+      originalPackageJson.dependencies[dependency] !==
+      currentPackageJson.dependencies[dependency]
+    ) {
+      dependencies[dependency] = currentPackageJson.dependencies[dependency]
+    }
+  }
+  packageAdditions.dependencies = Object.keys(dependencies).length
+    ? dependencies
+    : undefined
+
+  const devDependencies: Record<string, string> = {}
+  for (const dependency of Object.keys(
+    currentPackageJson.devDependencies || {},
+  )) {
+    if (
+      originalPackageJson.devDependencies[dependency] !==
+      currentPackageJson.devDependencies[dependency]
+    ) {
+      devDependencies[dependency] =
+        currentPackageJson.devDependencies[dependency]
+    }
+  }
+  packageAdditions.devDependencies = Object.keys(devDependencies).length
+    ? devDependencies
+    : undefined
+
+  return packageAdditions
+}
+
+export async function createAppOptionsFromPersisted(
+  json: PersistedOptions,
+): Promise<Options> {
+  /* eslint-disable unused-imports/no-unused-vars */
+  const { version, ...rest } = json
+  /* eslint-enable unused-imports/no-unused-vars */
+  const framework = getFrameworkById(rest.framework)
+  const chosenAddOns = await finalizeAddOns(framework!, json.mode!, [
+    ...json.chosenAddOns,
+  ])
+  return {
+    ...rest,
+    mode: json.mode!,
+    projectName: json.projectName!,
+    typescript: json.typescript!,
+    tailwind: json.tailwind!,
+    git: json.git!,
+    packageManager: json.packageManager!,
+    targetDir: '',
+    framework: framework!,
+    starter: json.starter ? await loadStarter(json.starter) : undefined,
+    chosenAddOns,
+    addOnOptions: populateAddOnOptionsDefaults(chosenAddOns),
+  }
+}
+
+export function createSerializedOptionsFromPersisted(
+  json: PersistedOptions,
+): SerializedOptions {
+  /* eslint-disable unused-imports/no-unused-vars */
+  const { version, ...rest } = json
+  /* eslint-enable unused-imports/no-unused-vars */
+  return {
+    ...rest,
+    mode: json.mode!,
+    projectName: json.projectName!,
+    typescript: json.typescript!,
+    tailwind: json.tailwind!,
+    git: json.git!,
+    packageManager: json.packageManager!,
+    targetDir: '',
+    framework: json.framework,
+    starter: json.starter,
+    addOnOptions: {},
+  }
+}
+
+export async function runCreateApp(options: Required<Options>) {
+  const { environment, output } = createMemoryEnvironment()
+
+  const targetDir = resolve(process.cwd())
+
+  await createApp(environment, {
+    ...options,
+    targetDir,
+  })
+
+  output.files = Object.fromEntries(
+    Object.entries(output.files).map(([key, value]) => [
+      toCleanPath(key, targetDir),
+      value,
+    ]),
+  )
+
+  return output
+}
+
+export async function compareFilesRecursively(
+  path: string,
+  ignore: (filePath: string) => boolean,
+  original: Record<string, string>,
+  changedFiles: Record<string, string>,
+) {
+  const files = await readdir(path, { withFileTypes: true })
+  for (const file of files) {
+    const filePath = `${path}/${file.name}`
+    if (!ignore(file.name)) {
+      if (file.isDirectory()) {
+        await compareFilesRecursively(filePath, ignore, original, changedFiles)
+      } else {
+        const contents = await readFileHelper(filePath)
+        if (!original[filePath] || original[filePath] !== contents) {
+          changedFiles[filePath] = contents
+        }
+      }
+    }
+  }
+}
+
+export async function readCurrentProjectOptions(environment: Environment) {
+  const persistedOptions = await readConfigFileFromEnvironment(
+    environment,
+    process.cwd(),
+  )
+  if (!persistedOptions) {
+    environment.error(
+      'There is no .cta.json file in your project.',
+      `This is probably because this was created with an older version of create-tsrouter-app.`,
+    )
+    process.exit(1)
+  }
+  return persistedOptions
+}

package/src/custom-add-ons/starter.ts

@@ -0,0 +1,126 @@
+import { readFile } from 'node:fs/promises'
+import { existsSync, writeFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+
+import { StarterCompiledSchema } from '../types.js'
+import { createIgnore } from '../file-helpers.js'
+import {
+  compareFilesRecursively,
+  createAppOptionsFromPersisted,
+  createPackageAdditions,
+  readCurrentProjectOptions,
+  runCreateApp,
+} from './shared.js'
+
+import type { PersistedOptions } from '../config-file'
+import type {
+  Environment,
+  Options,
+  Starter,
+  StarterCompiled,
+  StarterInfo,
+} from '../types'
+
+const INFO_FILE = 'starter-info.json'
+const COMPILED_FILE = 'starter.json'
+
+export async function readOrGenerateStarterInfo(
+  options: PersistedOptions,
+): Promise<StarterInfo> {
+  return existsSync(INFO_FILE)
+    ? JSON.parse((await readFile(INFO_FILE)).toString())
+    : {
+        id: `${options.projectName}-starter`,
+        name: `${options.projectName}-starter`,
+        version: '0.0.1',
+        description: 'Project starter',
+        author: 'Jane Smith <jane.smith@example.com>',
+        license: 'MIT',
+        link: `https://github.com/jane-smith/${options.projectName}-starter`,
+        shadcnComponents: [],
+        framework: options.framework,
+        mode: options.mode!,
+        routes: [],
+        warning: '',
+        type: 'starter',
+        packageAdditions: {
+          scripts: {},
+          dependencies: {},
+          devDependencies: {},
+        },
+        dependsOn: options.chosenAddOns,
+        typescript: options.typescript!,
+        tailwind: options.tailwind!,
+      }
+}
+
+async function loadCurrentStarterInfo(environment: Environment) {
+  const persistedOptions = await readCurrentProjectOptions(environment)
+  const info = await readOrGenerateStarterInfo(persistedOptions)
+
+  const output = await runCreateApp(
+    (await createAppOptionsFromPersisted(
+      persistedOptions,
+    )) as Required<Options>,
+  )
+
+  return { info, output }
+}
+
+export async function updateStarterInfo(environment: Environment) {
+  const { info, output } = await loadCurrentStarterInfo(environment)
+
+  info.packageAdditions = createPackageAdditions(
+    JSON.parse(output.files['./package.json']),
+    JSON.parse((await readFile('package.json')).toString()),
+  )
+
+  writeFileSync(INFO_FILE, JSON.stringify(info, null, 2))
+}
+
+export async function compileStarter(environment: Environment) {
+  const { info, output } = await loadCurrentStarterInfo(environment)
+
+  const ignore = createIgnore(process.cwd())
+  const changedFiles: Record<string, string> = {}
+  await compareFilesRecursively('.', ignore, output.files, changedFiles)
+
+  const deletedFiles: Array<string> = []
+  for (const file of Object.keys(output.files)) {
+    if (!existsSync(resolve(process.cwd(), file))) {
+      deletedFiles.push(file)
+    }
+  }
+
+  const compiledInfo: StarterCompiled = {
+    ...info,
+    files: changedFiles,
+    deletedFiles,
+  }
+
+  writeFileSync(COMPILED_FILE, JSON.stringify(compiledInfo, null, 2))
+}
+
+export async function initStarter(environment: Environment) {
+  await updateStarterInfo(environment)
+  await compileStarter(environment)
+}
+
+export async function loadStarter(url: string): Promise<Starter> {
+  const response = await fetch(url)
+  const jsonContent = await response.json()
+
+  const checked = StarterCompiledSchema.safeParse(jsonContent)
+  if (!checked.success) {
+    throw new Error(`Invalid starter: ${url}`)
+  }
+
+  const starter = checked.data
+  starter.id = url
+  return {
+    ...starter,
+    getFiles: () => Promise.resolve(Object.keys(starter.files)),
+    getFileContents: (path: string) => Promise.resolve(starter.files[path]),
+    getDeletedFiles: () => Promise.resolve(starter.deletedFiles),
+  }
+}