chore(repl): Static adapter (#525)

* Push

* Fix accessibility issues

Author: PuruVJ

packages/repl/package.json

@@ -36,7 +36,7 @@
 	],
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build && npm run package",
+		"build": "vite build",
 		"preview": "vite preview",
 		"package": "svelte-kit sync && svelte-package && publint",
 		"package:watch": "svelte-package --watch",
@@ -49,7 +49,7 @@
 	},
 	"devDependencies": {
 		"@fontsource/fira-mono": "^5.0.3",
-		"@sveltejs/adapter-auto": "^2.1.0",
+		"@sveltejs/adapter-static": "^2.0.2",
 		"@sveltejs/kit": "^1.20.5",
 		"@sveltejs/package": "^2.1.0",
 		"@types/marked": "^5.0.0",

packages/repl/src/lib/CodeMirror.svelte

@@ -15,8 +15,8 @@
 	/** @type {import('./types').StartOrEnd | null} */
 	export let errorLoc = null;
 
-	/** @type {import('@codemirror/lint').LintSource} */
-	export let diagnostics;
+	/** @type {import('@codemirror/lint').LintSource | undefined} */
+	export let diagnostics = undefined;
 
 	export let readonly = false;
 	export let tab = true;

packages/repl/src/lib/Input/ComponentSelector.svelte

@@ -204,6 +204,7 @@
 
 <div class="component-selector">
 	{#if $files.length}
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div class="file-tabs" on:dblclick={add_new}>
 			{#each $files as file, index (file.name)}
 				{@const filename = get_full_filename(file)}
@@ -256,6 +257,7 @@
 							/>
 						{/if}
 					{:else}
+						<!-- svelte-ignore a11y-no-static-element-interactions -->
 						<div
 							class="editable"
 							title="edit component name"
@@ -265,6 +267,7 @@
 							{file.name}.{file.type}{#if show_modified && file.modified}*{/if}
 						</div>
 
+						<!-- svelte-ignore a11y-no-static-element-interactions -->
 						<span
 							class="remove"
 							on:click={() => remove(filename)}

packages/repl/src/lib/Message.svelte

@@ -29,15 +29,15 @@
 	}
 </script>
 
-<div transition:slide|local={{ duration: 100 }} class="message {kind}" class:truncate>
+<div transition:slide={{ duration: 100 }} class="message {kind}" class:truncate>
 	{#if details}
-		<p
+		<button
 			class:navigable={details.filename}
 			on:click={() => go_to_warning_pos(details)}
 			on:keyup={(e) => e.key === ' ' && go_to_warning_pos(details)}
 		>
 			{message(details)}
-		</p>
+		</button>
 	{:else}
 		<slot />
 	{/if}
@@ -81,8 +81,9 @@
 		text-overflow: ellipsis;
 	}
 
-	p {
+	button {
 		margin: 0;
+		text-align: start;
 	}
 
 	.error {

packages/repl/src/lib/Output/Output.svelte

@@ -37,7 +37,7 @@
 
 	/**
 	 * @param {import('$lib/types').File} file
-	 * @param {import('svelte/types/compiler').CompileOptions} options
+	 * @param {import('svelte/compiler').CompileOptions} options
 	 */
 	export async function set(file, options) {
 		selected_type = file.type;
@@ -65,7 +65,7 @@
 
 	/**
 	 * @param {import('$lib/types').File} selected
-	 * @param {import('svelte/types/compiler').CompileOptions} options
+	 * @param {import('svelte/compiler').CompileOptions} options
 	 */
 	export async function update(selected, options) {
 		if (/(js|json)/.test(selected.type)) return;

packages/repl/src/lib/Output/PaneWithPanel.svelte

@@ -45,10 +45,10 @@
 	</section>
 
 	<section slot="b">
-		<div class="panel-header" on:click={toggle} on:keyup={(e) => e.key === ' ' && toggle()}>
+		<button class="panel-header" on:click={toggle}>
 			<span class="panel-heading">{panel}</span>
 			<slot name="panel-header" />
-		</div>
+		</button>
 
 		<div class="panel-body">
 			<slot name="panel-body" />

packages/repl/src/lib/Output/console/ConsoleLine.svelte

@@ -15,25 +15,19 @@
 	<ConsoleTable data={log.args[0]} columns={log.args[1]} />
 {/if}
 
-<div
+<button
 	class="log console-{log.level}"
 	style="padding-left: {level * 15}px"
 	on:click={log.level === 'group' ? toggle_group_collapse : undefined}
-	on:keyup={(e) => (e.key === ' ' && log.level === 'group' ? toggle_group_collapse() : undefined)}
 >
 	{#if log.count && log.count > 1}
 		<span class="count">{log.count}x</span>
 	{/if}
 
 	{#if log.level === 'trace' || log.level === 'assert'}
-		<div
-			class="arrow"
-			class:expand={!log.collapsed}
-			on:click={toggle_group_collapse}
-			on:keyup={(e) => e.key === ' ' && toggle_group_collapse()}
-		>
+		<button class="arrow" class:expand={!log.collapsed} on:click={toggle_group_collapse}>
 			▶
-		</div>
+		</button>
 	{/if}
 
 	{#if log.level === 'assert'}
@@ -61,7 +55,7 @@
 	{#each new Array(level - 1) as _, idx}
 		<div class="outline" style="left: {idx * 15 + 15}px" />
 	{/each}
-</div>
+</button>
 
 {#if log.level === 'group' && !log.collapsed}
 	{#each log.logs ?? [] as childLog}

packages/repl/src/routes/+layout.server.js

@@ -0,0 +1 @@
+export const prerender = true;

packages/repl/svelte.config.js

@@ -1,8 +1,8 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-static';
 
 /** @type {import('@sveltejs/kit').Config} */
 export default {
 	kit: {
-		adapter: adapter()
+		adapter: adapter({})
 	}
 };