cmounce/clementine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch to SolidJS

Browse Source
This commit is contained in:
Chris Mounce
2025-08-21 17:05:18 -07:00
parent 5796663486
commit d2fd3d7da0
14 changed files with 831 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.html
+1 -1
View File
@@ -7,6 +7,6 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/app.ts"></script> <script type="module" src="/src/app.tsx"></script>
</body> </body>
</html> </html>
package-lock.json
Generated
+750 -169
View File
File diff suppressed because it is too large Load Diff
package.json
+3 -4
View File
@@ -13,18 +13,17 @@
"format": "prettier --write ." "format": "prettier --write ."
}, },
"devDependencies": { "devDependencies": {
"@tsconfig/svelte": "^5.0.4",
"@types/lodash": "^4.17.20", "@types/lodash": "^4.17.20",
"@types/node": "24.3.0", "@types/node": "24.3.0",
"prettier": "^3.6.2", "prettier": "^3.6.2",
"typescript": "^5.9.2", "typescript": "^5.9.2",
"vite": "^7.1.1" "vite": "^7.1.1",
"vite-plugin-solid": "^2.10.2"
}, },
"dependencies": { "dependencies": {
"@sveltejs/vite-plugin-svelte": "^6.1.2",
"codemirror": "^6.0.2", "codemirror": "^6.0.2",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"svelte": "^5.38.1", "solid-js": "^1.9.2",
"y-codemirror.next": "^0.3.5", "y-codemirror.next": "^0.3.5",
"yjs": "^13.6.27" "yjs": "^13.6.27"
} }
src/app.ts
-6
View File
@@ -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
+6
View File
@@ -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
-13
View File
@@ -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
+19
View File
@@ -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
+11
View File
@@ -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
-25
View File
@@ -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
+26
View File
@@ -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
-5
View File
@@ -1,5 +0,0 @@
<script lang="ts">
const { file } = $props();
</script>
<p>You are editing {file}.</p>
src/components/Editor.tsx
+9
View File
@@ -0,0 +1,9 @@
interface EditorProps {
file: string;
}
function Editor(props: EditorProps) {
return <p>You are editing {props.file}.</p>;
}
export default Editor;
tsconfig.json
+4 -3
View File
@@ -1,6 +1,4 @@
{ {
"extends": "@tsconfig/svelte/tsconfig.json",
"compilerOptions": { "compilerOptions": {
"target": "es2022", "target": "es2022",
"useDefineForClassFields": true, "useDefineForClassFields": true,
@@ -18,7 +16,10 @@
"noUnusedLocals": true, "noUnusedLocals": true,
"noUnusedParameters": true, "noUnusedParameters": true,
"noFallthroughCasesInSwitch": true, "noFallthroughCasesInSwitch": true,
"forceConsistentCasingInFileNames": true "forceConsistentCasingInFileNames": true,
"jsx": "preserve",
"jsxImportSource": "solid-js"
}, },
"include": ["src"] "include": ["src"]
} }
vite.config.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { defineConfig } from 'vite'; import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import { dirname, resolve } from 'node:path'; import { dirname, resolve } from 'node:path';
import { fileURLToPath } from 'node:url'; import { fileURLToPath } from 'node:url';
@@ -20,5 +20,5 @@ export default defineConfig({
server: { server: {
port: 3000, port: 3000,
}, },
plugins: [svelte()], plugins: [solidPlugin()],
}); });