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

finished the menu and started implementing file IO

Browse source
This commit is contained in:
Chris Kruining 2024-10-02 16:31:23 +02:00
parent 99509c9ba1
commit f860ba70f1
10 changed files with 408 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
bun.lockb
View file

Binary file not shown.

25
package.json
View file

@ -1,20 +1,25 @@
{
"name": "example-basic",
"type": "module",
"dependencies": {
"@solidjs/meta": "^0.29.4",
"@solidjs/router": "^0.14.7",
"@solidjs/start": "^1.0.8",
"dexie": "^4.0.8",
"solid-icons": "^1.1.0",
"solid-js": "^1.9.1",
"vinxi": "^0.4.1"
},
"engines": {
"node": ">=18"
},
"scripts": {
"dev": "vinxi dev",
"build": "vinxi build",
"start": "vinxi start",
"version": "vinxi version"
},
"dependencies": {
"@solidjs/meta": "^0.29.4",
"@solidjs/router": "^0.14.1",
"@solidjs/start": "^1.0.6",
"solid-js": "^1.8.18",
"vinxi": "^0.4.1"
},
"engines": {
"node": ">=18"
"type": "module",
"devDependencies": {
"@types/wicg-file-system-access": "^2023.10.5"
}
}

120
src/app.css
View file

@ -1,17 +1,125 @@
html {
inline-size: 100%;
block-size: 100%;
overflow: clip;
}
body {
inline-size: 100%;
block-size: 100%;
overflow: clip;
margin: 0;
font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
* {
box-sizing: border-box;
}
& .menu-root {
display: grid;
grid-auto-flow: column;
justify-content: start;
position: relative;
gap: .5em;
padding-inline-start: 1em;
block-size: 2em;
background-color: #eee;
& > .logo {
inline-size: 3em;
block-size: 3em;
padding: .75em;
margin-block-end: -1em;
background-color: inherit;
border-radius: .25em;
}
& > div {
display: contents;
}
.menu-item {
padding: .5em 1em;
border: none;
background-color: #eee;
cursor: pointer;
text-align: start;
&:hover {
background-color: #fff;
}
}
.menu-child {
position: fixed;
inset-inline-start: anchor(self-start);
inset-block-start: anchor(end);
grid-auto-flow: row;
place-content: start;
gap: .5em;
padding: .5em 0;
inline-size: max-content;
background-color: #fff;
border: 1px solid #eee;
border-block-start-width: 0;
margin: unset;
&:popover-open {
display: grid;
}
& > .menu-item {
background-color: #fff;
&:hover {
background-color: #f8f8f8;
}
}
}
:popover-open + .menu-item {
background-color: #fff;
}
}
& > main {
block-size: 100%;
padding: 1em;
padding-block-start: 1.5em;
overflow: clip auto;
& details {
& > summary::marker {
content: url('data:image/svg+xml;charset=UTF-8,<svg color="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M880 298.4H521L403.7 186.2a8.15 8.15 0 0 0-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32z"></path></svg>');
}
&[open] > summary::marker {
content: url('data:image/svg+xml;charset=UTF-8,<svg color="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M928 444H820V330.4c0-17.7-14.3-32-32-32H473L355.7 186.2a8.15 8.15 0 0 0-5.5-2.2H96c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h698c13 0 24.8-7.9 29.7-20l134-332c1.5-3.8 2.3-7.9 2.3-12 0-17.7-14.3-32-32-32zm-180 0H238c-13 0-24.8 7.9-29.7 20L136 643.2V256h188.5l119.6 114.4H748V444z"></path></svg>');
}
& span {
cursor: pointer;
}
}
}
}
a {
margin-right: 1rem;
}
main {
text-align: center;
padding: 1em;
margin: 0 auto;
}
h1 {
color: #335d92;
text-transform: uppercase;

65
src/features/file/index.tsx
View file

@ -1,12 +1,67 @@
import { createContext, useContext } from "solid-js";
import Dexie, { EntityTable } from "dexie";
import { Component, createContext, useContext } from "solid-js";
import { isServer } from "solid-js/web";
const FilesContext = createContext();
type Handle = FileSystemFileHandle|FileSystemDirectoryHandle;
export const FilesProvider = (props) => {
return <FilesContext.Provider value={undefined}>{props.children}</FilesContext.Provider>;
interface File {
name: string;
handle: Handle;
}
export const useFiles = () => useContext(FilesContext);
type Store = Dexie & {
files: EntityTable<File, 'name'>;
};
interface FilesContextType {
set(name: string, handle: Handle): Promise<void>;
get(name: string): Promise<Handle|undefined>;
list(): Promise<Handle[]>;
}
const FilesContext = createContext<FilesContextType>();
const clientContext = (): FilesContextType => {
const db = new Dexie('Files') as Store;
db.version(1).stores({
files: 'name, handle'
});
return {
async set(name: string, handle: Handle) {
await db.files.put({ name, handle });
},
async get(name: string) {
return (await db.files.get(name))?.handle;
},
async list() {
const files = await db.files.toArray();
return files.map(f => f.handle)
},
}
};
const serverContext = (): FilesContextType => ({
set(){
return Promise.resolve();
},
get(name: string){
return Promise.resolve(undefined);
},
list(){
return Promise.resolve<Handle[]>([]);
},
});
export const FilesProvider = (props) => {
const ctx = isServer ? serverContext() : clientContext();
return <FilesContext.Provider value={ctx}>{props.children}</FilesContext.Provider>;
}
export const useFiles = () => useContext(FilesContext)!;
export const open = () => {

97
src/features/menu/index.tsx
View file

@ -1,6 +1,5 @@
import { Accessor, Component, For, JSX, ParentComponent, Setter, Show, children, createContext, createMemo, createSignal, createUniqueId, mergeProps, onCleanup, onMount, splitProps, useContext } from "solid-js";
import { Accessor, Component, For, JSX, ParentComponent, Setter, Show, children, createContext, createEffect, createMemo, createSignal, createUniqueId, mergeProps, onCleanup, onMount, splitProps, useContext } from "solid-js";
import { Portal, isServer } from "solid-js/web";
import './style.css';
import { createStore } from "solid-js/store";
export interface MenuContextType {
@ -57,31 +56,13 @@ export const MenuProvider: ParentComponent = (props) => {
const addItems = (items: (Item|ItemWithChildren)[]) => setStore('items', values => {
for (const item of items) {
// const existing = values.get(item.id);
// if(item.children && existing?.children instanceof Map) {
// for (const child of item.children) {
// existing.children.set(child.id, child);
// }
// }
// else if (item.children && existing === undefined){
// values.set(item.id, { ...item, children: new Map(item.children.map(c => [ c.id, c ])) });
// }
// else {
// values.set(item.id, item as Item);
// }
values[item.id] = item;
}
return values;
});
const items = createMemo<(Item|ItemWithChildren)[]>(() =>
Array.from(
Object.values(store.items),
// item => item.children instanceof Map ? { ...item, children: Array.from(item.children.values()) } : item
)
);
const commands = createMemo(() => items().map(item => item.children instanceof Array ? item.children.map(c => c.command) : item.command).flat());
const items = () => Object.values(store.items);
const commands = () => Object.values(store.items).map(item => item.children?.map(c => c.command) ?? item.command).flat();
return <MenuContext.Provider value={{ ref, setRef, addItems, items, commands }}>{props.children}</MenuContext.Provider>;
}
@ -90,7 +71,7 @@ const useMenu = () => {
const context = useContext(MenuContext);
if(context === undefined) {
throw new Error('<Menu /> is called outside of a <MenuProvider />');
throw new Error(`MenuContext is called outside of a <MenuProvider />`);
}
return context;
@ -117,31 +98,81 @@ const Item: Component<ItemProps> = (props) => {
const Root: ParentComponent<{}> = (props) => {
const menu = useMenu();
menu.addItems((isServer
const [ current, setCurrent ] = createSignal<HTMLElement>();
const items = (isServer
? props.children
: props.children?.map(c => c())) ?? [])
: props.children?.map(c => c())) ?? [];
menu.addItems(items)
const close = () => {
const el = current();
if(el) {
el.hidePopover();
setCurrent(undefined);
}
};
const onExecute = (command: Command) => {
return async () => {
await command?.();
close();
}
};
const Button: Component<{ label: string, command: Command }|{ [key: string]: any }> = (props) => {
const [ local, rest ] = splitProps(props, ['label', 'command']);
return <button class="item" on:pointerDown={local.command} {...rest}>{local.label}</button>;
return <button class="menu-item" type="button" on:pointerdown={onExecute(local.command)} {...rest}>{local.label}</button>;
};
return <Portal mount={menu.ref()}>
<For each={menu.items()}>
{(item) => <>
<Button label={item.label} {...(item.children ? { popovertarget: `child-${item.id}`, id: `menu-${item.id}`, command: item.command } : {})} />
<For each={items}>{
item => {
const [] = createSignal();
return <>
<Show when={item.children}>
<div class="child" id={`child-${item.id}`} anchor={`menu-${item.id}`} style="inset: unset;" popover>
<div
class="menu-child"
id={`child-${item.id}`}
style={`position-anchor: --menu-${item.id};`}
popover
on:toggle={(e: ToggleEvent) => {
if(e.newState === 'open' && e.target !== null) {
return setCurrent(e.target as HTMLElement);
}
}}
>
<For each={item.children}>
{(child) => <Button label={child.label} command={child.command} />}
</For>
</div>
</Show>
</>
<Button
label={item.label}
on:pointerenter={(e) => {
if(!item.children) {
return;
}
</For>
const el = current();
if(!el){
return;
}
el.hidePopover();
}}
{...(item.children ? { popovertarget: `child-${item.id}`, style: `anchor-name: --menu-${item.id};`, command: item.command } : {})}
/>
</>;
}
}</For>
</Portal>
};

28
src/features/menu/style.css
View file

@ -1,28 +0,0 @@
.menu-root {
& > div {
display: contents;
}
.item {
border: none;
background: none;
}
.child {
position: fixed;
grid-auto-flow: row;
gap: .5em;
padding: .5em 0;
inset-inline-start: anchor(start);
inset-block-start: anchor(end);
border: none;
margin: unset;
&:popover-open {
display: grid;
}
}
}

5
src/routes/(editor).tsx
View file

@ -1,4 +1,5 @@
import { Title } from "@solidjs/meta";
import { BsTranslate } from "solid-icons/bs";
import { FilesProvider } from "~/features/file";
import { MenuProvider, asMenuRoot } from "~/features/menu";
@ -8,7 +9,9 @@ export default function Editor(props) {
return <MenuProvider>
<Title>Translation-Tool</Title>
<nav use:asMenuRoot />
<nav use:asMenuRoot>
<BsTranslate class="logo" />
</nav>
<main>
<FilesProvider>

8
src/routes/(editor)/index.css Normal file
View file

@ -0,0 +1,8 @@
section.index {
display: grid;
grid: 100% / 20% 1fr;
& > aside {
overflow: clip auto;
}
}

138
src/routes/(editor)/index.tsx
View file

@ -1,10 +1,102 @@
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 } from "solid-icons/ai";
import "./index.css";
interface FileEntry {
name: string;
kind: 'file';
meta: File;
}
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 === 5) {
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() {
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(() => {
console.log('Open a file');
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 }),
@ -16,12 +108,41 @@ export default function Index() {
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, open?: true }> = (props) => {
return <details open={props.open ?? false}>
<summary>{props.folder.name}</summary>
<Tree entries={props.folder.entries} />
</details>;
};
return (
<>
<Menu.Root>
<Menu.Item label="file">
<Menu.Item label="open" command={commands.open} />
<Menu.Item label="open folder" command={commands.openFolder} />
<Menu.Item label="save" command={commands.save} />
<Menu.Item label="save all" command={commands.saveAll} />
@ -33,6 +154,19 @@ export default function Index() {
<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>
</aside>
<section>
<pre>{content()}</pre>
</section>
</section>
</>
);
}

2
tsconfig.json
View file

@ -10,7 +10,7 @@
"allowJs": true,
"strict": true,
"noEmit": true,
"types": ["vinxi/types/client"],
"types": ["vinxi/types/client", "@types/wicg-file-system-access"],
"isolatedModules": true,
"paths": {
"~/*": ["./src/*"]