@humanspeak/svelte-json-view-lite 0.2.0 → 0.2.2

package/README.md

@@ -266,7 +266,7 @@ Part of the [Humanspeak](https://humanspeak.com) family of runes-native Svelte 5
 | [@humanspeak/svelte-virtual-list](https://virtuallist.svelte.page) | Virtual scrolling for Svelte |
 | [@humanspeak/svelte-motion](https://motion.svelte.page) | Framer Motion for Svelte 5 |
 | [@humanspeak/svelte-headless-table](https://table.svelte.page) | Headless data tables for Svelte |
-| [@humanspeak/svelte-diff-match-patch](https://diff.svelte.page) | Diff comparison for Svelte |
+| [@humanspeak/svelte-diff](https://diff.svelte.page) | Diff comparison for Svelte |
 | [@humanspeak/svelte-purify](https://purify.svelte.page) | HTML sanitisation for Svelte |
 | [@humanspeak/svelte-virtual-chat](https://virtualchat.svelte.page) | Virtual chat viewport for Svelte 5 |
 | [@humanspeak/memory-cache](https://memory.svelte.page) | In-memory cache for TypeScript |

package/dist/ExpandableObject.svelte

@@ -78,8 +78,6 @@
     const ariaLabel = $derived(
         expanded ? activeAriaLabels.collapseJson : activeAriaLabels.expandJson
     )
-    const childLevel = $derived(level + 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,
@@ -90,7 +88,6 @@
     // 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
@@ -147,7 +144,7 @@
             it tight anyway for a consistent rule.
         -->
         <!-- prettier-ignore -->
-        <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(
+        <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 field !== undefined}{#if snippets.label}{@render snippets.label(
                     { field: field ?? '', level }
                 )}{:else if clickToExpandNode}<!-- svelte-ignore a11y_no_static_element_interactions --><span
                     class={style.clickableLabel}
@@ -160,8 +157,8 @@
                         field={childField}
                         value={childValue}
                         {style}
-                        lastElement={index === lastIndex}
-                        level={childLevel}
+                        lastElement={index === count - 1}
+                        level={level + 1}
                         {shouldExpandNode}
                         {clickToExpandNode}
                         {beforeExpandChange}

package/dist/JsonPrimitiveValue.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { JsonRenderProps } from './types.js'
+    import type { JsonRenderProps, SnippetOverrides } from './types.js'
     import {
         isBigInt,
         isBoolean,
@@ -15,92 +15,99 @@
     const { field, value, style, lastElement, level, snippets }: JsonRenderProps<Primitive> =
         $props()
 
-    const hasField = $derived(field !== undefined)
     const labelText = $derived(quoteString(field ?? '', style.quotesForFieldNames))
 
-    type ValueKind =
-        | 'null'
-        | 'undefined'
-        | 'string'
-        | 'boolean'
-        | 'number'
-        | 'bigint'
-        | 'date'
-        | 'function'
-        | 'other'
+    // `text`/`valueStyle` are common to every kind; only the discriminant and
+    // its snippet type vary. The intersection keeps `primitive.kind === 'x'`
+    // narrowing `primitive.snippet` to the one correct Snippet in the template.
+    type PrimitiveRender = { text: string; valueStyle: string } & (
+        | { kind: 'null'; snippet: SnippetOverrides['null'] }
+        | { kind: 'undefined'; snippet: SnippetOverrides['undefined'] }
+        | { kind: 'string'; snippet: SnippetOverrides['string'] }
+        | { kind: 'boolean'; snippet: SnippetOverrides['boolean'] }
+        | { kind: 'number'; snippet: SnippetOverrides['number'] }
+        | { kind: 'bigint'; snippet: SnippetOverrides['bigint'] }
+        | { kind: 'date'; snippet: SnippetOverrides['date'] }
+        | { kind: 'function'; snippet: SnippetOverrides['function'] }
+        | { kind: 'other'; snippet: undefined }
+    )
 
-    // A single predicate walk picks the discriminant; `rendered`, the
-    // snippet lookup, and the template all key off `kind` so the 8-way
-    // type ladder is evaluated once per render instead of three times.
-    const kind = $derived.by<ValueKind>(() => {
-        if (value === null) return 'null'
-        if (value === undefined) return 'undefined'
-        if (isString(value)) return 'string'
-        if (isBoolean(value)) return 'boolean'
-        if (isNumber(value)) return 'number'
-        if (isBigInt(value)) return 'bigint'
-        if (isDate(value)) return 'date'
-        if (isFunction(value)) return 'function'
-        return 'other'
-    })
-
-    type Rendered = { text: string; valueStyle: string }
-    const rendered = $derived.by<Rendered>(() => {
-        switch (kind) {
-            case 'null':
-                return { text: 'null', valueStyle: style.nullValue }
-            case 'undefined':
-                return { text: 'undefined', valueStyle: style.undefinedValue }
-            case 'string':
-                return {
-                    text: quoteStringValue(
-                        value as string,
-                        !style.noQuotesForStringValues,
-                        style.stringifyStringValues
-                    ),
-                    valueStyle: style.stringValue
-                }
-            case 'boolean':
-                return {
-                    text: (value as boolean) ? 'true' : 'false',
-                    valueStyle: style.booleanValue
-                }
-            case 'number':
-                return { text: String(value), valueStyle: style.numberValue }
-            case 'bigint':
-                return {
-                    text: `${(value as bigint).toString()}n`,
-                    valueStyle: style.numberValue
-                }
-            case 'date':
-                return { text: (value as Date).toISOString(), valueStyle: style.otherValue }
-            case 'function':
-                return { text: 'function() { }', valueStyle: style.otherValue }
-            default:
-                return { text: String(value), valueStyle: style.otherValue }
+    // One predicate walk returns everything the row needs, avoiding three
+    // separate reactions for the same primitive classification.
+    const primitive = $derived.by<PrimitiveRender>(() => {
+        if (value === null) {
+            return {
+                kind: 'null',
+                text: 'null',
+                valueStyle: style.nullValue,
+                snippet: snippets.null
+            }
         }
-    })
-
-    const activeSnippet = $derived.by(() => {
-        switch (kind) {
-            case 'null':
-                return snippets.null
-            case 'undefined':
-                return snippets.undefined
-            case 'string':
-                return snippets.string
-            case 'boolean':
-                return snippets.boolean
-            case 'number':
-                return snippets.number
-            case 'bigint':
-                return snippets.bigint
-            case 'date':
-                return snippets.date
-            case 'function':
-                return snippets.function
-            default:
-                return undefined
+        if (value === undefined) {
+            return {
+                kind: 'undefined',
+                text: 'undefined',
+                valueStyle: style.undefinedValue,
+                snippet: snippets.undefined
+            }
+        }
+        if (isString(value)) {
+            return {
+                kind: 'string',
+                text: quoteStringValue(
+                    value,
+                    !style.noQuotesForStringValues,
+                    style.stringifyStringValues
+                ),
+                valueStyle: style.stringValue,
+                snippet: snippets.string
+            }
+        }
+        if (isBoolean(value)) {
+            return {
+                kind: 'boolean',
+                text: value ? 'true' : 'false',
+                valueStyle: style.booleanValue,
+                snippet: snippets.boolean
+            }
+        }
+        if (isNumber(value)) {
+            return {
+                kind: 'number',
+                text: String(value),
+                valueStyle: style.numberValue,
+                snippet: snippets.number
+            }
+        }
+        if (isBigInt(value)) {
+            return {
+                kind: 'bigint',
+                text: `${value.toString()}n`,
+                valueStyle: style.numberValue,
+                snippet: snippets.bigint
+            }
+        }
+        if (isDate(value)) {
+            return {
+                kind: 'date',
+                text: value.toISOString(),
+                valueStyle: style.otherValue,
+                snippet: snippets.date
+            }
+        }
+        if (isFunction(value)) {
+            return {
+                kind: 'function',
+                text: 'function() { }',
+                valueStyle: style.otherValue,
+                snippet: snippets.function
+            }
+        }
+        return {
+            kind: 'other',
+            text: String(value),
+            valueStyle: style.otherValue,
+            snippet: undefined
         }
     })
 </script>
@@ -110,43 +117,43 @@
     preserves template whitespace between adjacent elements as visible spaces
     under the container's `white-space: pre-wrap`. React/JSX strips that
     whitespace natively; we hand-collapse it. Per-type snippet branches key
-    off `kind` rather than re-running predicates.
+    off the merged primitive render model rather than re-running predicates.
 -->
 <!-- Upstream parity: unselected treeitems omit aria-selected entirely. -->
 <!-- svelte-ignore a11y_role_has_required_aria_props -->
 <div class={style.basicChildStyle} role="treeitem">
     <!-- prettier-ignore -->
-    {#if hasField}{#if snippets.label}{@render snippets.label({ field: field ?? '', level })}{:else}<span class={style.label}>{labelText}:</span>{/if}{/if}{#if activeSnippet && kind === 'null'}{@render snippets.null?.(
+    {#if field !== undefined}{#if snippets.label}{@render snippets.label({ field: field ?? '', level })}{:else}<span class={style.label}>{labelText}:</span>{/if}{/if}{#if primitive.snippet && primitive.kind === 'null'}{@render primitive.snippet(
             { value: null, field, level }
-        )}{:else if activeSnippet && kind === 'undefined'}{@render snippets.undefined?.({
+        )}{:else if primitive.snippet && primitive.kind === 'undefined'}{@render primitive.snippet({
             value: undefined,
             field,
             level
-        })}{:else if activeSnippet && kind === 'string'}{@render snippets.string?.({
+        })}{:else if primitive.snippet && primitive.kind === 'string'}{@render primitive.snippet({
             value: value as string,
             field,
             level
-        })}{:else if activeSnippet && kind === 'boolean'}{@render snippets.boolean?.({
+        })}{:else if primitive.snippet && primitive.kind === 'boolean'}{@render primitive.snippet({
             value: value as boolean,
             field,
             level
-        })}{:else if activeSnippet && kind === 'number'}{@render snippets.number?.({
+        })}{:else if primitive.snippet && primitive.kind === 'number'}{@render primitive.snippet({
             value: value as number,
             field,
             level
-        })}{:else if activeSnippet && kind === 'bigint'}{@render snippets.bigint?.({
+        })}{:else if primitive.snippet && primitive.kind === 'bigint'}{@render primitive.snippet({
             value: value as bigint,
             field,
             level
-        })}{:else if activeSnippet && kind === 'date'}{@render snippets.date?.({
+        })}{:else if primitive.snippet && primitive.kind === 'date'}{@render primitive.snippet({
             value: value as Date,
             field,
             level
-        })}{:else if activeSnippet && kind === 'function'}{@render snippets.function?.({
+        })}{:else if primitive.snippet && primitive.kind === 'function'}{@render primitive.snippet({
             // trunk-ignore(eslint/@typescript-eslint/no-unsafe-function-type)
             value: value as Function,
             field,
             level
-        })}{:else}<span class={rendered.valueStyle}>{rendered.text}</span
+        })}{:else}<span class={primitive.valueStyle}>{primitive.text}</span
         >{/if}{#if !lastElement}<span class={style.punctuation}>,</span>{/if}
 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanspeak/svelte-json-view-lite",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "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",