<!-- forked from https://github.com/zerodevx/svelte-json-view -->
<script>
export let json;
export let depth = Infinity;
export let _lvl = 0;
export let _last = true;
const collapsedSymbol = '...';
const getType = (i) => (i === null ? 'null' : typeof i);
let items;
let isArray;
let openBracket;
let closeBracket;
$: {
items = getType(json) === 'object' ? Object.keys(json) : [];
isArray = Array.isArray(json);
openBracket = isArray ? '[' : '{';
closeBracket = isArray ? ']' : '}';
}
let collapsed;
$: collapsed = depth < _lvl;
const format = (i) => {
switch (getType(i)) {
case 'string':
return `"${i}"`;
case 'function':
return 'f () {...}';
case 'symbol':
return i.toString();
default:
return i;
}
};
const clicked = () => {
collapsed = !collapsed;
};
const typeToClass = {
string: 'text-green-600',
number: 'text-amber-500',
boolean: 'text-cyan-500',
comma: 'text-slate-900'
};
$: isAutoCollapsibleArray = !!(
Array.isArray(json) &&
json.length <= 10 &&
json.every((x) => new Set(['string', 'number']).has(typeof x))
);
$: isAutoCollapsibleObject = !!(
typeof json === 'object' &&
!Array.isArray(json) &&
Object.values(json).reduce((acc, row, idx, arr) => {
if (!acc) {
return acc;
}
if (arr.length > 2) {
return false;
}
if (!new Set(['string', 'number', 'boolean']).has(typeof row)) {
return false;
}
return acc;
}, true)
);
</script>
{#if isAutoCollapsibleArray}
<span class="node">
<span on:click={clicked} tabindex="0">[</span>
{#each json as item, idx}
<span class="val {typeToClass[getType(item)]}">
{format(item)}{#if idx < json.length - 1}<span class={typeToClass.comma}> , </span>{/if}
</span>
{/each}
<span on:click={clicked} tabindex="0">]</span>{#if !_last}<span class={typeToClass.comma}>,</span>{/if}
</span>
{:else if isAutoCollapsibleObject}
<span class="node">
<span on:click={clicked} tabindex="0">{'{'}</span>
{#each Object.entries(json) as item, idx}
<span class="key">"{item[0]}":</span>
<span class="val {typeToClass[getType(item[1])]}">
{format(item[1])}{#if idx < Object.entries(json).length - 1}<span class={typeToClass.comma}>
,
</span>{/if}
</span>
{/each}
<span on:click={clicked} tabindex="0">{'}'}</span>{#if !_last}<span class={typeToClass.comma}>,</span
>{/if}
</span>
{:else if items.length}
<span class:hidden={collapsed} class="node">
<span class="bracket" on:click={clicked} tabindex="0">{openBracket}</span>
<div class="container">
{#each items as i, idx}
<div class="contained-item">
{#if !isArray}
<span class="key">"{i}":</span>
{/if}
{#if getType(json[i]) === 'object'}
<svelte:self json={json[i]} {depth} _lvl={_lvl + 1} _last={idx === items.length - 1} />
{:else}
<span class="val {typeToClass[getType(json[i])]}">
{format(json[i])}{#if idx < items.length - 1}<span class={typeToClass.comma}> , </span>{/if}
</span>
{/if}
</div>
{/each}
</div>
<span class="bracket" on:click={clicked} tabindex="0">{closeBracket}</span>
{#if !_last}<span class={typeToClass.comma}>,</span>{/if}
</span>
<span class="bracket" class:hidden={!collapsed} on:click={clicked} tabindex="0">
{openBracket}{collapsedSymbol}{closeBracket}
</span>
{#if !_last && collapsed}<span class={typeToClass.comma}>,</span>{/if}
{:else if Array.isArray(json)}
<span class="bracket">[]</span>
{:else if typeof json === 'object'}
<span class="bracket">{'{}'}</span>
{/if}
<style>
.node *,
.node {
font-family: monospace;
}
.container {
list-style: none;
margin: 0;
padding: 0;
padding-left: var(--nodePaddingLeft, 1rem);
border-left: var(--nodeBorderLeft, 1px dotted #9ca3af);
color: var(--nodeColor, #374151);
}
.contained-item {
margin-left: 5px;
}
.hidden {
display: none;
}
.bracket {
cursor: pointer;
}
.bracket:hover {
background: var(--bracketHoverBackground, #d1d5db);
}
</style>