chris/calque
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

switch over to deep diffing for mutations

Browse source
This commit is contained in:
Chris Kruining 2024-10-21 14:19:39 +02:00
parent 2e3a3e90de
commit 6064fd3b45
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
7 changed files with 228 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

60
src/routes/(editor)/edit.tsx
View file

@ -1,13 +1,14 @@
import { Menu } from "~/features/menu";
import { Sidebar } from "~/components/sidebar";
import { Component, createEffect, createMemo, createResource, createSignal, For, onMount, ParentProps, Show } from "solid-js";
import { Component, createEffect, createMemo, createResource, createSignal, onMount, ParentComponent, ParentProps } from "solid-js";
import { Grid, load, useFiles } from "~/features/file";
import { Command, Context, createCommand, Modifier, noop } from "~/features/command";
import { GridApi, GridContextType } from "~/features/file/grid";
import { GridApi } from "~/features/file/grid";
import { emptyFolder, FolderEntry, walk as fileTreeWalk, Tree, FileEntry } from "~/components/filetree";
import css from "./edit.module.css";
import { emptyFolder, FolderEntry, walk as fileTreeWalk, Tree } from "~/components/filetree";
import { splitAt } from "~/utilities";
async function* walk(directory: FileSystemDirectoryHandle, path: string[] = []): AsyncGenerator<{ handle: FileSystemFileHandle, path: string[], lang: string, entries: Map<string, string> }, void, never> {
async function* walk(directory: FileSystemDirectoryHandle, path: string[] = []): AsyncGenerator<{ id: string, handle: FileSystemFileHandle, path: string[], lang: string, entries: Map<string, string> }, void, never> {
for await (const handle of directory.values()) {
if (handle.kind === 'directory') {
yield* walk(handle, [...path, handle.name]);
@ -19,12 +20,13 @@ async function* walk(directory: FileSystemDirectoryHandle, path: string[] = []):
continue;
}
const id = await handle.getUniqueId();
const file = await handle.getFile();
const lang = file.name.split('.').at(0)!;
const entries = await load(file);
if (entries !== undefined) {
yield { handle, path, lang, entries };
yield { id, handle, path, lang, entries };
}
}
};
@ -33,10 +35,25 @@ export default function Edit(props: ParentProps) {
const filesContext = useFiles();
const [root, { mutate, refetch }] = createResource(() => filesContext?.get('root'));
const [tree, setFiles] = createSignal<FolderEntry>(emptyFolder);
const [columns, setColumns] = createSignal([]);
const [rows, setRows] = createSignal<Map<string, { [lang: string]: { value: string, handle: FileSystemFileHandle } }>>(new Map);
const [columns, setColumns] = createSignal<string[]>([]);
const [rows, setRows] = createSignal<Map<string, Record<string, string>>>(new Map);
const [entries, setEntries] = createSignal<Map<string, Record<string, { id: String, value: string, handle: FileSystemFileHandle }>>>(new Map);
const [api, setApi] = createSignal<GridApi>();
const mutatedFiles = createMemo(() => {
const mutations = api()?.mutations() ?? [];
const files = entries();
return new Set(mutations
.map(mutation => {
const [key, lang] = splitAt(mutation.key, mutation.key.lastIndexOf('.'));
return files.get(key)?.[lang]?.id;
})
.filter(Boolean)
);
});
// Since the files are stored in indexedDb we need to refetch on the client in order to populate on page load
onMount(() => {
refetch();
@ -50,7 +67,7 @@ export default function Edit(props: ParentProps) {
const languages = new Set(contents.map(c => c.lang));
const template = contents.map(({ lang, handle }) => [lang, { handle, value: '' }]);
const merged = contents.reduce((aggregate, { handle, path, lang, entries }) => {
const merged = contents.reduce((aggregate, { id, handle, path, lang, entries }) => {
for (const [key, value] of entries.entries()) {
const k = [...path, key].join('.');
@ -58,18 +75,23 @@ export default function Edit(props: ParentProps) {
aggregate.set(k, Object.fromEntries(template));
}
aggregate.get(k)![lang] = { handle, value };
aggregate.get(k)![lang] = { value, handle, id };
}
return aggregate;
}, new Map<string, { [lang: string]: { value: string, handle: FileSystemFileHandle } }>());
}, new Map<string, Record<string, { id: string, value: string, handle: FileSystemFileHandle }>>());
setFiles({ name: '', kind: 'folder', entries: await Array.fromAsync(fileTreeWalk(directory)) });
setFiles({ name: '', id: '', kind: 'folder', entries: await Array.fromAsync(fileTreeWalk(directory)) });
setColumns(['key', ...languages]);
setRows(merged);
setEntries(merged);
setRows(new Map(merged.entries().map(([key, langs]) => [key, Object.fromEntries(Object.entries(langs).map(([lang, { value }]) => [lang, value]))] as const)));
}
});
createEffect(() => {
mutatedFiles()
});
const commands = {
open: createCommand('open', async () => {
const [fileHandle] = await window.showOpenFilePicker({
@ -96,7 +118,7 @@ export default function Edit(props: ParentProps) {
mutate(directory);
}),
save: createCommand('save', () => {
console.log('save', rows());
console.log('save');
}, { key: 's', modifier: Modifier.Control }),
saveAs: createCommand('save as', (handle?: FileSystemFileHandle) => {
console.log('save as ...', handle);
@ -120,12 +142,6 @@ export default function Edit(props: ParentProps) {
}),
} as const;
const mutated = createMemo(() => Object.values(api()?.rows() ?? {}).filter(row => Object.values(row).some(lang => lang.original !== lang.value)));
createEffect(() => {
console.log('KAAS', mutated());
});
return <div class={css.root}>
<Context.Root commands={[commands.saveAs]}>
<Context.Menu>{
@ -154,7 +170,11 @@ export default function Edit(props: ParentProps) {
<Sidebar as="aside" class={css.sidebar}>
<Tree entries={tree().entries}>{
file => <Context.Handle>{file().name}</Context.Handle>
file => {
const mutated = createMemo(() => mutatedFiles().has(file().id));
return <Context.Handle><span classList={{ [css.mutated]: mutated() }}>{file().name}</span></Context.Handle>;
}
}</Tree>
</Sidebar>