svelte-tably 1.0.0-next.9 → 1.0.1-next.0

package/dist/table/Table.svelte.d.ts

@@ -0,0 +1,123 @@
+import { SvelteComponent } from "svelte";
+import { type Snippet } from 'svelte';
+import { TableState, type TableProps } from './table-state.svelte.js';
+import { type RowColumnCtx } from '../column/column-state.svelte.js';
+declare class __sveltets_Render<T extends Record<PropertyKey, unknown>> {
+    props(): TableProps<T> & {
+        content?: Snippet<[context: {
+            Column: {
+                <V>(internal: unknown, props: {
+                    id: string;
+                    table?: TableState<T> | undefined;
+                    header?: string | Snippet<[ctx: import("../column/column-state.svelte.js").HeaderCtx<T>]> | undefined;
+                    row?: Snippet<[item: T, ctx: RowColumnCtx<T, V>]> | undefined;
+                    statusbar?: Snippet<[ctx: import("../column/column-state.svelte.js").StatusbarCtx<T>]> | undefined;
+                    sticky?: boolean | undefined;
+                    show?: boolean | undefined;
+                    sortby?: boolean | undefined;
+                    width?: number | undefined;
+                    fixed?: boolean | undefined;
+                    value?: ((item: T) => V) | undefined;
+                    sort?: boolean | ((a: V, b: V) => number) | undefined;
+                    resizeable?: boolean | undefined;
+                    filter?: ((value: V) => boolean) | undefined;
+                    style?: string | undefined;
+                    class?: string | undefined;
+                    onclick?: ((event: MouseEvent, rowColumnCtx: RowColumnCtx<T, V>) => void) | undefined;
+                    pad?: "row" | "header" | "both" | undefined;
+                }): {};
+                new <V>(options: import("svelte").ComponentConstructorOptions<{
+                    id: string;
+                    table?: TableState<T> | undefined;
+                    header?: string | Snippet<[ctx: import("../column/column-state.svelte.js").HeaderCtx<T>]> | undefined;
+                    row?: Snippet<[item: T, ctx: RowColumnCtx<T, V>]> | undefined;
+                    statusbar?: Snippet<[ctx: import("../column/column-state.svelte.js").StatusbarCtx<T>]> | undefined;
+                    sticky?: boolean | undefined;
+                    show?: boolean | undefined;
+                    sortby?: boolean | undefined;
+                    width?: number | undefined;
+                    fixed?: boolean | undefined;
+                    value?: ((item: T) => V) | undefined;
+                    sort?: boolean | ((a: V, b: V) => number) | undefined;
+                    resizeable?: boolean | undefined;
+                    filter?: ((value: V) => boolean) | undefined;
+                    style?: string | undefined;
+                    class?: string | undefined;
+                    onclick?: ((event: MouseEvent, rowColumnCtx: RowColumnCtx<T, V>) => void) | undefined;
+                    pad?: "row" | "header" | "both" | undefined;
+                }>): SvelteComponent<{
+                    id: string;
+                    table?: TableState<T> | undefined;
+                    header?: string | Snippet<[ctx: import("../column/column-state.svelte.js").HeaderCtx<T>]> | undefined;
+                    row?: Snippet<[item: T, ctx: RowColumnCtx<T, V>]> | undefined;
+                    statusbar?: Snippet<[ctx: import("../column/column-state.svelte.js").StatusbarCtx<T>]> | undefined;
+                    sticky?: boolean | undefined;
+                    show?: boolean | undefined;
+                    sortby?: boolean | undefined;
+                    width?: number | undefined;
+                    fixed?: boolean | undefined;
+                    value?: ((item: T) => V) | undefined;
+                    sort?: boolean | ((a: V, b: V) => number) | undefined;
+                    resizeable?: boolean | undefined;
+                    filter?: ((value: V) => boolean) | undefined;
+                    style?: string | undefined;
+                    class?: string | undefined;
+                    onclick?: ((event: MouseEvent, rowColumnCtx: RowColumnCtx<T, V>) => void) | undefined;
+                    pad?: "row" | "header" | "both" | undefined;
+                }, {}, {}> & {
+                    $$bindings?: ReturnType<() => "">;
+                } & {};
+            };
+            Panel: {
+                (internal: unknown, props: import("../index.js").PanelProps<T>): {};
+                new (options: import("svelte").ComponentConstructorOptions<import("../index.js").PanelProps<T>>): SvelteComponent<import("../index.js").PanelProps<T>, {}, {}> & {
+                    $$bindings?: ReturnType<() => "">;
+                };
+                z_$$bindings?: ReturnType<() => "">;
+            };
+            Expandable: {
+                (internal: unknown, props: import("../index.js").ExpandableProps<T>): {};
+                new (options: import("svelte").ComponentConstructorOptions<import("../index.js").ExpandableProps<T>>): SvelteComponent<import("../index.js").ExpandableProps<T>, {}, {}> & {
+                    $$bindings?: ReturnType<() => "">;
+                };
+                z_$$bindings?: ReturnType<() => "">;
+            };
+            Row: {
+                (internal: unknown, props: import("../index.js").RowProps<T>): {};
+                new (options: import("svelte").ComponentConstructorOptions<import("../index.js").RowProps<T>>): SvelteComponent<import("../index.js").RowProps<T>, {}, {}> & {
+                    $$bindings?: ReturnType<() => "">;
+                };
+                z_$$bindings?: ReturnType<() => "">;
+            };
+            readonly table: TableState<T>;
+        }]> | undefined;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "selected" | "panel" | "data";
+    exports(): {
+        toCSV: (opts?: {
+            /** Semi-colons as separator? */
+            semicolon?: boolean;
+            /** Only selected rows */
+            selected?: boolean;
+        }) => Promise<string>;
+    };
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<PropertyKey, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<PropertyKey, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * This is a description, \
+ * on how to use this.
+ *
+ * @example
+ * <Component />
+ */
+declare const Table: $$IsomorphicComponent;
+type Table<T extends Record<PropertyKey, unknown>> = InstanceType<typeof Table<T>>;
+export default Table;

package/dist/table/data.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { TableProps, TableState } from './table-state.svelte.js';
+export declare class Data<T extends Record<PropertyKey, unknown>> {
+    #private;
+    origin: T[];
+    sorted: T[];
+    filtered: T[];
+    sortby: string | undefined;
+    sortReverse: boolean;
+    current: T[];
+    sortBy(column: string): void;
+    sortAction(node: HTMLElement, column: string): void;
+    sortTable(): void;
+    constructor(table: TableState<T>, props: TableProps<T>);
+}

package/dist/table/data.svelte.js

@@ -0,0 +1,81 @@
+import { on } from 'svelte/events';
+import { untrack } from 'svelte';
+export class Data {
+    #table = $state();
+    origin = $state([]);
+    sorted = $state([]);
+    filtered = $state([]);
+    sortby = $state();
+    sortReverse = $state(false);
+    current = $derived(this.#table?.options.reorderable ? this.origin : this.filtered);
+    sortBy(column) {
+        if (this.#table.options.reorderable)
+            return;
+        const { sort, value } = this.#table.columns[column].options;
+        if (!sort || !value)
+            return;
+        if (this.sortby === column) {
+            this.sortReverse = !this.sortReverse;
+        }
+        else {
+            this.sortReverse = false;
+            this.sortby = column;
+        }
+    }
+    sortAction(node, column) {
+        $effect(() => on(node, 'click', () => {
+            this.sortBy(column);
+        }));
+    }
+    sortTable() {
+        if (!this.sortby || this.#table.options.reorderable) {
+            this.sorted = [...this.origin];
+            return;
+        }
+        const column = this.#table.columns[this.sortby];
+        let { sort, value } = column?.options ?? {};
+        if (!sort || !value) {
+            this.sorted = [...this.origin];
+            return;
+        }
+        if (sort === true) {
+            sort = (a, b) => String(a).localeCompare(String(b));
+        }
+        if (this.sortReverse) {
+            this.sorted = this.origin.toSorted((a, b) => sort(value(b), value(a)));
+        }
+        else {
+            this.sorted = this.origin.toSorted((a, b) => sort(value(a), value(b)));
+        }
+    }
+    constructor(table, props) {
+        this.#table = table;
+        this.origin = props.data;
+        this.sorted = this.origin.toSorted();
+        this.filtered = this.sorted;
+        $effect(() => {
+            this.origin = props.data;
+            if (this.#table.options.reorderable)
+                return;
+            props.data;
+            props.data.length;
+            this.sortby;
+            this.sortReverse;
+            untrack(() => this.sortTable());
+        });
+        $effect(() => {
+            const table = this.#table;
+            if (props.reorderable)
+                return;
+            const filters = [...props.filters ?? []];
+            for (const key in table.columns) {
+                const filter = table.columns[key].options.filter;
+                const valueOf = table.columns[key].options.value;
+                if (filter && valueOf) {
+                    filters.push((item) => filter(valueOf(item)));
+                }
+            }
+            this.filtered = filters.length === 0 ? this.sorted : this.sorted.filter((value) => filters.every((filter) => filter(value)));
+        });
+    }
+}

package/dist/table/table-state.svelte.d.ts

@@ -0,0 +1,107 @@
+import { type Snippet } from 'svelte';
+import { ColumnState, type RowColumnCtx } from '../column/column-state.svelte.js';
+import { PanelState } from '../panel/panel-state.svelte.js';
+import { Data } from './data.svelte.js';
+import { type AnyRecord } from '../utility.svelte.js';
+import type { ExpandableState } from '../expandable/expandable-state.svelte.js';
+import type { ItemState } from 'runic-reorder';
+import type { RowState } from '../row/row-state.svelte.js';
+export type HeaderSelectCtx<T extends AnyRecord = any> = {
+    isSelected: boolean;
+    /** The list of selected items */
+    readonly selected: T[];
+    /**
+     * See [MDN :indeterminate](https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate)
+     */
+    readonly indeterminate: boolean;
+};
+export type RowSelectCtx<T extends AnyRecord = any> = {
+    readonly item: T;
+    readonly row: RowColumnCtx<T, unknown>;
+    data: T[];
+    isSelected: boolean;
+};
+export interface RowCtx<T extends AnyRecord> {
+    readonly rowHovered: boolean;
+    readonly index: number;
+    readonly itemState: ItemState<T> | undefined;
+    selected: boolean;
+    expanded: boolean;
+}
+type SelectOptions<T extends AnyRecord> = {
+    /**
+     * The style, in which the selection is shown
+     *
+     * NOTE: If using `edge` | 'side', "show" will always be `hover`. This is due to
+     * an inconsistency/limitation of matching the scroll between the selection div and the rows.
+     *
+     * @default 'column'
+     */
+    style?: 'column';
+    /**
+     * When to show the row-select, when not selected?
+     * @default 'hover'
+     */
+    show?: 'hover' | 'always' | 'never';
+    /**
+     * Custom snippet
+     */
+    headerSnippet?: Snippet<[context: HeaderSelectCtx]>;
+    rowSnippet?: Snippet<[context: RowSelectCtx<T>]>;
+};
+export type TableProps<T extends AnyRecord> = {
+    id?: string;
+    data: T[];
+    selected?: T[];
+    /** Current visible panel */
+    panel?: string;
+    filters?: ((item: T) => boolean)[];
+    /**
+     * **For a reorderable table, the data is mutated when reordered.**
+     *
+     * Reorderable tables cannot
+     * - Be filtered
+     * - Be sorted
+     * @default false
+    */
+    reorderable?: boolean;
+    /** Whether columns in this table can be resized */
+    resizeable?: boolean;
+    /** Whether to enable selection */
+    select?: boolean | SelectOptions<T>;
+    /** Create missing columns automatically. */
+    auto?: boolean;
+};
+export declare class TableState<T extends AnyRecord> {
+    #private;
+    id: string;
+    dataState: Data<T>;
+    data: T[];
+    columns: Record<string, ColumnState<T, any>>;
+    panels: Record<string, PanelState<T>>;
+    expandable: undefined | ExpandableState<T>;
+    row: undefined | RowState<T>;
+    /** Currently selected items */
+    get selected(): T[];
+    set selected(items: T[]);
+    /** Column positions based on column ids */
+    positions: {
+        fixed: ColumnState<T, any>[];
+        sticky: ColumnState<T, any>[];
+        scroll: ColumnState<T, any>[];
+        hidden: ColumnState<T, any>[];
+    };
+    /** Primarily externally managed options */
+    options: {
+        panel: string | undefined;
+        filters: boolean | ((item: T) => boolean)[];
+        resizeable: boolean;
+        reorderable: boolean;
+        select: boolean | SelectOptions<T>;
+        auto: boolean;
+    };
+    add(state: ColumnState<T, any> | PanelState<T>): (() => void) | undefined;
+    static getContext<T extends AnyRecord>(): TableState<T> | undefined;
+    constructor(tableProps: TableProps<T>);
+}
+export {};

package/dist/table/table-state.svelte.js

@@ -0,0 +1,76 @@
+import { getContext, setContext } from 'svelte';
+import { ColumnState } from '../column/column-state.svelte.js';
+import { PanelState } from '../panel/panel-state.svelte.js';
+import { Data } from './data.svelte.js';
+export class TableState {
+    #props = {};
+    id = $state();
+    dataState = $state({});
+    data = $derived(this.dataState.current ?? []);
+    columns = $state({});
+    panels = $state({});
+    expandable = $state();
+    row = $state();
+    /** Currently selected items */
+    get selected() { return this.#props.selected ??= []; }
+    set selected(items) { this.#props.selected = items; }
+    /** Column positions based on column ids */
+    positions = $state({
+        fixed: [],
+        sticky: [],
+        scroll: [],
+        hidden: []
+    });
+    /** Primarily externally managed options */
+    options = $derived({
+        panel: this.#props.panel,
+        filters: this.#props.reorderable ? false : (this.#props.filters ?? []),
+        resizeable: this.#props.resizeable ?? true,
+        reorderable: this.#props.reorderable ?? false,
+        select: this.#props.select ?? false,
+        auto: this.#props.auto ?? false
+    });
+    add(state) {
+        if (state instanceof ColumnState) {
+            const key = state.id;
+            this.columns[key] = state;
+            const clean = () => {
+                delete this.columns[key];
+                this.positions.fixed = this.positions.fixed.filter((column) => column !== state);
+                this.positions.sticky = this.positions.sticky.filter((column) => column !== state);
+                this.positions.scroll = this.positions.scroll.filter((column) => column !== state);
+                this.positions.hidden = this.positions.hidden.filter((column) => column !== state);
+            };
+            if (state.defaults.sortby)
+                this.dataState.sortBy(key);
+            if (state.options.fixed) {
+                this.positions.fixed.push(state);
+                return clean;
+            }
+            if (state.defaults.show === false) {
+                this.positions.hidden.push(state);
+            }
+            if (state.defaults.sticky) {
+                this.positions.sticky.push(state);
+            }
+            else {
+                this.positions.scroll.push(state);
+            }
+            return clean;
+        }
+        if (state instanceof PanelState) {
+            const key = state.id;
+            this.panels[key] = state;
+            return () => delete this.panels[key];
+        }
+    }
+    static getContext() {
+        return getContext('svelte-tably');
+    }
+    constructor(tableProps) {
+        this.#props = tableProps;
+        this.id = tableProps.id ?? Array.from({ length: 12 }, () => String.fromCharCode(Math.floor(Math.random() * 26) + 97)).join('');
+        this.dataState = new Data(this, tableProps);
+        setContext('svelte-tably', this);
+    }
+}

package/dist/table/virtualization.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { TableState } from './table-state.svelte.js';
+export declare class Virtualization<T extends Record<PropertyKey, unknown>> {
+    #private;
+    scrollTop: number;
+    viewport: {
+        height: number;
+        element: HTMLDivElement | null;
+    };
+    get topIndex(): number;
+    get virtualTop(): number;
+    get virtualBottom(): number;
+    get area(): T[];
+    constructor(table: TableState<T>);
+}

package/dist/table/virtualization.svelte.js

@@ -0,0 +1,86 @@
+import { tick, untrack } from 'svelte';
+export class Virtualization {
+    scrollTop = $state(0);
+    viewport = $state({
+        height: 0,
+        element: null
+    });
+    get topIndex() { return this.#topIndex; }
+    get virtualTop() { return this.#virtualTop; }
+    get virtualBottom() { return this.#virtualBottom; }
+    get area() { return this.#area; }
+    #topIndex = 0;
+    #heightPerItem = $state(8);
+    #virtualTop = $state(0);
+    #virtualBottom = $state(0);
+    #area = $state([]);
+    #spacing = $derived(this.viewport.height / 2);
+    #renderItemLength = $derived(Math.ceil(Math.max(30, (this.viewport.height / this.#heightPerItem) * 2)));
+    constructor(table) {
+        let ticked = $state(false);
+        $effect.pre(() => {
+            table.dataState.origin;
+            untrack(() => {
+                ticked = false;
+                requestAnimationFrame(() => ticked = true);
+            });
+        });
+        $effect(() => {
+            if (!ticked)
+                return;
+            table.dataState.current;
+            untrack(() => {
+                if (!this.viewport.element) {
+                    this.#heightPerItem = 8;
+                    return;
+                }
+                tick().then(() => {
+                    const target = this.viewport.element;
+                    if (target.children.length === 0)
+                        return;
+                    const firstRow = target.children[0]?.getBoundingClientRect().top;
+                    const lastRow = target.children[target.children.length - 1].getBoundingClientRect().bottom;
+                    this.#heightPerItem = (lastRow - firstRow) / this.#area.length;
+                });
+            });
+        });
+        let waitAnimationFrame = false;
+        $effect(() => {
+            if (!ticked)
+                return;
+            this.scrollTop;
+            this.#heightPerItem;
+            table.dataState.current.length;
+            table.dataState.current;
+            untrack(() => {
+                if (!waitAnimationFrame) {
+                    setTimeout(() => {
+                        waitAnimationFrame = false;
+                        let virtualTop = Math.max(this.scrollTop - this.#spacing, 0);
+                        virtualTop -= virtualTop % this.#heightPerItem;
+                        this.#virtualTop = virtualTop;
+                        let virtualBottom = this.#heightPerItem * table.dataState.current.length - virtualTop - this.#spacing * 4;
+                        virtualBottom = Math.max(virtualBottom, 0);
+                        this.#virtualBottom = virtualBottom;
+                    }, 1000 / 60);
+                }
+                waitAnimationFrame = true;
+            });
+        });
+        $effect(() => {
+            if (!ticked)
+                return;
+            table.dataState.sortReverse;
+            table.dataState.sortby;
+            this.#heightPerItem;
+            this.#virtualTop;
+            table.dataState.current.length;
+            table.dataState.current;
+            untrack(() => {
+                this.#topIndex = Math.round(this.#virtualTop / this.#heightPerItem || 0);
+                const end = this.#topIndex + this.#renderItemLength;
+                this.#area = table.dataState.current.slice(this.#topIndex, end);
+            });
+        });
+    }
+}

package/dist/utility.svelte.d.ts

@@ -0,0 +1,24 @@
+import { Snippet } from 'svelte';
+export type Simplify<T> = T extends infer V ? {
+    [K in keyof V]: V[K];
+} : never;
+export type AnyRecord = Record<PropertyKey, any>;
+export declare function pick<T extends Record<PropertyKey, any>, K extends (keyof T)[]>(item: T, keys: K): Simplify<Pick<T, K[number]>>;
+export declare function boundPick<T extends Record<PropertyKey, any>, K extends (keyof T)[]>(item: T, keys: K): {};
+export declare function assign(item: Record<PropertyKey, any>, props?: Partial<Record<PropertyKey, any>>): void;
+export declare function boundAssign(item: Record<PropertyKey, any>, props?: Partial<Record<PropertyKey, any>>): void;
+export declare function mounted(): {
+    readonly isMounted: boolean;
+};
+export declare function getters<T extends AnyRecord>(obj: T): { readonly [K in keyof T]: T[K]; };
+type SetterRecord = Record<PropertyKey, [() => any, (v: any) => void]>;
+export declare function withSetters<T extends SetterRecord>(obj: T): T;
+export declare function fromProps<T extends AnyRecord, B extends SetterRecord>(props: T, boundProps?: B): Simplify<{ [K in keyof B]: ReturnType<B[K][0]>; } & { readonly [K in keyof T]: T[K]; }>;
+export declare function assignDescriptors<T extends AnyRecord, B extends AnyRecord>(target: T, source: B): T & B;
+/** Capitalize by space */
+export declare function capitalize(str: string): string;
+/** Split words when going from lower case to uppercase; `someWords-split` -> `some Word Split...` */
+export declare function segmentize(str: string): string;
+type SnippetLiteralProperties<K extends unknown[], Result extends (() => unknown)[] = []> = K extends [infer First, ...infer Rest] ? SnippetLiteralProperties<Rest, [...Result, () => First]> : Result;
+export declare function snippetLiteral<K extends unknown[]>(snippet: Snippet<K>): ((anchor: Comment, ...args: SnippetLiteralProperties<K>) => ReturnType<typeof snippet>);
+export {};

package/dist/utility.svelte.js

@@ -0,0 +1,107 @@
+import { onMount } from 'svelte';
+export function pick(item, keys) {
+    return keys.reduce((acc, key) => ({ ...acc, [key]: item[key] }), {});
+}
+export function boundPick(item, keys) {
+    const obj = {};
+    for (const key in keys) {
+        obj[key] = [() => item[key], (v) => item[key] = v];
+    }
+    return Object.defineProperties({}, withSetters(obj));
+}
+export function assign(item, props = {}) {
+    for (const key in props) {
+        const value = props[key];
+        if (value === undefined)
+            continue;
+        if (typeof value === 'object') {
+            assign(item[key], value);
+            continue;
+        }
+        item[key] = value;
+    }
+}
+export function boundAssign(item, props = {}) {
+    for (const key in props) {
+        const value = props[key];
+        if (value === undefined)
+            continue;
+        if (typeof value === 'object') {
+            boundAssign(item[key], value);
+            continue;
+        }
+        Object.defineProperty(item, value, {
+            get() { return props[key]; },
+            set(v) { props[key] = v; }
+        });
+    }
+}
+export function mounted() {
+    let isMounted = $state(false);
+    onMount(() => { isMounted = true; });
+    return {
+        get isMounted() { return isMounted; }
+    };
+}
+export function getters(obj) {
+    let items = {};
+    for (const key in obj) {
+        items[key] = { get: () => obj[key] };
+    }
+    return items;
+}
+export function withSetters(obj) {
+    let items = {};
+    for (const key in obj) {
+        items[key] = {
+            get: () => obj[key][0](),
+            set: (v) => obj[key][1](v)
+        };
+    }
+    return items;
+}
+export function fromProps(props, boundProps) {
+    return Object.defineProperties({}, {
+        ...getters(props),
+        ...withSetters(boundProps ?? {})
+    });
+}
+export function assignDescriptors(target, source) {
+    for (const key of Object.keys(source)) {
+        const descriptor = Object.getOwnPropertyDescriptor(source, key);
+        if (descriptor) {
+            Object.defineProperty(target, key, descriptor);
+        }
+        else {
+            target[key] = source[key]; // Copy regular values if descriptor is missing
+        }
+    }
+    return target;
+}
+/** Capitalize by space */
+export function capitalize(str) {
+    let parts = str.split(' ');
+    let result = '';
+    for (let part of parts) {
+        result += part.charAt(0).toUpperCase() + part.slice(1) + ' ';
+    }
+    return result;
+}
+/** Split words when going from lower case to uppercase; `someWords-split` -> `some Word Split...` */
+export function segmentize(str) {
+    let result = '';
+    for (let i = 0; i < str.length; i++) {
+        const char = str[i];
+        const prevChar = i > 0 ? str[i - 1] : '';
+        if ((char === '-' || char === char.toUpperCase()) && prevChar !== ' ' && prevChar !== prevChar.toUpperCase()) {
+            result += ' ';
+            if (char === '-')
+                continue;
+        }
+        result += char;
+    }
+    return result.trim();
+}
+export function snippetLiteral(snippet) {
+    return snippet;
+}