for the most part switched out the grid's internals for the new table component

src/components/table/dataset.ts

@@ -1,13 +1,13 @@
 
 
-export type RowNode<T> = { kind: 'row', key: string, value: T }
+export type DataSetRowNode<T> = { kind: 'row', key: string, value: T }
-export type GroupNode<T> = { kind: 'group', key: string, groupedBy: keyof T, nodes: Node<T>[] };
+export type DataSetGroupNode<T> = { kind: 'group', key: string, groupedBy: keyof T, nodes: DataSetNode<T>[] };
-export type Node<T> = RowNode<T> | GroupNode<T>;
+export type DataSetNode<T> = DataSetRowNode<T> | DataSetGroupNode<T>;
 
-export type DataSet<T extends Record<string, any>> = Node<T>[];
+export type DataSet<T extends Record<string, any>> = DataSetNode<T>[];
 
-export const createDataSet = <T extends Record<string, any>>(data: T[]): Node<T>[] => {
+export const createDataSet = <T extends Record<string, any>>(data: T[]): DataSetNode<T>[] => {
-    return Object.entries(data).map<RowNode<T>>(([key, value]) => ({ kind: 'row', key, value }));
+    return Object.entries(data).map<DataSetRowNode<T>>(([key, value]) => ({ kind: 'row', key, value }));
 };
 
 type SortingFunction<T> = (a: T, b: T) => -1 | 0 | 1;
@@ -22,6 +22,6 @@ export const toSorted = <T extends Record<string, any>>(dataSet: DataSet<T>, sor
     return sorted;
 };
 
-type GroupingFunction<T> = (nodes: RowNode<T>[]) => Node<T>[];
+type GroupingFunction<T> = (nodes: DataSetRowNode<T>[]) => DataSetNode<T>[];
 type GroupOptions<T extends Record<string, any>> = { by: keyof T, with: GroupingFunction<T> };
 export const toGrouped = <T extends Record<string, any>>(dataSet: DataSet<T>, group: GroupOptions<T>): DataSet<T> => group.with(dataSet as any);

src/components/table/index.tsx

@@ -1,5 +1,5 @@
 
 export type { Column } from './table';
-export type { DataSet, GroupNode, RowNode, Node } from './dataset';
+export type { DataSet, DataSetGroupNode, DataSetRowNode, DataSetNode } from './dataset';
 export { SelectionMode, Table } from './table';
 export { createDataSet, toSorted, toGrouped } from './dataset';

src/components/table/table.tsx

@@ -1,6 +1,6 @@
 import { Accessor, createContext, createEffect, createMemo, createSignal, For, JSX, Match, Show, Switch, useContext } from "solid-js";
 import { selectable, SelectionProvider, useSelection } from "~/features/selectable";
-import { type RowNode, type GroupNode, type Node, createDataSet, toSorted, toGrouped } from './dataset';
+import { DataSetRowNode, DataSetGroupNode, DataSetNode, createDataSet, toSorted, toGrouped } from './dataset';
 import css from './table.module.css';
 import { createStore } from "solid-js/store";
 import { FaSolidSort, FaSolidSortDown, FaSolidSortUp } from "solid-icons/fa";
@@ -11,15 +11,27 @@ export type Column<T> = {
     id: keyof T,
     label: string,
     sortable?: boolean,
-    readonly groupBy?: (rows: RowNode<T>[]) => Node<T>[],
+    readonly groupBy?: (rows: DataSetRowNode<T>[]) => DataSetNode<T>[],
 };
 
+type SelectionItem<T> = { key: string, value: Accessor<T>, element: WeakRef<HTMLElement> };
+
+export interface TableApi<T extends Record<string, any>> {
+    readonly selection: Accessor<SelectionItem<T>[]>;
+    readonly rows: Accessor<T[]>;
+    readonly columns: Accessor<Column<T>[]>;
+    selectAll(): void;
+    clear(): void;
+}
+
 const TableContext = createContext<{
+    readonly rows: Accessor<any[]>,
     readonly columns: Accessor<Column<any>[]>,
+    readonly selection: Accessor<any[]>,
     readonly selectionMode: Accessor<SelectionMode>,
     readonly groupBy: Accessor<string | undefined>,
     readonly sort: Accessor<{ by: string, reversed?: boolean } | undefined>,
-    readonly cellRenderers: Accessor<Record<string, (cell: { value: any }) => JSX.Element>>,
+    readonly cellRenderers: Accessor<Record<string, (cell: { key: string, value: any }) => JSX.Element>>,
 
     setSort(setter: (current: { by: string, reversed?: boolean } | undefined) => { by: string, reversed: boolean } | undefined): void;
 }>();
@@ -27,8 +39,8 @@ const TableContext = createContext<{
 const useTable = () => useContext(TableContext)!
 
 function defaultGroupingFunction<T>(groupBy: keyof T) {
-    return (nodes: RowNode<T>[]): Node<T>[] => Object.entries(Object.groupBy<any, RowNode<T>>(nodes, r => r.value[groupBy]))
+    return (nodes: DataSetRowNode<T>[]): DataSetNode<T>[] => Object.entries(Object.groupBy<any, DataSetRowNode<T>>(nodes, r => r.value[groupBy]))
-        .map<GroupNode<T>>(([key, nodes]) => ({ kind: 'group', key, groupedBy: groupBy, nodes: nodes! }));
+        .map<DataSetGroupNode<T>>(([key, nodes]) => ({ kind: 'group', key, groupedBy: groupBy, nodes: nodes! }));
 }
 
 export enum SelectionMode {
@@ -47,11 +59,11 @@ type TableProps<T extends Record<string, any>> = {
     },
     selectionMode?: SelectionMode,
     children?: { [K in keyof T]?: (cell: { value: T[K] }) => JSX.Element },
+    api?: (api: TableApi<T>) => any,
 };
 
 export function Table<T extends Record<string, any>>(props: TableProps<T>) {
-    const [selection, setSelection] = createSignal<object[]>([]);
+    const [selection, setSelection] = createSignal<T[]>([]);
-
     const [state, setState] = createStore({
         sort: props.sort ? { by: props.sort.by as string, reversed: props.sort.reversed } : undefined,
     });
@@ -60,13 +72,16 @@ export function Table<T extends Record<string, any>>(props: TableProps<T>) {
         setState('sort', props.sort ? { by: props.sort.by as string, reversed: props.sort.reversed } : undefined);
     });
 
+    const rows = createMemo<T[]>(() => props.rows ?? []);
     const columns = createMemo<Column<T>[]>(() => props.columns ?? []);
     const selectionMode = createMemo(() => props.selectionMode ?? SelectionMode.None);
     const groupBy = createMemo(() => props.groupBy as string | undefined);
     const cellRenderers = createMemo(() => props.children ?? {});
 
     const context = {
+        rows,
         columns,
+        selection,
         selectionMode,
         groupBy,
         sort: createMemo(() => state.sort),
@@ -78,8 +93,10 @@ export function Table<T extends Record<string, any>>(props: TableProps<T>) {
     };
 
     return <TableContext.Provider value={context}>
-        <SelectionProvider selection={setSelection} multiSelect>
+        <SelectionProvider selection={setSelection} multiSelect={props.selectionMode === SelectionMode.Multiple}>
-            <InnerTable class={props.class} rows={props.rows} />
+            <Api api={props.api} />
+
+            <InnerTable class={props.class} rows={rows()} />
         </SelectionProvider>
     </TableContext.Provider>;
 };
@@ -91,7 +108,7 @@ function InnerTable<T extends Record<string, any>>(props: InnerTableProps<T>) {
 
     const selectable = createMemo(() => table.selectionMode() !== SelectionMode.None);
     const columnCount = createMemo(() => table.columns().length);
-    const nodes = createMemo<Node<T>[]>(() => {
+    const nodes = createMemo<DataSetNode<T>[]>(() => {
         const columns = table.columns();
         const groupBy = table.groupBy();
         const sort = table.sort();
@@ -121,6 +138,31 @@ function InnerTable<T extends Record<string, any>>(props: InnerTableProps<T>) {
     </section>
 };
 
+function Api<T extends Record<string, any>>(props: { api: undefined | ((api: TableApi<T>) => any) }) {
+    const table = useTable();
+    const selectionContext = useSelection<SelectionItem<T>>();
+
+    const api: TableApi<T> = {
+        selection: createMemo(() => {
+            return selectionContext.selection();
+        }),
+        rows: table.rows,
+        columns: table.columns,
+        selectAll() {
+            selectionContext.selectAll();
+        },
+        clear() {
+            selectionContext.clear();
+        },
+    };
+
+    createEffect(() => {
+        props.api?.(api);
+    });
+
+    return null;
+};
+
 function Head<T extends Record<string, any>>(props: {}) {
     const table = useTable();
     const context = useSelection();
@@ -174,7 +216,7 @@ function Head<T extends Record<string, any>>(props: {}) {
     </header>;
 };
 
-function Node<T extends Record<string, any>>(props: { node: Node<T>, depth: number, groupedBy?: keyof T }) {
+function Node<T extends Record<string, any>>(props: { node: DataSetNode<T>, depth: number, groupedBy?: keyof T }) {
     return <Switch>
         <Match when={props.node.kind === 'row' ? props.node : undefined}>{
             row => <Row key={row().key} value={row().value} depth={props.depth} groupedBy={props.groupedBy} />
@@ -201,12 +243,12 @@ function Row<T extends Record<string, any>>(props: { key: string, value: T, dept
         </Show>
 
         <For each={values()}>{
-            ([k, v]) => <div class={css.cell}>{table.cellRenderers()[k]?.({ value: v }) ?? v}</div>
+            ([k, value]) => <div class={css.cell}>{table.cellRenderers()[k]?.({ key: `${props.key}.${k}`, value }) ?? value}</div>
         }</For>
     </div>;
 };
 
-function Group<T extends Record<string, any>>(props: { key: string, groupedBy: keyof T, nodes: Node<T>[], depth: number }) {
+function Group<T extends Record<string, any>>(props: { key: string, groupedBy: keyof T, nodes: DataSetNode<T>[], depth: number }) {
     const table = useTable();
 
     return <details open>

src/components/tabs.module.css

@@ -61,44 +61,9 @@
     }
 
     .tab {
-        position: absolute;
+        display: contents;
-        grid-area: 2 / 1 / span 1 / span 1;
-        inline-size: 100%;
-        block-size: 100%;
-
-        &:not(.active) {
-            display: none;
-        }
-
-        & > summary {
-            grid-row: 1 / 1;
-
-            padding: var(--padding-s) var(--padding-m);
-
-            &::marker {
-                content: none;
-            }
-        }
-
-        &::details-content {
-            grid-area: 2 / 1 / span 1 / span var(--tab-count);
-            display: none;
-            grid: 100% / 100%;
-            inline-size: 100%;
-            block-size: 100%;
-
-            overflow: auto;
-        }
-
-        &[open] {
-            & > summary {
         background-color: var(--surface-600);
-            }
+        color: var(--text-1);
-
-            &::details-content {
-                display: grid;
-            }
-        }
     }
 }
 

src/components/tabs.tsx

@@ -95,19 +95,12 @@ export const Tab: ParentComponent<{ id: string, label: string, closable?: boolea
     const context = useTabs();
     const resolved = children(() => props.children);
     const isActive = context.isActive(props.id);
-    const [ref, setRef] = createSignal();
-
-    // const isActive = context.register(props.id, props.label, {
-    //     closable: props.closable ?? false,
-    //     ref: ref,
-    // });
 
     return <div
-        ref={setRef()}
         id={props.id}
+        class={css.tab}
         data-tab-label={props.label}
         data-tab-closable={props.closable}
-        style="display: contents;"
     >
         <Show when={isActive()}>
             <Command.Context for={context.onClose() ?? noop} with={[props.id]}>{resolved()}</Command.Context>

src/features/file/grid.tsx

@@ -1,22 +1,16 @@
 import { Accessor, Component, createContext, createEffect, createMemo, createSignal, For, ParentComponent, Show, useContext } from "solid-js";
 import { createStore, produce, unwrap } from "solid-js/store";
-import { SelectionProvider, useSelection, selectable } from "../selectable";
+import { debounce, deepCopy, deepDiff, Mutation, splitAt } from "~/utilities";
-import { debounce, deepCopy, deepDiff, Mutation } from "~/utilities";
+import { DataSetRowNode, DataSetNode, SelectionMode, Table } from "~/components/table";
 import css from './grid.module.css';
 
-selectable // prevents removal of import
-
-interface Leaf extends Record<string, string> { }
-export interface Entry extends Record<string, Entry | Leaf> { }
-
 type Rows = Map<string, Record<string, string>>;
-type SelectionItem = { key: string, value: Accessor<Record<string, string>>, element: WeakRef<HTMLElement> };
 
 export interface GridContextType {
-    readonly rows: Accessor<Record<string, Record<string, string>>>;
+    readonly rows: Accessor<Rows>;
     readonly mutations: Accessor<Mutation[]>;
-    readonly selection: Accessor<SelectionItem[]>;
+    // readonly selection: Accessor<SelectionItem[]>;
-    mutate(prop: string, lang: string, value: string): void;
+    mutate(prop: string, value: string): void;
     remove(props: string[]): void;
     insert(prop: string): void;
     addColumn(name: string): void;
@@ -35,11 +29,10 @@ export interface GridApi {
 
 const GridContext = createContext<GridContextType>();
 
-const isLeaf = (entry: Entry | Leaf): entry is Leaf => Object.values(entry).some(v => typeof v === 'string');
 const useGrid = () => useContext(GridContext)!;
 
 export const Grid: Component<{ class?: string, columns: string[], rows: Rows, api?: (api: GridApi) => any }> = (props) => {
-    const [selection, setSelection] = createSignal<SelectionItem[]>([]);
+    const [table, setTable] = createSignal();
     const [state, setState] = createStore<{ rows: Record<string, Record<string, string>>, columns: string[], snapshot: Rows, numberOfRows: number }>({
         rows: {},
         columns: [],
@@ -53,8 +46,25 @@ export const Grid: Component<{ class?: string, columns: string[], rows: Rows, ap
 
         return deepDiff(state.snapshot, state.rows).toArray();
     });
-    const rows = createMemo(() => Object.fromEntries(Object.entries(state.rows).map(([key, row]) => [key, unwrap(row)] as const)));
+
-    const columns = createMemo(() => state.columns);
+    type Entry = { key: string, [lang: string]: string };
+
+    const groupBy = (rows: DataSetRowNode<Entry>[]) => {
+        const group = (nodes: DataSetRowNode<Entry>[]): DataSetNode<Entry>[] => Object
+            .entries(Object.groupBy(nodes, r => r.key.split('.').at(0)!) as Record<string, DataSetRowNode<Entry>[]>)
+            .map<DataSetNode<Entry>>(([key, nodes]) => nodes.at(0)?.key === key
+                ? { ...nodes[0], key: nodes[0].value.key, value: { ...nodes[0].value, key: nodes[0].key } }
+                : ({ kind: 'group', key, groupedBy: 'key', nodes: group(nodes.map(n => ({ ...n, key: n.key.slice(key.length + 1) }))) })
+            );
+
+        return group(rows.map(r => ({ ...r, key: r.value.key })));
+    }
+
+    const rows = createMemo(() => Object.entries(state.rows).map(([key, values]) => ({ key, ...values })));
+    const columns = createMemo(() => [
+        { id: 'key', label: 'Key', groupBy },
+        ...state.columns.map(c => ({ id: c, label: c })),
+    ]);
 
     createEffect(() => {
         setState('rows', Object.fromEntries(deepCopy(props.rows).entries()));
@@ -72,10 +82,12 @@ export const Grid: Component<{ class?: string, columns: string[], rows: Rows, ap
     const ctx: GridContextType = {
         rows,
         mutations,
-        selection,
+        // selection,
 
-        mutate(prop: string, lang: string, value: string) {
+        mutate(prop: string, value: string) {
-            setState('rows', prop, lang, value);
+            const [key, lang] = splitAt(prop, prop.lastIndexOf('.'));
+
+            setState('rows', key, lang, value);
         },
 
         remove(props: string[]) {
@@ -89,11 +101,7 @@ export const Grid: Component<{ class?: string, columns: string[], rows: Rows, ap
         },
 
         insert(prop: string) {
-            setState('rows', produce(rows => {
+            setState('rows', prop, Object.fromEntries(state.columns.map(lang => [lang, ''])));
-                rows[prop] = Object.fromEntries(state.columns.slice(1).map(lang => [lang, '']));
-
-                return rows
-            }))
         },
 
         addColumn(name: string): void {
@@ -107,63 +115,39 @@ export const Grid: Component<{ class?: string, columns: string[], rows: Rows, ap
     };
 
     return <GridContext.Provider value={ctx}>
-        <SelectionProvider selection={setSelection} multiSelect>
+        <Api api={props.api} table={table()} />
-            <Api api={props.api} />
 
-            <_Grid class={props.class} columns={columns()} rows={rows()} />
+        <Table api={setTable} class={props.class} rows={rows()} columns={columns()} groupBy="key" selectionMode={SelectionMode.Multiple}>{
-        </SelectionProvider>
+            Object.fromEntries(state.columns.map(c => [c, ({ key, value }: any) => {
+                return <TextArea key={key} value={value} oninput={(e) => ctx.mutate(key, e.data ?? '')} />;
+            }]))
+        }</Table>
     </GridContext.Provider>;
 };
 
-const _Grid: Component<{ class?: string, columns: string[], rows: Record<string, Record<string, string>> }> = (props) => {
+const Api: Component<{ api: undefined | ((api: GridApi) => any), table?: any }> = (props) => {
-    const columnCount = createMemo(() => props.columns.length - 1);
-    const root = createMemo<Entry>(() => Object.entries(props.rows)
-        .reduce((aggregate, [key, value]) => {
-            let obj: any = aggregate;
-            const parts = key.split('.');
-
-            for (const [i, part] of parts.entries()) {
-                if (Object.hasOwn(obj, part) === false) {
-                    obj[part] = {};
-                }
-
-                if (i === (parts.length - 1)) {
-                    obj[part] = value;
-                }
-                else {
-                    obj = obj[part];
-                }
-            }
-
-            return aggregate;
-        }, {}));
-
-    return <section class={`${css.table} ${props.class}`} style={{ '--columns': columnCount() }}>
-        <Head headers={props.columns} />
-
-        <main class={css.main}>
-            <Row entry={root()} />
-        </main>
-    </section>
-};
-
-const Api: Component<{ api: undefined | ((api: GridApi) => any) }> = (props) => {
     const gridContext = useGrid();
-    const selectionContext = useSelection<{ key: string, value: Accessor<Record<string, string>>, element: WeakRef<HTMLElement> }>();
 
-    const api: GridApi = {
+    const api = createMemo<GridApi | undefined>(() => {
+        const table = props.table;
+
+        if (!table) {
+            return;
+        }
+
+        return {
             selection: createMemo(() => {
-            const selection = selectionContext.selection();
+                const selection = props.table?.selection() ?? [];
 
                 return Object.fromEntries(selection.map(({ key, value }) => [key, value()] as const));
             }),
-        rows: gridContext.rows,
+            rows: createMemo(() => props.table?.rows ?? []),
             mutations: gridContext.mutations,
             selectAll() {
-            selectionContext.selectAll();
+                props.table.selectAll();
             },
             clear() {
-            selectionContext.clear();
+                props.table.clear();
             },
             remove(props: string[]) {
                 gridContext.remove(props);
@@ -176,76 +160,23 @@ const Api: Component<{ api: undefined | ((api: GridApi) => any) }> = (props) =>
                 gridContext.addColumn(name);
             },
         };
+    });
 
     createEffect(() => {
-        props.api?.(api);
+        const value = api();
+
+        if (value) {
+            props.api?.(value);
+        }
     });
 
     return null;
 };
 
-const Head: Component<{ headers: string[] }> = (props) => {
+const TextArea: Component<{ key: string, value: string, oninput?: (event: InputEvent) => any }> = (props) => {
-    const context = useSelection();
-
-    return <header class={css.header}>
-        <div class={css.cell}>
-            <input
-                type="checkbox"
-                checked={context.selection().length > 0 && context.selection().length === context.length()}
-                indeterminate={context.selection().length !== 0 && context.selection().length !== context.length()}
-                on:input={(e: InputEvent) => e.target.checked ? context.selectAll() : context.clear()}
-            />
-        </div>
-
-        <For each={props.headers}>{
-            header => <span class={css.cell}>{header}</span>
-        }</For>
-    </header>;
-};
-
-const Row: Component<{ entry: Entry, path?: string[] }> = (props) => {
-    const grid = useGrid();
-
-    return <For each={Object.entries(props.entry)}>{
-        ([key, value]) => {
-            const values = Object.entries(value);
-            const path = [...(props.path ?? []), key];
-            const k = path.join('.');
-            const context = useSelection();
-
-            const isSelected = context.isSelected(k);
-
-            return <Show when={isLeaf(value)} fallback={<Group key={key} entry={value as Entry} path={path} />}>
-                <div class={css.row} use:selectable={{ value, key: k }}>
-                    <div class={css.cell}>
-                        <input type="checkbox" checked={isSelected()} on:input={() => context.select([k])} on:pointerdown={e => e.stopPropagation()} />
-                    </div>
-
-                    <div class={css.cell}>
-                        <span style={{ '--depth': path.length - 1 }}>{key}</span>
-                    </div>
-
-                    <For each={values}>{
-                        ([lang, value]) => <div class={css.cell}>
-                            <TextArea key={k} value={value} lang={lang} oninput={(e) => grid.mutate(k, lang, e.data ?? '')} />
-                        </div>
-                    }</For>
-                </div>
-            </Show>;
-        }
-    }</For>
-};
-
-const Group: Component<{ key: string, entry: Entry, path: string[] }> = (props) => {
-    return <details open>
-        <summary style={{ '--depth': props.path.length - 1 }}>{props.key}</summary>
-
-        <Row entry={props.entry} path={props.path} />
-    </details>;
-};
-
-const TextArea: Component<{ key: string, value: string, lang: string, oninput?: (event: InputEvent) => any }> = (props) => {
     const [element, setElement] = createSignal<HTMLTextAreaElement>();
+    const key = createMemo(() => props.key.slice(0, props.key.lastIndexOf('.')));
+    const lang = createMemo(() => props.key.slice(props.key.lastIndexOf('.') + 1));
 
     const resize = () => {
         const el = element();
@@ -272,9 +203,9 @@ const TextArea: Component<{ key: string, value: string, lang: string, oninput?:
     return <textarea
         ref={setElement}
         value={props.value}
-        lang={props.lang}
+        lang={lang()}
-        placeholder={`${props.key} in ${props.lang}`}
+        placeholder={`${key()} in ${lang()}`}
-        name={`${props.key}:${props.lang}`}
+        name={`${key()}:${lang()}`}
         spellcheck={true}
         wrap="soft"
         onkeyup={onKeyUp}

src/features/selectable/index.tsx

@@ -53,7 +53,7 @@ interface State {
     data: { key: string, value: Accessor<any>, element: WeakRef<HTMLElement> }[];
 }
 
-export const SelectionProvider: ParentComponent<{ selection?: SelectionHandler, multiSelect?: true }> = (props) => {
+export const SelectionProvider: ParentComponent<{ selection?: SelectionHandler, multiSelect?: boolean }> = (props) => {
     const [state, setState] = createStore<State>({ selection: [], data: [] });
     const selection = createMemo(() => state.data.filter(({ key }) => state.selection.includes(key)));
     const length = createMemo(() => state.data.length);

src/routes/(editor)/edit.tsx

@@ -105,6 +105,8 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
         const files = tab.files();
         const mutations = tab.api()?.mutations() ?? [];
 
+        // console.log(mutations);
+
         return mutations.flatMap(m => {
             switch (m.kind) {
                 case MutarionKind.Update: {
@@ -433,7 +435,7 @@ const Content: Component<{ directory: FileSystemDirectoryHandle, api?: Setter<Gr
                 return aggregate;
             }, new Map<string, Record<string, { id: string, value: string, handle: FileSystemFileHandle }>>());
 
-            setColumns(['key', ...languages]);
+            setColumns(languages.values().toArray());
             setEntries(merged);
             setRows(new Map(merged.entries().map(([key, langs]) => [key, Object.fromEntries(Object.entries(langs).map(([lang, { value }]) => [lang, value]))] as const)));
         })();