Switch to SolidJS

2025-08-21 17:05:18 -07:00
parent 5796663486
commit d2fd3d7da0
14 changed files with 831 additions and 228 deletions
@@ -7,6 +7,6 @@
  </head>
  <body>
    <div id="app"></div>
-    <script type="module" src="/src/app.ts"></script>
+    <script type="module" src="/src/app.tsx"></script>
  </body>
 </html>
@@ -13,18 +13,17 @@
    "format": "prettier --write ."
  },
  "devDependencies": {
-    "@tsconfig/svelte": "^5.0.4",
    "@types/lodash": "^4.17.20",
    "@types/node": "24.3.0",
    "prettier": "^3.6.2",
    "typescript": "^5.9.2",
-    "vite": "^7.1.1"
+    "vite": "^7.1.1",
+    "vite-plugin-solid": "^2.10.2"
  },
  "dependencies": {
-    "@sveltejs/vite-plugin-svelte": "^6.1.2",
    "codemirror": "^6.0.2",
    "lodash": "^4.17.21",
-    "svelte": "^5.38.1",
+    "solid-js": "^1.9.2",
    "y-codemirror.next": "^0.3.5",
    "yjs": "^13.6.27"
  }
@@ -1,6 +0,0 @@
-import { mount } from 'svelte';
-import App from './components/App.svelte';
-
-const app = document.getElementById('app')!;
-
-mount(App, { target: app });
@@ -0,0 +1,6 @@
+import { render } from 'solid-js/web';
+import App from './components/App';
+
+const app = document.getElementById('app')!;
+
+render(() => <App />, app);
@@ -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}
@@ -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;
@@ -0,0 +1,11 @@
+.file {
+  border: none;
+  background: none;
+  text-align: left;
+  width: 100%;
+}
+
+.file:hover {
+  cursor: pointer;
+  background-color: #ddd;
+}
@@ -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}
@@ -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;
@@ -1,5 +0,0 @@
-<script lang="ts">
-    const { file } = $props();
-</script>
-
-<p>You are editing {file}.</p>
@@ -0,0 +1,9 @@
+interface EditorProps {
+  file: string;
+}
+
+function Editor(props: EditorProps) {
+  return <p>You are editing {props.file}.</p>;
+}
+
+export default Editor;
@@ -1,6 +1,4 @@
 {
-  "extends": "@tsconfig/svelte/tsconfig.json",
-
  "compilerOptions": {
    "target": "es2022",
    "useDefineForClassFields": true,
@@ -18,7 +16,10 @@
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
-    "forceConsistentCasingInFileNames": true
+    "forceConsistentCasingInFileNames": true,
+
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js"
  },
  "include": ["src"]
 }
@@ -1,5 +1,5 @@
-import { svelte } from '@sveltejs/vite-plugin-svelte';
 import { defineConfig } from 'vite';
+import solidPlugin from 'vite-plugin-solid';
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';

@@ -20,5 +20,5 @@ export default defineConfig({
  server: {
    port: 3000,
  },
-  plugins: [svelte()],
+  plugins: [solidPlugin()],
 });