Refactor create-astro

[natemoo-re]

Changes

• Creating a draft to watch CI
• Resigned UI for create-astro, with more features and much better CLI flags
• Closes create-astro does not work #5227

create-astro-ts-nope.mp4

create-astro-ts-yep.mp4

Testing

• create-astro had very poor test coverage previously. We were testing the CLI output directly, which was flaky and led to most tests being disabled.
• This PR refactors create-astro completely so that prompt and other internals can be mocked and the logic of each step can be tested independently

Docs

Docs changes not needed

[changeset-bot]

🦋 Changeset detected

Latest commit: 7469554

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[natemoo-re]

!preview refactor

[github-actions]

 > [email protected] release /home/runner/work/astro/astro > pnpm run build && changeset publish "--tag" "next--refactor" > [email protected] build /home/runner/work/astro/astro > turbo run build --output-logs=new-only --no-deps --filter=astro --filter=create-astro --filter="@astrojs/*" �[2m• Packages in scope: @astrojs/alpinejs, @astrojs/cloudflare, @astrojs/deno, @astrojs/image, @astrojs/lit, @astrojs/markdown-component, @astrojs/markdown-remark, @astrojs/mdx, @astrojs/netlify, @astrojs/node, @astrojs/partytown, @astrojs/preact, @astrojs/prefetch, @astrojs/prism, @astrojs/react, @astrojs/rss, @astrojs/sitemap, @astrojs/solid-js, @astrojs/svelte, @astrojs/tailwind, @astrojs/telemetry, @astrojs/turbolinks, @astrojs/vercel, @astrojs/vue, @astrojs/webapi, astro, create-astro�[0m �[2m• Running�[0m �[2m�[1mbuild�[0m�[0m �[2min 27 packages�[0m �[2m• Remote computation caching enabled (experimental)�[0m �[35m@astrojs/webapi:build: �[0mcache hit, suppressing output �[2m2f05046efc3a8d33�[0m �[36m@astrojs/prism:build: �[0mcache hit, suppressing output �[2m1d140181b45689f7�[0m �[33m@astrojs/telemetry:build: �[0mcache hit, suppressing output �[2md20db3e366ac5768�[0m �[35m@astrojs/markdown-remark:build: �[0mcache hit, suppressing output �[2m6802707178c04f5e�[0m �[32mastro:build: �[0mcache hit, suppressing output �[2mdf0bdaf6e61668c6�[0m �[33m@astrojs/solid-js:build: �[0mcache hit, suppressing output �[2m0352d993179d9f5d�[0m �[34m@astrojs/netlify:build: �[0mcache hit, suppressing output �[2m51827ff54f6913ff�[0m �[36m@astrojs/partytown:build: �[0mcache hit, suppressing output �[2m23e6fc5645a2d643�[0m �[35m@astrojs/mdx:build: �[0mcache hit, suppressing output �[2mef43a5516b54d948�[0m �[32m@astrojs/preact:build: �[0mcache hit, suppressing output �[2md39ccba668647064�[0m �[34m@astrojs/node:build: �[0mcache hit, suppressing output �[2m8d589d95d645670c�[0m �[36m@astrojs/vercel:build: �[0mcache hit, suppressing output �[2m7540bca806d5c73c�[0m �[35m@astrojs/vue:build: �[0mcache hit, suppressing output �[2ma2401605d4300a3e�[0m �[32m@astrojs/cloudflare:build: �[0mcache hit, suppressing output �[2m1620a12d20037e44�[0m �[33m@astrojs/react:build: �[0mcache hit, suppressing output �[2m31918976a0045284�[0m �[34m@astrojs/sitemap:build: �[0mcache hit, suppressing output �[2m2680d011a0092d71�[0m �[36m@astrojs/lit:build: �[0mcache hit, suppressing output �[2m1f9558f8ef02ffb1�[0m �[32m@astrojs/deno:build: �[0mcache hit, suppressing output �[2me73e534e25dc82e2�[0m �[33m@astrojs/svelte:build: �[0mcache hit, suppressing output �[2m051c457fb0709a5c�[0m �[34m@astrojs/rss:build: �[0mcache hit, suppressing output �[2m80a0d333152e8868�[0m �[36m@astrojs/alpinejs:build: �[0mcache hit, suppressing output �[2m0e819692594b1677�[0m �[35m@astrojs/turbolinks:build: �[0mcache hit, suppressing output �[2m6ca0e8c712fe05c2�[0m �[32m@astrojs/tailwind:build: �[0mcache hit, suppressing output �[2md2dea652ee0a78ef�[0m �[33m@astrojs/prefetch:build: �[0mcache hit, suppressing output �[2m9357afece272f117�[0m �[33m@astrojs/image:build: �[0mcache hit, suppressing output �[2m012b6f07b3db34a0�[0m �[34mcreate-astro:build: �[0mcache miss, executing �[2m35e31f4142f9ffe1�[0m �[34mcreate-astro:build: �[0m �[34mcreate-astro:build: �[0m> [email protected] build /home/runner/work/astro/astro/packages/create-astro �[34mcreate-astro:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[34mcreate-astro:build: �[0m Tasks: 26 successful, 26 total Cached: 25 cached, 26 total Time: 3.252s 🦋 �[33mwarn�[39m �[31m===============================IMPORTANT!===============================�[39m 🦋 �[33mwarn�[39m Packages will be released under the next--refactor tag 🦋 �[33mwarn�[39m �[31m----------------------------------------------------------------------�[39m 🦋 �[36minfo�[39m npm info astro 🦋 �[36minfo�[39m npm info @astrojs/prism 🦋 �[36minfo�[39m npm info @astrojs/rss 🦋 �[36minfo�[39m npm info create-astro 🦋 �[36minfo�[39m npm info @astrojs/alpinejs 🦋 �[36minfo�[39m npm info @astrojs/cloudflare 🦋 �[36minfo�[39m npm info @astrojs/deno 🦋 �[36minfo�[39m npm info @astrojs/image 🦋 �[36minfo�[39m npm info @astrojs/lit 🦋 �[36minfo�[39m npm info @astrojs/mdx 🦋 �[36minfo�[39m npm info @astrojs/netlify 🦋 �[36minfo�[39m npm info @astrojs/node 🦋 �[36minfo�[39m npm info @astrojs/partytown 🦋 �[36minfo�[39m npm info @astrojs/preact 🦋 �[36minfo�[39m npm info @astrojs/prefetch 🦋 �[36minfo�[39m npm info @astrojs/react 🦋 �[36minfo�[39m npm info @astrojs/sitemap 🦋 �[36minfo�[39m npm info @astrojs/solid-js 🦋 �[36minfo�[39m npm info @astrojs/svelte 🦋 �[36minfo�[39m npm info @astrojs/tailwind 🦋 �[36minfo�[39m npm info @astrojs/turbolinks 🦋 �[36minfo�[39m npm info @astrojs/vercel 🦋 �[36minfo�[39m npm info @astrojs/vue 🦋 �[36minfo�[39m npm info @astrojs/markdown-component 🦋 �[36minfo�[39m npm info @astrojs/markdown-remark 🦋 �[36minfo�[39m npm info @astrojs/telemetry 🦋 �[36minfo�[39m npm info @astrojs/webapi 🦋 �[33mwarn�[39m astro is not being published because version 2.0.5 is already published on npm 🦋 �[33mwarn�[39m @astrojs/prism is not being published because version 2.0.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/rss is not being published because version 2.1.0 is already published on npm 🦋 �[36minfo�[39m create-astro is being published because our local version (0.0.0-refactor-20230201190059) has not been published on npm 🦋 �[33mwarn�[39m @astrojs/alpinejs is not being published because version 0.1.3 is already published on npm 🦋 �[33mwarn�[39m @astrojs/cloudflare is not being published because version 6.1.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/deno is not being published because version 4.0.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/image is not being published because version 0.14.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/lit is not being published because version 1.1.2 is already published on npm 🦋 �[33mwarn�[39m @astrojs/mdx is not being published because version 0.16.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/netlify is not being published because version 2.1.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/node is not being published because version 5.0.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/partytown is not being published because version 1.0.3 is already published on npm 🦋 �[33mwarn�[39m @astrojs/preact is not being published because version 2.0.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/prefetch is not being published because version 0.1.2 is already published on npm 🦋 �[33mwarn�[39m @astrojs/react is not being published because version 2.0.2 is already published on npm 🦋 �[33mwarn�[39m @astrojs/sitemap is not being published because version 1.0.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/solid-js is not being published because version 2.0.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/svelte is not being published because version 2.0.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/tailwind is not being published because version 3.0.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/turbolinks is not being published because version 0.1.5 is already published on npm 🦋 �[33mwarn�[39m @astrojs/vercel is not being published because version 3.0.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/vue is not being published because version 2.0.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/markdown-component is not being published because version 1.0.2 is already published on npm 🦋 �[33mwarn�[39m @astrojs/markdown-remark is not being published because version 2.0.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/telemetry is not being published because version 2.0.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/webapi is not being published because version 2.0.0 is already published on npm 🦋 �[36minfo�[39m Publishing �[36m"create-astro"�[39m at �[32m"0.0.0-refactor-20230201190059"�[39m 🦋 �[32msuccess�[39m packages published successfully: 🦋 [email protected] 🦋 Creating git tag... 🦋 New tag: [email protected]

[matthewp]

Like how the refactor allows better testing, love all of the new tests that are coming out of this.

Not sure I feel about using vitest here. Putting aside whether it's appropriate in this context (given that it compiles code differently than in prod), having multiple test libraries in the same repo does make it harder to work with. I'm open to changing test libraries, but I don't think a refactor of one package is the right place to make that decision.

I see that some of the tests are relying on vitest's mocking capabilities, was that the reason to switch? I would think this code could be changed to not need the mocking. For example there is a test that checks for process exit. Can this be refactored so that process.exit() is not called directly in the code, but instead you pass it a function (just as an example) for when the process should exit. That way you can test without needing to mock.

[yanthomasdev]

Great work @natemoo-re, docs LGTM! I do have a small nitpick regarding a prompt message that can be dismissed if intentional 🙌

[natemoo-re]

I see that some of the tests are relying on vitest's mocking capabilities, was that the reason to switch? I would think this code could be changed to not need the mocking. For example there is a test that checks for process exit. Can this be refactored so that process.exit() is not called directly in the code, but instead you pass it a function (just as an example) for when the process should exit. That way you can test without needing to mock.

Yes, I was using vitest to allow mocking console.log and process.stdout.write, but I can definitely refactor this with a similar setup to our logger in astro itself. I will do that and stick with Mocha!

[natemoo-re]

@matthewp tests refactored to stick with mocha/chai as we currently use, with the added benefit of zero mocking!

Everything is accessed through a shared Context object and process.stdout.write is also handled internally so we can intercept them at the test level.

[matthewp]

Code looks good, love all of the new testing and how easy that seems to be.

Adding Sarah and Fred as reviewers since they have context about the UI changes.

[FredKSchott]

@natemoo-re can you share a screen recording of the whole thing? I'll push to make sure this convo doesn't get too bike-sheddy if that's a concern, but I think it's still an important part of evaluating this PR. I'll save my review to only look at that!

[sarah11918]

Approve of the new TypeScript messages! Looking forward to dealing with this less in docs! 😅

[FredKSchott]

Looks great! I may still push to tweak in the future (I'd still love to find a way to remove that "strictness" question) but this is absolutely an improvement and I am HERE for it.

[natemoo-re]

!preview refactor

[bholmesdev]

Creating an astronomical improvement 👏

[github-actions]

 > [email protected] release /home/runner/work/astro/astro > pnpm run build && changeset publish "--tag" "next--refactor" > [email protected] build /home/runner/work/astro/astro > turbo run build --output-logs=new-only --no-deps --filter=astro --filter=create-astro --filter="@astrojs/*" �[2m• Packages in scope: @astrojs/alpinejs, @astrojs/cloudflare, @astrojs/deno, @astrojs/image, @astrojs/lit, @astrojs/markdown-component, @astrojs/markdown-remark, @astrojs/mdx, @astrojs/netlify, @astrojs/node, @astrojs/partytown, @astrojs/preact, @astrojs/prefetch, @astrojs/prism, @astrojs/react, @astrojs/rss, @astrojs/sitemap, @astrojs/solid-js, @astrojs/svelte, @astrojs/tailwind, @astrojs/telemetry, @astrojs/turbolinks, @astrojs/vercel, @astrojs/vue, @astrojs/webapi, astro, create-astro�[0m �[2m• Running�[0m �[2m�[1mbuild�[0m�[0m �[2min 27 packages�[0m �[2m• Remote computation caching enabled (experimental)�[0m �[35m@astrojs/webapi:build: �[0mcache hit, suppressing output �[2m0713b2fe0387fbab�[0m �[36m@astrojs/prism:build: �[0mcache hit, suppressing output �[2m0f89ca4d8f71255b�[0m �[33m@astrojs/telemetry:build: �[0mcache hit, suppressing output �[2m4a5b1798e3344a6d�[0m �[35m@astrojs/markdown-remark:build: �[0mcache hit, suppressing output �[2m3b34855605ec7792�[0m �[32mastro:build: �[0mcache hit, suppressing output �[2m19c05e9e7c05ed3d�[0m �[34m@astrojs/netlify:build: �[0mcache hit, suppressing output �[2mf2e7c71c369f202a�[0m �[35m@astrojs/node:build: �[0mcache hit, suppressing output �[2m70c7623c31902bce�[0m �[32m@astrojs/mdx:build: �[0mcache hit, suppressing output �[2m4b06f5577f50b653�[0m �[34m@astrojs/react:build: �[0mcache hit, suppressing output �[2m95d04d1e96798b6d�[0m �[36m@astrojs/lit:build: �[0mcache hit, suppressing output �[2md5830e3c219225e6�[0m �[36m@astrojs/prefetch:build: �[0mcache hit, suppressing output �[2m52dc720749fefaac�[0m �[33m@astrojs/alpinejs:build: �[0mcache hit, suppressing output �[2me904ca083a2a9179�[0m �[32m@astrojs/cloudflare:build: �[0mcache hit, suppressing output �[2m304e6f8895d9b3ef�[0m �[35m@astrojs/turbolinks:build: �[0mcache hit, suppressing output �[2m3cccaabf08f4da14�[0m �[34m@astrojs/svelte:build: �[0mcache hit, suppressing output �[2m4fe965d770b82127�[0m �[32m@astrojs/partytown:build: �[0mcache hit, suppressing output �[2md2843c0ebcb96775�[0m �[34m@astrojs/deno:build: �[0mcache hit, suppressing output �[2m762408f05ff14f9f�[0m �[36m@astrojs/rss:build: �[0mcache hit, suppressing output �[2md69ccc2cdbcb8943�[0m �[36m@astrojs/preact:build: �[0mcache hit, suppressing output �[2m8f756d44c9b128ad�[0m �[35m@astrojs/tailwind:build: �[0mcache hit, suppressing output �[2med71f805844b03c0�[0m �[33m@astrojs/vue:build: �[0mcache hit, suppressing output �[2m71237de9f7d3b723�[0m �[33m@astrojs/sitemap:build: �[0mcache hit, suppressing output �[2mcdcae7e577caf5ae�[0m �[35m@astrojs/solid-js:build: �[0mcache hit, suppressing output �[2me8ac9ef055c51a6e�[0m �[32m@astrojs/image:build: �[0mcache hit, suppressing output �[2md9471f31040664c7�[0m �[34mcreate-astro:build: �[0mcache miss, executing �[2mad78dce35649d015�[0m �[33m@astrojs/vercel:build: �[0mcache miss, executing �[2mf1cc8b83754557a9�[0m �[34mcreate-astro:build: �[0m �[34mcreate-astro:build: �[0m> [email protected] build /home/runner/work/astro/astro/packages/create-astro �[34mcreate-astro:build: �[0m> astro-scripts build "src/index.ts" --bundle && tsc �[34mcreate-astro:build: �[0m �[33m@astrojs/vercel:build: �[0m �[33m@astrojs/vercel:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/vercel �[33m@astrojs/vercel:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[33m@astrojs/vercel:build: �[0m Tasks: 26 successful, 26 total Cached: 24 cached, 26 total Time: 6.652s 🦋 �[33mwarn�[39m �[31m===============================IMPORTANT!===============================�[39m 🦋 �[33mwarn�[39m Packages will be released under the next--refactor tag 🦋 �[33mwarn�[39m �[31m----------------------------------------------------------------------�[39m 🦋 �[36minfo�[39m npm info astro 🦋 �[36minfo�[39m npm info @astrojs/prism 🦋 �[36minfo�[39m npm info @astrojs/rss 🦋 �[36minfo�[39m npm info create-astro 🦋 �[36minfo�[39m npm info @astrojs/alpinejs 🦋 �[36minfo�[39m npm info @astrojs/cloudflare 🦋 �[36minfo�[39m npm info @astrojs/deno 🦋 �[36minfo�[39m npm info @astrojs/image 🦋 �[36minfo�[39m npm info @astrojs/lit 🦋 �[36minfo�[39m npm info @astrojs/mdx 🦋 �[36minfo�[39m npm info @astrojs/netlify 🦋 �[36minfo�[39m npm info @astrojs/node 🦋 �[36minfo�[39m npm info @astrojs/partytown 🦋 �[36minfo�[39m npm info @astrojs/preact 🦋 �[36minfo�[39m npm info @astrojs/prefetch 🦋 �[36minfo�[39m npm info @astrojs/react 🦋 �[36minfo�[39m npm info @astrojs/sitemap 🦋 �[36minfo�[39m npm info @astrojs/solid-js 🦋 �[36minfo�[39m npm info @astrojs/svelte 🦋 �[36minfo�[39m npm info @astrojs/tailwind 🦋 �[36minfo�[39m npm info @astrojs/turbolinks 🦋 �[36minfo�[39m npm info @astrojs/vercel 🦋 �[36minfo�[39m npm info @astrojs/vue 🦋 �[36minfo�[39m npm info @astrojs/markdown-component 🦋 �[36minfo�[39m npm info @astrojs/markdown-remark 🦋 �[36minfo�[39m npm info @astrojs/telemetry 🦋 �[36minfo�[39m npm info @astrojs/webapi 🦋 �[33mwarn�[39m astro is not being published because version 2.0.5 is already published on npm 🦋 �[33mwarn�[39m @astrojs/prism is not being published because version 2.0.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/rss is not being published because version 2.1.0 is already published on npm 🦋 �[36minfo�[39m create-astro is being published because our local version (0.0.0-refactor-20230203142617) has not been published on npm 🦋 �[33mwarn�[39m @astrojs/alpinejs is not being published because version 0.1.3 is already published on npm 🦋 �[33mwarn�[39m @astrojs/cloudflare is not being published because version 6.1.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/deno is not being published because version 4.0.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/image is not being published because version 0.14.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/lit is not being published because version 1.1.2 is already published on npm 🦋 �[33mwarn�[39m @astrojs/mdx is not being published because version 0.16.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/netlify is not being published because version 2.1.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/node is not being published because version 5.0.2 is already published on npm 🦋 �[33mwarn�[39m @astrojs/partytown is not being published because version 1.0.3 is already published on npm 🦋 �[33mwarn�[39m @astrojs/preact is not being published because version 2.0.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/prefetch is not being published because version 0.1.2 is already published on npm 🦋 �[33mwarn�[39m @astrojs/react is not being published because version 2.0.2 is already published on npm 🦋 �[33mwarn�[39m @astrojs/sitemap is not being published because version 1.0.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/solid-js is not being published because version 2.0.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/svelte is not being published because version 2.0.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/tailwind is not being published because version 3.0.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/turbolinks is not being published because version 0.1.5 is already published on npm 🦋 �[36minfo�[39m @astrojs/vercel is being published because our local version (0.0.0-refactor-20230203142617) has not been published on npm 🦋 �[33mwarn�[39m @astrojs/vue is not being published because version 2.0.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/markdown-component is not being published because version 1.0.2 is already published on npm 🦋 �[33mwarn�[39m @astrojs/markdown-remark is not being published because version 2.0.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/telemetry is not being published because version 2.0.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/webapi is not being published because version 2.0.0 is already published on npm 🦋 �[36minfo�[39m Publishing �[36m"create-astro"�[39m at �[32m"0.0.0-refactor-20230203142617"�[39m 🦋 �[36minfo�[39m Publishing �[36m"@astrojs/vercel"�[39m at �[32m"0.0.0-refactor-20230203142617"�[39m 🦋 �[32msuccess�[39m packages published successfully: 🦋 [email protected] 🦋 @astrojs/[email protected] 🦋 Creating git tags... 🦋 New tag: [email protected] 🦋 New tag: @astrojs/[email protected]

[Princesseuh]

I'll fight with Fred, scream and throw tantrums for the "strictness" question to be kept forever, but just wanted to add my approval to the wonderful work you've done here Nate!