lots of work
This commit is contained in:
Chris Kruining
parent
552ba7f3c9
commit
75bd06cac3
19 changed files with 523 additions and 314 deletions
13
src/routes/(editor)/edit.module.css
Normal file
13
src/routes/(editor)/edit.module.css
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
.root {
|
||||
display: grid;
|
||||
grid: 100% / auto 1fr;
|
||||
|
||||
& > aside {
|
||||
z-index: 1;
|
||||
|
||||
& > ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,11 @@
|
|||
import { createCommand, Menu, Modifier } from "~/features/menu";
|
||||
import { createEffect, createResource, createSignal, onMount } from "solid-js";
|
||||
import { Entry, Grid, load, useFiles } from "~/features/file";
|
||||
import "./edit.css";
|
||||
|
||||
interface RawEntry extends Record<string, RawEntry | string> { }
|
||||
import { Menu } from "~/features/menu";
|
||||
import { Sidebar } from "~/components/sidebar";
|
||||
import { Component, createEffect, createResource, createSignal, For, onMount, Show } from "solid-js";
|
||||
import { Grid, load, useFiles } from "~/features/file";
|
||||
import { createCommand, Modifier, noop } from "~/features/command";
|
||||
import { GridContextType } from "~/features/file/grid";
|
||||
import css from "./edit.module.css";
|
||||
import { emptyFolder, FolderEntry, walk as fileTreeWalk, Tree } from "~/components/filetree";
|
||||
|
||||
async function* walk(directory: FileSystemDirectoryHandle, path: string[] = []): AsyncGenerator<{ handle: FileSystemFileHandle, path: string[], lang: string, entries: Map<string, string> }, void, never> {
|
||||
for await (const handle of directory.values()) {
|
||||
|
|
@ -28,11 +30,12 @@ async function* walk(directory: FileSystemDirectoryHandle, path: string[] = []):
|
|||
};
|
||||
|
||||
export default function Edit(props) {
|
||||
const files = useFiles();
|
||||
const [root, { mutate, refetch }] = createResource(() => files.get('root'));
|
||||
const filesContext = useFiles();
|
||||
const [root, { mutate, refetch }] = createResource(() => filesContext.get('root'));
|
||||
const [tree, setFiles] = createSignal<FolderEntry>(emptyFolder);
|
||||
const [columns, setColumns] = createSignal(['these', 'are', 'some', 'columns']);
|
||||
const [rows, setRows] = createSignal<Map<string, { [lang: string]: { value: string, handle: FileSystemFileHandle } }>>(new Map);
|
||||
const [ctx, setCtx] = createSignal<any>();
|
||||
const [ctx, setCtx] = createSignal<GridContextType>();
|
||||
|
||||
// Since the files are stored in indexedDb we need to refetch on the client in order to populate on page load
|
||||
onMount(() => {
|
||||
|
|
@ -44,26 +47,31 @@ export default function Edit(props) {
|
|||
|
||||
if (root.state === 'ready' && directory?.kind === 'directory') {
|
||||
const contents = await Array.fromAsync(walk(directory));
|
||||
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 }) => {
|
||||
for (const [key, value] of entries.entries()) {
|
||||
if (!aggregate.has(key)) {
|
||||
aggregate.set(key, {});
|
||||
const k = [...path, key].join('.');
|
||||
|
||||
if (!aggregate.has(k)) {
|
||||
aggregate.set(k, Object.fromEntries(template));
|
||||
}
|
||||
|
||||
aggregate.get(key)![lang] = { handle, value };
|
||||
aggregate.get(k)![lang] = { handle, value };
|
||||
}
|
||||
|
||||
return aggregate;
|
||||
}, new Map<string, { [lang: string]: { value: string, handle: FileSystemFileHandle } }>());
|
||||
|
||||
setColumns(['key', ...new Set(contents.map(c => c.lang))]);
|
||||
setFiles({ name: '', kind: 'folder', entries: await Array.fromAsync(fileTreeWalk(directory)) });
|
||||
setColumns(['key', ...languages]);
|
||||
setRows(merged);
|
||||
}
|
||||
});
|
||||
|
||||
const commands = {
|
||||
open: createCommand(async () => {
|
||||
open: createCommand('open', async () => {
|
||||
const [fileHandle] = await window.showOpenFilePicker({
|
||||
types: [
|
||||
{
|
||||
|
|
@ -81,27 +89,26 @@ export default function Edit(props) {
|
|||
|
||||
console.log(fileHandle, file, text);
|
||||
}, { key: 'o', modifier: Modifier.Control }),
|
||||
openFolder: createCommand(async () => {
|
||||
openFolder: createCommand('open', async () => {
|
||||
const directory = await window.showDirectoryPicker({ mode: 'readwrite' });
|
||||
|
||||
files.set('root', directory);
|
||||
filesContext.set('root', directory);
|
||||
mutate(directory);
|
||||
}),
|
||||
save: createCommand(() => {
|
||||
console.log('save');
|
||||
save: createCommand('save', () => {
|
||||
console.log('save', rows());
|
||||
}, { key: 's', modifier: Modifier.Control }),
|
||||
saveAll: createCommand(() => {
|
||||
console.log('save all');
|
||||
saveAs: createCommand('saveAs', () => {
|
||||
console.log('save as ...');
|
||||
}, { key: 's', modifier: Modifier.Control | Modifier.Shift }),
|
||||
edit: createCommand(() => {
|
||||
edit: createCommand('edit', () => {
|
||||
}),
|
||||
selectAll: createCommand(() => {
|
||||
console.log(ctx()?.selectAll(true));
|
||||
selectAll: createCommand('selectAll', () => {
|
||||
console.log(ctx(), ctx()?.selection.selectAll(true));
|
||||
}, { key: 'a', modifier: Modifier.Control }),
|
||||
view: createCommand(() => { }),
|
||||
} as const;
|
||||
|
||||
return <>
|
||||
return <div class={css.root}>
|
||||
<Menu.Root>
|
||||
<Menu.Item label="file">
|
||||
<Menu.Item label="open" command={commands.open} />
|
||||
|
|
@ -110,7 +117,7 @@ export default function Edit(props) {
|
|||
|
||||
<Menu.Item label="save" command={commands.save} />
|
||||
|
||||
<Menu.Item label="save all" command={commands.saveAll} />
|
||||
<Menu.Item label="save all" command={commands.saveAs} />
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item label="edit" command={commands.edit} />
|
||||
|
|
@ -119,9 +126,15 @@ export default function Edit(props) {
|
|||
<Menu.Item label="select all" command={commands.selectAll} />
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item label="view" command={commands.view} />
|
||||
<Menu.Item label="view" command={noop} />
|
||||
</Menu.Root>
|
||||
|
||||
<Sidebar as="aside">
|
||||
<Tree entries={tree().entries}>{
|
||||
file => <span>{file().name}</span>
|
||||
}</Tree>
|
||||
</Sidebar>
|
||||
|
||||
<Grid columns={columns()} rows={rows()} context={setCtx} />
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
|
@ -14,29 +14,6 @@ section.index {
|
|||
padding: 1em;
|
||||
padding-block-start: 1.5em;
|
||||
padding-inline-end: 1em;
|
||||
|
||||
& details {
|
||||
& > summary::marker {
|
||||
content: none;
|
||||
color: var(--text) !important;
|
||||
}
|
||||
|
||||
& span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
& ul {
|
||||
padding-inline-start: 0;
|
||||
|
||||
& ul {
|
||||
padding-inline-start: 1.25em;
|
||||
}
|
||||
|
||||
& span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > section {
|
||||
|
|
|
|||
|
|
@ -1,51 +1,32 @@
|
|||
import { Component, createEffect, createMemo, createResource, createSignal, For, onMount, Show } from "solid-js";
|
||||
import { createEffect, createMemo, createResource, createSignal, For, lazy, onMount, Suspense } from "solid-js";
|
||||
import { useFiles } from "~/features/file";
|
||||
import { createCommand, Menu, Modifier } from "~/features/menu";
|
||||
import { AiFillFile, AiFillFolder, AiFillFolderOpen } from "solid-icons/ai";
|
||||
import { Menu } from "~/features/menu";
|
||||
import "./experimental.css";
|
||||
import { createCommand, Modifier } from "~/features/command";
|
||||
import { emptyFolder, FolderEntry, Tree, walk } from "~/components/filetree";
|
||||
import { createStore, produce } from "solid-js/store";
|
||||
import { Tab, Tabs, TabSimple, TabsSimple } from "~/components/tabs";
|
||||
|
||||
interface FileEntry {
|
||||
name: string;
|
||||
kind: 'file';
|
||||
meta: File;
|
||||
interface ExperimentalState {
|
||||
files: File[];
|
||||
numberOfFiles: number;
|
||||
}
|
||||
|
||||
interface FolderEntry {
|
||||
name: string;
|
||||
kind: 'folder';
|
||||
entries: Entry[];
|
||||
}
|
||||
|
||||
type Entry = FileEntry | FolderEntry;
|
||||
|
||||
async function* walk(directory: FileSystemDirectoryHandle, filters: RegExp[] = [], depth = 0): AsyncGenerator<Entry, void, never> {
|
||||
if (depth === 10) {
|
||||
return;
|
||||
}
|
||||
|
||||
for await (const handle of directory.values()) {
|
||||
|
||||
if (filters.some(f => f.test(handle.name))) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (handle.kind === 'file') {
|
||||
yield { name: handle.name, kind: 'file', meta: await handle.getFile() };
|
||||
}
|
||||
else {
|
||||
yield { name: handle.name, kind: 'folder', entries: await Array.fromAsync(walk(handle, filters, depth + 1)) };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default function Index() {
|
||||
export default function Experimental() {
|
||||
const files = useFiles();
|
||||
const [tree, setTree] = createSignal<FolderEntry>();
|
||||
const [content, setContent] = createSignal<string>('');
|
||||
const [tree, setTree] = createSignal<FolderEntry>(emptyFolder);
|
||||
const [state, setState] = createStore<ExperimentalState>({
|
||||
files: [],
|
||||
numberOfFiles: 0,
|
||||
});
|
||||
const [showHiddenFiles, setShowHiddenFiles] = createSignal<boolean>(false);
|
||||
const filters = createMemo<RegExp[]>(() => showHiddenFiles() ? [/^node_modules$/] : [/^node_modules$/, /^\..+$/]);
|
||||
const [root, { mutate, refetch }] = createResource(() => files.get('root'));
|
||||
|
||||
createEffect(() => {
|
||||
setState('numberOfFiles', state.files.length);
|
||||
});
|
||||
|
||||
// Since the files are stored in indexedDb we need to refetch on the client in order to populate on page load
|
||||
onMount(() => {
|
||||
refetch();
|
||||
|
|
@ -62,15 +43,13 @@ export default function Index() {
|
|||
});
|
||||
|
||||
const open = async (file: File) => {
|
||||
const text = await file.text();
|
||||
|
||||
console.log({ file, text });
|
||||
|
||||
return setContent(text);
|
||||
setState('files', produce(files => {
|
||||
files.push(file);
|
||||
}));
|
||||
};
|
||||
|
||||
const commands = {
|
||||
open: createCommand(async () => {
|
||||
open: createCommand('open', async () => {
|
||||
const [fileHandle] = await window.showOpenFilePicker({
|
||||
types: [
|
||||
{
|
||||
|
|
@ -88,7 +67,7 @@ export default function Index() {
|
|||
|
||||
console.log(fileHandle, file, text);
|
||||
}, { key: 'o', modifier: Modifier.Control }),
|
||||
openFolder: createCommand(async () => {
|
||||
openFolder: createCommand('openFolder', async () => {
|
||||
const directory = await window.showDirectoryPicker({ mode: 'readwrite' });
|
||||
const entries = await Array.fromAsync(walk(directory, filters()));
|
||||
|
||||
|
|
@ -97,45 +76,19 @@ export default function Index() {
|
|||
|
||||
setTree({ name: '', kind: 'folder', entries });
|
||||
}),
|
||||
save: createCommand(() => {
|
||||
save: createCommand('save', () => {
|
||||
console.log('save');
|
||||
}, { key: 's', modifier: Modifier.Control }),
|
||||
saveAll: createCommand(() => {
|
||||
saveAll: createCommand('save all', () => {
|
||||
console.log('save all');
|
||||
}, { key: 's', modifier: Modifier.Control | Modifier.Shift }),
|
||||
edit: createCommand(() => { }),
|
||||
selection: createCommand(() => { }),
|
||||
view: createCommand(() => { }),
|
||||
} as const;
|
||||
|
||||
const Tree: Component<{ entries: Entry[] }> = (props) => {
|
||||
return <ul style="display: flex; flex-direction: column; list-style: none;">
|
||||
<For each={props.entries}>{
|
||||
(entry, index) => <li style={`order: ${(entry.kind === 'file' ? 200 : 100) + index()}`}>
|
||||
<Show when={entry.kind === 'folder' ? entry : undefined}>{
|
||||
folder => <Folder folder={folder()} />
|
||||
}</Show>
|
||||
const Content = lazy(async () => {
|
||||
const text = Promise.resolve('this is text');
|
||||
|
||||
<Show when={entry.kind === 'file' ? entry : undefined}>{
|
||||
file => <span on:pointerdown={() => {
|
||||
console.log(`lets open '${file().name}'`);
|
||||
|
||||
open(file().meta);
|
||||
}}><AiFillFile /> {file().name}</span>
|
||||
}</Show>
|
||||
</li>
|
||||
}</For>
|
||||
</ul>
|
||||
}
|
||||
|
||||
const Folder: Component<{ folder: FolderEntry }> = (props) => {
|
||||
const [open, setOpen] = createSignal(false);
|
||||
|
||||
return <details open={open()} on:toggle={() => setOpen(o => !o)}>
|
||||
<summary><Show when={open()} fallback={<AiFillFolder />}><AiFillFolderOpen /></Show> {props.folder.name}</summary>
|
||||
<Tree entries={props.folder.entries} />
|
||||
</details>;
|
||||
};
|
||||
return { default: () => <>{text}</> };
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -149,24 +102,26 @@ export default function Index() {
|
|||
|
||||
<Menu.Item label="save all" command={commands.saveAll} />
|
||||
</Menu.Item>
|
||||
|
||||
<Menu.Item label="edit" command={commands.edit} />
|
||||
|
||||
<Menu.Item label="selection" command={commands.selection} />
|
||||
|
||||
<Menu.Item label="view" command={commands.view} />
|
||||
</Menu.Root>
|
||||
|
||||
<section class="index">
|
||||
<aside>
|
||||
<label><input type="checkbox" on:input={() => setShowHiddenFiles(v => !v)} />Show hidden files</label>
|
||||
<Show when={tree()}>{
|
||||
tree => <Tree entries={tree().entries} />
|
||||
}</Show>
|
||||
<Tree entries={tree().entries}>{
|
||||
file => <span on:dblclick={() => open(file().meta)}>{file().name}</span>
|
||||
}</Tree>
|
||||
</aside>
|
||||
|
||||
<section>
|
||||
<pre>{content()}</pre>
|
||||
<TabsSimple>
|
||||
<For each={state.files}>{
|
||||
file => <TabSimple label={file.name}>
|
||||
<pre>
|
||||
<Suspense><Content /></Suspense>
|
||||
</pre>
|
||||
</TabSimple>
|
||||
}</For>
|
||||
</TabsSimple>
|
||||
</section>
|
||||
</section>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { Component, createEffect, createMemo, createResource, createSignal, For, onMount, Show } from "solid-js";
|
||||
import { useFiles } from "~/features/file";
|
||||
import { createCommand, Menu, Modifier } from "~/features/menu";
|
||||
import { AiFillFile, AiFillFolder, AiFillFolderOpen } from "solid-icons/ai";
|
||||
import "./index.css";
|
||||
import { A } from "@solidjs/router";
|
||||
|
|
@ -40,104 +39,6 @@ async function* walk(directory: FileSystemDirectoryHandle, filters: RegExp[] = [
|
|||
}
|
||||
|
||||
export default function Index() {
|
||||
const files = useFiles();
|
||||
const [tree, setTree] = createSignal<FolderEntry>();
|
||||
const [content, setContent] = createSignal<string>('');
|
||||
const [showHiddenFiles, setShowHiddenFiles] = createSignal<boolean>(false);
|
||||
const filters = createMemo<RegExp[]>(() => showHiddenFiles() ? [/^node_modules$/] : [/^node_modules$/, /^\..+$/]);
|
||||
const [root, { mutate, refetch }] = createResource(() => files.get('root'));
|
||||
|
||||
// Since the files are stored in indexedDb we need to refetch on the client in order to populate on page load
|
||||
onMount(() => {
|
||||
refetch();
|
||||
});
|
||||
|
||||
createEffect(async () => {
|
||||
const directory = root();
|
||||
|
||||
if (root.state === 'ready' && directory?.kind === 'directory') {
|
||||
const entries = await Array.fromAsync(walk(directory, filters()));
|
||||
|
||||
setTree({ name: '', kind: 'folder', entries });
|
||||
}
|
||||
});
|
||||
|
||||
const open = async (file: File) => {
|
||||
const text = await file.text();
|
||||
|
||||
console.log({ file, text });
|
||||
|
||||
return setContent(text);
|
||||
};
|
||||
|
||||
const commands = {
|
||||
open: createCommand(async () => {
|
||||
const [fileHandle] = await window.showOpenFilePicker({
|
||||
types: [
|
||||
{
|
||||
description: "JSON File(s)",
|
||||
accept: {
|
||||
"application/json": [".json", ".jsonp", ".jsonc"],
|
||||
},
|
||||
}
|
||||
],
|
||||
excludeAcceptAllOption: true,
|
||||
multiple: true,
|
||||
});
|
||||
const file = await fileHandle.getFile();
|
||||
const text = await file.text();
|
||||
|
||||
console.log(fileHandle, file, text);
|
||||
}, { key: 'o', modifier: Modifier.Control }),
|
||||
openFolder: createCommand(async () => {
|
||||
const directory = await window.showDirectoryPicker({ mode: 'readwrite' });
|
||||
const entries = await Array.fromAsync(walk(directory, filters()));
|
||||
|
||||
files.set('root', directory);
|
||||
mutate(directory);
|
||||
|
||||
setTree({ name: '', kind: 'folder', entries });
|
||||
}),
|
||||
save: createCommand(() => {
|
||||
console.log('save');
|
||||
}, { key: 's', modifier: Modifier.Control }),
|
||||
saveAll: createCommand(() => {
|
||||
console.log('save all');
|
||||
}, { key: 's', modifier: Modifier.Control | Modifier.Shift }),
|
||||
edit: createCommand(() => { }),
|
||||
selection: createCommand(() => { }),
|
||||
view: createCommand(() => { }),
|
||||
} as const;
|
||||
|
||||
const Tree: Component<{ entries: Entry[] }> = (props) => {
|
||||
return <ul style="display: flex; flex-direction: column; list-style: none;">
|
||||
<For each={props.entries}>{
|
||||
(entry, index) => <li style={`order: ${(entry.kind === 'file' ? 200 : 100) + index()}`}>
|
||||
<Show when={entry.kind === 'folder' ? entry : undefined}>{
|
||||
folder => <Folder folder={folder()} />
|
||||
}</Show>
|
||||
|
||||
<Show when={entry.kind === 'file' ? entry : undefined}>{
|
||||
file => <span on:pointerdown={() => {
|
||||
console.log(`lets open '${file().name}'`);
|
||||
|
||||
open(file().meta);
|
||||
}}><AiFillFile /> {file().name}</span>
|
||||
}</Show>
|
||||
</li>
|
||||
}</For>
|
||||
</ul>
|
||||
}
|
||||
|
||||
const Folder: Component<{ folder: FolderEntry }> = (props) => {
|
||||
const [open, setOpen] = createSignal(false);
|
||||
|
||||
return <details open={open()} on:toggle={() => setOpen(o => !o)}>
|
||||
<summary><Show when={open()} fallback={<AiFillFolder />}><AiFillFolderOpen /></Show> {props.folder.name}</summary>
|
||||
<Tree entries={props.folder.entries} />
|
||||
</details>;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1>Hi, welcome!</h1>
|
||||
|
|
@ -145,6 +46,7 @@ export default function Index() {
|
|||
|
||||
<ul>
|
||||
<li><A href="/edit">Start editing</A></li>
|
||||
<li><A href="/experimental">Try new features</A></li>
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue