🐛 BUG: Can't pass renderers to create-astro

[leosvelperez]

What version of astro are you using?

[email protected]

What package manager are you using?

yarn

What operating system are you using?

Mac

Describe the Bug

Trying to create an application passing all the expected arguments fails.

Steps to reproduce

Running:

create-astro my-app --template=starter --renderers=@astrojs/renderer-preact --forceOverwrite

Fails with:

❯ create-astro my-app --template=starter --renderers=@astrojs/renderer-preact --forceOverwrite

Welcome to Astro! (create-astro v0.6.8)
If you encounter a problem, visit https://github.com/withastro/astro/issues to search or file a new issue.

> Prepare for liftoff.
> Gathering mission details...
> Copying project files...
(node:1452) UnhandledPromiseRejectionWarning: TypeError: renderers.map is not a function
    at main (file:///Users/leosvel/code/playground/foo/node_modules/create-astro/dist/index.js:148:33)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:1452) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:1452) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

I debugged it a bit and it seems the underlying prompts package doesn't format the overrides based on the question type. Therefore, the renderers value ends up being "@astrojs/renderer-preact" instead of ["@astrojs/renderer-preact"]. Any non-string argument won't be formatted to the expected format.

The prompts package itself should support this and the best solution might be to solve this there. But given the usage of it, it's an implementation detail for consumers of this CLI, it still is an issue with the create-astro CLI. If it's not solved in prompts, the create-astro package can still provide a workaround by formatting the renderers appropriately or by choosing a different library for prompts that might support this.

Link to Minimal Reproducible Example

Can't provide as it happens with the create-astro package when creating an Astro app.

[natemoo-re]

Have you tried with an extra --? npm@7+ now require it.

❯ create-astro my-app -- --template=starter --renderers=@astrojs/renderer-preact --forceOverwrite

[leosvelperez]

No, I tried with yarn and with a globally installed create-astro (v0.6.8). Like I mentioned in the description of the issue above, the problem is that prompts doesn't format the provided overrides according to the type of questions. Therefore, whatever is provided to it for a question, it's returned as-is.

This is the code in create-astro that provides the parsed answers:

const cleanArgv = process.argv.filter((arg) => arg !== '--');
const args = yargs(cleanArgv);
prompts.override(args);

Since yargs-parser parses --renderers=@astrojs/renderer-preact as renderers: '@astrojs/renderer-preact' and that's what's provided to prompts.override, you get that as the result for the question because by default, prompts do nothing with the overrides apart from return it for their question.

[leosvelperez]

It looks like we can pass a format function to the question definition which could be used to format the answer https://www.npmjs.com/package/prompts#user-content-format. I guess that could be used, it would only be needed by the renderers arguments since it's the only one of the currently supported arguments that wouldn't be parsed correctly.

Another solution would be to format the renderers args if received before passing them to prompts.override.

[leosvelperez]

A simple solution would be to modify packages/create-astro/src/index.ts to:

const cleanArgv = process.argv.filter((arg) => arg !== '--');
- const args = yargs(cleanArgv);
+ const args = yargs(cleanArgv, { array: ['renderers'] });
prompts.override(args);

That way renderers gets parsed correctly if provided. I'd be happy to create a PR with it.

[natemoo-re]

Ah, thanks for the explanation! I skimmed the issue and didn't grok the whole problem.

I'm happy to review a PR, that would be much appreciated!