docs: add vite command builder for easier vite project scaffolding

[monarchwadia]

Description

Fixes #20452

[graphite-app]

There appears to be a JavaScript function accidentally inserted into the middle of the text description. The paragraph should read:

Vite (French word for "quick", pronounced `/vit/`<button style="border:none;padding:3px;border-radius:4px;vertical-align:bottom" id="play-vite-audio" onclick="document.getElementById('vite-audio').play();"><svg style="height:2em;width:2em"><use href="/voice.svg?no-inline#voice" /></svg></button>, like "veet") is a build tool...

Instead of having the buildField function definition breaking the sentence. This syntax error would cause rendering issues in the documentation.

Suggested change

	Vite (French word for "quickfunction buildField(label, input) {
	return '<label style="display:block;margin-bottom:8px;">' + label + ' ' + input + '</label>';
	}pronounced `/vit/`<button style="border:none;padding:3px;border-radius:4px;vertical-align:bottom" id="play-vite-audio" onclick="document.getElementById('vite-audio').play();"><svg style="height:2em;width:2em"><use href="/voice.svg?no-inline#voice" /></svg></button>, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:
	Vite (French word for "quick", pronounced `/vit/`<button style="border:none;padding:3px;border-radius:4px;vertical-align:bottom" id="play-vite-audio" onclick="document.getElementById('vite-audio').play();"><svg style="height:2em;width:2em"><use href="/voice.svg?no-inline#voice" /></svg></button>, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

[monarchwadia]

Fixed.

[graphite-app]

The Deno command implementation is incorrect. Deno doesn't support the init --npm vite syntax shown here.

For Deno to work with npm packages like create-vite, the correct syntax would be:

return `deno run --allow-read --allow-write --allow-env --allow-net --allow-run npm:create-vite${target ? ` ${target}` : ''}${templateFlag}`

This uses Deno's ability to run npm packages directly with the appropriate permissions.

Suggested change

	return `deno init --npm vite${target ? ` ${target}` : ''}${templateFlag}`
	return `deno run --allow-read --allow-write --allow-env --allow-net --allow-run npm:create-vite${target ? ` ${target}` : ''}${templateFlag}`

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

[monarchwadia]

I'm just following the template that's already present in the docs.

[graphite-app]

The getCommand function always includes the template parameter in the generated command, regardless of whether a template is selected. This differs from the Vue component implementation which conditionally adds the template flag only when a template is selected. Consider modifying this function to conditionally include the template parameter, similar to how it's handled in the Vue component:

function getCommand() {
  const toolObj = viteBuilderData.tools.find((x) => x.id === tool.value)
  if (!toolObj) return ''
  const templateStr = getTemplate() ? ` --template ${getTemplate()}` : ''
  return toolObj.command
    .replace('{name}', name.value || 'my-app')
    .replace(' --template {template}', templateStr)
}

This would ensure the command is correctly generated in all scenarios.

Suggested change

	function getCommand() {
	const toolObj = viteBuilderData.tools.find((x) => x.id === tool.value)
	if (!toolObj) return ''
	return toolObj.command
	.replace('{name}', name.value || 'my-app')
	.replace('{template}', getTemplate())
	}
	function getCommand() {
	const toolObj = viteBuilderData.tools.find((x) => x.id === tool.value)
	if (!toolObj) return ''
	const templateStr = getTemplate() ? ` --template ${getTemplate()}` : ''
	return toolObj.command
	.replace('{name}', name.value || 'my-app')
	.replace(' --template {template}', templateStr)
	}

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.