download packages directly from npm

apps/svelte.dev/package.json

@@ -38,7 +38,6 @@
 		"d3-geo": "^3.1.0",
 		"d3-geo-projection": "^4.0.0",
 		"do-not-zip": "^1.0.0",
-		"editor": "workspace:*",
 		"flexsearch": "^0.7.43",
 		"flru": "^1.0.2",
 		"port-authority": "^2.0.1",

apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts

@@ -2,44 +2,31 @@ import Bundler from '@sveltejs/repl/bundler';
 // @ts-ignore package exports don't have types
 import * as yootils from 'yootils';
 import type { Adapter } from '$lib/tutorial';
-import type { File, Item } from 'editor';
+import type { File, Item } from '@sveltejs/repl/workspace';
 
-/** Rollup bundler singleton */
-let bundler: Bundler;
+let done = false;
 
 export const state = new (class RollupState {
 	progress = $state.raw({ value: 0, text: 'initialising' });
-	bundle = $state.raw<any>(null);
-})();
-
-/**
- * @returns {Promise<import('$lib/tutorial').Adapter>}
- */
-export async function create(): Promise<Adapter> {
-	bundler?.destroy();
-
-	state.progress = { value: 0, text: 'loading files' };
-
-	let done = false;
-
 	bundler = new Bundler({
-		packages_url: 'https://unpkg.com',
 		svelte_version: 'latest',
-		onstatus(val) {
+		onstatus: (val) => {
 			if (!done && val === null) {
 				done = true;
-				state.progress = { value: 1, text: 'ready' };
+				this.progress = { value: 1, text: 'ready' };
 			}
 		}
 	});
+})();
 
+export async function create(): Promise<Adapter> {
 	state.progress = { value: 0.5, text: 'loading svelte compiler' };
 
 	/** Paths and contents of the currently loaded file stubs */
 	let current_files: Item[] = [];
 
 	async function compile() {
-		state.bundle = await bundler.bundle(
+		state.bundler.bundle(
 			current_files
 				// TODO we can probably remove all the SvelteKit specific stuff from the tutorial content once this settles down
 				.filter((f): f is File => f.name.startsWith('/src/lib/') && f.type === 'file')

apps/svelte.dev/src/lib/tutorial/adapters/webcontainer/index.svelte.ts

@@ -7,7 +7,7 @@ import { get_depth } from '../../../utils/path.js';
 import { escape_html } from '../../../utils/escape.js';
 import { ready } from '../common/index.js';
 import type { Adapter } from '$lib/tutorial';
-import type { Item, File } from 'editor';
+import type { Item, File } from '@sveltejs/repl/workspace';
 
 const converter = new AnsiToHtml({
 	fg: 'var(--sk-fg-3)'

apps/svelte.dev/src/lib/tutorial/index.d.ts

@@ -1,5 +1,5 @@
 import type { Writable } from 'svelte/store';
-import type { File, Directory, Item } from 'editor';
+import type { File, Directory, Item } from '@sveltejs/repl/workspace';
 
 export interface Adapter {
 	/** Returns `false` if the reset was in such a way that a reload of the iframe isn't needed */

apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte

@@ -10,7 +10,7 @@
 	import AppControls from './AppControls.svelte';
 	import { compress_and_encode_text, decode_and_decompress_text } from './gzip.js';
 	import { page } from '$app/state';
-	import type { File } from 'editor';
+	import type { File } from '@sveltejs/repl/workspace';
 
 	let { data } = $props();
 
@@ -23,30 +23,11 @@
 
 	// svelte-ignore non_reactive_update
 	let version = page.url.searchParams.get('version') || 'latest';
-	let is_pr_or_commit_version = version.startsWith('pr-') || version.startsWith('commit-');
 
 	// Hashed URLs are less safe (we can't delete malicious REPLs), therefore
 	// don't allow links to escape the sandbox restrictions
 	const can_escape = browser && !page.url.hash;
 
-	if (version !== 'local' && !is_pr_or_commit_version) {
-		$effect(() => {
-			fetch(`https://unpkg.com/svelte@${version}/package.json`)
-				.then((r) => r.json())
-				.then((pkg) => {
-					if (pkg.version !== version) {
-						version = pkg.version;
-
-						let url = `/playground/${data.gist.id}?version=${version}`;
-						if (location.hash) {
-							url += location.hash;
-						}
-						replaceState(url, {});
-					}
-				});
-		});
-	}
-
 	afterNavigate(() => {
 		name = data.gist.name;
 		set_files();
@@ -244,6 +225,14 @@
 				{onchange}
 				{download}
 				previewTheme={theme.current}
+				onversion={(v) => {
+					if (version === (version = v)) return;
+
+					const url = new URL(location.href);
+					url.searchParams.set('version', v);
+
+					replaceState(url, {});
+				}}
 			/>
 		</div>
 	{/if}

apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte

@@ -7,9 +7,8 @@
 	import type { Gist, User } from '$lib/db/types';
 	import { browser } from '$app/environment';
 	import ModalDropdown from '$lib/components/ModalDropdown.svelte';
-	import { untrack } from 'svelte';
 	import SecondaryNav from '$lib/components/SecondaryNav.svelte';
-	import type { File } from 'editor';
+	import type { File } from '@sveltejs/repl/workspace';
 	import type { Repl } from '@sveltejs/repl';
 
 	interface Props {

apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte

@@ -6,26 +6,13 @@
 	import { mapbox_setup } from '../../../../../config.js';
 	import { page } from '$app/state';
 	import { decode_and_decompress_text } from '../gzip.js';
-	import type { File } from 'editor';
+	import type { File } from '@sveltejs/repl/workspace';
 
 	let { data } = $props();
 
 	let repl = $state() as ReturnType<typeof Repl>;
 
 	let version = page.url.searchParams.get('version') || 'latest';
-	let is_pr_or_commit_version = version.startsWith('pr-') || version.startsWith('commit-');
-
-	if (version !== 'local' && !is_pr_or_commit_version) {
-		$effect(() => {
-			fetch(`https://unpkg.com/svelte@${version}/package.json`)
-				.then((r) => r.json())
-				.then((pkg) => {
-					if (pkg.version !== data.version) {
-						replaceState(`/playground/${data.gist.id}/embed?version=${pkg.version}`, {});
-					}
-				});
-		});
-	}
 
 	// TODO make this munging unnecessary
 	function munge(data: any): File {
@@ -85,6 +72,14 @@
 			injectedJS={mapbox_setup}
 			previewTheme={theme.current}
 			embedded={page.url.searchParams.has('output-only') ? 'output-only' : true}
+			onversion={(v) => {
+				if (version === v) return;
+
+				const url = new URL(location.href);
+				url.searchParams.set('version', v);
+
+				replaceState(url, {});
+			}}
 		/>
 	{/if}
 </div>

apps/svelte.dev/src/routes/tutorial/[...slug]/+page.svelte

@@ -2,7 +2,7 @@
 	import { afterNavigate, beforeNavigate } from '$app/navigation';
 	import { SplitPane } from '@rich_harris/svelte-split-pane';
 	import * as adapter from './adapter.svelte';
-	import { Editor, Workspace } from 'editor';
+	import { Workspace, type Item } from '@sveltejs/repl/workspace';
 	import ContextMenu from './filetree/ContextMenu.svelte';
 	import Filetree from './filetree/Filetree.svelte';
 	import ImageViewer from './ImageViewer.svelte';
@@ -14,7 +14,7 @@
 	import OutputRollup from './OutputRollup.svelte';
 	import { page } from '$app/state';
 	import Controls from './Controls.svelte';
-	import type { Item } from 'editor';
+	import Editor from '@sveltejs/repl/editor';
 	import type { Snapshot } from './$types.js';
 
 	interface Props {

apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte

@@ -4,7 +4,7 @@
 	import ModalDropdown from '$lib/components/ModalDropdown.svelte';
 	import type { Exercise, PartStub } from '$lib/tutorial';
 	import { Checkbox, Icon, Toolbox } from '@sveltejs/site-kit/components';
-	import type { Workspace } from 'editor';
+	import type { Workspace } from '@sveltejs/repl/workspace';
 
 	interface Props {
 		index: PartStub[];

apps/svelte.dev/src/routes/tutorial/[...slug]/ImageViewer.svelte

@@ -1,5 +1,5 @@
 <script>
-	/** @type {import('editor').File | null} */
+	/** @type {import('@sveltejs/repl/workspace').File | null} */
 	export let selected;
 
 	const image_types = new Map([

apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte

@@ -11,7 +11,7 @@
 	import Loading from './Loading.svelte';
 	import { adapter_state, subscribe, reset } from './adapter.svelte';
 	import type { Exercise } from '$lib/tutorial';
-	import type { Workspace } from 'editor';
+	import type { Workspace } from '@sveltejs/repl/workspace';
 
 	interface Props {
 		exercise: Exercise;

apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte

@@ -1,16 +1,11 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
-	// @ts-expect-error TODO types
 	import Viewer from '@sveltejs/repl/viewer';
-	// @ts-expect-error TODO types
 	import Console, { type Log } from '@sveltejs/repl/console';
 	import { theme } from '@sveltejs/site-kit/state';
 	import Chrome from './Chrome.svelte';
 	import Loading from './Loading.svelte';
 	import { adapter_state, update } from './adapter.svelte';
-	import { toStore } from 'svelte/store';
-
-	const bundle = toStore(() => adapter_state.bundle);
 
 	let terminal_visible = $state(false);
 	let logs = $state<Log[]>([]);
@@ -36,9 +31,11 @@
 			relaxed
 			can_escape
 			onLog={(l: Log[]) => (logs = l)}
-			{bundle}
+			bundler={adapter_state.bundler}
 			theme={theme.current}
 			injectedCSS="@import '/tutorial/shared.css';"
+			error={null}
+			status={null}
 		/>
 	{/if}
 

apps/svelte.dev/src/routes/tutorial/[...slug]/adapter.svelte.ts

@@ -3,7 +3,7 @@ import { page } from '$app/stores';
 import type { state as WCState } from '$lib/tutorial/adapters/webcontainer/index.svelte';
 import type { state as RollupState } from '$lib/tutorial/adapters/rollup/index.svelte';
 import type { Adapter } from '$lib/tutorial';
-import type { File, Item } from 'editor';
+import type { File, Item } from '@sveltejs/repl/workspace';
 import { needs_webcontainers } from './shared';
 
 let initial_load = true;
@@ -21,8 +21,8 @@ export const adapter_state = new (class {
 	/** Logs from the web container instance. Irrelevant for Rollup */
 	logs = $derived(wc_state.logs || []);
 
-	/** Result of a rollup compile. Irrelevant for web containers */
-	bundle = $derived(rollup_state.bundle);
+	/** Irrelevant for web containers */
+	bundler = $derived(rollup_state.bundler);
 
 	/** Startup progress */
 	progress = $derived(

apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte

@@ -4,7 +4,7 @@
 	import file_icon from '$lib/icons/file.svg';
 	import { solution } from '../state.svelte';
 	import type { MenuItem } from '$lib/tutorial';
-	import type { File } from 'editor';
+	import type { File } from '@sveltejs/repl/workspace';
 
 	interface Props {
 		file: File;

apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte

@@ -6,7 +6,7 @@
 	import { solution } from '../state.svelte';
 	import { afterNavigate } from '$app/navigation';
 	import type { Exercise } from '$lib/tutorial';
-	import type { Workspace, Item } from 'editor';
+	import type { Workspace, Item } from '@sveltejs/repl/workspace';
 
 	interface Props {
 		exercise: Exercise;

apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Folder.svelte

@@ -8,7 +8,7 @@
 	import folder_open from '$lib/icons/folder-open.svg';
 	import { solution } from '../state.svelte';
 	import type { MenuItem } from '$lib/tutorial';
-	import type { Directory, File as IFile, Item as IItem } from 'editor';
+	import type { Directory, File as IFile, Item as IItem } from '@sveltejs/repl/workspace';
 
 	interface Props {
 		directory: Directory;

apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/context.js

@@ -4,10 +4,10 @@ import { setContext, getContext } from 'svelte';
  * @typedef {{
  *   collapsed: import('svelte/store').Writable<Record<string, boolean>>;
  *   add: (name: string, type: 'file' | 'directory') => Promise<void>;
- *   rename: (stub: import('editor').Item, name: string) => Promise<void>;
- *   remove: (stub: import('editor').Item) => Promise<void>;
+ *   rename: (stub: import('@sveltejs/repl/workspace').Item, name: string) => Promise<void>;
+ *   remove: (stub: import('@sveltejs/repl/workspace').Item) => Promise<void>;
  *   select: (name: string) => void;
- *   workspace: import('editor').Workspace
+ *   workspace: import('@sveltejs/repl/workspace').Workspace
  * }} FileTreeContext
  */
 

apps/svelte.dev/src/routes/tutorial/[...slug]/state.svelte.ts

@@ -1,4 +1,4 @@
 import { writable } from 'svelte/store';
-import type { Item } from 'editor';
+import type { Item } from '@sveltejs/repl/workspace';
 
 export const solution = writable({} as Record<string, Item>);