🦋 Changeset detected

Latest commit: 188c9e5

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

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

Open in StackBlitz

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

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

commit: 188c9e5

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

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.

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

</script>
svelte:head

</svelte:head>


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

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.

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

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