@humanspeak/svelte-json-view-lite 0.1.3 → 0.1.5

package/README.md

@@ -7,6 +7,7 @@ runtime dependencies.
 
 [![NPM version](https://img.shields.io/npm/v/@humanspeak/svelte-json-view-lite.svg)](https://www.npmjs.com/package/@humanspeak/svelte-json-view-lite)
 [![Build Status](https://github.com/humanspeak/svelte-json-view-lite/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/humanspeak/svelte-json-view-lite/actions/workflows/npm-publish.yml)
+[![AI tokens used building this repo — TokenMaxing](https://tokenmaxing.app/badge/humanspeak/svelte-json-view-lite)](https://tokenmaxing.app/card/humanspeak/svelte-json-view-lite)
 [![Coverage Status](https://coveralls.io/repos/github/humanspeak/svelte-json-view-lite/badge.svg?branch=main)](https://coveralls.io/github/humanspeak/svelte-json-view-lite?branch=main)
 [![License](https://img.shields.io/npm/l/@humanspeak/svelte-json-view-lite.svg)](https://github.com/humanspeak/svelte-json-view-lite/blob/main/LICENSE)
 [![Downloads](https://img.shields.io/npm/dm/@humanspeak/svelte-json-view-lite.svg)](https://www.npmjs.com/package/@humanspeak/svelte-json-view-lite)

package/dist/DataRender.svelte

@@ -16,25 +16,18 @@
     const isArr = $derived(isArray(value))
     const isObj = $derived(isObject(value) && !isDate(value) && !isFunction(value))
 
-    // Derive the children tuple array from `value` so ExpandableObject
-    // receives a stable reference while `value` is unchanged — otherwise
-    // a fresh array identity on every parent tick invalidates the
-    // {#each} key and cascades re-renders down the tree.
-    const children = $derived.by<Array<[string | undefined, unknown]>>(() => {
-        if (isArr) return (value as unknown[]).map((el) => [undefined, el])
-        if (isObj) {
-            const obj = value as Record<string, unknown>
-            return Object.keys(obj).map((k) => [k, obj[k]])
-        }
-        return []
-    })
+    // The children tuple array is NOT built here: a collapsed node only needs
+    // its child *count*, and materializing `Array<[key, value]>` for every
+    // node (a 100k-element array = 100k throwaway tuples at mount under
+    // collapseAllNested) is pure waste. ExpandableObject derives the tuples
+    // lazily, gated on its own `expanded` state. See issue #21.
 </script>
 
 {#if isArr}
     <ExpandableObject
         {...props}
         value={value as unknown[]}
-        data={children}
+        isArray={true}
         openBracket="["
         closeBracket="]"
     />
@@ -42,7 +35,7 @@
     <ExpandableObject
         {...props}
         value={value as object}
-        data={children}
+        isArray={false}
         openBracket={OBJECT_OPEN}
         closeBracket={OBJECT_CLOSE}
     />

package/dist/ExpandableObject.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { untrack } from 'svelte'
     import DataRender from './DataRender.svelte'
     import EmptyObject from './EmptyObject.svelte'
     import type { AriaLabels, ExpandableRenderProps } from './types.js'
@@ -7,7 +8,7 @@
     const {
         field,
         value,
-        data,
+        isArray,
         lastElement,
         openBracket,
         closeBracket,
@@ -26,15 +27,32 @@
     // svelte-ignore state_referenced_locally
     let expanded = $state(shouldExpandNode(level, value, field))
 
+    // Once a node has been opened we keep its children materialized, even after
+    // it collapses again: re-deriving the tuple array (and re-reading N child
+    // values) on every re-expand would be its own waste. Latches true, stays true.
+    // svelte-ignore state_referenced_locally
+    let hasMaterialized = $state(expanded)
+
     let shouldExpandNodeCalled = false
 
+    // Single chokepoint for flipping expansion — every path (mount effect,
+    // click, keyboard) routes through here, so the materialization high-water
+    // mark can't be forgotten when a new expansion path is added.
+    function applyExpanded(next: boolean) {
+        expanded = next
+        if (next) hasMaterialized = true
+    }
+
     $effect(() => {
         const fn = shouldExpandNode
         if (!shouldExpandNodeCalled) {
             shouldExpandNodeCalled = true
             return
         }
-        expanded = fn(level, value, field)
+        // Track only the callback identity: untrack level/value/field so an
+        // ancestor re-render that mutates them can't rerun this effect and
+        // overwrite the user's expansion state.
+        applyExpanded(untrack(() => fn(level, value, field)))
     })
 
     // SSR-stable id for aria-controls linkage.
@@ -42,6 +60,13 @@
 
     let expanderButton = $state<HTMLSpanElement | null>(null)
 
+    // Register from the node action, not a component effect: actions follow
+    // DOM creation order, so parent/top-level expanders append before children.
+    function registerExpander(node: HTMLSpanElement) {
+        const unregister = outerRef.navigation.register(node)
+        return { destroy: unregister }
+    }
+
     const activeAriaLabels = $derived<AriaLabels>(
         style.ariaLabels ??
             style.ariaLables ?? {
@@ -54,16 +79,35 @@
         expanded ? activeAriaLabels.collapseJson : activeAriaLabels.expandJson
     )
     const childLevel = $derived(level + 1)
-    const lastIndex = $derived(data.length - 1)
     const hasField = $derived(field !== undefined)
     const labelText = $derived(quoteString(field ?? '', style.quotesForFieldNames))
 
+    // Object keys resolved once and shared by the count and the tuple builder,
+    // so an expanded object node enumerates its keys a single time. Arrays skip
+    // this entirely — their length is free.
+    const objectKeys = $derived(isArray ? null : Object.keys(value as Record<string, unknown>))
+
+    // Child *count* is cheap — array length, or the key count for objects.
+    // Neither touches child *values*, so a collapsed node stays allocation-free.
+    const count = $derived(objectKeys ? objectKeys.length : (value as unknown[]).length)
+    const lastIndex = $derived(count - 1)
+
+    // The tuple array is materialized lazily on first open, then kept: a node
+    // that is never expanded never allocates its N tuples or reads its N child
+    // values (#21); one that has been opened doesn't re-read them on re-expand.
+    const entries = $derived.by<Array<[string | undefined, unknown]>>(() => {
+        if (!hasMaterialized) return []
+        if (isArray) return (value as unknown[]).map((el) => [undefined, el])
+        const obj = value as Record<string, unknown>
+        return (objectKeys as string[]).map((k) => [k, obj[k]])
+    })
+
     function setExpandWithCallback(newExpandValue: boolean) {
         if (expanded === newExpandValue) return
         if (beforeExpandChange && !beforeExpandChange({ level, value, field, newExpandValue })) {
             return
         }
-        expanded = newExpandValue
+        applyExpanded(newExpandValue)
     }
 
     function onKeyDown(e: KeyboardEvent) {
@@ -75,34 +119,18 @@
         if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return
         e.preventDefault()
         const direction = e.key === 'ArrowUp' ? -1 : 1
-        const outer = outerRef.current
-        if (!outer) return
-        const buttons = outer.querySelectorAll<HTMLElement>('[role=button]')
-        let currentIndex = -1
-        for (let i = 0; i < buttons.length; i++) {
-            if (buttons[i].tabIndex === 0) {
-                currentIndex = i
-                break
-            }
-        }
-        if (currentIndex < 0) return
-        const nextIndex = (currentIndex + direction + buttons.length) % buttons.length
-        buttons[currentIndex].tabIndex = -1
-        buttons[nextIndex].tabIndex = 0
-        buttons[nextIndex].focus()
+        if (expanderButton) outerRef.navigation.move(expanderButton, direction)
     }
 
     function onClick() {
         setExpandWithCallback(!expanded)
         if (!expanderButton) return
-        const prev = outerRef.current?.querySelector<HTMLElement>('[role=button][tabindex="0"]')
-        if (prev) prev.tabIndex = -1
-        expanderButton.tabIndex = 0
+        outerRef.navigation.activate(expanderButton)
         expanderButton.focus()
     }
 </script>
 
-{#if data.length === 0}
+{#if count === 0}
     <EmptyObject {field} {openBracket} {closeBracket} {lastElement} {style} />
 {:else}
     <div
@@ -122,7 +150,7 @@
             it tight anyway for a consistent rule.
         -->
         <!-- prettier-ignore -->
-        <span bind:this={expanderButton} class={expanderIconStyle} role="button" aria-label={ariaLabel} aria-expanded={expanded} aria-controls={expanded ? contentsId : undefined} tabindex={level === 0 ? 0 : -1} onclick={onClick} onkeydown={onKeyDown}></span>{#if hasField}{#if snippets.label}{@render snippets.label(
+        <span bind:this={expanderButton} use:registerExpander class={expanderIconStyle} role="button" aria-label={ariaLabel} aria-expanded={expanded} aria-controls={expanded ? contentsId : undefined} tabindex={level === 0 ? 0 : -1} onclick={onClick} onkeydown={onKeyDown}></span>{#if hasField}{#if snippets.label}{@render snippets.label(
                     { field: field ?? '', level }
                 )}{:else if clickToExpandNode}<!-- svelte-ignore a11y_no_static_element_interactions --><span
                     class={style.clickableLabel}
@@ -131,7 +159,7 @@
                 >{:else}<span class={style.label}>{labelText}:</span>{/if}{/if}<span
             class={style.punctuation}>{openBracket}</span
         >{#if expanded}<ul id={contentsId} role="group" class={style.childFieldsContainer}>
-                {#each data as [childField, childValue], index (childField ?? index)}<DataRender
+                {#each entries as [childField, childValue], index (childField ?? index)}<DataRender
                         field={childField}
                         value={childValue}
                         {style}

package/dist/JsonView.svelte

@@ -3,6 +3,7 @@
     import { defaultStyles } from './index.js'
     import type { OuterRef, Props, StyleProps } from './types.js'
     import { isObject } from './utils/dataTypeDetection.js'
+    import { createExpanderNavigation } from './utils/expanderNavigation.js'
     import { allExpanded } from './utils/expandStrategies.js'
 
     const {
@@ -26,6 +27,7 @@
     }: Props = $props()
 
     let outerElement = $state<HTMLDivElement | null>(null)
+    const navigation = createExpanderNavigation()
 
     // Merge user theme onto defaults. Also emit a deprecation warning when the
     // legacy `ariaLables` key (typo in react-json-view-lite) is supplied
@@ -52,7 +54,8 @@
     const outerRef: OuterRef = {
         get current() {
             return outerElement
-        }
+        },
+        navigation
     }
 
     const snippets = $derived({

package/dist/types.d.ts

@@ -106,13 +106,62 @@ export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'data' | 'st
     label?: Snippet<[LabelSnippetProps]>;
 }
 /**
- * Reference wrapper passed from the root down to every expandable node so
- * that cross-sibling keyboard navigation can query `[role=button]` elements
- * scoped to the tree. Using a getter ensures the child always reads the
- * current `bind:this` target rather than a frozen snapshot.
+ * Tree-local controller for roving tabindex across expandable nodes.
+ *
+ * The controller is intentionally passed through internal render props instead
+ * of discovered from the DOM on every keypress. Each expander registers its
+ * button while mounted, unregisters on `$effect` cleanup, and asks this helper
+ * to activate or move focus when the user clicks or presses ArrowUp/ArrowDown.
+ */
+export interface ExpanderNavigation {
+    /**
+     * Add a mounted expander button to the navigation order.
+     *
+     * @param _button - Expander button element rendered by an expandable node.
+     * @returns Cleanup callback that removes the button on component unmount.
+     *
+     * @example
+     * ```ts
+     * const cleanup = navigation.register(button)
+     * cleanup()
+     * ```
+     */
+    register(_button: HTMLElement): () => void;
+    /**
+     * Make a registered button the only expander with `tabIndex=0`.
+     *
+     * @param _button - Registered expander button to activate.
+     * @returns Nothing.
+     *
+     * @example
+     * ```ts
+     * navigation.activate(button)
+     * ```
+     */
+    activate(_button: HTMLElement): void;
+    /**
+     * Move focus to the next or previous registered expander.
+     *
+     * @param _button - Current registered expander button.
+     * @param _direction - `1` for ArrowDown, `-1` for ArrowUp.
+     * @returns Nothing.
+     *
+     * @example
+     * ```ts
+     * navigation.move(button, 1)
+     * ```
+     */
+    move(_button: HTMLElement, _direction: -1 | 1): void;
+}
+/**
+ * Reference wrapper passed from the root down to every expandable node. Using
+ * a getter ensures the child always reads the current `bind:this` target rather
+ * than a frozen snapshot; the navigation helper keeps roving tabindex state
+ * tree-local without doing live DOM sweeps on every keypress.
  */
 export interface OuterRef {
     readonly current: HTMLDivElement | null;
+    readonly navigation: ExpanderNavigation;
 }
 /** Internal shared props threaded through every renderer. Not exported. */
 export interface CommonRenderProps {
@@ -132,7 +181,9 @@ export interface JsonRenderProps<T> extends CommonRenderProps {
 export interface ExpandableRenderProps extends CommonRenderProps {
     field?: string;
     value: object | unknown[];
-    data: Array<[string | undefined, unknown]>;
+    /** Whether `value` is an array. Resolved once by DataRender (the type
+     *  dispatcher) so ExpandableObject never re-tests the value's shape. */
+    isArray: boolean;
     openBracket: string;
     closeBracket: string;
 }

package/dist/utils/expanderNavigation.d.ts

@@ -0,0 +1,23 @@
+import type { ExpanderNavigation } from '../types.js';
+/**
+ * Create the tree-local roving tabindex controller for expandable JSON nodes.
+ *
+ * Each expander registers its own button on mount and receives a cleanup
+ * callback for unmount. The controller stores buttons in document order as a
+ * linked list, so ArrowUp/ArrowDown can move from the current button to its
+ * neighbor without querying `[role=button]` or scanning `tabIndex` across the
+ * whole tree on every keypress. Normal document-order mounts append in O(1);
+ * the insertion scan is reserved for out-of-order registrations.
+ *
+ * @returns A navigation controller shared by every expandable node in one
+ * `JsonView` tree.
+ *
+ * @example
+ * ```ts
+ * const navigation = createExpanderNavigation()
+ * const cleanup = navigation.register(button)
+ * navigation.move(button, 1)
+ * cleanup()
+ * ```
+ */
+export declare const createExpanderNavigation: () => ExpanderNavigation;

package/dist/utils/expanderNavigation.js

@@ -0,0 +1,224 @@
+/**
+ * Create the tree-local roving tabindex controller for expandable JSON nodes.
+ *
+ * Each expander registers its own button on mount and receives a cleanup
+ * callback for unmount. The controller stores buttons in document order as a
+ * linked list, so ArrowUp/ArrowDown can move from the current button to its
+ * neighbor without querying `[role=button]` or scanning `tabIndex` across the
+ * whole tree on every keypress. Normal document-order mounts append in O(1);
+ * the insertion scan is reserved for out-of-order registrations.
+ *
+ * @returns A navigation controller shared by every expandable node in one
+ * `JsonView` tree.
+ *
+ * @example
+ * ```ts
+ * const navigation = createExpanderNavigation()
+ * const cleanup = navigation.register(button)
+ * navigation.move(button, 1)
+ * cleanup()
+ * ```
+ */
+export const createExpanderNavigation = () => {
+    const nodes = new WeakMap();
+    let first = null;
+    let last = null;
+    let active = null;
+    let activeIsSeed = false;
+    /**
+     * Detach a node from the linked list while preserving the surrounding
+     * neighbors. The caller owns deleting it from the lookup table.
+     *
+     * @param node - Registered expander node to remove from document order.
+     * @returns Nothing.
+     *
+     * @example
+     * ```ts
+     * unlink(node)
+     * ```
+     */
+    const unlink = (node) => {
+        if (node.previous)
+            node.previous.next = node.next;
+        else
+            first = node.next;
+        if (node.next)
+            node.next.previous = node.previous;
+        else
+            last = node.previous;
+        node.previous = null;
+        node.next = null;
+    };
+    /**
+     * Insert a registered node before another registered node in document
+     * order.
+     *
+     * @param node - Expander node being inserted.
+     * @param before - Existing expander node that currently follows `node`.
+     * @returns Nothing.
+     *
+     * @example
+     * ```ts
+     * insertBefore(node, before)
+     * ```
+     */
+    const insertBefore = (node, before) => {
+        node.previous = before.previous;
+        node.next = before;
+        if (before.previous)
+            before.previous.next = node;
+        else
+            first = node;
+        before.previous = node;
+    };
+    /**
+     * Append a registered node to the end of the document-order list.
+     *
+     * @param node - Expander node being appended.
+     * @returns Nothing.
+     *
+     * @example
+     * ```ts
+     * append(node)
+     * ```
+     */
+    const append = (node) => {
+        node.previous = last;
+        if (last)
+            last.next = node;
+        else
+            first = node;
+        last = node;
+    };
+    /**
+     * Make one registered button the active roving tabindex target.
+     *
+     * @param node - Expander node that should receive `tabIndex=0`.
+     * @param seed - Whether this is the implicit initial target, which may
+     * move to the document-order head if earlier nodes register later.
+     * @returns Nothing.
+     *
+     * @example
+     * ```ts
+     * setActive(node, false)
+     * ```
+     */
+    const setActive = (node, seed) => {
+        if (active && active !== node)
+            active.element.tabIndex = -1;
+        active = node;
+        activeIsSeed = seed;
+        node.element.tabIndex = 0;
+    };
+    /**
+     * Make one registered button the explicit active roving tabindex target.
+     *
+     * @param button - Expander button that should receive `tabIndex=0`.
+     * @returns Nothing.
+     *
+     * @example
+     * ```ts
+     * navigation.activate(button)
+     * ```
+     */
+    const activate = (button) => {
+        const node = nodes.get(button);
+        if (!node)
+            return;
+        setActive(node, false);
+    };
+    /**
+     * Remove a button from the controller and keep a usable roving target when
+     * the active button unmounts.
+     *
+     * @param button - Expander button previously returned by `register`.
+     * @returns Nothing.
+     *
+     * @example
+     * ```ts
+     * unregister(button)
+     * ```
+     */
+    const unregister = (button) => {
+        const node = nodes.get(button);
+        if (!node)
+            return;
+        const fallback = node.next ?? node.previous;
+        const wasActive = active === node;
+        const wasSeed = activeIsSeed;
+        nodes.delete(button);
+        unlink(node);
+        if (wasActive) {
+            active = null;
+            activeIsSeed = false;
+            if (fallback)
+                setActive(fallback, wasSeed);
+        }
+    };
+    /**
+     * Register a mounted expander button in document order.
+     *
+     * @param button - Expander button rendered by an `ExpandableObject`.
+     * @returns Cleanup callback that unregisters `button` on component unmount.
+     *
+     * @example
+     * ```ts
+     * const cleanup = navigation.register(button)
+     * cleanup()
+     * ```
+     */
+    const register = (button) => {
+        const existing = nodes.get(button);
+        if (existing)
+            return () => unregister(button);
+        const node = { element: button, previous: null, next: null };
+        nodes.set(button, node);
+        if (!last ||
+            (last.element.compareDocumentPosition(button) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0) {
+            append(node);
+        }
+        else {
+            let before = null;
+            for (let cursor = first; cursor; cursor = cursor.next) {
+                if ((button.compareDocumentPosition(cursor.element) &
+                    Node.DOCUMENT_POSITION_FOLLOWING) !==
+                    0) {
+                    before = cursor;
+                    break;
+                }
+            }
+            if (before)
+                insertBefore(node, before);
+            else
+                append(node);
+        }
+        if (button.tabIndex === 0)
+            setActive(node, false);
+        else if ((!active || activeIsSeed) && first)
+            setActive(first, true);
+        return () => unregister(button);
+    };
+    /**
+     * Move focus to the adjacent registered expander, wrapping at list edges.
+     *
+     * @param button - Current expander button handling the keypress.
+     * @param direction - `1` for ArrowDown, `-1` for ArrowUp.
+     * @returns Nothing.
+     *
+     * @example
+     * ```ts
+     * navigation.move(button, 1)
+     * ```
+     */
+    const move = (button, direction) => {
+        const current = nodes.get(button);
+        if (!current)
+            return;
+        const next = direction === 1 ? (current.next ?? first) : (current.previous ?? last);
+        if (!next)
+            return;
+        setActive(next, false);
+        next.element.focus();
+    };
+    return { register, activate, move };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanspeak/svelte-json-view-lite",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Fast, tiny JSON tree viewer for Svelte 5 — port of react-json-view-lite with runes, SSR, snippet overrides, and zero runtime dependencies",
   "keywords": [
     "svelte",
@@ -57,37 +57,37 @@
   "devDependencies": {
     "@eslint/compat": "^2.1.0",
     "@eslint/js": "^10.0.1",
-    "@playwright/test": "^1.60.0",
+    "@playwright/test": "^1.61.1",
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.61.1",
-    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/kit": "^2.69.1",
+    "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/svelte": "^5.3.1",
+    "@testing-library/svelte": "^5.4.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^25.9.1",
-    "@typescript-eslint/eslint-plugin": "^8.60.0",
-    "@typescript-eslint/parser": "^8.60.0",
-    "@vitest/coverage-v8": "^4.1.7",
-    "eslint": "^10.4.0",
+    "@types/node": "^26.1.0",
+    "@typescript-eslint/eslint-plugin": "^8.62.1",
+    "@typescript-eslint/parser": "^8.62.1",
+    "@vitest/coverage-v8": "^4.1.9",
+    "eslint": "^10.6.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-svelte": "^3.18.0",
+    "eslint-plugin-svelte": "^3.20.0",
     "eslint-plugin-unused-imports": "^4.4.1",
-    "globals": "^17.6.0",
+    "globals": "^17.7.0",
     "husky": "^9.1.7",
     "jsdom": "^29.1.1",
-    "mprocs": "^0.9.3",
-    "prettier": "^3.8.3",
+    "mprocs": "^0.9.6",
+    "prettier": "^3.9.4",
     "prettier-plugin-organize-imports": "^4.3.0",
-    "prettier-plugin-svelte": "^4.0.1",
+    "prettier-plugin-svelte": "^4.1.1",
     "publint": "^0.3.21",
-    "svelte": "^5.55.9",
-    "svelte-check": "^4.4.8",
+    "svelte": "^5.56.4",
+    "svelte-check": "^4.7.1",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.60.0",
-    "vite": "^8.0.14",
-    "vitest": "^4.1.7"
+    "typescript-eslint": "^8.62.1",
+    "vite": "^8.1.3",
+    "vitest": "^4.1.9"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"