fragment-tools 0.1.19 → 0.2.0

package/src/client/app/lib/svelte-json-tree/JSONObjectNode.svelte

@@ -0,0 +1,40 @@
+<script>
+	import JSONNested from './JSONNested.svelte';
+	import JSONNode from './JSONNode.svelte';
+	import PreviewList from './PreviewList.svelte';
+
+	let { value, summary: summaryText } = $props();
+
+	let keys = $derived(Object.getOwnPropertyNames(value));
+	let previewKeys = $derived(keys.slice(0, 5));
+</script>
+
+<JSONNested {keys}>
+	{#snippet summary()}
+		<span class="label">{summaryText ?? '{…}'}</span>
+	{/snippet}
+
+	{#snippet preview(root)}
+		<PreviewList
+			list={previewKeys}
+			hasMore={previewKeys.length < keys.length}
+			prefix={summaryText ? `${summaryText} {` : '{ '}
+			postfix={' }'}
+			{root}
+		>
+			{#snippet item(key)}
+				<span class="property">{key}</span>
+				<span class="operator">{': '}</span>
+				<JSONNode value={value[key]} />
+			{/snippet}
+		</PreviewList>
+	{/snippet}
+
+	{#snippet itemKey(key)}
+		<span class="property">{key}</span>
+	{/snippet}
+
+	{#snippet itemValue(key)}
+		<JSONNode value={value[key]} />
+	{/snippet}
+</JSONNested>

package/src/client/app/lib/svelte-json-tree/JSONStringNode.svelte

@@ -0,0 +1,31 @@
+<script>
+	import { useState } from './utils.js';
+
+	let { value } = $props();
+
+	const map = {
+		'\n': '\\n',
+		'\t': '\\t',
+		'\r': '\\r',
+	};
+
+	let serialised = $derived(value.replace(/[\n\t\r]/g, (_) => map[_]));
+
+	const { displayMode } = useState();
+</script>
+
+{#if displayMode === 'summary'}
+	<span
+		>"{serialised.slice(0, 30) + (serialised.length > 30 ? '…' : '')}"</span
+	>
+{:else}
+	<span>"{serialised}"</span>
+{/if}
+
+<style>
+	span {
+		color: var(--string-color);
+		word-break: break-all;
+		word-wrap: break-word;
+	}
+</style>

package/src/client/app/lib/svelte-json-tree/JSONValueNode.svelte

@@ -0,0 +1,31 @@
+<script>
+	let { value, nodeType } = $props();
+</script>
+
+<span class={nodeType}>
+	{value}
+</span>
+
+<style>
+	.Date {
+		color: var(--date-color);
+	}
+	.BigInt {
+		color: var(--number-color);
+	}
+	.Number {
+		color: var(--number-color);
+	}
+	.Boolean {
+		color: var(--boolean-color);
+	}
+	.Null {
+		color: var(--null-color);
+	}
+	.Undefined {
+		color: var(--undefined-color);
+	}
+	.Symbol {
+		color: var(--symbol-color);
+	}
+</style>

package/src/client/app/lib/svelte-json-tree/PreviewList.svelte

@@ -0,0 +1,38 @@
+<script>
+	let {
+		list,
+		label = undefined,
+		prefix = undefined,
+		postfix = undefined,
+		root = false,
+		hasMore,
+		item,
+	} = $props();
+</script>
+
+<!-- {#if root} -->
+{#if prefix}
+	{#if label}
+		<span class="label">{label}</span>
+	{/if}
+	<span class="operator">{prefix} </span>
+{/if}
+{#each list as node, index}
+	{@render item?.(node)}
+	{#if index < list.length - 1}
+		<span class="comma operator">,</span>
+	{/if}
+{/each}
+{#if hasMore}
+	<span class="comma operator">,</span>
+	<span class="operator">…</span>
+{/if}
+{#if postfix}<span class="operator">{postfix}</span>{/if}
+
+<!-- {/if} -->
+
+<style>
+	.comma {
+		margin-right: 0.5em;
+	}
+</style>

package/src/client/app/lib/svelte-json-tree/RegExpNode.svelte

@@ -0,0 +1,42 @@
+<script>
+	import JSONNested from './JSONNested.svelte';
+	import JSONNode from './JSONNode.svelte';
+
+	let { value } = $props();
+
+	let str = $derived(value.toString());
+
+	const keys = [
+		'lastIndex',
+		'dotAll',
+		'flags',
+		'global',
+		'hasIndices',
+		'ignoreCase',
+		'multiline',
+		'source',
+		'sticky',
+		'unicode',
+	];
+</script>
+
+<JSONNested {keys}>
+	{#snippet summary()}
+		<span class="regex">{str}</span>
+	{/snippet}
+	{#snippet preview(root)}
+		<span class="regex">{str}</span>
+	{/snippet}
+	{#snippet itemKey(key)}
+		<span class="internal">{String(key)}</span>
+	{/snippet}
+	{#snippet itemValue(key)}
+		<JSONNode value={value[key]} />
+	{/snippet}
+</JSONNested>
+
+<style>
+	.regex {
+		color: var(--regex-color);
+	}
+</style>

package/src/client/app/lib/svelte-json-tree/Root.svelte

@@ -0,0 +1,75 @@
+<script>
+	import { setContext } from 'svelte';
+	import JSONNode from './JSONNode.svelte';
+
+	let { value } = $props();
+
+	setContext('root', true);
+</script>
+
+<div>
+	<JSONNode {value} />
+</div>
+
+<style>
+	div {
+		--string-color: var(--json-tree-string-color, #cb3f41);
+		--symbol-color: var(--json-tree-symbol-color, #cb3f41);
+		--boolean-color: var(--json-tree-boolean-color, #112aa7);
+		--function-color: var(--json-tree-function-color, #112aa7);
+		--number-color: var(--json-tree-number-color, #3029cf);
+		--label-color: var(--json-tree-label-color, #871d8f);
+		--property-color: var(--json-tree-property-color, #000000);
+		--arrow-color: var(--json-tree-arrow-color, #727272);
+		--operator-color: var(--json-tree-operator-color, #727272);
+		--null-color: var(--json-tree-null-color, #8d8d8d);
+		--undefined-color: var(--json-tree-undefined-color, #8d8d8d);
+		--date-color: var(--json-tree-date-color, #8d8d8d);
+		--internal-color: var(--json-tree-internal-color, grey);
+		--regex-color: var(--json-tree-regex-color, var(--string-color));
+		--li-identation: var(--json-tree-li-indentation, 1em);
+		--li-line-height: var(--json-tree-li-line-height, 1.3);
+		font-size: var(--json-tree-font-size, 12px);
+		font-family: var(
+			--json-tree-font-family,
+			'Courier New',
+			Courier,
+			monospace
+		);
+
+		display: flex;
+		flex-direction: column;
+	}
+	div :global(li) {
+		line-height: var(--li-line-height);
+		display: var(--li-display, list-item);
+		list-style: none;
+	}
+	div,
+	div :global(ul) {
+		padding: 0;
+		margin: 0;
+	}
+
+	.expandable {
+		margin-left: var(--li-identation);
+	}
+	div {
+		cursor: default;
+	}
+	div :global(.label) {
+		color: var(--label-color);
+	}
+	div :global(.property) {
+		color: var(--property-color);
+	}
+	div :global(.internal) {
+		color: var(--internal-color);
+	}
+	div :global(.operator) {
+		color: var(--operator-color);
+	}
+	span {
+		white-space: pre-wrap;
+	}
+</style>

package/src/client/app/lib/svelte-json-tree/Summary.svelte

@@ -0,0 +1,9 @@
+<script>
+	import { setContext } from 'svelte';
+
+	let { children } = $props();
+
+	setContext('displayMode', 'summary');
+</script>
+
+{@render children?.()}

package/src/client/app/lib/svelte-json-tree/TypedArrayNode.svelte

@@ -0,0 +1,56 @@
+<script>
+	import JSONNested from './JSONNested.svelte';
+	import JSONNode from './JSONNode.svelte';
+	import PreviewList from './PreviewList.svelte';
+
+	let { value, nodeType } = $props();
+
+	const TO_STRING_TAG = 'Symbol(Symbol.toStringTag)';
+	const internalKeys = [
+		'buffer',
+		'byteLength',
+		'byteOffset',
+		'length',
+		TO_STRING_TAG,
+	];
+	let keys = $derived([
+		...Object.getOwnPropertyNames(value),
+		...internalKeys,
+	]);
+	let previewList = $derived(value.slice(0, 5));
+
+	function getValue(key) {
+		if (key === TO_STRING_TAG) {
+			return value[Symbol.toStringTag];
+		}
+		return value[key];
+	}
+</script>
+
+<JSONNested {keys}>
+	{#snippet summary()}
+		<span class="label">{nodeType}({value.length})</span>
+	{/snippet}
+	{#snippet preview(root)}
+		<PreviewList
+			list={previewList}
+			hasMore={previewList.length < value.length}
+			label="{nodeType}({value.length}) "
+			prefix="["
+			postfix="]"
+			{root}
+		>
+			{#snippet item(value)}
+				<JSONNode {value} />
+			{/snippet}
+		</PreviewList>
+	{/snippet}
+	{#snippet itemKey(key)}
+		<span class={internalKeys.includes(key) ? 'internal' : 'property'}
+			>{String(key)}</span
+		>
+	{/snippet}
+	{#snippet itemValue(key)}
+		<JSONNode value={getValue(key)} />
+	{/snippet}
+</JSONNested>

package/src/client/app/lib/svelte-json-tree/index.js

@@ -0,0 +1 @@
+export { default } from './Root.svelte';

package/src/client/app/lib/svelte-json-tree/utils.js

@@ -0,0 +1,57 @@
+import { getContext, setContext } from 'svelte';
+
+export function getShouldExpandNode({
+	defaultExpandedPaths,
+	defaultExpandedLevel,
+}) {
+	const defaultExpandedPathsParts = defaultExpandedPaths.map((path) =>
+		path.split('.'),
+	);
+	function matchPath(keyPath) {
+		outer: for (const parts of defaultExpandedPathsParts) {
+			if (keyPath.length > parts.length) continue;
+			const length = Math.min(keyPath.length, parts.length);
+			for (let i = 0; i < length; i++) {
+				if (parts[i] !== '*' && parts[i] !== String(keyPath[i]))
+					continue outer;
+			}
+			return true;
+		}
+		return false;
+	}
+
+	return function ({ keyPath, level }) {
+		return level <= defaultExpandedLevel || matchPath(keyPath);
+	};
+}
+
+export function objType(obj, shouldTreatIterableAsObject) {
+	const type = Object.prototype.toString.call(obj).slice(8, -1);
+	if (type === 'Object') {
+		if (
+			!shouldTreatIterableAsObject &&
+			typeof obj[Symbol.iterator] === 'function'
+		) {
+			return 'Iterable';
+		}
+		return obj.constructor.name;
+	}
+
+	return type;
+}
+
+export function useState() {
+	const root = getContext('root');
+	const displayMode = getContext('displayMode');
+	const expandable = getContext('expandable');
+	const expanded = getContext('expanded');
+	const toggleExpand = getContext('toggleExpand');
+
+	return {
+		root,
+		displayMode,
+		expandable,
+		expanded,
+		toggleExpand,
+	};
+}

package/src/client/app/modules/Console/ConsoleLine.svelte

@@ -1,5 +1,5 @@
 <script>
-	import JSONTree from 'svelte-json-tree';
+	import JSONTree from '../../lib/svelte-json-tree';
 	// import ConsoleTable from './ConsoleTable.svelte';
 
 	export let log;
@@ -17,7 +17,7 @@
 <div
 	class="log console-{log.level}"
 	style="padding-left: {level * 8}px"
-	on:click={log.level === 'group' ? toggleGroupCollapse : undefined}
+	onclick={log.level === 'group' ? toggleGroupCollapse : undefined}
 >
 	{#if log.count > 1}
 		<div class="count">
@@ -29,7 +29,7 @@
 		<div
 			class="arrow"
 			class:expand={!log.collapsed}
-			on:click={toggleGroupCollapse}
+			onclick={toggleGroupCollapse}
 		>
 			▶
 		</div>
@@ -68,7 +68,7 @@
 		</div>
 	{/if}
 	{#each new Array(level - 1) as _, idx}
-		<div class="outline" style="left: {idx * 15 + 15}px" />
+		<div class="outline" style="left: {idx * 15 + 15}px"></div>
 	{/each}
 </div>
 
@@ -88,27 +88,28 @@
 
 <style>
 	.log {
-		--json-tree-string-color: rgba(240, 240, 240, 0.6);
+		--json-tree-string-color: #17d08e;
 		--arrow-sign: rgba(255, 255, 255, 0.5);
 		--json-tree-font-size: var(--font-size-input);
 		--json-tree-font-family: var(--font-mono);
 		--json-tree-number-color: #9980ff;
-		--json-tree-symbol-color: #cb3f41;
+		--json-tree-symbol-color: #0a0606;
 		--json-tree-boolean-color: #9980ff;
 		--json-tree-function-color: var(--color-active);
 		/* --json-tree-number-color: #3029cf; */
 		--json-tree-property-color: #5db0d7;
-		--json-tree-label-color: #17d08e;
+		--json-tree-label-color: rgba(240, 240, 240, 0.6);
 		--json-tree-arrow-color: #727272;
 		--json-tree-null-color: #8d8d8d;
 		--json-tree-undefined-color: #8d8d8d;
 		--json-tree-date-color: #8d8d8d;
-		--json-tree-li-indentation: 12px;
+		--json-tree-li-indentation: 20px;
+		--json-tree-li-line-height: 1.5;
 
 		position: relative;
 
 		display: flex;
-		padding: 4px 0 3px;
+		padding: 4px 0;
 
 		color: rgba(255, 255, 255, 0.5);
 
@@ -118,7 +119,7 @@
 
 	.args {
 		display: flex;
-		flex-direction: column;
+		gap: 6px;
 	}
 
 	.string {
@@ -183,7 +184,7 @@
 	}
 
 	.log :global(.arrow) {
-		margin-right: 10px;
+		padding-right: 6px;
 	}
 
 	.log :global(.String) {

package/src/client/app/modules/Console.svelte

@@ -1,37 +1,94 @@
 <script>
+	import { onMount } from 'svelte';
 	import Module from '../ui/Module.svelte';
 	import ModuleHeaderAction from '../ui/ModuleHeaderAction.svelte';
-	import { logs } from '../stores/console';
 	import ConsoleLine from './Console/ConsoleLine.svelte';
-	import { afterUpdate } from 'svelte';
 
-	export let mID;
-	export let hasHeader;
+	let { id, headless = false } = $props();
 
+	let logs = $state([]);
+	let mirrored = ['log', 'warn', 'error', 'dir'];
+	let refs = {};
+	let clear = console.clear;
+	/** @type {HTMLDivElement}*/
 	let scrollableContainer;
 
-	function clear() {
-		$logs = [];
+	function enable() {
+		mirrored.forEach((key) => {
+			const ref = console[`${key}`];
+			refs[`${key}`] = ref;
+			// window[`${key}`] = ref;
+
+			console[`${key}`] = (...args) => {
+				let isFromVite = args.some(
+					(log) => typeof log === 'string' && log.includes('[vite]'),
+				);
+
+				if (!isFromVite) {
+					ref(...args);
+
+					if (logs.length > 0) {
+						const lastLog = logs[logs.length - 1];
+						const { level: lastLevel, args: lastArgs } = lastLog;
+
+						if (lastLevel === key && lastArgs[0] === args[0]) {
+							logs[logs.length - 1].count++;
+							return;
+						}
+					}
+
+					logs.push({
+						level: key,
+						args,
+						count: 1,
+					});
+				}
+			};
+		});
+
+		console.clear = () => {
+			clear();
+			logs = [];
+		};
+	}
+
+	function disable() {
+		mirrored.forEach((key) => {
+			const ref = refs[key];
+
+			console[`${key}`] = ref;
+		});
+
+		console.clear = clear;
 	}
 
-	afterUpdate(() => {
-		if (scrollableContainer) {
-			scrollableContainer.scrollTop = scrollableContainer.scrollHeight;
-		}
+	onMount(() => {
+		enable();
+		return () => {
+			disable();
+		};
 	});
 </script>
 
-<Module {mID} {hasHeader} name="console" scrollable={false}>
-	<svelte:fragment slot="header-right">
-		<ModuleHeaderAction border label="Clear" on:click={() => clear()}
-			>clear</ModuleHeaderAction
+<Module {id} {headless} name="console" scrollable={false}>
+	{#snippet headerRight()}
+		<ModuleHeaderAction
+			permanent
+			border
+			label="Clear"
+			onclick={(e) => {
+				e.preventDefault();
+				e.stopPropagation();
+
+				logs = [];
+			}}>clear</ModuleHeaderAction
 		>
-	</svelte:fragment>
+	{/snippet}
 	<div class="container">
 		<div class="list">
 			<div class="scroll" bind:this={scrollableContainer}>
-				{#each $logs as log}
-					<ConsoleLine {log} />
+				{#each logs as log}
+					<ConsoleLine log={$state.snapshot(log)} />
 				{/each}
 			</div>
 		</div>
@@ -65,6 +122,14 @@
 		height: 100%;
 		overflow-x: hidden;
 		overflow-y: scroll;
+
+		scroll-snap-type: y proximity;
+	}
+
+	.scroll::after {
+		display: block;
+		content: '';
+		scroll-snap-align: end;
 	}
 
 	.scroll::-webkit-scrollbar {