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

[manuel3108]

Closes #602

You can now run pnpx https://pkg.pr.new/sveltejs/cli/sv@662 create --from-playground=https://svelte.dev/playground/hello-world. This is currently doing more or less the same the stuff the Download App button in the playground is doing. Apart from that, you can choose additional addons, ts vs js and install deps. External dependencies are auto-detected and installed into the package.json

Todos:

• more (manual) testing
• consider if we should prompt the user before installing external dependencies on the local computer
• handle svelte-?version= parameter from the playground url
• Feedback from dominikg: one thing to remember is that this is untrusted input basically, the playground could reference malicious packages, so installation with --ignore-scripts and making users aware that they have to check the content beforehand would be good.

[changeset-bot]

🦋 Changeset detected

Latest commit: b4b6d33

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: b4b6d33

[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>

[manuel3108]

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

This is perfect, and i was able to get it fully working from the tests.
The only thing remaining here is code optimization and making it work from the core cli, instead from the crete tests.

Maybe the main layout can be tuned to have a "Playground" style with a link to the playground.

Not sure, I'm a fan of this. The current "download app" button does nothing like this. Also, I'm not sure if this provides any additional value to the user, or just causes styling problems because of the added css. We can always add this later if users want this.

[jycouet]

Great progress 🚀🚀🚀 Nice

Maybe the main layout can be tuned to have a "Playground" style with a link to the playground.

Not sure, I'm a fan of this. The current "download app" button does nothing like this. Also, I'm not sure if this provides any additional value to the user, or just causes styling problems because of the added css. We can always add this later if users want this.

The cool thing about a layout like this is that:

• You can have a link back to the playground. so you know where it's coming from.
• with css per component, it should not affect anything
• you can escape from it by just deleting one file
• we can feel that we are "home" in our playgound... locally (with similar style)

Yes, I love this idea 😜
But it can come later too with a flag in or out ;)

Anyhow, very nice job

[manuel3108]

Updated pr description, this is working now. Let me know what you think.

[jycouet]

The result is like this:

Comments in random order:

• I find it strange to have the "Template content" coming from a playground. Maybe +page.svelte should have ONLY <App />, nothing else ?
• I still like the playground layout idea :p
• Maybe a default folder name could be proposed "svelte-playground-slug-name-of-playgound" ?
• Maybe the readme.md could mention the origin of the playground ?
• If some extra deps are needed, prompt it in CLI and add it to readme.md ?

It's probably nitpicking, because it's working well already.
Great work 🎉🎉🎉

[Copilot]

Pull Request Overview

This PR adds functionality to create SvelteKit projects from Svelte playground URLs using the --from-playground flag. Users can now run sv create --from-playground=<url> to generate a project based on playground code with automatic dependency detection and installation.

Key changes:

• Added playground URL validation and parsing functionality
• Implemented automatic detection and installation of external dependencies
• Created comprehensive test suite for playground functionality

Reviewed Changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
rolldown.config.js	Added playground.ts to the build inputs for the create package
packages/create/test/playground.ts	Added comprehensive tests for playground URL validation, parsing, and project creation
packages/create/playground.ts	Core implementation for playground functionality including URL validation, data download, and project setup
packages/create/package.json	Added export for playground module and cli-core dependency
packages/cli/commands/create.ts	Integrated playground functionality into the create command with user prompts and validation
.changeset/brown-comics-take.md	Added changeset entry documenting the new feature

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[manuel3108]

I find it strange to have the "Template content" coming from a playground. Maybe +page.svelte should have ONLY <App />, nothing else ?

Agree, modified.

Maybe a default folder name could be proposed "svelte-playground-slug-name-of-playgound" ?

That would leave us to handle all that characters that cannot be directly translated into a directory name. Also, most of the repls I would personally download would have the name "Hello world (edited)" so I don't think this is super important. Can always be added later without any problems.

Maybe the readme.md could mention the origin of the playground ?

I understand, but I'm hesitant about this. Adding it near the top / somewhere in the middle is going to be hard, adding it at the end is easy, but probably nobody would notice. Would leave this open and wait for user feedback.

• If some extra deps are needed, prompt it in CLI and add it to readme.md ?

Totally agree and implemented

---

The only major thing left is detecting and using the svelte version parameter from the playground url. And more testing. Let me know what you think about the code. Also if you have a 3-5 more real playground urls to test this again, that would be great.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[jycouet]

I did a bit of cleanup in my playgrounds:

• https://svelte.dev/playground/853e2d01359d455798e13c1fdaddff30?version=5.38.3
• https://svelte.dev/playground/99c2cd640b1445dca98ab740781118a0?version=5.38.3
• https://svelte.dev/playground/65a404127d0b4c728515e2de5033fa39?version=5.38.3

Nothing really special.

Maybe the readme.md could mention the origin of the playground ?

I understand, but I'm hesitant about this. Adding it near the top / somewhere in the middle is going to be hard, adding it at the end is easy, but probably nobody would notice. Would leave this open and wait for user feedback.

On top top, it's not that easy ?

[manuel3108]

I just added a final change to support the version query parameter from the playground url. Example: https://svelte.dev/playground/hello-world?version=pr-16711

If everybody agrees, this should be good to go now.

[jycouet]

Looks great 🚀

You want to silently launch without docs? Or you want to add the new option directly?

BTW, how to run docs locally with new changes? 👀

[manuel3108]

You want to silently launch without docs? Or you want to add the new option directly?

Uupps, good catch. Is the description I added to detailed? That reminded me that we were considering adding that command to playground itself. Going to start a thread in discord in a second.

BTW, how to run docs locally with new changes? 👀

Don't! If you really want to here are the docs: https://github.com/sveltejs/svelte.dev/?tab=readme-ov-file#setup
Just push the docs changes to a pr, and the docs-bot will add a comment where you can see your changes. In this case, it's here: https://svelte-dev-git-preview-cli-662-svelte.vercel.app/docs/cli/overview

[manuel3108]

Let's go! If you feel like adding this to the playground, feel free