Switch to SolidJS

src/app.ts

@@ -1,6 +0,0 @@
-import { mount } from 'svelte';
-import App from './components/App.svelte';
-
-const app = document.getElementById('app')!;
-
-mount(App, { target: app });

src/app.tsx

@@ -0,0 +1,6 @@
+import { render } from 'solid-js/web';
+import App from './components/App';
+
+const app = document.getElementById('app')!;
+
+render(() => <App />, app);

src/components/App.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">
-  import Chooser from "./Chooser.svelte";
-  import Editor from "./Editor.svelte";
-
-  let currentFile: string | null = $state(null);
-</script>
-
-{#if currentFile === null}
-    <Chooser bind:file={currentFile}/>
-{:else}
-    <button onclick={() => currentFile = null}>Back</button>
-    <Editor file={currentFile}/>
-{/if}

src/components/App.tsx

@@ -0,0 +1,19 @@
+import { createSignal, Show } from 'solid-js';
+import Chooser from './Chooser';
+import Editor from './Editor';
+
+function App() {
+  const [currentFile, setCurrentFile] = createSignal<string | null>(null);
+
+  return (
+    <Show
+      when={currentFile()}
+      fallback={<Chooser file={currentFile} setFile={setCurrentFile} />}
+    >
+      <button onclick={() => setCurrentFile(null)}>Back</button>
+      <Editor file={currentFile()!} />
+    </Show>
+  );
+}
+
+export default App;

src/components/Chooser.css

@@ -0,0 +1,11 @@
+.file {
+  border: none;
+  background: none;
+  text-align: left;
+  width: 100%;
+}
+
+.file:hover {
+  cursor: pointer;
+  background-color: #ddd;
+}

src/components/Chooser.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-    const files = ["foo", "bar", "baz"];
-    let { file = $bindable() } = $props();
-</script>
-
-<style>
-    .file {
-        border: none;
-        background: none;
-        text-align: left;
-        width: 100%;
-    }
-
-    .file:hover {
-        cursor: pointer;
-        background-color: #ddd;
-    }
-</style>
-
-{#each files as availableFile (availableFile)}
-    <button class="file" onclick={() => file = availableFile}>
-        {availableFile}
-        {availableFile === file ? "(*)" : ""}
-    </button>
-{/each}

src/components/Chooser.tsx

@@ -0,0 +1,26 @@
+import { For, type Accessor, type Setter } from 'solid-js';
+import './Chooser.css';
+
+interface ChooserProps {
+  file: Accessor<string | null>;
+  setFile: Setter<string | null>;
+}
+
+function Chooser(props: ChooserProps) {
+  const files = ['foo', 'bar', 'baz'];
+
+  return (
+    <>
+      <For each={files}>
+        {(availableFile) => (
+          <button class="file" onclick={() => props.setFile(availableFile)}>
+            {availableFile}
+            {availableFile === props.file() ? '(*)' : ''}
+          </button>
+        )}
+      </For>
+    </>
+  );
+}
+
+export default Chooser;

src/components/Editor.svelte

@@ -1,5 +0,0 @@
-<script lang="ts">
-    const { file } = $props();
-</script>
-
-<p>You are editing {file}.</p>

src/components/Editor.tsx

@@ -0,0 +1,9 @@
+interface EditorProps {
+  file: string;
+}
+
+function Editor(props: EditorProps) {
+  return <p>You are editing {props.file}.</p>;
+}
+
+export default Editor;