chore(repl): Static adapter (sveltejs#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({})
 }
 };