feat: Generated routes for all test fixtures

Author: bfanger

src/lib/index.ts

@@ -1,4 +1,5 @@
 /// <reference types="./global" />
+
 export { default as hooks } from "./hooks.js";
 export { default as reactify } from "./reactify.js";
 export { default as sveltify } from "./sveltify.svelte.js";

src/routes/fixtures/+page.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  function getFiles() {
+    const modules = import.meta.glob("../../tests/fixtures/*.svelte");
+    return Object.keys(modules).map(
+      (path) => path.match(/([^/]+)\.svelte$/)?.[1],
+    );
+  }
+</script>
+
+<ul>
+  {#each getFiles() as file}
+    <li><a href="/fixtures/{file}">{file}</a></li>
+  {/each}
+</ul>

src/routes/fixtures/[fixture]/+page.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  let { data } = $props();
+</script>
+
+<header>
+  <h1>{data.title}</h1>
+</header>
+<data.Fixture />
+
+<style>
+  header {
+    background: #5c1eba;
+    color: white;
+    padding: 0.6em;
+    border-radius: 8px;
+    text-align: center;
+    margin-bottom: 2em;
+  }
+
+  h1 {
+    font: 24px/1.1 sans-serif;
+    margin: 0;
+  }
+</style>

src/routes/fixtures/[fixture]/+page.ts

@@ -0,0 +1,20 @@
+import type { Component } from "svelte";
+
+export async function load({ params }) {
+  return {
+    title: params.fixture,
+    Fixture: await getModule(params.fixture),
+  };
+}
+
+async function getModule(name: string) {
+  const modules = import.meta.glob("../../../tests/fixtures/*.svelte");
+  const loader = Object.entries(modules).find(
+    ([path]) => path.match(/([^/]+)\.svelte$/)?.[1] === name,
+  );
+  if (!loader) {
+    throw new Error(`Fixture not found: ${name}`);
+  }
+  const module = await loader[1]();
+  return (module as { default: Component }).default;
+}

src/routes/listitem/+page.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import type React from "react";
+
+  const props: React.JSX.IntrinsicElements["div"] = {
+    style: { backgroundColor: "#4c80db" },
+    onClick: () => console.info("clicked"),
+  };
+</script>
+
+<react.div {...props}><span>Hi</span></react.div>