add terminal viewer - closes sveltejs#93 (sveltejs#251)

Co-authored-by: Rich Harris <[email protected]>

Author: Rich-Harris

package.json

@@ -36,6 +36,7 @@
 		"@rich_harris/svelte-split-pane": "^1.0.0",
 		"@webcontainer/api": "^1.0.2",
 		"adm-zip": "^0.5.10",
+		"ansi-to-html": "^0.7.2",
 		"base64-js": "^1.5.1",
 		"marked": "^4.2.12",
 		"monaco-editor": "^0.36.1",

pnpm-lock.yaml

@@ -1,27 +1,24 @@
 import { WebContainer } from '@webcontainer/api';
 import base64 from 'base64-js';
+import AnsiToHtml from 'ansi-to-html';
 import { get_depth } from '../../../utils.js';
 import { ready } from '../common/index.js';
 
+const converter = new AnsiToHtml({
+	fg: 'var(--sk-text-3)'
+});
+
 /** @type {import('@webcontainer/api').WebContainer} Web container singleton */
 let vm;
 
-/** @param {string} label */
-function console_stream(label) {
-	return new WritableStream({
-		write(chunk) {
-			console.log(`[${label}] ${chunk}`);
-		}
-	});
-}
-
 /**
  * @param {import('svelte/store').Writable<string | null>} base
  * @param {import('svelte/store').Writable<Error | null>} error
  * @param {import('svelte/store').Writable<{ value: number, text: string }>} progress
+ * @param {import('svelte/store').Writable<string[]>} logs
  * @returns {Promise<import('$lib/types').Adapter>}
  */
-export async function create(base, error, progress) {
+export async function create(base, error, progress, logs) {
 	if (/safari/i.test(navigator.userAgent) && !/chrome/i.test(navigator.userAgent)) {
 		throw new Error('WebContainers are not supported by Safari');
 	}
@@ -55,9 +52,22 @@ export async function create(base, error, progress) {
 		}
 	});
 
+	const log_stream = () =>
+		new WritableStream({
+			write(chunk) {
+				if (chunk === '\x1B[1;1H') {
+					// clear screen
+					logs.set([]);
+				} else {
+					const log = converter.toHtml(chunk);
+					logs.update(($logs) => [...$logs, log]);
+				}
+			}
+		});
+
 	progress.set({ value: 3 / 5, text: 'unzipping files' });
 	const unzip = await vm.spawn('node', ['unzip.cjs']);
-	unzip.output.pipeTo(console_stream('unzip'));
+	unzip.output.pipeTo(log_stream());
 	const code = await unzip.exit;
 
 	if (code !== 0) {
@@ -101,7 +111,7 @@ export async function create(base, error, progress) {
 
 				// TODO differentiate between stdout and stderr (sets `vite_error` to `true`)
 				// https://github.com/stackblitz/webcontainer-core/issues/971
-				process.output.pipeTo(console_stream('dev'));
+				process.output.pipeTo(log_stream());
 
 				// keep restarting dev server (can crash in case of illegal +files for example)
 				await process.exit;

src/lib/client/adapters/webcontainer/index.js

@@ -39,8 +39,6 @@
 	afterNavigate(async () => {
 		const will_delete = previous_files.some((file) => !(file.name in data.exercise.a));
 
-		console.log({ will_delete });
-
 		if (data.exercise.path !== path || will_delete) paused = true;
 		await reset($files);
 

src/lib/icons/terminal.svg

@@ -1,6 +1,7 @@
 <script>
 	import { createEventDispatcher } from 'svelte';
 	import refresh from '$lib/icons/refresh.svg';
+	import terminal from '$lib/icons/terminal.svg';
 
 	/** @type {string} */
 	export let path;
@@ -24,6 +25,14 @@
 			dispatch('change', { value: e.currentTarget.value });
 		}}
 	/>
+
+	<button
+		disabled={loading}
+		on:click={() => dispatch('toggle_terminal')}
+		aria-label="toggle terminal"
+	>
+		<img src={terminal} alt="Terminal icon" />
+	</button>
 </div>
 
 <style>
@@ -38,6 +47,7 @@
 		padding: 0.8rem;
 		box-sizing: border-box;
 		background: var(--sk-back-4);
+		user-select: none;
 	}
 
 	.chrome button img {
@@ -47,7 +57,7 @@
 		transform: none;
 	}
 
-	.chrome button:active img {
+	.chrome button[aria-label='reload']:active img {
 		transform: rotate(-360deg);
 		transition: none;
 	}

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

@@ -4,7 +4,7 @@
 	import { browser, dev } from '$app/environment';
 	import Chrome from './Chrome.svelte';
 	import Loading from './Loading.svelte';
-	import { base, error, progress, subscribe } from './adapter';
+	import { base, error, logs, progress, subscribe } from './adapter';
 
 	/** @type {import('$lib/types').Exercise} */
 	export let exercise;
@@ -16,6 +16,7 @@
 	let iframe;
 	let loading = true;
 	let initial = true;
+	let terminal_visible = false;
 
 	// reset `path` to `exercise.path` each time, but allow it to be controlled by the iframe
 	let path = exercise.path;
@@ -82,6 +83,9 @@
 	on:refresh={() => {
 		set_iframe_src($base + path);
 	}}
+	on:toggle_terminal={() => {
+		terminal_visible = !terminal_visible;
+	}}
 	on:change={(e) => {
 		if ($base) {
 			const url = new URL(e.detail.value, $base);
@@ -99,6 +103,12 @@
 	{#if paused || loading || $error}
 		<Loading {initial} error={$error} progress={$progress.value} status={$progress.text} />
 	{/if}
+
+	<div class="terminal" class:visible={terminal_visible}>
+		{#each $logs as log}
+			<div>{@html log}</div>
+		{/each}
+	</div>
 </div>
 
 <style>
@@ -122,4 +132,41 @@
 		border: none;
 		background: var(--sk-back-2);
 	}
+
+	.terminal {
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		width: 100%;
+		height: 80%;
+		font-family: var(--font-mono);
+		font-size: var(--sk-text-xs);
+		padding: 1rem;
+		background: white;
+		border-top: 1px solid var(--sk-back-3);
+		transform: translate(0, 100%);
+		transition: transform 0.3s;
+	}
+
+	.terminal::after {
+		--thickness: 6px;
+		--shadow: transparent;
+		content: '';
+		display: block;
+		position: absolute;
+		width: 100%;
+		height: var(--thickness);
+		left: 0;
+		top: calc(-1 * var(--thickness));
+		background-image: linear-gradient(to bottom, transparent, var(--shadow));
+		pointer-events: none;
+	}
+
+	.terminal.visible {
+		transform: none;
+	}
+
+	.terminal.visible::after {
+		--shadow: rgba(0, 0, 0, 0.05);
+	}
 </style>

src/routes/tutorial/[slug]/Chrome.svelte

@@ -12,20 +12,23 @@ export const base = writable(null);
 /** @type {import('svelte/store').Writable<Error | null>} */
 export const error = writable(null);
 
+/** @type {import('svelte/store').Writable<string[]>} */
+export const logs = writable([]);
+
 /** @type {Promise<import('$lib/types').Adapter>} */
 let ready = new Promise(() => {});
 
 if (browser) {
 	ready = new Promise(async (fulfil, reject) => {
 		try {
 			const module = await import('$lib/client/adapters/webcontainer/index.js');
-			const adapter = await module.create(base, error, progress);
+			const adapter = await module.create(base, error, progress, logs);
 
 			fulfil(adapter);
 		} catch (error) {
 			reject(error);
 		}
-	})
+	});
 }
 
 /** @typedef {'reload'} EventName */
@@ -34,27 +37,27 @@ if (browser) {
 let subscriptions = new Map([['reload', new Set()]]);
 
 /**
- * 
- * @param {EventName} event 
- * @param {() => void} callback 
+ *
+ * @param {EventName} event
+ * @param {() => void} callback
  */
 export function subscribe(event, callback) {
 	subscriptions.get(event)?.add(callback);
 
-	return () =>{
+	return () => {
 		subscriptions.get(event)?.delete(callback);
 	};
 }
 
 /**
- * @param {EventName} event 
+ * @param {EventName} event
  */
 function publish(event) {
-	subscriptions.get(event)?.forEach(fn => fn());
+	subscriptions.get(event)?.forEach((fn) => fn());
 }
 
 /**
- * @param {import('$lib/types').Stub[]} files 
+ * @param {import('$lib/types').Stub[]} files
  */
 export async function reset(files) {
 	try {
@@ -81,4 +84,4 @@ export async function update(file) {
 	if (should_reload) {
 		publish('reload');
 	}
-}
+}