download packages directly from npm (#1248)

* WIP

* fix

* tidy up

* tidy up

* put npm stuff in separate file

* tidy up

* remove ./

* tidy up

* fix

* lint

* fix

* always use same svelte version

* fix pkg.pr.new versions

* use jsDelivr for more stuff

* remove packages_url stuff

* lint

* gah

* fix `local`

* lint

* gah shut up typescript

* remove unused stuff

* tidy up

* simplify some stuff

* unused

* only create tutorial bundler once

* lint

* tidy up

* unused

* move packages/editor into packages/repl, where it belongs

* lint

* DRY out

* less reliance on globals

* simplify

* tighten up

* tidy up

* fix

* bundler already discards stale results

* drive-by fix

* migrate component

* get rid of `$bundle` store

* tidy up

* better status message

* lint

* reinstate imports array

* lint

* use jsDelivr API instead of fetching package.json

* better error messages

* use onversion mechanism

* remove

* use raw state

* fix

* explanatory comment

Author: Rich-Harris

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