@tanstack/create 0.49.1

package/src/frameworks/solid/toolchains/biome/assets/biome.json.ejs

@@ -0,0 +1,31 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "vcs": {
+    "enabled": false,
+    "clientKind": "git",
+    "useIgnoreFile": false
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "ignore": ["src/routeTree.gen.ts"],
+    "include": ["src/*", ".vscode/*", "index.html", "vite.config.ts"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "tab"
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double"
+    }
+  }
+}

package/src/frameworks/solid/toolchains/biome/info.json

@@ -0,0 +1,11 @@
+{
+  "name": "Biome",
+  "description": "Biome toolchain support.",
+  "phase": "setup",
+  "type": "toolchain",
+  "category": "tooling",
+  "exclusive": ["linter"],
+  "color": "#60A5FA",
+  "modes": ["code-router", "file-router"],
+  "link": "https://biomejs.dev"
+}

package/src/frameworks/solid/toolchains/biome/package.json

@@ -0,0 +1,10 @@
+{
+  "scripts": {
+    "format": "biome format",
+    "lint": "biome lint",
+    "check": "biome check"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.2.4"
+  }
+}

package/src/frameworks/solid/toolchains/biome/small-logo.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 64 55.425" width="64" height="55.425" version="1.0" xmlns="http://www.w3.org/2000/svg">
+ <rect id="background" width="100%" height="100%" fill="none" />
+ <path id="emblem" d="m32 0-14.255 24.69c5.409-1.6676 11.228-1.9148 16.869-0.58434l4.8177 1.1372-4.5328 19.22-4.8247-1.1372c-5.9293-1.3987-11.628 1.716-14.036 6.6851l-4.4595-2.1575c3.4034-7.0291 11.424-11.285 19.636-9.3476l2.2595-9.579c-8.0938-1.9081-16.624-9e-3 -23.145 5.153-6.5204 5.1607-10.329 13.028-10.329 21.344l64 7.9e-4z" fill="#60a5fa" stroke-linecap="square" stroke-width="4.8768" style="paint-order:markers fill stroke" />
+</svg>

package/src/frameworks/solid/toolchains/eslint/assets/_dot_prettierignore

@@ -0,0 +1,3 @@
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

package/src/frameworks/solid/toolchains/eslint/assets/eslint.config.js

@@ -0,0 +1,5 @@
+//  @ts-check
+
+import { tanstackConfig } from "@tanstack/eslint-config";
+
+export default [...tanstackConfig];

package/src/frameworks/solid/toolchains/eslint/assets/prettier.config.js

@@ -0,0 +1,10 @@
+//  @ts-check
+
+/** @type {import('prettier').Config} */
+const config = {
+  semi: false,
+  singleQuote: true,
+  trailingComma: "all",
+};
+
+export default config;

package/src/frameworks/solid/toolchains/eslint/info.json

@@ -0,0 +1,11 @@
+{
+  "name": "ESLint",
+  "description": "ESLint + Prettier toolchain support.",
+  "phase": "setup",
+  "type": "toolchain",
+  "category": "tooling",
+  "exclusive": ["linter"],
+  "color": "#4B32C3",
+  "modes": ["code-router", "file-router"],
+  "link": "https://eslint.org"
+}

package/src/frameworks/solid/toolchains/eslint/package.json

@@ -0,0 +1,11 @@
+{
+  "scripts": {
+    "lint": "eslint",
+    "format": "prettier",
+    "check": "prettier --write . && eslint --fix"
+  },
+  "devDependencies": {
+    "@tanstack/eslint-config": "^0.3.2",
+    "prettier": "^3.5.3"
+  }
+}

package/src/frameworks/solid/toolchains/eslint/small-logo.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg height="285.09601" viewBox="0 0 323.99971 285.09601" width="323.99973" xmlns="http://www.w3.org/2000/svg">
+   <g transform="matrix(1.2548929 0 0 1.2548929 -22.9868 -19.949332)">
+      <path d="m97.021 99.016l48.432-27.962c1.212-.7 2.706-.7 3.918 0l48.433 27.962c1.211.7 1.959 1.993 1.959 3.393v55.924c0 1.399-.748 2.693-1.959 3.394l-48.433 27.962c-1.212.7-2.706.7-3.918 0l-48.432-27.962c-1.212-.7-1.959-1.994-1.959-3.394v-55.924c.001-1.4.748-2.693 1.959-3.393" fill="#8080F2"/>
+      <path d="m273.336 124.488l-57.867-100.672c-2.102-3.64-5.985-6.325-10.188-6.325h-115.736c-4.204 0-8.088 2.685-10.19 6.325l-57.867 100.45c-2.102 3.641-2.102 8.236 0 11.877l57.867 99.847c2.102 3.64 5.986 5.501 10.19 5.501h115.735c4.203 0 8.087-1.805 10.188-5.446l57.867-100.01c2.104-3.639 2.104-7.907.001-11.547m-47.917 48.41c0 1.48-.891 2.849-2.174 3.59l-73.71 42.527c-1.282.74-2.888.74-4.17 0l-73.767-42.527c-1.282-.741-2.179-2.109-2.179-3.59v-85.055c0-1.481.884-2.849 2.167-3.59l73.707-42.527c1.282-.741 2.886-.741 4.168 0l73.772 42.527c1.283.741 2.186 2.109 2.186 3.59z" fill="#4b32c3"/>
+   </g>
+</svg>

package/src/frameworks.ts

@@ -0,0 +1,161 @@
+import { existsSync, readFileSync, readdirSync } from 'node:fs'
+import { resolve } from 'node:path'
+
+import {
+  findFilesRecursively,
+  isDirectory,
+  readFileHelper,
+  toCleanPath,
+} from './file-helpers.js'
+
+import type { AddOn, Framework, FrameworkDefinition } from './types.js'
+
+const frameworks: Array<Framework> = []
+
+export function scanProjectDirectory(
+  projectDirectory: string,
+  baseDirectory: string,
+) {
+  const absolutePaths: Record<string, string> = {}
+  findFilesRecursively(baseDirectory, absolutePaths)
+
+  const files = Object.keys(absolutePaths).reduce(
+    (acc, path) => {
+      acc[toCleanPath(path, baseDirectory)] = absolutePaths[path]
+      return acc
+    },
+    {} as Record<string, string>,
+  )
+
+  const basePackageJSON = existsSync(resolve(baseDirectory, 'package.json'))
+    ? JSON.parse(readFileSync(resolve(baseDirectory, 'package.json'), 'utf8'))
+    : {}
+
+  const optionalPackages = existsSync(
+    resolve(projectDirectory, 'packages.json'),
+  )
+    ? JSON.parse(
+        readFileSync(resolve(projectDirectory, 'packages.json'), 'utf8'),
+      )
+    : {}
+
+  return {
+    files,
+    basePackageJSON,
+    optionalPackages,
+  }
+}
+
+export function scanAddOnDirectories(addOnsDirectories: Array<string>) {
+  const addOns: Array<AddOn> = []
+
+  for (const addOnsBase of addOnsDirectories) {
+    for (const dir of readdirSync(addOnsBase).filter((file) =>
+      isDirectory(resolve(addOnsBase, file)),
+    )) {
+      const filePath = resolve(addOnsBase, dir, 'info.json')
+      const fileContent = readFileSync(filePath, 'utf-8')
+      const info = JSON.parse(fileContent)
+      info.tailwind = info.tailwind ?? true
+
+      let packageAdditions: Record<string, any> = {}
+      let packageTemplate: string | undefined = undefined
+
+      if (existsSync(resolve(addOnsBase, dir, 'package.json'))) {
+        packageAdditions = JSON.parse(
+          readFileSync(resolve(addOnsBase, dir, 'package.json'), 'utf-8'),
+        )
+      } else if (existsSync(resolve(addOnsBase, dir, 'package.json.ejs'))) {
+        packageTemplate = readFileSync(
+          resolve(addOnsBase, dir, 'package.json.ejs'),
+          'utf-8',
+        )
+      }
+
+      let readme: string | undefined
+      if (existsSync(resolve(addOnsBase, dir, 'README.md'))) {
+        readme = readFileSync(resolve(addOnsBase, dir, 'README.md'), 'utf-8')
+      }
+
+      let smallLogo: string | undefined
+      if (existsSync(resolve(addOnsBase, dir, 'small-logo.svg'))) {
+        smallLogo = readFileSync(
+          resolve(addOnsBase, dir, 'small-logo.svg'),
+          'utf-8',
+        )
+      }
+
+      const absoluteFiles: Record<string, string> = {}
+      const assetsDir = resolve(addOnsBase, dir, 'assets')
+      if (existsSync(assetsDir)) {
+        findFilesRecursively(assetsDir, absoluteFiles)
+      }
+      const files: Record<string, string> = {}
+      for (const file of Object.keys(absoluteFiles)) {
+        files[toCleanPath(file, assetsDir)] = readFileHelper(file)
+      }
+
+      const getFiles = () => {
+        return Promise.resolve(Object.keys(files))
+      }
+      const getFileContents = (path: string) => {
+        return Promise.resolve(files[path])
+      }
+
+      addOns.push({
+        ...info,
+        id: dir,
+        packageAdditions,
+        packageTemplate,
+        readme,
+        files,
+        smallLogo,
+        getFiles,
+        getFileContents,
+        getDeletedFiles: () => Promise.resolve(info.deletedFiles ?? []),
+      })
+    }
+  }
+
+  return addOns
+}
+
+export function __testRegisterFramework(framework: Framework) {
+  frameworks.push(framework)
+}
+
+export function __testClearFrameworks() {
+  frameworks.length = 0
+}
+
+export function registerFramework(framework: FrameworkDefinition) {
+  const { addOns, base, ...rest } = framework
+
+  const frameworkWithBundler: Framework = {
+    ...rest,
+    getFiles: () => Promise.resolve(Object.keys(base)),
+    getFileContents: (path: string) => {
+      return Promise.resolve(base[path])
+    },
+    getDeletedFiles: () => {
+      return Promise.resolve([])
+    },
+    getAddOns: () => addOns,
+  }
+
+  frameworks.push(frameworkWithBundler)
+}
+
+export function getFrameworkById(id: string) {
+  return frameworks.find((framework) => framework.id === id)
+}
+
+export function getFrameworkByName(name: string) {
+  return frameworks.find(
+    (framework) => framework.name.toLowerCase() === name.toLowerCase(),
+  )
+}
+
+export function getFrameworks() {
+  return frameworks
+}

package/src/index.ts

@@ -0,0 +1,115 @@
+// Auto-register frameworks on import
+import { register as registerReact } from './frameworks/react/index.js'
+import { register as registerSolid } from './frameworks/solid/index.js'
+
+registerReact()
+registerSolid()
+
+export { createApp } from './create-app.js'
+export { computeAttribution } from './attribution.js'
+export { addToApp } from './add-to-app.js'
+
+export {
+  finalizeAddOns,
+  getAllAddOns,
+  populateAddOnOptionsDefaults,
+} from './add-ons.js'
+
+export { loadRemoteAddOn } from './custom-add-ons/add-on.js'
+export { loadStarter } from './custom-add-ons/starter.js'
+
+export {
+  createMemoryEnvironment,
+  createDefaultEnvironment,
+} from './environment.js'
+
+export { CONFIG_FILE } from './constants.js'
+
+export {
+  DEFAULT_PACKAGE_MANAGER,
+  SUPPORTED_PACKAGE_MANAGERS,
+  getPackageManager,
+} from './package-manager.js'
+
+export {
+  registerFramework,
+  getFrameworkById,
+  getFrameworkByName,
+  getFrameworks,
+  scanProjectDirectory,
+  scanAddOnDirectories,
+  __testRegisterFramework,
+  __testClearFrameworks,
+} from './frameworks.js'
+
+export {
+  writeConfigFileToEnvironment,
+  readConfigFileFromEnvironment,
+  readConfigFile,
+} from './config-file.js'
+
+export {
+  cleanUpFiles,
+  cleanUpFileArray,
+  readFileHelper,
+  getBinaryFile,
+  recursivelyGatherFiles,
+  relativePath,
+  toCleanPath,
+} from './file-helpers.js'
+
+export { formatCommand, handleSpecialURL } from './utils.js'
+
+export { initStarter, compileStarter } from './custom-add-ons/starter.js'
+export { initAddOn, compileAddOn } from './custom-add-ons/add-on.js'
+export {
+  createAppOptionsFromPersisted,
+  createSerializedOptionsFromPersisted,
+} from './custom-add-ons/shared.js'
+
+export { createSerializedOptions } from './options.js'
+
+export {
+  getRawRegistry,
+  getRegistry,
+  getRegistryAddOns,
+  getRegistryStarters,
+} from './registry.js'
+
+export {
+  StarterCompiledSchema,
+  StatusEvent,
+  StatusStepType,
+  StopEvent,
+  AddOnCompiledSchema,
+  AddOnInfoSchema,
+  IntegrationSchema,
+} from './types.js'
+
+export type {
+  AddOn,
+  AddOnOption,
+  AddOnOptions,
+  AddOnSelectOption,
+  AddOnSelection,
+  Environment,
+  FileBundleHandler,
+  Framework,
+  FrameworkDefinition,
+  Options,
+  SerializedOptions,
+  Starter,
+  StarterCompiled,
+  LineAttribution,
+  FileProvenance,
+  AttributedFile,
+  DependencyAttribution,
+} from './types.js'
+export type { AttributionInput, AttributionOutput } from './attribution.js'
+export type { MemoryEnvironmentOutput } from './environment.js'
+export type { PersistedOptions } from './config-file.js'
+export type { PackageManager } from './package-manager.js'
+
+// Framework definition initializers (for dev-watch feature)
+export { createFrameworkDefinition as createReactFrameworkDefinition } from './frameworks/react/index.js'
+export { createFrameworkDefinition as createSolidFrameworkDefinition } from './frameworks/solid/index.js'

package/src/integrations/git.ts

@@ -0,0 +1,7 @@
+import { resolve } from 'node:path'
+
+import type { Environment } from '../types.js'
+
+export async function setupGit(environment: Environment, targetDir: string) {
+  await environment.execute('git', ['init'], resolve(targetDir))
+}

package/src/integrations/shadcn.ts

@@ -0,0 +1,54 @@
+import { resolve } from 'node:path'
+import { packageManagerExecute } from '../package-manager.js'
+import type { Environment, Options } from '../types.js'
+
+export async function installShadcnComponents(
+  environment: Environment,
+  targetDir: string,
+  options: Options,
+) {
+  const s = environment.spinner()
+
+  if (options.chosenAddOns.find((a) => a.id === 'shadcn')) {
+    const shadcnComponents = new Set<string>()
+    for (const addOn of options.chosenAddOns) {
+      if (addOn.shadcnComponents) {
+        for (const component of addOn.shadcnComponents) {
+          shadcnComponents.add(component)
+        }
+      }
+    }
+    if (options.starter) {
+      if (options.starter.shadcnComponents) {
+        for (const component of options.starter.shadcnComponents) {
+          shadcnComponents.add(component)
+        }
+      }
+    }
+
+    if (shadcnComponents.size > 0) {
+      s.start(
+        `Installing shadcn components (${Array.from(shadcnComponents).join(', ')})...`,
+      )
+      environment.startStep({
+        id: 'install-shadcn-components',
+        type: 'command',
+        message: `Installing shadcn components (${Array.from(shadcnComponents).join(', ')})...`,
+      })
+
+      await packageManagerExecute(
+        environment,
+        resolve(targetDir),
+        options.packageManager,
+        'shadcn@latest',
+        ['add', '--silent', '--yes', ...Array.from(shadcnComponents)],
+      )
+
+      environment.finishStep(
+        'install-shadcn-components',
+        'Shadcn components installed',
+      )
+      s.stop(`Installed additional shadcn components`)
+    }
+  }
+}

package/src/options.ts

@@ -0,0 +1,11 @@
+import type { Options, SerializedOptions } from './types'
+
+export const createSerializedOptions = (options: Options) => {
+  const serializedOptions: SerializedOptions = {
+    ...options,
+    chosenAddOns: options.chosenAddOns.map((addOn) => addOn.id),
+    framework: options.framework.id,
+    starter: options.starter?.id,
+  }
+  return serializedOptions
+}

package/src/package-json.ts

@@ -0,0 +1,102 @@
+import { render } from 'ejs'
+import { sortObject } from './utils.js'
+
+import type { Options } from './types.js'
+
+export function mergePackageJSON(
+  packageJSON: Record<string, any>,
+  overlayPackageJSON?: Record<string, any>,
+) {
+  return {
+    ...packageJSON,
+    ...(overlayPackageJSON || {}),
+    dependencies: {
+      ...packageJSON.dependencies,
+      ...(overlayPackageJSON?.dependencies || {}),
+    },
+    devDependencies: {
+      ...packageJSON.devDependencies,
+      ...(overlayPackageJSON?.devDependencies || {}),
+    },
+    scripts: {
+      ...packageJSON.scripts,
+      ...(overlayPackageJSON?.scripts || {}),
+    },
+  }
+}
+
+export function createPackageJSON(options: Options) {
+  let packageJSON = {
+    ...JSON.parse(JSON.stringify(options.framework.basePackageJSON)),
+    name: options.projectName,
+  }
+
+  const additions: Array<Record<string, any> | undefined> = [
+    options.typescript
+      ? options.framework.optionalPackages.typescript
+      : undefined,
+    options.tailwind
+      ? options.framework.optionalPackages.tailwindcss
+      : undefined,
+    options.mode ? options.framework.optionalPackages[options.mode] : undefined,
+  ]
+  for (const addition of additions.filter(Boolean)) {
+    packageJSON = mergePackageJSON(packageJSON, addition)
+  }
+
+  for (const addOn of options.chosenAddOns) {
+    let addOnPackageJSON = addOn.packageAdditions
+
+    // Process EJS template if present
+    if (addOn.packageTemplate) {
+      const templateValues = {
+        packageManager: options.packageManager,
+        projectName: options.projectName,
+        typescript: options.typescript,
+        tailwind: options.tailwind,
+        js: options.typescript ? 'ts' : 'js',
+        jsx: options.typescript ? 'tsx' : 'jsx',
+        fileRouter: options.mode === 'file-router',
+        codeRouter: options.mode === 'code-router',
+        addOnEnabled: options.chosenAddOns.reduce<Record<string, boolean>>(
+          (acc, addon) => {
+            acc[addon.id] = true
+            return acc
+          },
+          {},
+        ),
+        addOnOption: options.addOnOptions,
+        addOns: options.chosenAddOns,
+      }
+
+      try {
+        const renderedTemplate = render(addOn.packageTemplate, templateValues)
+        addOnPackageJSON = JSON.parse(renderedTemplate)
+      } catch (error) {
+        console.error(
+          `Error processing package.json.ejs for add-on ${addOn.id}:`,
+          error,
+        )
+        // Fall back to packageAdditions if template processing fails
+      }
+    }
+
+    packageJSON = mergePackageJSON(packageJSON, addOnPackageJSON)
+  }
+
+  if (options.starter) {
+    packageJSON = mergePackageJSON(
+      packageJSON,
+      options.starter.packageAdditions,
+    )
+  }
+
+  packageJSON.dependencies = sortObject(
+    (packageJSON.dependencies ?? {}) as Record<string, string>,
+  )
+  packageJSON.devDependencies = sortObject(
+    (packageJSON.devDependencies ?? {}) as Record<string, string>,
+  )
+
+  return packageJSON
+}

package/src/package-manager.ts

@@ -0,0 +1,117 @@
+import type { Environment } from './types.js'
+
+export const SUPPORTED_PACKAGE_MANAGERS = [
+  'npm',
+  'yarn',
+  'pnpm',
+  'bun',
+  'deno',
+] as const
+export type PackageManager = (typeof SUPPORTED_PACKAGE_MANAGERS)[number]
+export const DEFAULT_PACKAGE_MANAGER: PackageManager = 'npm'
+
+export function getPackageManager(): PackageManager | undefined {
+  const userAgent = process.env.npm_config_user_agent
+
+  if (userAgent === undefined) {
+    return DEFAULT_PACKAGE_MANAGER
+  }
+
+  const packageManager = SUPPORTED_PACKAGE_MANAGERS.find((manager) =>
+    userAgent.startsWith(manager),
+  )
+
+  return packageManager
+}
+
+export function getPackageManagerScriptCommand(
+  packagerManager: PackageManager,
+  args: Array<string> = [],
+) {
+  switch (packagerManager) {
+    case 'yarn':
+      return { command: 'yarn', args: ['run', ...args] }
+    case 'pnpm':
+      return { command: 'pnpm', args: [...args] }
+    case 'bun':
+      return { command: 'bun', args: ['--bun', 'run', ...args] }
+    case 'deno':
+      return { command: 'deno', args: ['task', ...args] }
+    default:
+      return { command: 'npm', args: ['run', ...args] }
+  }
+}
+
+export function getPackageManagerExecuteCommand(
+  packagerManager: PackageManager,
+  pkg: string,
+  args: Array<string> = [],
+) {
+  switch (packagerManager) {
+    case 'yarn':
+      return { command: 'yarn', args: ['dlx', pkg, ...args] }
+    case 'pnpm':
+      return { command: 'pnpm', args: ['dlx', pkg, ...args] }
+    case 'bun':
+      return { command: 'bunx', args: ['--bun', pkg, ...args] }
+    case 'deno':
+      return { command: 'deno', args: ['run', `npm:${pkg}`, ...args] }
+    default:
+      return { command: 'npx', args: ['-y', pkg, ...args] }
+  }
+}
+
+export function getPackageManagerInstallCommand(
+  packagerManager: PackageManager,
+  pkg?: string,
+  isDev: boolean = false,
+) {
+  if (pkg) {
+    switch (packagerManager) {
+      case 'yarn':
+      case 'pnpm':
+        return {
+          command: packagerManager,
+          args: ['add', pkg, isDev ? '--dev' : ''],
+        }
+      default:
+        return {
+          command: packagerManager,
+          args: ['install', pkg, isDev ? '-D' : ''],
+        }
+    }
+  } else {
+    return {
+      command: packagerManager,
+      args: ['install'],
+    }
+  }
+}
+
+export function packageManagerInstall(
+  environment: Environment,
+  cwd: string,
+  packagerManager: PackageManager,
+  pkg?: string,
+) {
+  const { command, args: commandArgs } = getPackageManagerInstallCommand(
+    packagerManager,
+    pkg,
+  )
+  return environment.execute(command, commandArgs, cwd)
+}
+
+export function packageManagerExecute(
+  environment: Environment,
+  cwd: string,
+  packagerManager: PackageManager,
+  pkg: string,
+  args: Array<string>,
+) {
+  const { command, args: commandArgs } = getPackageManagerExecuteCommand(
+    packagerManager,
+    pkg,
+    args,
+  )
+  return environment.execute(command, commandArgs, cwd)
+}