feat(cli): sv create --from-playground

[manuel3108]

Closes #602

This is a draft. As of now, the cli understands the new arg, but does nothing with it.
The only interesting part at this point is the tests, but they are obviously still a work in progress.

Once this is done sv create --from-playground https://svelte.dev/playground/hello-world should just work and create a new app locally with the minimal template. It will assum App.svelte is the main component, and instantiate that in routes/+page.svelte of the created project.

Users are free to add any addons if they want to.

[changeset-bot]

🦋 Changeset detected

Latest commit: 58d39bf

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

This PR includes changesets to release 1 package

Name	Type
sv	Patch

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

[pkg-pr-new]

Open in StackBlitz

npx https://pkg.pr.new/sveltejs/cli/sv@662

npx https://pkg.pr.new/sveltejs/cli/svelte-migrate@662

commit: 58d39bf

[svelte-docs-bot]

Preview: https://svelte-dev-git-preview-cli-662-svelte.vercel.app/

[jycouet]

This is exciting 🤩

---

I have this one that could show a few things: https://svelte.dev/playground/770bbef086034b9f8e337bab57efe8d8

• App.svelte => /src/routes/+page.svelte
• Footer.svelte => /src/routes/Footer.svelte easy like this, all imports are still working.
• import * as changeCase from "change-case"; => Need to add this in package.json
• Maybe the main layout can be tuned to have a "Playground" style with a link to the playground.

+layout.svelte example

<script lang="ts">
	import favicon from '$lib/assets/favicon.svg';
let { children } = $props();

</script>
svelte:head



</svelte:head>

	
		

			
				
			
			
Playground
		
		

			
				Cases ↗
			
		
	
<main class="content">
	{@render children?.()}
</main>


<style>
	:global(body) {
		margin: 0;
	}

	.layout {
		min-height: 100vh;
		background-color: #1c1e22;
	}

	.navbar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1rem 2rem;
		background-color: #23272f;
		border-bottom: 1px solid #2d3139;
	}

	.nav-left {
		display: flex;
		align-items: center;
		gap: 1rem;
	}

	.svelte-icon {
		display: flex;
		align-items: center;
		text-decoration: none;
		transition: opacity 0.2s ease;
	}

	.svelte-icon:hover {
		opacity: 0.8;
	}

	.title {
		color: #ffffff;
		font-size: 1.5rem;
		font-weight: 600;
		margin: 0;
	}

	.nav-right {
		display: flex;
		align-items: center;
	}

	.playground-link {
		color: #ffffff;
		text-decoration: none;
		font-weight: 500;
		padding: 0.5rem 1rem;
		border-radius: 0.375rem;
		transition: background-color 0.2s ease;
	}

	.playground-link:hover {
		background-color: #2d3139;
	}

	.content {
		padding: 2rem;
		color: #ffffff;
	}
</style>