astro/packages/create-astro/src/index.ts

import fs from 'fs';
import path from 'path';
import { bold, cyan, gray, green, red } from 'kleur/colors';
import fetch from 'node-fetch';
import prompts from 'prompts';
import degit from 'degit';
import yargs from 'yargs-parser';
import { FRAMEWORKS, COUNTER_COMPONENTS } from './frameworks.js';
import { TEMPLATES } from './templates.js';
import { createConfig } from './config.js';
const args = yargs(process.argv);
prompts.override(args);

export function mkdirp(dir: string) {
  try {
    fs.mkdirSync(dir, { recursive: true });
  } catch (e) {
    if (e.code === 'EEXIST') return;
    throw e;
  }
}

const { version } = JSON.parse(fs.readFileSync(new URL('../package.json', import.meta.url), 'utf-8'));

const POSTPROCESS_FILES = ['package.json', 'astro.config.mjs', 'CHANGELOG.md']; // some files need processing after copying.

export async function main() {
  console.log('\n' + bold('Welcome to Astro!') + gray(` (create-astro v${version})`));
  console.log(`If you encounter a problem, visit ${cyan('https://github.com/snowpackjs/astro/issues')} to search or file a new issue.\n`);

  console.log(green(`>`) + gray(` Prepare for liftoff.`));
  console.log(green(`>`) + gray(` Gathering mission details...`));

  const cwd = args['_'][2] || '.';
  if (fs.existsSync(cwd)) {
    if (fs.readdirSync(cwd).length > 0) {
      const response = await prompts({
        type: 'confirm',
        name: 'forceOverwrite',
        message: 'Directory not empty. Continue?',
        initial: false,
      });
      if (!response.forceOverwrite) {
        process.exit(1);
      }

      await fs.promises.rm(cwd, { recursive: true });
      mkdirp(cwd);
    }
  } else {
    mkdirp(cwd);
  }

  const options = /** @type {import('./types/internal').Options} */ await prompts([
    {
      type: 'select',
      name: 'template',
      message: 'Which app template would you like to use?',
      choices: TEMPLATES,
    },
  ]);

  if (!options.template) {
    process.exit(1);
  }

  const hash = args.commit ? `#${args.commit}` : '';

  const templateTarget = options.template.includes('/') ?
    options.template :
    `snowpackjs/astro/examples/${options.template}`;

  const emitter = degit(`${templateTarget}${hash}`, {
    cache: false,
    force: true,
    verbose: false,
  });

  const selectedTemplate = TEMPLATES.find(template => template.value === options.template);
  let renderers: string[] = [];
  
  if (selectedTemplate?.renderers === true) {
    const result = /** @type {import('./types/internal').Options} */ await prompts([
      {
        type: 'multiselect',
        name: 'renderers',
        message: 'Which frameworks would you like to use?',
        choices: FRAMEWORKS,
      },
    ]);
    renderers = result.renderers;
  } else if (selectedTemplate?.renderers && Array.isArray(selectedTemplate.renderers)) {
    renderers = selectedTemplate.renderers;
    const titles = renderers.map(renderer => FRAMEWORKS.find(item => item.value === renderer)?.title).join(', ');
    console.log(green(`✔`) + bold(` Using template's default renderers`) + gray(' › ') + titles);
  }

  // Copy
  try {
    // emitter.on('info', info => { console.log(info.message) });
    console.log(green(`>`) + gray(` Copying project files...`));
    await emitter.clone(cwd);
  } catch (err) {
    // degit is compiled, so the stacktrace is pretty noisy. Just report the message.
    console.error(red(err.message));
    process.exit(1);
  }

  // Post-process in parallel
  await Promise.all(POSTPROCESS_FILES.map(async (file) => {
    const fileLoc = path.resolve(path.join(cwd, file));

    switch (file) {
      case 'CHANGELOG.md': {
        if (fs.existsSync(fileLoc)) {
          await fs.promises.rm(fileLoc);
        }
        break;
      }
      case 'astro.config.mjs': {
        if (selectedTemplate?.renderers !== true) {
          break;
        }
        await fs.promises.writeFile(fileLoc, createConfig({ renderers }));
        break;
      }
      case 'package.json': {
        const packageJSON = JSON.parse(await fs.promises.readFile(fileLoc, 'utf8'));
        delete packageJSON.snowpack; // delete snowpack config only needed in monorepo (can mess up projects)
        // Fetch latest versions of selected renderers
        const rendererEntries = await Promise.all(['astro', ...renderers].map((renderer: string) => fetch(`https://registry.npmjs.org/${renderer}/latest`).then((res: any) => res.json()).then((res: any) => [renderer, `^${res['version']}`]))) as any;
        packageJSON.devDependencies = { ...packageJSON.devDependencies ?? {}, ...Object.fromEntries(rendererEntries) }
        await fs.promises.writeFile(fileLoc, JSON.stringify(packageJSON, undefined, 2));
        break;
      }
    }
  }));

  // Inject framework components into starter template
  if (selectedTemplate?.value === 'starter') {
    let importStatements: string[] = [];
    let components: string[] = [];
    await Promise.all(renderers.map(async renderer => {
      const component = COUNTER_COMPONENTS[renderer as keyof typeof COUNTER_COMPONENTS];
      const componentName = path.basename(component.filename, path.extname(component.filename));
      const absFileLoc = path.resolve(cwd, component.filename);
      importStatements.push(`import ${componentName} from '${component.filename.replace(/^src/, '..')}';`);
      components.push(`<${componentName}:visible />`);
      await fs.promises.writeFile(absFileLoc, component.content);
    }));

    const pageFileLoc = path.resolve(path.join(cwd, 'src', 'pages', 'index.astro'));
    const content = (await fs.promises.readFile(pageFileLoc)).toString();
    const lines = content.split('\n');
    const indent = '        ';
    const doc = `\n<!-- 
   - Use imported Framework Components directly in your markup!
   - 
   - Note: by default, components are NOT interactive on the client.
   - The \`:visible\` directive tells Astro to make it interactive.
   -
   - See https://github.com/snowpackjs/astro/blob/main/docs/core-concepts/component-hydration.md
   -->
`;
    lines.splice(41, 0, importStatements.length > 0 ? doc.split('\n').map(ln => `${indent}${ln}`).join('\n') : '', ...components.map(ln => `${indent}${ln}`));
    lines.splice(3, 0, importStatements.length > 0 ? `// Framework Component Imports` : '', ...importStatements);
    await fs.promises.writeFile(pageFileLoc, lines.join('\n'))
  }

  console.log(bold(green('✔') + ' Done!'));

  console.log('\nNext steps:');
  let i = 1;

  const relative = path.relative(process.cwd(), cwd);
  if (relative !== '') {
    console.log(`  ${i++}: ${bold(cyan(`cd ${relative}`))}`);
  }

  console.log(`  ${i++}: ${bold(cyan('npm install'))} (or pnpm install, yarn, etc)`);
  console.log(`  ${i++}: ${bold(cyan('git init && git add -A && git commit -m "Initial commit"'))} (optional step)`);
  console.log(`  ${i++}: ${bold(cyan('npm start'))} (or pnpm, yarn, etc)`);

  console.log(`\nTo close the dev server, hit ${bold(cyan('Ctrl-C'))}`);
  console.log('\nStuck? Visit us at https://astro.build/chat\n');
}