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

made more parts reactive, fixing a bug with newly created files

Browse source
This commit is contained in:
Chris Kruining 2025-02-07 11:04:17 +11:00
parent e059b85581
commit 7ffdb2f51b
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
2 changed files with 95 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

102
src/features/file/helpers.ts
View file

@ -1,8 +1,9 @@
import { Accessor, createResource, InitializedResource, onCleanup } from "solid-js";
import { Accessor, createEffect, createResource, createSignal, InitializedResource, onCleanup, Resource } from "solid-js";
import { json } from "./parser";
import { filter } from "~/utilities";
interface Files extends Record<string, { handle: FileSystemFileHandle, file: File }> { }
interface Contents extends Map<string, Map<string, string>> { }
export const read = (file: File): Promise<Map<string, string> | undefined> => {
switch (file.type) {
@ -12,12 +13,10 @@ export const read = (file: File): Promise<Map<string, string> | undefined> => {
}
};
export const readFiles = (directory: Accessor<FileSystemDirectoryHandle>): InitializedResource<Files> => {
const [value, { refetch }] = createResource<Files>(async (_, { value: prev }) => {
prev ??= {};
export const readFiles = (directory: Accessor<FileSystemDirectoryHandle>): Accessor<Files> => {
return createPolled<FileSystemDirectoryHandle, Files>(directory, async (directory, prev) => {
const next: Files = Object.fromEntries(await Array.fromAsync(
filter(directory().values(), (handle): handle is FileSystemFileHandle => handle.kind === 'file' && handle.name.endsWith('.json')),
filter(directory.values(), (handle): handle is FileSystemFileHandle => handle.kind === 'file' && handle.name.endsWith('.json')),
async handle => [await handle.getUniqueId(), { file: await handle.getFile(), handle }]
));
@ -37,15 +36,92 @@ export const readFiles = (directory: Accessor<FileSystemDirectoryHandle>): Initi
}
return prev;
}, { initialValue: {} })
}, { interval: 1000, initialValue: {} });
};
const interval = setInterval(() => {
refetch();
}, 1000);
const LAST_MODIFIED = Symbol('lastModified');
export const contentsOf = (directory: Accessor<FileSystemDirectoryHandle>): Accessor<Contents> => {
return createPolled<FileSystemDirectoryHandle, Contents>(directory, async (directory, prev) => {
const files = await Array.fromAsync(walk(directory));
onCleanup(() => {
clearInterval(interval);
const next = async () => new Map(await Promise.all(files.map(async ({ id, file }) => {
const entries = (await read(file))!;
entries[LAST_MODIFIED] = file.lastModified;
return [id, entries] as const;
})));
if (files.length !== prev.size) {
return next();
}
if (files.every(({ id }) => prev.has(id)) === false) {
return next();
}
if (files.every(({ id, file }) => prev.get(id)![LAST_MODIFIED] === file.lastModified) === false) {
return next();
}
return prev;
}, { interval: 1000, initialValue: new Map() });
};
function createPolled<S, T>(source: Accessor<S>, callback: (source: S, prev: T) => T | Promise<T>, options: { interval: number, initialValue: T }): Accessor<T> {
const { interval, initialValue } = options;
const [value, setValue] = createSignal(initialValue);
const tick = createTicker(interval);
createEffect(() => {
tick();
const s = source();
(async () => {
const prev = value();
const next: T = await callback(s, prev);
setValue(() => next);
})();
});
return value;
};
};
function createTicker(interval: number): Accessor<boolean> {
const [tick, update] = createSignal(true);
const intervalId = setInterval(() => {
update(v => !v);
}, interval);
onCleanup(() => {
clearInterval(intervalId);
});
return tick;
}
async function* walk(directory: FileSystemDirectoryHandle, path: string[] = []): AsyncGenerator<{ id: string, handle: FileSystemFileHandle, path: string[], file: File }, void, never> {
for await (const handle of directory.values()) {
if (handle.kind === 'directory') {
yield* walk(handle, [...path, handle.name]);
continue;
}
if (!handle.name.endsWith('.json')) {
continue;
}
const id = await handle.getUniqueId();
const file = await handle.getFile();
yield { id, handle, path, file };
}
};
declare global {
interface Map<K, V> {
[LAST_MODIFIED]: number;
}
}

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

@ -1,5 +1,5 @@
import { Component, createEffect, createMemo, createResource, createSignal, For, onMount, ParentProps, Setter, Show } from "solid-js";
import { Created, filter, MutarionKind, Mutation, splitAt } from "~/utilities";
import { Created, MutarionKind, Mutation, splitAt } from "~/utilities";
import { Sidebar } from "~/components/sidebar";
import { Menu } from "~/features/menu";
import { Grid, read, readFiles, TreeProvider, Tree, useFiles } from "~/features/file";
@ -14,32 +14,10 @@ import { makePersisted } from "@solid-primitives/storage";
import { writeClipboard } from "@solid-primitives/clipboard";
import { destructure } from "@solid-primitives/destructure";
import css from "./edit.module.css";
import { contentsOf } from "~/features/file/helpers";
const isInstalledPWA = !isServer && window.matchMedia('(display-mode: standalone)').matches;
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]);
continue;
}
if (!handle.name.endsWith('.json')) {
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 { id, handle, path, lang, entries };
}
}
};
interface Entries extends Map<string, { key: string, } & Record<string, { value: string, handle: FileSystemFileHandle, id: string }>> { };
export default function Edit(props: ParentProps) {
@ -74,25 +52,17 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
const { t } = useI18n();
const tabs = createMemo(() => filesContext.files().map(({ key, handle }) => {
const [api, setApi] = createSignal<(GridApi & { addLocale(locale: string): void })>();
const [api, setApi] = createSignal<GridApi>();
const [entries, setEntries] = createSignal<Entries>(new Map());
const [files, setFiles] = createSignal<Map<string, { id: string, handle: FileSystemFileHandle }>>(new Map());
(async () => {
const files = await Array.fromAsync(
filter(handle.values(), entry => entry.kind === 'file'),
async file => [file.name.split('.').at(0)!, { handle: file, id: await file.getUniqueId() }] as const
);
setFiles(new Map(files));
})();
const __files = readFiles(() => handle);
const files = createMemo(() => new Map(Object.entries(__files()).map(([id, { file, handle }]) => [file.name.split('.').at(0)!, { handle, id }])));
return ({ key, handle, api, setApi, entries, setEntries, files });
}));
const [active, setActive] = makePersisted(createSignal<string>(), { name: 'edit__aciveTab' });
const [contents, setContents] = createSignal<Map<string, Map<string, string>>>(new Map());
const [newKeyPrompt, setNewKeyPrompt] = createSignal<PromptApi>();
const [newLanguagePrompt, setNewLanguagePrompt] = createSignal<PromptApi>();
const contents = contentsOf(() => props.root);
const tab = createMemo(() => {
const name = active();
@ -225,14 +195,6 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
return existingFiles.concat(newFiles);
});
createEffect(() => {
const directory = props.root;
(async () => {
setContents(new Map(await Array.fromAsync(walk(directory), ({ id, entries }) => [id, entries] as const)))
})();
});
const commands = {
open: createCommand('page.edit.command.open', async () => {
const directory = await window.showDirectoryPicker({ mode: 'readwrite' });