svelte-tree-view/pkg/stores/props.js

Display JSON objects in a customizable tree-view

import { derived, get, writable } from 'svelte/store';
export const createPropsStore = (initialProps) => {
    const props = writable(initialProps);
    const recursionOpts = derived(props, p => p.recursionOpts);
    return {
        props,
        recursionOpts,
        setProps(newProps) {
            props.set(newProps);
        },
        formatValue(val, node) {
            const { valueFormatter } = get(props);
            const customFormat = valueFormatter ? valueFormatter(val, node) : undefined;
            if (customFormat) {
                return customFormat;
            }
            switch (node.type) {
                case 'array':
                    return `${node.circularOfId ? 'circular' : ''} [] ${val.length} items`;
                case 'object':
                    return `${node.circularOfId ? 'circular' : ''} {} ${Object.keys(val).length} keys`;
                case 'map':
                case 'set':
                    return `${node.circularOfId ? 'circular' : ''} () ${val.size} entries`;
                case 'date':
                    return `${val.toISOString()}`;
                case 'string':
                    return `"${val}"`;
                case 'boolean':
                    return val ? 'true' : 'false';
                case 'symbol':
                    return String(val);
                default:
                    return val;
            }
        }
    };
};