feat: Add flags for `init` command #1186

ieedan · 2024-07-14T13:11:27Z

feat: Add flags for `init` command

Fixes Add choice flags for init command #1183

Adds new flags to allow for automated use of the CLI. This can be useful for anyone building templates around the library.

How it works

User provides the flags for each option. If an invalid flag is provided it will throw an error (this is to prevent hanging of runs in automation tools). If a flag is not provided the user will be prompted the same way as before including retrys.

New flags

-ts, --typescript              use TypeScript
-s, --style <name>             the style (choices: "default", "new-york")
-bc, --base-color <name>       the base color for the components (choices: "slate", "gray", "zinc", "neutral", "stone")
-gc, --global-css <path>       path to the global css file
-tc, --tailwind-config <path>  path to the tailwind config file
-ca, --component-alias <path>  import alias for components
-ua, --utils-alias <path>      import alias for utils

New --help with the new flags

Usage: shadcn-svelte init [options]

initialize your project and install dependencies

Options:
  -c, --cwd <cwd>                the working directory. defaults to the current directory. (default: "E:\\github\\shadcn-svelte\\packages\\cli")
  -ts, --typescript              use TypeScript
  -s, --style <name>             the style (choices: "default", "new-york")
  -bc, --base-color <name>       the base color for the components (choices: "slate", "gray", "zinc", "neutral", "stone")
  -gc, --global-css <path>       path to the global css file
  -tc, --tailwind-config <path>  path to the tailwind config file
  -ca, --component-alias <path>  import alias for components
  -ua, --utils-alias <path>      import alias for utils
  -h, --help                     display help for command

I had to make a few changes to make this work:

Have to get the styles and base colors at the top level to be able to add them as choices. Because of this I had to change getStyles and getBaseColors into sync functions getBaseColors was already sync but getStyles needed to be changed to no longer fetch from the registry
Had to ungroup the prompts so that I didn't have to do weird stuff with promises.

Checklist

update cli docs
format and lint

changeset-bot · 2024-07-14T13:11:30Z

🦋 Changeset detected

Latest commit: 0f15556

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

This PR includes changesets to release 1 package

Name	Type
shadcn-svelte	Minor

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

ieedan · 2024-07-14T13:12:24Z

This will require a bump in the CLI version not should it go to v0.10.8?

github-actions · 2024-07-14T13:13:44Z

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
shadcn-svelte	✅ Ready (View Log)	Visit Preview	`0f15556`

apps/www/src/content/cli.md

huntabyte · 2024-07-14T16:02:46Z

Thanks for taking the initiative to implement this! @AdrianGonz97 built/maintains the CLI so we'll wait for his review/comments before continuing forward!

Co-authored-by: Hunter Johnston <64506580+huntabyte@users.noreply.github.com>

ieedan · 2024-07-18T00:07:21Z

Any update on this?

AdrianGonz97

This is excellent, thank you!

I've made a few changes regarding single dashed flags (uncommon options that aren't booleans shouldn't need them) as well as some stylistic tweaks. Overall though, this is great!

One thing that should be changed before merging is the validation order. I'd prefer if we frontloaded the validation for specified options, rather than holding it off until after the prompt is executed. For instance, if you were to do shadcn-svelte init --css invalid-path, you wouldn't get the error until after the Which base color would you like to use? prompt:

┌   shadcn-svelte  v0.10.7 
│
◇  Would you like to use TypeScript? (recommended)
│  Yes
│
◇  Which style would you like to use?
│  Default
│
◇  Which base color would you like to use?
│  Slate
│
└  [CLI Error]: "some-invalid-path" does not exist. Please enter a valid path.

It would be better to have that error popup at the start.

I've ran out of time to implement this as part of this PR. Would you be willing to update it? If not, no problem! I can get back to it later

ieedan · 2024-07-18T17:48:35Z

Yeah I can add that no problem. I have a few minutes now but if not in the next few minutes I can work on it this evening.

ieedan · 2024-07-18T18:23:39Z

Hey so the validation for import aliases is a dependency of the TypeScript prompt? Is it okay if it goes after?

Edit: See below

const validateImportAlias = (alias: string) => {
  // `tsconfigName` is from the `Would you like to use TypeScript?` prompt.
  const tsconfig = cliConfig.getTSConfig(cwd, tsconfigName);
  // -- snip --
};

ieedan · 2024-07-18T18:27:13Z

Maybe it would be better to just automatically detect tsconfig / jsconfig? I can't see a reason why we couldn't just do that?

ieedan · 2024-07-18T18:32:12Z

We can detect with something like this:

export function detectLanguage(cwd: string): "tsconfig.json" | "jsconfig.json" | undefined {
	if (fs.existsSync(path.join(cwd, "tsconfig.json"))) {
		return "tsconfig.json";
	} else if (fs.existsSync(path.join(cwd, "jsconfig.json"))) {
		return "jsconfig.json";
	} else {
		return undefined;
	}
}

Ideally this would make the CLI more ergonomic for normal users as well.

AdrianGonz97 · 2024-07-18T18:43:05Z

Hey so the validation for import aliases is a dependency of the TypeScript prompt? Is it okay if it goes after?

Edit: See below
const validateImportAlias = (alias: string) => {
  // `tsconfigName` is from the `Would you like to use TypeScript?` prompt.
  const tsconfig = cliConfig.getTSConfig(cwd, tsconfigName);
  // -- snip --
};

Sure, feel free to extract that out into it's own utility function and have the cliConfig and tsconfigName be passed in as arguments

We can detect with something like this:

export function detectLanguage(cwd: string): "tsconfig.json" | "jsconfig.json" | undefined {
	if (fs.existsSync(path.join(cwd, "tsconfig.json"))) {
		return "tsconfig.json";
	} else if (fs.existsSync(path.join(cwd, "jsconfig.json"))) {
		return "jsconfig.json";
	} else {
		return undefined;
	}
}

Ideally this would make the CLI more ergonomic for normal users as well.

This would not be ideal as the tsconfig/jsconfig can reside in parent directories. It would be best just to leave that job to getTsconfig from the get-tsconfig package

ieedan · 2024-07-18T18:48:17Z

Would it be possible to detect the config using getTSConfig? It seems like it is locating it based on the directory containing the package.json.

Something like:

export function detectLanguage(cwd: string): "tsconfig.json" | "jsconfig.json" | undefined {
	if (getTsconfig(path.resolve(cwd, "package.json"), "tsconfig.json") != null) {
		return "tsconfig.json";
	} else if (getTsconfig(path.resolve(cwd, "package.json"), "jsconfig.json") != null) {
		return "jsconfig.json";
	} else {
		return undefined;
	}
}

Edit: Fixed the function so it doesnt throw. I think theres a better way to do this to return the config with it but we could auto detect with a similar method no?

ieedan · 2024-07-18T18:55:48Z

Sorry for the spam I think this could work. This is exactly what the cliConfig.getTSConfig function is doing it just doesn't throw and retries once if it doesn't find it.

export function detectLanguage(cwd: string): "tsconfig.json" | "jsconfig.json" | undefined {
	const rootPath = path.resolve(cwd, "package.json");
	const tsConfig = getTSConfig(rootPath, "tsconfig.json");
	if (tsConfig != null) 
		return tsConfig;

	const jsConfig = getTSConfig(rootPath, "jsconfig.json");
	if (jsConfig != null) 
		return jsConfig;

	return undefined;
}

AdrianGonz97 · 2024-07-18T18:57:12Z

Sorry for the spam I think this could work

No problem, I was just in the middle of writing a solution similar to that 🙂 I think that could work (will have to tweak the return type to be the config type, but same idea), go for it!

ieedan · 2024-07-18T19:13:53Z

Sorry for the spam I think this could work

No problem, I was just in the middle of writing a solution similar to that 🙂 I think that could work (will have to tweak the return type to be the config type, but same idea), go for it!

Oops! Yeah I forgot to change that in my example.

- Now auto-detects typescript/jsdoc config - Moves error messages to the start when provided by flags

ieedan · 2024-07-18T20:23:06Z

We now auto detect TypeScript and that allows us to move the errors to the top when using flags.

Updated changeset and docs accordingly.

AdrianGonz97

Perfect, this is fantastic! Thanks so much for your work on this!!

ieedan · 2024-07-18T22:05:00Z

Perfect, this is fantastic! Thanks so much for your work on this!!

No problem thanks for taking the time today!

ieedan added 9 commits July 13, 2024 21:02

Added flags and moved code to account for options

763daf5

async issues

90971f7

Init working with flags

282fcba

Update init.ts

f7966e5

remove test-init

09c7419

Delete package-lock.json

d3af753

format and lint

62d55c7

Remove breaking type only import

1816abc

Update cli.md

aa34837

github-actions bot deployed to Preview July 14, 2024 13:13 View deployment

huntabyte reviewed Jul 14, 2024

View reviewed changes

apps/www/src/content/cli.md Outdated Show resolved Hide resolved

huntabyte requested a review from AdrianGonz97 July 14, 2024 16:01

Update apps/www/src/content/cli.md

a4e0964

Co-authored-by: Hunter Johnston <64506580+huntabyte@users.noreply.github.com>

github-actions bot deployed to Preview July 14, 2024 18:00 View deployment

AdrianGonz97 added 3 commits July 18, 2024 13:20

update valibot

1972dbe

stylistic tweaks

1fd1d9e

changeset

fca13f9

github-actions bot deployed to Preview July 18, 2024 17:33 View deployment

update docs

2002ce1

github-actions bot deployed to Preview July 18, 2024 17:40 View deployment

AdrianGonz97 requested changes Jul 18, 2024

View reviewed changes

Removed typescript prompt from it

04eb19f

- Now auto-detects typescript/jsdoc config - Moves error messages to the start when provided by flags

ieedan requested a review from AdrianGonz97 July 18, 2024 20:23

github-actions bot deployed to Preview July 18, 2024 20:24 View deployment

AdrianGonz97 added 5 commits July 18, 2024 17:37

tweak dev script

934c786

only sync when necessary

f502154

small tweaks

b039a93

cleanup

5f2ae96

changesets

f1f32c7

github-actions bot deployed to Preview July 18, 2024 21:46 View deployment

more tweaks

5af8348

github-actions bot deployed to Preview July 18, 2024 21:56 View deployment

last one

7619965

github-actions bot deployed to Preview July 18, 2024 22:01 View deployment

docs tweak

0f15556

AdrianGonz97 approved these changes Jul 18, 2024

View reviewed changes

github-actions bot deployed to Preview July 18, 2024 22:05 View deployment

AdrianGonz97 merged commit 6c9b9ee into huntabyte:main Jul 18, 2024
4 checks passed

ieedan deleted the init-cli-commands branch July 18, 2024 22:06

ieedan mentioned this pull request Jul 18, 2024

fix: Some flags were being incorrectly assigned to config values #1192

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add flags for `init` command #1186

feat: Add flags for `init` command #1186

ieedan commented Jul 14, 2024

changeset-bot bot commented Jul 14, 2024 •

edited

Loading

ieedan commented Jul 14, 2024

github-actions bot commented Jul 14, 2024 •

edited

Loading

huntabyte commented Jul 14, 2024

ieedan commented Jul 18, 2024

AdrianGonz97 left a comment

ieedan commented Jul 18, 2024

ieedan commented Jul 18, 2024 •

edited

Loading

ieedan commented Jul 18, 2024

ieedan commented Jul 18, 2024 •

edited

Loading

AdrianGonz97 commented Jul 18, 2024 •

edited

Loading

ieedan commented Jul 18, 2024 •

edited

Loading

ieedan commented Jul 18, 2024

AdrianGonz97 commented Jul 18, 2024 •

edited

Loading

ieedan commented Jul 18, 2024

ieedan commented Jul 18, 2024

AdrianGonz97 left a comment

ieedan commented Jul 18, 2024

feat: Add flags for init command #1186

feat: Add flags for init command #1186

Conversation

ieedan commented Jul 14, 2024

feat: Add flags for init command

How it works

I had to make a few changes to make this work:

Checklist

changeset-bot bot commented Jul 14, 2024 • edited Loading

🦋 Changeset detected

ieedan commented Jul 14, 2024

github-actions bot commented Jul 14, 2024 • edited Loading

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

huntabyte commented Jul 14, 2024

ieedan commented Jul 18, 2024

AdrianGonz97 left a comment

Choose a reason for hiding this comment

ieedan commented Jul 18, 2024

ieedan commented Jul 18, 2024 • edited Loading

ieedan commented Jul 18, 2024

ieedan commented Jul 18, 2024 • edited Loading

AdrianGonz97 commented Jul 18, 2024 • edited Loading

ieedan commented Jul 18, 2024 • edited Loading

ieedan commented Jul 18, 2024

AdrianGonz97 commented Jul 18, 2024 • edited Loading

ieedan commented Jul 18, 2024

ieedan commented Jul 18, 2024

AdrianGonz97 left a comment

Choose a reason for hiding this comment

ieedan commented Jul 18, 2024

feat: Add flags for `init` command #1186

feat: Add flags for `init` command #1186

feat: Add flags for `init` command

changeset-bot bot commented Jul 14, 2024 •

edited

Loading

github-actions bot commented Jul 14, 2024 •

edited

Loading

ieedan commented Jul 18, 2024 •

edited

Loading

ieedan commented Jul 18, 2024 •

edited

Loading

AdrianGonz97 commented Jul 18, 2024 •

edited

Loading

ieedan commented Jul 18, 2024 •

edited

Loading

AdrianGonz97 commented Jul 18, 2024 •

edited

Loading