create-astro 1.1.0 → 1.2.1

package/README.md

@@ -42,6 +42,7 @@ May be provided in place of prompts
 |:-------------|:----------------------------------------------------|
 | `--template` | Specify the template name ([list][examples])        |
 | `--commit`   | Specify a specific Git commit or branch to use from this repo (by default, `main` branch of this repo will be used) |
+| `--fancy`    | For Windows users, `--fancy` will enable full unicode support |
 
 ### Debugging
 

package/dist/index.js

@@ -1,27 +1,33 @@
+import { color, generateProjectName, label, say } from "@astrojs/cli-kit";
+import { forceUnicode, random } from "@astrojs/cli-kit/utils";
 import { assign, parse, stringify } from "comment-json";
-import degit from "degit";
 import { execa, execaCommand } from "execa";
 import fs from "fs";
-import { bgCyan, black, bold, cyan, dim, gray, green, red, reset, yellow } from "kleur/colors";
+import { downloadTemplate } from "giget";
+import { bold, dim, green, reset, yellow } from "kleur/colors";
 import ora from "ora";
-import os from "os";
 import path from "path";
 import prompts from "prompts";
 import detectPackageManager from "which-pm-runs";
 import yargs from "yargs-parser";
 import { loadWithRocketGradient, rocketAscii } from "./gradient.js";
-import { defaultLogLevel, logger } from "./logger.js";
+import { logger } from "./logger.js";
+import {
+  banner,
+  getName,
+  getVersion,
+  info,
+  nextSteps,
+  typescriptByDefault,
+  welcome
+} from "./messages.js";
 import { TEMPLATES } from "./templates.js";
-function wait(ms) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-function logAndWait(message, ms = 100) {
-  console.log(message);
-  return wait(ms);
-}
 const cleanArgv = process.argv.filter((arg) => arg !== "--");
-const args = yargs(cleanArgv);
+const args = yargs(cleanArgv, { boolean: ["fancy"] });
 prompts.override(args);
+if (args.fancy) {
+  forceUnicode();
+}
 function mkdirp(dir) {
   try {
     fs.mkdirSync(dir, { recursive: true });
@@ -31,9 +37,6 @@ function mkdirp(dir) {
     throw e;
   }
 }
-function isEmpty(dirPath) {
-  return !fs.existsSync(dirPath) || fs.readdirSync(dirPath).length === 0;
-}
 const VALID_PROJECT_DIRECTORY_SAFE_LIST = [
   ".DS_Store",
   ".git",
@@ -68,18 +71,28 @@ function isValidProjectDirectory(dirPath) {
   });
   return conflicts.length === 0;
 }
-const { version } = JSON.parse(
-  fs.readFileSync(new URL("../package.json", import.meta.url), "utf-8")
-);
 const FILES_TO_REMOVE = [".stackblitzrc", "sandbox.config.json", "CHANGELOG.md"];
 async function main() {
   var _a;
   const pkgManager = ((_a = detectPackageManager()) == null ? void 0 : _a.name) || "npm";
+  const [username, version] = await Promise.all([getName(), getVersion()]);
   logger.debug("Verbose logging turned on");
-  console.log(`
-${bold("Welcome to Astro!")} ${gray(`(create-astro v${version})`)}`);
-  console.log(`Lets walk through setting up your new Astro project.
-`);
+  if (!args.skipHouston) {
+    await say(
+      [
+        [
+          "Welcome",
+          "to",
+          label("astro", color.bgGreen, color.black),
+          color.green(`v${version}`) + ",",
+          `${username}!`
+        ],
+        random(welcome)
+      ],
+      { hat: args.fancy ? "\u{1F3A9}" : void 0 }
+    );
+    await banner(version);
+  }
   let cwd = args["_"][2];
   if (cwd && isValidProjectDirectory(cwd)) {
     let acknowledgeProjectDir = ora({
@@ -99,7 +112,7 @@ ${bold("Welcome to Astro!")} ${gray(`(create-astro v${version})`)}`);
         type: "text",
         name: "directory",
         message: "Where would you like to create your new project?",
-        initial: "./my-astro-site",
+        initial: `./${generateProjectName()}`,
         validate(value) {
           if (!isValidProjectDirectory(value)) {
             return notEmptyMsg(value);
@@ -112,6 +125,7 @@ ${bold("Welcome to Astro!")} ${gray(`(create-astro v${version})`)}`);
     cwd = dirResponse.directory;
   }
   if (!cwd) {
+    ora().info(dim("No directory provided. See you later, astronaut!"));
     process.exit(1);
   }
   const options = await prompts(
@@ -119,85 +133,34 @@ ${bold("Welcome to Astro!")} ${gray(`(create-astro v${version})`)}`);
       {
         type: "select",
         name: "template",
-        message: "Which template would you like to use?",
+        message: "How would you like to setup your new project?",
         choices: TEMPLATES
       }
     ],
     { onCancel: () => ora().info(dim("Operation cancelled. See you later, astronaut!")) }
   );
   if (!options.template) {
+    ora().info(dim("No template provided. See you later, astronaut!"));
     process.exit(1);
   }
   let templateSpinner = await loadWithRocketGradient("Copying project files...");
   const hash = args.commit ? `#${args.commit}` : "";
   const isThirdParty = options.template.includes("/");
   const templateTarget = isThirdParty ? options.template : `withastro/astro/examples/${options.template}#latest`;
-  const emitter = degit(`${templateTarget}${hash}`, {
-    cache: false,
-    force: true,
-    verbose: defaultLogLevel === "debug" ? true : false
-  });
-  logger.debug("Initialized degit with following config:", `${templateTarget}${hash}`, {
-    cache: false,
-    force: true,
-    verbose: defaultLogLevel === "debug" ? true : false
-  });
   if (!args.dryRun) {
     try {
-      emitter.on("info", (info) => {
-        logger.debug(info.message);
+      await downloadTemplate(`${templateTarget}${hash}`, {
+        force: true,
+        provider: "github",
+        cwd,
+        dir: "."
       });
-      await emitter.clone(cwd);
-      if (isValidProjectDirectory(cwd)) {
-        if (isEmpty(cwd)) {
-          fs.rmdirSync(cwd);
-        }
-        throw new Error(`Error: The provided template (${cyan(options.template)}) does not exist`);
-      }
     } catch (err) {
-      templateSpinner.fail();
-      logger.debug(err);
-      console.error(red(err.message));
-      if (err.message === "zlib: unexpected end of file" || err.message === "TAR_BAD_ARCHIVE: Unrecognized archive format") {
-        console.log(
-          yellow(
-            "Local degit cache seems to be corrupted. For more information check out this issue: https://github.com/withastro/astro/issues/655. "
-          )
-        );
-        const cacheIssueResponse = await prompts({
-          type: "confirm",
-          name: "cache",
-          message: "Would you like us to clear the cache and try again?",
-          initial: true
-        });
-        if (cacheIssueResponse.cache) {
-          const homeDirectory = os.homedir();
-          const cacheDir = path.join(homeDirectory, ".degit", "github", "withastro");
-          fs.rmSync(cacheDir, { recursive: true, force: true, maxRetries: 3 });
-          templateSpinner = await loadWithRocketGradient("Copying project files...");
-          try {
-            await emitter.clone(cwd);
-          } catch (e) {
-            logger.debug(e);
-            console.error(red(e.message));
-          }
-        } else {
-          console.log(
-            "Okay, no worries! To fix this manually, remove the folder '~/.degit/github/withastro' and rerun the command."
-          );
-        }
-      }
-      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"
-          )
-        );
+      fs.rmdirSync(cwd);
+      if (err.message.includes("404")) {
+        console.error(`Template ${color.underline(options.template)} does not exist!`);
+      } else {
+        console.error(err.message);
       }
       process.exit(1);
     }
@@ -252,7 +215,7 @@ ${bold(
     installSpinner.text = green("Packages installed!");
     installSpinner.succeed();
   } else {
-    ora().info(dim(`No problem! Remember to install dependencies after setup.`));
+    await info("No problem!", "Remember to install dependencies after setup.");
   }
   const gitResponse = await prompts(
     {
@@ -276,7 +239,10 @@ ${bold(
     await execaCommand("git init", { cwd });
     ora().succeed("Git repository created!");
   } else {
-    ora().info(dim(`Sounds good! You can come back and run ${cyan(`git init`)} later.`));
+    await info(
+      "Sounds good!",
+      `You can come back and run ${color.reset(`git init`)}${color.dim(" later.")}`
+    );
   }
   const tsResponse = await prompts(
     {
@@ -284,25 +250,10 @@ ${bold(
       name: "typescript",
       message: "How would you like to setup TypeScript?",
       choices: [
-        {
-          title: "Relaxed",
-          value: "base"
-        },
-        {
-          title: "Strict (recommended)",
-          description: "Enable `strict` typechecking rules",
-          value: "strict"
-        },
-        {
-          title: "Strictest",
-          description: "Enable all typechecking rules",
-          value: "strictest"
-        },
-        {
-          title: "I prefer not to use TypeScript",
-          description: `That's cool too!`,
-          value: "optout"
-        }
+        { value: "strict", title: "Strict", description: "(recommended)" },
+        { value: "strictest", title: "Strictest" },
+        { value: "base", title: "Relaxed" },
+        { value: "unsure", title: "Help me choose" }
       ]
     },
     {
@@ -316,16 +267,9 @@ ${bold(
       }
     }
   );
-  if (tsResponse.typescript === "optout") {
-    console.log(``);
-    ora().warn(yellow(bold(`Astro \u2764\uFE0F TypeScript!`)));
-    console.log(`  Astro supports TypeScript inside of ".astro" component scripts, so`);
-    console.log(`  we still need to create some TypeScript-related files in your project.`);
-    console.log(`  You can safely ignore these files, but don't delete them!`);
-    console.log(dim("  (ex: tsconfig.json, src/env.d.ts)"));
-    console.log(``);
+  if (tsResponse.typescript === "unsure") {
+    await typescriptByDefault();
     tsResponse.typescript = "base";
-    await wait(300);
   }
   if (args.dryRun) {
     ora().info(dim(`--dry-run enabled, skipping.`));
@@ -355,31 +299,10 @@ ${bold(
     });
     ora().succeed("TypeScript settings applied!");
   }
-  ora().succeed("Setup complete.");
-  ora({ text: green("Ready for liftoff!") }).succeed();
-  await wait(300);
-  console.log(`
-${bgCyan(black(" Next steps "))}
-`);
   let projectDir = path.relative(process.cwd(), cwd);
   const devCmd = pkgManager === "npm" ? "npm run dev" : `${pkgManager} dev`;
-  if (projectDir !== "/") {
-    await logAndWait(
-      `You can now ${bold(cyan("cd"))} into the ${bold(cyan(projectDir))} project directory.`
-    );
-  }
-  await logAndWait(
-    `Run ${bold(cyan(devCmd))} to start the Astro dev server. ${bold(cyan("CTRL-C"))} to close.`
-  );
-  await logAndWait(
-    `Add frameworks like ${bold(cyan("react"))} and ${bold(
-      cyan("tailwind")
-    )} to your project using ${bold(cyan("astro add"))}`
-  );
-  await logAndWait("");
-  await logAndWait(`Stuck? Come join us at ${bold(cyan("https://astro.build/chat"))}`, 750);
-  await logAndWait(dim("Good luck out there, astronaut."));
-  await logAndWait("", 300);
+  await nextSteps({ projectDir, devCmd });
+  await say(["Good luck out there, astronaut!"]);
 }
 function emojiWithFallback(char, fallback) {
   return process.platform !== "win32" ? char : fallback;

package/dist/messages.js

@@ -0,0 +1,134 @@
+import { color, label } from "@astrojs/cli-kit";
+import { sleep } from "@astrojs/cli-kit/utils";
+import { exec } from "node:child_process";
+import { get } from "node:https";
+import stripAnsi from "strip-ansi";
+const welcome = [
+  `Let's claim your corner of the internet.`,
+  `I'll be your assistant today.`,
+  `Let's build something awesome!`,
+  `Let's build something great!`,
+  `Let's build something fast!`,
+  `Let's make the web weird!`,
+  `Let's make the web a better place!`,
+  `Let's create a new project!`,
+  `Let's create something unqiue!`,
+  `Time to build a new website.`,
+  `Time to build a faster website.`,
+  `Time to build a sweet new website.`,
+  `We're glad to have you on board.`,
+  `Keeping the internet weird since 2021.`,
+  `Initiating launch sequence...`,
+  `Initiating launch sequence... right... now!`,
+  `Awaiting further instructions.`
+];
+function getName() {
+  return new Promise((resolve) => {
+    exec("git config user.name", { encoding: "utf-8" }, (_1, gitName, _2) => {
+      if (gitName.trim()) {
+        return resolve(gitName.split(" ")[0].trim());
+      }
+      exec("whoami", { encoding: "utf-8" }, (_3, whoami, _4) => {
+        if (whoami.trim()) {
+          return resolve(whoami.split(" ")[0].trim());
+        }
+        return resolve("astronaut");
+      });
+    });
+  });
+}
+let v;
+function getVersion() {
+  return new Promise((resolve) => {
+    if (v)
+      return resolve(v);
+    get("https://registry.npmjs.org/astro/latest", (res) => {
+      let body = "";
+      res.on("data", (chunk) => body += chunk);
+      res.on("end", () => {
+        const { version } = JSON.parse(body);
+        v = version;
+        resolve(version);
+      });
+    });
+  });
+}
+async function banner(version) {
+  return console.log(
+    `
+${label("astro", color.bgGreen, color.black)}  ${color.green(
+      color.bold(`v${version}`)
+    )} ${color.bold("Launch sequence initiated.")}
+`
+  );
+}
+async function info(prefix, text) {
+  await sleep(100);
+  if (process.stdout.columns < 80) {
+    console.log(`${color.cyan("\u25FC")}  ${color.cyan(prefix)}`);
+    console.log(`${" ".repeat(3)}${color.dim(text)}
+`);
+  } else {
+    console.log(`${color.cyan("\u25FC")}  ${color.cyan(prefix)} ${color.dim(text)}
+`);
+  }
+}
+async function error(prefix, text) {
+  if (process.stdout.columns < 80) {
+    console.log(`${" ".repeat(5)} ${color.red("\u25B2")}  ${color.red(prefix)}`);
+    console.log(`${" ".repeat(9)}${color.dim(text)}`);
+  } else {
+    console.log(`${" ".repeat(5)} ${color.red("\u25B2")}  ${color.red(prefix)} ${color.dim(text)}`);
+  }
+}
+async function typescriptByDefault() {
+  await info(`Cool!`, "Astro comes with TypeScript support enabled by default.");
+  console.log(
+    `${" ".repeat(3)}${color.dim(`We'll default to the most relaxed settings for you.`)}`
+  );
+  await sleep(300);
+}
+async function nextSteps({ projectDir, devCmd }) {
+  const max = process.stdout.columns;
+  const prefix = max < 80 ? " " : " ".repeat(9);
+  await sleep(200);
+  console.log(
+    `
+ ${color.bgCyan(` ${color.black("next")} `)}  ${color.bold(
+      "Liftoff confirmed. Explore your project!"
+    )}`
+  );
+  await sleep(100);
+  if (projectDir !== "") {
+    const enter = [
+      `
+${prefix}Enter your project directory using`,
+      color.cyan(`cd ./${projectDir}`, "")
+    ];
+    const len = enter[0].length + stripAnsi(enter[1]).length;
+    console.log(enter.join(len > max ? "\n" + prefix : " "));
+  }
+  console.log(
+    `${prefix}Run ${color.cyan(devCmd)} to start the dev server. ${color.cyan("CTRL+C")} to stop.`
+  );
+  await sleep(100);
+  console.log(
+    `${prefix}Add frameworks like ${color.cyan(`react`)} or ${color.cyan(
+      "tailwind"
+    )} using ${color.cyan("astro add")}.`
+  );
+  await sleep(100);
+  console.log(`
+${prefix}Stuck? Join us at ${color.cyan(`https://astro.build/chat`)}`);
+  await sleep(200);
+}
+export {
+  banner,
+  error,
+  getName,
+  getVersion,
+  info,
+  nextSteps,
+  typescriptByDefault,
+  welcome
+};

package/dist/templates.js

@@ -1,24 +1,7 @@
 const TEMPLATES = [
-  {
-    title: "Just the basics (recommended)",
-    value: "basics"
-  },
-  {
-    title: "Blog",
-    value: "blog"
-  },
-  {
-    title: "Portfolio",
-    value: "portfolio"
-  },
-  {
-    title: "Documentation Site",
-    value: "docs"
-  },
-  {
-    title: "Empty project",
-    value: "minimal"
-  }
+  { value: "basics", title: "a few best practices (recommended)" },
+  { value: "blog", title: "a personal website starter kit" },
+  { value: "minimal", title: "an empty project" }
 ];
 export {
   TEMPLATES

package/dist/types/messages.d.ts

@@ -0,0 +1,11 @@
+export declare const welcome: string[];
+export declare function getName(): Promise<unknown>;
+export declare function getVersion(): Promise<string>;
+export declare function banner(version: string): Promise<void>;
+export declare function info(prefix: string, text: string): Promise<void>;
+export declare function error(prefix: string, text: string): Promise<void>;
+export declare function typescriptByDefault(): Promise<void>;
+export declare function nextSteps({ projectDir, devCmd }: {
+    projectDir: string;
+    devCmd: string;
+}): Promise<void>;

package/dist/types/templates.d.ts

@@ -1,4 +1,4 @@
 export declare const TEMPLATES: {
-    title: string;
     value: string;
+    title: string;
 }[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-astro",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "type": "module",
   "author": "withastro",
   "license": "MIT",
@@ -23,10 +23,11 @@
     "tsconfigs"
   ],
   "dependencies": {
+    "@astrojs/cli-kit": "^0.1.3",
     "chalk": "^5.0.1",
     "comment-json": "^4.2.3",
-    "degit": "^2.8.4",
     "execa": "^6.1.0",
+    "giget": "^0.1.7",
     "kleur": "^4.1.4",
     "ora": "^6.1.0",
     "prompts": "^2.4.2",
@@ -41,7 +42,7 @@
     "@types/prompts": "^2.0.14",
     "@types/which-pm-runs": "^1.0.0",
     "@types/yargs-parser": "^21.0.0",
-    "astro-scripts": "0.0.8",
+    "astro-scripts": "0.0.9",
     "chai": "^4.3.6",
     "mocha": "^9.2.2",
     "uvu": "^0.5.3"