create-astro 0.9.0 → 0.11.0

package/dist/index.js

@@ -1,31 +1,13 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
 import fs from "fs";
 import path from "path";
 import { bold, cyan, gray, green, red, yellow } from "kleur/colors";
-import fetch from "node-fetch";
 import prompts from "prompts";
 import degit from "degit";
 import yargs from "yargs-parser";
 import ora from "ora";
-import { FRAMEWORKS, COUNTER_COMPONENTS } from "./frameworks.js";
 import { TEMPLATES } from "./templates.js";
-import { createConfig } from "./config.js";
 import { logger, defaultLogLevel } from "./logger.js";
+import { execa, execaCommand } from "execa";
 const cleanArgv = process.argv.filter((arg) => arg !== "--");
 const args = yargs(cleanArgv);
 prompts.override(args);
@@ -42,13 +24,12 @@ function isEmpty(dirPath) {
   return !fs.existsSync(dirPath) || fs.readdirSync(dirPath).length === 0;
 }
 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"];
+const FILES_TO_REMOVE = [".stackblitzrc", "sandbox.config.json", "CHANGELOG.md"];
 async function main() {
+  const pkgManager = pkgManagerFromUserAgent(process.env.npm_config_user_agent);
   logger.debug("Verbose logging turned on");
   console.log(`
 ${bold("Welcome to Astro!")} ${gray(`(create-astro v${version})`)}`);
-  console.log(`If you encounter a problem, visit ${cyan("https://github.com/withastro/astro/issues")} to search or file a new issue.
-`);
   let spinner = ora({ color: "green", text: "Prepare for liftoff." });
   spinner.succeed();
   let cwd = args["_"][2];
@@ -60,7 +41,7 @@ ${bold("Welcome to Astro!")} ${gray(`(create-astro v${version})`)}`);
     acknowledgeProjectDir.succeed();
   }
   if (!cwd || !isEmpty(cwd)) {
-    const notEmptyMsg = (dirPath) => `"${bold(dirPath)}" is not empty. Please clear contents or choose a different path.`;
+    const notEmptyMsg = (dirPath) => `"${bold(dirPath)}" is not empty!`;
     if (!isEmpty(cwd)) {
       let rejectProjectDir = ora({ color: "red", text: notEmptyMsg(cwd) });
       rejectProjectDir.fail();
@@ -94,7 +75,7 @@ ${bold("Welcome to Astro!")} ${gray(`(create-astro v${version})`)}`);
     process.exit(1);
   }
   const hash = args.commit ? `#${args.commit}` : "";
-  const templateTarget = options.template.includes("/") ? options.template : `withastro/astro/examples/${options.template}#latest`;
+  const templateTarget = `withastro/astro/examples/${options.template}#latest`;
   const emitter = degit(`${templateTarget}${hash}`, {
     cache: false,
     force: true,
@@ -105,111 +86,113 @@ ${bold("Welcome to Astro!")} ${gray(`(create-astro v${version})`)}`);
     force: true,
     verbose: defaultLogLevel === "debug" ? true : false
   });
-  const selectedTemplate = TEMPLATES.find((template) => template.value === options.template);
-  let integrations = [];
-  if ((selectedTemplate == null ? void 0 : selectedTemplate.integrations) === true) {
-    const result = await prompts([
-      {
-        type: "multiselect",
-        name: "integrations",
-        message: "Which frameworks would you like to use?",
-        choices: FRAMEWORKS
-      }
-    ]);
-    integrations = result.integrations;
-  }
   spinner = ora({ color: "green", text: "Copying project files..." }).start();
-  try {
-    emitter.on("info", (info) => {
-      logger.debug(info.message);
-    });
-    await emitter.clone(cwd);
-  } catch (err) {
-    logger.debug(err);
-    console.error(red(err.message));
-    if (err.message === "zlib: unexpected end of file") {
-      console.log(yellow("This seems to be a cache related problem. Remove the folder '~/.degit/github/withastro' to fix this error."));
-      console.log(yellow("For more information check out this issue: https://github.com/withastro/astro/issues/655"));
-    }
-    if (err.code === "MISSING_REF") {
-      console.log(yellow("This seems to be an issue with degit. Please check if you have 'git' installed on your system, and install it if you don't have (https://git-scm.com)."));
-      console.log(yellow("If you do have 'git' installed, please run this command with the --verbose flag and file a new issue with the command output here: https://github.com/withastro/astro/issues"));
-    }
-    spinner.fail();
-    process.exit(1);
-  }
-  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.unlink(fileLoc);
-        }
-        break;
+  if (!args.dryrun) {
+    try {
+      emitter.on("info", (info) => {
+        logger.debug(info.message);
+      });
+      await emitter.clone(cwd);
+    } catch (err) {
+      logger.debug(err);
+      console.error(red(err.message));
+      if (err.message === "zlib: unexpected end of file") {
+        console.log(yellow("This seems to be a cache related problem. Remove the folder '~/.degit/github/withastro' to fix this error."));
+        console.log(yellow("For more information check out this issue: https://github.com/withastro/astro/issues/655"));
       }
-      case "astro.config.mjs": {
-        if ((selectedTemplate == null ? void 0 : selectedTemplate.integrations) !== true) {
-          break;
-        }
-        await fs.promises.writeFile(fileLoc, createConfig({ integrations }));
-        break;
-      }
-      case "package.json": {
-        const packageJSON = JSON.parse(await fs.promises.readFile(fileLoc, "utf8"));
-        delete packageJSON.snowpack;
-        const integrationEntries = (await Promise.all(integrations.map((integration) => fetch(`https://registry.npmjs.org/${integration.packageName}/latest`).then((res) => res.json()).then((res) => {
-          let dependencies = [[res["name"], `^${res["version"]}`]];
-          if (res["peerDependencies"]) {
-            for (const peer in res["peerDependencies"]) {
-              dependencies.push([peer, res["peerDependencies"][peer]]);
-            }
-          }
-          return dependencies;
-        })))).flat(1);
-        packageJSON.devDependencies = __spreadValues(__spreadValues({}, packageJSON.devDependencies ?? {}), Object.fromEntries(integrationEntries));
-        packageJSON.devDependencies = Object.fromEntries(Object.entries(packageJSON.devDependencies).sort((a, b) => a[0].localeCompare(b[0])));
-        await fs.promises.writeFile(fileLoc, JSON.stringify(packageJSON, void 0, 2));
-        break;
+      if (err.code === "MISSING_REF") {
+        console.log(yellow("This seems to be an issue with degit. Please check if you have 'git' installed on your system, and install it if you don't have (https://git-scm.com)."));
+        console.log(yellow("If you do have 'git' installed, please run this command with the --verbose flag and file a new issue with the command output here: https://github.com/withastro/astro/issues"));
       }
+      spinner.fail();
+      process.exit(1);
     }
-  }));
-  if ((selectedTemplate == null ? void 0 : selectedTemplate.value) === "starter") {
-    let importStatements = [];
-    let components = [];
-    await Promise.all(integrations.map(async (integration) => {
-      const component = COUNTER_COMPONENTS[integration.id];
-      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} client:visible />`);
-      await fs.promises.writeFile(absFileLoc, component.content);
+    await Promise.all(FILES_TO_REMOVE.map(async (file) => {
+      const fileLoc = path.resolve(path.join(cwd, file));
+      if (fs.existsSync(fileLoc)) {
+        return fs.promises.rm(fileLoc, {});
+      }
     }));
-    const pageFileLoc = path.resolve(path.join(cwd, "src", "pages", "index.astro"));
-    const content = (await fs.promises.readFile(pageFileLoc)).toString();
-    const newContent = content.replace(/^(\s*)\/\* ASTRO\:COMPONENT_IMPORTS \*\//gm, (_, indent) => {
-      return indent + importStatements.join("\n");
-    }).replace(/^(\s*)<!-- ASTRO:COMPONENT_MARKUP -->/gm, (_, indent) => {
-      return components.map((ln) => indent + ln).join("\n");
-    });
-    await fs.promises.writeFile(pageFileLoc, newContent);
   }
   spinner.succeed();
   console.log(bold(green("\u2714") + " Done!"));
+  const installResponse = await prompts({
+    type: "confirm",
+    name: "install",
+    message: `Would you like us to run "${pkgManager} install?"`,
+    initial: true
+  });
+  if (!installResponse) {
+    process.exit(0);
+  }
+  if (installResponse.install) {
+    const installExec = execa(pkgManager, ["install"], { cwd });
+    const installingPackagesMsg = `Installing packages${emojiWithFallback(" \u{1F4E6}", "...")}`;
+    spinner = ora({ color: "green", text: installingPackagesMsg }).start();
+    if (!args.dryrun) {
+      await new Promise((resolve, reject) => {
+        var _a;
+        (_a = installExec.stdout) == null ? void 0 : _a.on("data", function(data) {
+          spinner.text = `${installingPackagesMsg}
+${bold(`[${pkgManager}]`)} ${data}`;
+        });
+        installExec.on("error", (error) => reject(error));
+        installExec.on("close", () => resolve());
+      });
+    }
+    spinner.succeed();
+  }
+  const astroAddCommand = installResponse.install ? "astro add --yes" : `${pkgManagerExecCommand(pkgManager)} astro@latest add --yes`;
+  const astroAddResponse = await prompts({
+    type: "confirm",
+    name: "astroAdd",
+    message: `Run "${astroAddCommand}?" This lets you optionally add component frameworks (ex. React), CSS frameworks (ex. Tailwind), and more.`,
+    initial: true
+  });
+  if (!astroAddResponse) {
+    process.exit(0);
+  }
+  if (!astroAddResponse.astroAdd) {
+    ora().info(`No problem. You can always run "${pkgManagerExecCommand(pkgManager)} astro add" later!`);
+  }
+  if (astroAddResponse.astroAdd && !args.dryrun) {
+    await execaCommand(astroAddCommand, astroAddCommand === "astro add --yes" ? { cwd, stdio: "inherit", localDir: cwd, preferLocal: true } : { cwd, stdio: "inherit" });
+  }
   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)`);
+  if (!installResponse.install) {
+    console.log(`  ${i++}: ${bold(cyan(`${pkgManager} install`))}`);
+  }
   console.log(`  ${i++}: ${bold(cyan('git init && git add -A && git commit -m "Initial commit"'))} (optional step)`);
-  console.log(`  ${i++}: ${bold(cyan("npm run dev"))} (or pnpm, yarn, etc)`);
+  const runCommand = pkgManager === "npm" ? "npm run dev" : `${pkgManager} dev`;
+  console.log(`  ${i++}: ${bold(cyan(runCommand))}`);
   console.log(`
 To close the dev server, hit ${bold(cyan("Ctrl-C"))}`);
   console.log(`
 Stuck? Visit us at ${cyan("https://astro.build/chat")}
 `);
 }
+function emojiWithFallback(char, fallback) {
+  return process.platform !== "win32" ? char : fallback;
+}
+function pkgManagerFromUserAgent(userAgent) {
+  if (!userAgent)
+    return "npm";
+  const pkgSpec = userAgent.split(" ")[0];
+  const pkgSpecArr = pkgSpec.split("/");
+  return pkgSpecArr[0];
+}
+function pkgManagerExecCommand(pkgManager) {
+  if (pkgManager === "pnpm") {
+    return "pnpx";
+  } else {
+    return "npx";
+  }
+}
 export {
   main,
   mkdirp

package/dist/templates.js

@@ -1,8 +1,7 @@
 const TEMPLATES = [
   {
-    title: "Starter Kit (Generic)",
-    value: "starter",
-    integrations: true
+    title: "Just the basics",
+    value: "basics"
   },
   {
     title: "Blog",
@@ -17,7 +16,7 @@ const TEMPLATES = [
     value: "portfolio"
   },
   {
-    title: "Minimal",
+    title: "Completely empty",
     value: "minimal"
   }
 ];

package/dist/types/templates.d.ts

@@ -1,9 +1,4 @@
-export declare const TEMPLATES: ({
+export declare const TEMPLATES: {
     title: string;
     value: string;
-    integrations: boolean;
-} | {
-    title: string;
-    value: string;
-    integrations?: undefined;
-})[];
+}[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-astro",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "type": "module",
   "author": "withastro",
   "license": "MIT",
@@ -31,15 +31,15 @@
     "@types/degit": "^2.8.3",
     "@types/prompts": "^2.0.14",
     "degit": "^2.8.4",
+    "execa": "^6.1.0",
     "kleur": "^4.1.4",
-    "node-fetch": "^3.2.3",
     "ora": "^6.1.0",
     "prompts": "^2.4.2",
     "yargs-parser": "^21.0.1"
   },
   "devDependencies": {
     "@types/chai": "^4.3.1",
-    "@types/mocha": "^9.1.0",
+    "@types/mocha": "^9.1.1",
     "@types/yargs-parser": "^21.0.0",
     "astro-scripts": "workspace:*",
     "chai": "^4.3.6",

package/dist/config.js

@@ -1,23 +0,0 @@
-const createConfig = ({ integrations }) => {
-  if (integrations.length === 0) {
-    return `import { defineConfig } from 'astro/config';
-// https://astro.build/config
-export default defineConfig({});
-`;
-  }
-  const rendererImports = integrations.map((r) => `  import ${r.id} from '${r.packageName}';`);
-  const rendererIntegrations = integrations.map((r) => `    ${r.id}(),`);
-  return [
-    `import { defineConfig } from 'astro/config';`,
-    ...rendererImports,
-    `// https://astro.build/config`,
-    `export default defineConfig({`,
-    `  integrations: [`,
-    ...rendererIntegrations,
-    `  ]`,
-    `});`
-  ].join("\n");
-};
-export {
-  createConfig
-};

package/dist/frameworks.js

@@ -1,134 +0,0 @@
-const COUNTER_COMPONENTS = {
-  preact: {
-    filename: `src/components/PreactCounter.jsx`,
-    content: `import { useState } from 'preact/hooks';
-
-export default function PreactCounter() {
-  const [count, setCount] = useState(0);
-  const add = () => setCount((i) => i + 1);
-  const subtract = () => setCount((i) => i - 1);
-
-  return (
-    <div id="preact" class="counter">
-      <button onClick={subtract}>-</button>
-      <pre>{count}</pre>
-      <button onClick={add}>+</button>
-    </div>
-  );
-}
-`
-  },
-  react: {
-    filename: `src/components/ReactCounter.jsx`,
-    content: `import { useState } from 'react';
-
-export default function ReactCounter() {
-  const [count, setCount] = useState(0);
-  const add = () => setCount((i) => i + 1);
-  const subtract = () => setCount((i) => i - 1);
-
-  return (
-    <div id="react" className="counter">
-      <button onClick={subtract}>-</button>
-      <pre>{count}</pre>
-      <button onClick={add}>+</button>
-    </div>
-  );
-}
-`
-  },
-  solid: {
-    filename: `src/components/SolidCounter.jsx`,
-    content: `import { createSignal } from "solid-js";
-
-export default function SolidCounter() {
-  const [count, setCount] = createSignal(0);
-  const add = () => setCount(count() + 1);
-  const subtract = () => setCount(count() - 1);
-
-  return (
-    <div id="solid" class="counter">
-      <button onClick={subtract}>-</button>
-      <pre>{count()}</pre>
-      <button onClick={add}>+</button>
-    </div>
-  );
-}
-`
-  },
-  svelte: {
-    filename: `src/components/SvelteCounter.svelte`,
-    content: `<script>
-  let count = 0;
-
-  function add() {
-    count += 1;
-  }
-
-  function subtract() {
-    count -= 1;
-  }
-<\/script>
-
-<div id="svelte" class="counter">
-  <button on:click={subtract}>-</button>
-  <pre>{ count }</pre>
-  <button on:click={add}>+</button>
-</div>
-`
-  },
-  vue: {
-    filename: `src/components/VueCounter.vue`,
-    content: `<template>
-  <div id="vue" class="counter">
-      <button @click="subtract()">-</button>
-      <pre>{{ count }}</pre>
-      <button @click="add()">+</button>
-  </div>
-</template>
-
-<script>
-import { ref } from 'vue';
-export default {
-  setup() {
-    const count = ref(0)
-    const add = () => count.value = count.value + 1;
-    const subtract = () => count.value = count.value - 1;
-
-    return {
-      count,
-      add,
-      subtract
-    }
-  }
-}
-<\/script>
-`
-  }
-};
-const FRAMEWORKS = [
-  {
-    title: "Preact",
-    value: { id: "preact", packageName: "@astrojs/preact" }
-  },
-  {
-    title: "React",
-    value: { id: "react", packageName: "@astrojs/react" }
-  },
-  {
-    title: "Solid.js",
-    value: { id: "solid", packageName: "@astrojs/solid-js" }
-  },
-  {
-    title: "Svelte",
-    value: { id: "svelte", packageName: "@astrojs/svelte" }
-  },
-  {
-    title: "Vue",
-    value: { id: "vue", packageName: "@astrojs/vue" }
-  }
-];
-export {
-  COUNTER_COMPONENTS,
-  FRAMEWORKS
-};

package/dist/types/config.d.ts

@@ -1,4 +0,0 @@
-import type { Integration } from './frameworks';
-export declare const createConfig: ({ integrations }: {
-    integrations: Integration[];
-}) => string;

package/dist/types/frameworks.d.ts

@@ -1,30 +0,0 @@
-export declare const COUNTER_COMPONENTS: {
-    preact: {
-        filename: string;
-        content: string;
-    };
-    react: {
-        filename: string;
-        content: string;
-    };
-    solid: {
-        filename: string;
-        content: string;
-    };
-    svelte: {
-        filename: string;
-        content: string;
-    };
-    vue: {
-        filename: string;
-        content: string;
-    };
-};
-export interface Integration {
-    id: string;
-    packageName: string;
-}
-export declare const FRAMEWORKS: {
-    title: string;
-    value: Integration;
-}[];