Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

create-svelte: Add descriptions to select options #5221

Merged
merged 10 commits into from
Jun 22, 2022
Merged

create-svelte: Add descriptions to select options #5221

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
2cd7e44
[create-svelte] Add descriptions to select options
gtm-nayan Jun 18, 2022
05c5c34
changeset
gtm-nayan Jun 18, 2022
54ea43e
Obsoleteify? description
gtm-nayan Jun 18, 2022
465637b
formatting
gtm-nayan Jun 18, 2022
4fd864b
Update .meta.json
gtm-nayan Jun 19, 2022
30b2491
Update packages/create-svelte/bin.js
Rich-Harris Jun 22, 2022
5d4029b
Update packages/create-svelte/bin.js
Rich-Harris Jun 22, 2022
4cb8a0f
Update packages/create-svelte/bin.js
Rich-Harris Jun 22, 2022
f3d77c4
Update packages/create-svelte/bin.js
Rich-Harris Jun 22, 2022
f3ae911
Update .changeset/thick-swans-join.md
Rich-Harris Jun 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/thick-swans-join.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'create-svelte': patch
---

Add descriptions to select options
Rich-Harris marked this conversation as resolved.
Show resolved Hide resolved
15 changes: 11 additions & 4 deletions packages/create-svelte/bin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,10 +61,11 @@ async function main() {
message: 'Which Svelte app template?',
choices: fs.readdirSync(dist('templates')).map((dir) => {
const meta_file = dist(`templates/${dir}/meta.json`);
const meta = JSON.parse(fs.readFileSync(meta_file, 'utf8'));
const { title, description } = JSON.parse(fs.readFileSync(meta_file, 'utf8'));

return {
title: meta.description,
title,
description,
value: dir
};
})
Expand All @@ -75,8 +76,14 @@ async function main() {
message: 'Add type checking?',
Rich-Harris marked this conversation as resolved.
Show resolved Hide resolved
initial: false,
choices: [
{ title: 'Type-checked JavaScript', value: 'checkjs' },
{ title: 'TypeScript', value: 'typescript' },
{
title: 'With JavaScript comments (JSDoc)',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

might need a bit more explanation of what this is. but hopefully this isn't too long

Suggested change
title: 'With JavaScript comments (JSDoc)',
title: 'Runs TypeScript's type checking against JavaScript comments (JSDoc)',

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Guess it could be put into the descriptions, how's this?

image
image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it would be better if it would be at same line... now it looks like another option.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree it looks nicer on the same line

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's coming from how the prompts library handles descriptions, if they're too long to fit on one line they start from the next, so it has to be put in the title

image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

Type-Checked JavaScript - check for types in JS with JSDoc.
TypeScript - check for types with TS.
None - Don't check for types.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or how it was in #5221 (comment) but shortcut JS and TS, and maybe replace last part with and run TSC to check types.

Copy link
Contributor Author

@gtm-nayan gtm-nayan Jun 21, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Turns out we can cheat a bit with kleur to make parts of the title look like the description to avoid the auto-wrap behavior.

image

Ended up with this, which I think looks nice and readable.

Rich-Harris marked this conversation as resolved.
Show resolved Hide resolved
value: 'checkjs'
},
{
title: 'With TypeScript annotations',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe it's not just annotations, but the actual source is written in TypeScript

Suggested change
title: 'With TypeScript annotations',
title: 'Source is written TypeScript',

Rich-Harris marked this conversation as resolved.
Show resolved Hide resolved
value: 'typescript'
},
{ title: 'None', value: null }
gtm-nayan marked this conversation as resolved.
Show resolved Hide resolved
Rich-Harris marked this conversation as resolved.
Show resolved Hide resolved
]
},
Expand Down
3 changes: 2 additions & 1 deletion packages/create-svelte/templates/default/.meta.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
{
"description": "SvelteKit demo app"
"title": "SvelteKit demo app",
"description": "A todo list app showcasing some of the features of SvelteKit"
}
3 changes: 2 additions & 1 deletion packages/create-svelte/templates/skeleton/.meta.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
{
"description": "Skeleton project"
"title": "Skeleton project",
"description": "Barebones scaffolding for your new SvelteKit app"
}