; indexOrName: string | number | undefined; depth: number }) => void
+
+type RenderComponent = React.FC
| React.Component
+
+// Static-ish configuration + custom render components. Kept referentially stable
+// (memoized in JsonView) so memoized rows don't re-render on volatile changes.
+export interface Config {
+ collapseStringsAfterLength: number
+ collapseStringMode: 'directly' | 'word' | 'address'
+ customizeCollapseStringUI: CustomizeCollapseStringUI | undefined
+
+ enableClipboard: boolean
+ editable: Editable
+
+ displaySize: DisplaySize
+ displayArrayIndex: boolean
+
+ matchesURL: boolean
+ urlRegExp: RegExp
+
+ customizeCopy: (node: any, nodeMeta?: NodeMeta) => any
+
+ CopyComponent?: RenderComponent<{ onClick: (event: React.MouseEvent) => void; className: string }>
+ CopiedComponent?: RenderComponent<{ className: string; style: React.CSSProperties }>
+ EditComponent?: RenderComponent<{ onClick: (event: React.MouseEvent) => void; className: string }>
+ CancelComponent?: RenderComponent<{ onClick: (event: React.MouseEvent) => void; className: string; style: React.CSSProperties }>
+ DoneComponent?: RenderComponent<{ onClick: (event: React.MouseEvent) => void; className: string; style: React.CSSProperties }>
+ CustomOperation?: React.FC<{ node: any }> | React.Component<{ node: any }>
+}
+
+// Volatile: mutators + expand/edit/add/string state. Rows read the flags they
+// need as props (see Row) so this context changing does not re-render every row.
+export interface Handlers {
+ toggle: (row: FlatRow) => void
+ toggleChunk: (row: FlatRow) => void
+
+ editValue: (row: FlatRow, newValue: any) => void
+ deleteRow: (row: FlatRow) => void
+ addProperty: (row: FlatRow, name: string) => void
+ pushArrayItem: (row: FlatRow) => void
+
+ startEdit: (row: FlatRow) => void
+ cancelEdit: () => void
+
+ startDelete: (row: FlatRow) => void
+ cancelDelete: () => void
+
+ startAdd: (row: FlatRow) => void
+ cancelAdd: () => void
+
+ setStringExpanded: (key: string, expanded: boolean) => void
+ stringExpanded: (key: string) => boolean | undefined
+}
+
+export const defaultConfig: Config = {
+ collapseStringsAfterLength: 99,
+ collapseStringMode: 'directly',
+ customizeCollapseStringUI: undefined,
+ enableClipboard: true,
+ editable: false,
+ displaySize: undefined,
+ displayArrayIndex: true,
+ matchesURL: false,
+ urlRegExp: /^$/,
+ customizeCopy: () => {}
+}
+
+export const ConfigContext = createContext(defaultConfig)
+
+export const HandlersContext = createContext({} as Handlers)
diff --git a/src/components/copy-button.tsx b/src/components/copy-button.tsx
index 3b2b041..d0b21ff 100644
--- a/src/components/copy-button.tsx
+++ b/src/components/copy-button.tsx
@@ -3,7 +3,7 @@ import { ReactComponent as CopySVG } from '../svgs/copy.svg'
import { ReactComponent as CopiedSVG } from '../svgs/copied.svg'
import type { NodeMeta } from '../types'
import { writeClipboard } from '../utils'
-import { JsonViewContext } from './json-view'
+import { ConfigContext } from './contexts'
interface Props {
node: any
@@ -11,7 +11,7 @@ interface Props {
}
export default function CopyButton({ node, nodeMeta }: Props) {
- const { customizeCopy, CopyComponent, CopiedComponent } = useContext(JsonViewContext)
+ const { customizeCopy, CopyComponent, CopiedComponent } = useContext(ConfigContext)
const [copied, setCopied] = useState(false)
diff --git a/src/components/json-node.tsx b/src/components/json-node.tsx
deleted file mode 100644
index 073b6ed..0000000
--- a/src/components/json-node.tsx
+++ /dev/null
@@ -1,246 +0,0 @@
-import { useContext, useRef, useState, isValidElement, useMemo, useCallback } from 'react'
-import { JsonViewContext } from './json-view'
-import {
- customCopy,
- customDelete,
- customEdit,
- editableDelete,
- editableEdit,
- isObject,
- isReactComponent,
- safeCall,
- stringifyForCopying,
- resolveEvalFailedNewValue,
- customMatchesURL
-} from '../utils'
-import ObjectNode from './object-node'
-import LongString from './long-string'
-import CopyButton from './copy-button'
-import { ReactComponent as EditSVG } from '../svgs/edit.svg'
-import { ReactComponent as DeleteSVG } from '../svgs/trash.svg'
-import { ReactComponent as DoneSVG } from '../svgs/done.svg'
-import { ReactComponent as CancelSVG } from '../svgs/cancel.svg'
-import { ReactComponent as LinkSVG } from '../svgs/link.svg'
-import type { CustomizeNode, CustomizeOptions } from '../types'
-
-interface Props {
- node: any
- depth: number
- deleteHandle?: (indexOrName: string | number, parentPath: string[]) => void
- editHandle?: (indexOrName: string | number, newValue: any, oldValue: any, parentPath: string[]) => void
- indexOrName?: number | string
- parent?: Record | Array
- parentPath: string[]
-}
-
-export default function JsonNode({ node, depth, deleteHandle: _deleteHandle, indexOrName, parent, editHandle, parentPath }: Props) {
- // prettier-ignore
- const { collapseStringsAfterLength, enableClipboard, editable, src, onDelete, onChange, customizeNode, matchesURL, urlRegExp, EditComponent, DoneComponent, CancelComponent, CustomOperation } = useContext(JsonViewContext)
-
- let customReturn: ReturnType | undefined
- if (typeof customizeNode === 'function') customReturn = safeCall(customizeNode, [{ node, depth, indexOrName }])
-
- if (customReturn) {
- if (isValidElement(customReturn)) return customReturn
- else if (isReactComponent(customReturn)) {
- const CustomComponent = customReturn
- return
- }
- }
-
- if (Array.isArray(node) || isObject(node)) {
- return (
-
- )
- } else {
- const type = typeof node
- const currentPath = typeof indexOrName !== 'undefined' ? [...parentPath, String(indexOrName)] : parentPath
-
- const [editing, setEditing] = useState(false)
- const [deleting, setDeleting] = useState(false)
- const valueRef = useRef(null)
-
- const edit = () => {
- setEditing(true)
- setTimeout(() => {
- window.getSelection()?.selectAllChildren(valueRef.current!)
- valueRef.current?.focus()
- })
- }
-
- const done = useCallback(() => {
- let newValue = valueRef.current!.innerText
-
- try {
- const parsedValue = JSON.parse(newValue)
-
- if (editHandle) editHandle(indexOrName!, parsedValue, node, parentPath)
- } catch (e) {
- const trimmedStringValue = resolveEvalFailedNewValue(type, newValue)
- if (editHandle) editHandle(indexOrName!, trimmedStringValue, node, parentPath)
- }
-
- setEditing(false)
- }, [editHandle, indexOrName, node, parentPath, type])
- const cancel = () => {
- setEditing(false)
- setDeleting(false)
- }
- const deleteHandle = () => {
- setDeleting(false)
- if (_deleteHandle) _deleteHandle(indexOrName!, parentPath)
- if (onDelete)
- onDelete({
- value: node,
- depth,
- src,
- indexOrName: indexOrName!,
- parentType: Array.isArray(parent) ? 'array' : 'object',
- parentPath
- })
- if (onChange)
- onChange({
- depth,
- src,
- indexOrName: indexOrName!,
- parentType: Array.isArray(parent) ? 'array' : 'object',
- type: 'delete',
- parentPath
- })
- }
-
- const handleKeyDown = useCallback(
- (event: React.KeyboardEvent) => {
- if (event.key === 'Enter') {
- event.preventDefault()
- done()
- } else if (event.key === 'Escape') {
- cancel()
- }
- },
- [done]
- )
-
- const isEditing = editing || deleting
- const ctrlClick =
- !isEditing && editableEdit(editable) && customEdit(customReturn as CustomizeOptions | undefined) && editHandle
- ? (event: React.MouseEvent) => {
- if (event.ctrlKey || event.metaKey) edit()
- }
- : undefined
- const Icons = (
- <>
- {isEditing &&
- (typeof DoneComponent === 'function' ? (
-
- ) : (
-
- ))}
- {isEditing &&
- (typeof CancelComponent === 'function' ? (
-
- ) : (
-
- ))}
-
- {!isEditing && enableClipboard && customCopy(customReturn as CustomizeOptions | undefined) && (
-
- )}
- {!isEditing && matchesURL && type === 'string' && urlRegExp.test(node) && customMatchesURL(customReturn as CustomizeOptions | undefined) && (
-
-
-
- )}
-
- {!isEditing &&
- editableEdit(editable) &&
- customEdit(customReturn as CustomizeOptions | undefined) &&
- editHandle &&
- (typeof EditComponent === 'function' ? (
-
- ) : (
-
- ))}
- {!isEditing && editableDelete(editable) && customDelete(customReturn as CustomizeOptions | undefined) && _deleteHandle && (
- setDeleting(true)} />
- )}
- {typeof CustomOperation === 'function' ? : null}
-
- )
-
- let className = 'json-view--string'
-
- switch (type) {
- case 'number':
- case 'bigint':
- className = 'json-view--number'
- break
- case 'boolean':
- className = 'json-view--boolean'
- break
- case 'object':
- className = 'json-view--null'
- break
- }
-
- if (typeof (customReturn as CustomizeOptions)?.className === 'string') className += ' ' + (customReturn as CustomizeOptions).className
-
- if (deleting) className += ' json-view--deleting'
-
- let displayValue = String(node)
- if (type === 'bigint') displayValue += 'n'
-
- const EditingElement = useMemo(
- () => (
-
- ),
- [displayValue, type, handleKeyDown]
- )
-
- if (type === 'string')
- return (
- <>
- {editing ? (
- EditingElement
- ) : node.length > collapseStringsAfterLength ? (
-
- ) : (
-
- "{displayValue}"
-
- )}
-
- {Icons}
-
- )
- else {
- return (
- <>
- {editing ? (
- EditingElement
- ) : (
-
- {displayValue}
-
- )}
-
- {Icons}
-
- )
- }
- }
-}
diff --git a/src/components/json-view.tsx b/src/components/json-view.tsx
index 95f8cf7..080cbd5 100644
--- a/src/components/json-view.tsx
+++ b/src/components/json-view.tsx
@@ -1,91 +1,18 @@
-import { ReactElement, createContext, useCallback, useEffect, useState } from 'react'
-import JsonNode from './json-node'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import type { Collapsed, CustomizeCollapseStringUI, CustomizeNode, DisplaySize, Editable, NodeMeta } from '../types'
import { stringifyForCopying } from '../utils'
-
-type OnEdit = (params: {
- newValue: any
- oldValue: any
- depth: number
- src: any
- indexOrName: string | number
- parentType: 'object' | 'array' | null
- parentPath: string[]
-}) => void
-type OnDelete = (params: {
- value: any
- indexOrName: string | number
- depth: number
- src: any
- parentType: 'object' | 'array' | null
- parentPath: string[]
-}) => void
-type OnAdd = (params: { indexOrName: string | number; depth: number; src: any; parentType: 'object' | 'array'; parentPath: string[] }) => void
-type OnChange = (params: {
- indexOrName: string | number
- depth: number
- src: any
- parentType: 'object' | 'array' | null
- type: 'add' | 'edit' | 'delete'
- parentPath: string[]
-}) => void
-type OnCollapse = (params: { isCollapsing: boolean; node: Record | Array; indexOrName: string | number | undefined; depth: number }) => void
+import { flatten } from '../core/flatten'
+import { getByPath, getParentByPath, pathKey } from '../core/path'
+import type { ExpandState } from '../core/expand-state'
+import type { FlatRow } from '../core/row'
+import { Config, ConfigContext, Handlers, HandlersContext, OnAdd, OnChange, OnCollapse, OnDelete, OnEdit } from './contexts'
+import Row from './row'
+import VirtualList from './virtual-list'
export const defaultURLRegExp = /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/
-export const JsonViewContext = createContext({
- src: undefined as any,
-
- collapseStringsAfterLength: 99,
- collapseStringMode: 'directly' as 'directly' | 'word' | 'address',
- customizeCollapseStringUI: undefined as CustomizeCollapseStringUI | undefined,
-
- collapseObjectsAfterLength: 20,
- collapsed: false as Collapsed,
- onCollapse: undefined as OnCollapse | undefined,
- enableClipboard: true,
-
- editable: false as Editable,
- onEdit: undefined as OnEdit | undefined,
- onDelete: undefined as OnDelete | undefined,
- onAdd: undefined as OnAdd | undefined,
- onChange: undefined as OnChange | undefined,
-
- forceUpdate: () => {},
-
- customizeNode: undefined as CustomizeNode | undefined,
- customizeCopy: (() => {}) as (node: any, nodeMeta?: NodeMeta) => any,
-
- displaySize: undefined as DisplaySize,
- displayArrayIndex: true,
-
- matchesURL: false,
- urlRegExp: defaultURLRegExp,
-
- ignoreLargeArray: false,
-
- CopyComponent: undefined as
- | React.FC<{ onClick: (event: React.MouseEvent) => void; className: string }>
- | React.Component<{ onClick: (event: React.MouseEvent) => void; className: string }>
- | undefined,
- CopiedComponent: undefined as
- | React.FC<{ className: string; style: React.CSSProperties }>
- | React.Component<{ className: string; style: React.CSSProperties }>
- | undefined,
- EditComponent: undefined as
- | React.FC<{ onClick: (event: React.MouseEvent) => void; className: string }>
- | React.Component<{ onClick: (event: React.MouseEvent) => void; className: string }>
- | undefined,
- CancelComponent: undefined as
- | React.FC<{ onClick: (event: React.MouseEvent) => void; className: string; style: React.CSSProperties }>
- | React.Component<{ onClick: (event: React.MouseEvent) => void; className: string; style: React.CSSProperties }>
- | undefined,
- DoneComponent: undefined as
- | React.FC<{ onClick: (event: React.MouseEvent) => void; className: string; style: React.CSSProperties }>
- | React.Component<{ onClick: (event: React.MouseEvent) => void; className: string; style: React.CSSProperties }>
- | undefined,
- CustomOperation: undefined as React.FC<{ node: any }> | React.Component<{ node: any }> | undefined
-})
+// Re-exported for backward compat (previously a single combined context).
+export { ConfigContext as JsonViewContext } from './contexts'
export interface JsonViewProps {
src: any
@@ -123,24 +50,30 @@ export interface JsonViewProps {
ignoreLargeArray?: boolean
- CopyComponent?:
- | React.FC<{ onClick: (event: React.MouseEvent) => void; className: string }>
- | React.Component<{ onClick: (event: React.MouseEvent) => void; className: string }>
- CopiedComponent?: React.FC<{ className: string; style: React.CSSProperties }> | React.Component<{ className: string; style: React.CSSProperties }>
-
- EditComponent?:
- | React.FC<{ onClick: (event: React.MouseEvent) => void; className: string }>
- | React.Component<{ onClick: (event: React.MouseEvent) => void; className: string }>
-
- CancelComponent?:
- | React.FC<{ onClick: (event: React.MouseEvent) => void; className: string; style: React.CSSProperties }>
- | React.Component<{ onClick: (event: React.MouseEvent) => void; className: string; style: React.CSSProperties }>
-
- DoneComponent?:
- | React.FC<{ onClick: (event: React.MouseEvent) => void; className: string; style: React.CSSProperties }>
- | React.Component<{ onClick: (event: React.MouseEvent) => void; className: string; style: React.CSSProperties }>
+ // Virtualization
+ virtual?: boolean | 'auto'
+ rowVirtualThreshold?: number
+ height?: number | string
+ maxHeight?: number | string
+ estimatedRowHeight?: number
+ overscan?: number
+ // Virtualize inside an existing scroll container instead of the library's own
+ // scroll box: pass a ref to that element. When set, height/maxHeight and the
+ // default 70vh cap are ignored and the referenced element owns scrolling.
+ scrollRef?: React.RefObject
+
+ CopyComponent?: Config['CopyComponent']
+ CopiedComponent?: Config['CopiedComponent']
+ EditComponent?: Config['EditComponent']
+ CancelComponent?: Config['CancelComponent']
+ DoneComponent?: Config['DoneComponent']
+ CustomOperation?: Config['CustomOperation']
+}
- CustomOperation?: React.FC<{ node: any }> | React.Component<{ node: any }>
+interface UIState {
+ editingKey?: string
+ deletingKey?: string
+ addingKey?: string
}
export default function JsonView({
@@ -179,103 +112,241 @@ export default function JsonView({
ignoreLargeArray = false,
+ virtual = 'auto',
+ rowVirtualThreshold = 100,
+ height,
+ maxHeight,
+ estimatedRowHeight = 20,
+ overscan = 8,
+ scrollRef,
+
CopyComponent,
CopiedComponent,
-
EditComponent,
CancelComponent,
DoneComponent,
CustomOperation
}: JsonViewProps) {
- const [_, update] = useState(0)
- const forceUpdate = useCallback(() => update(state => ++state), [])
+ const [version, setVersion] = useState(0)
+ const forceUpdate = useCallback(() => setVersion(v => v + 1), [])
+
const [src, setSrc] = useState(_src)
useEffect(() => setSrc(_src), [_src])
+
+ const [ui, setUI] = useState({})
+
+ const expand = useRef(new Map())
+ const stringExpand = useRef>(new Map())
+
+ // Mirror the legacy reset: changing collapsed / collapseObjectsAfterLength
+ // discards user fold overrides so defaults recompute.
+ useEffect(() => {
+ expand.current.clear()
+ forceUpdate()
+ }, [collapsed, collapseObjectsAfterLength, forceUpdate])
+
+ // Latest refs so handlers can stay referentially stable (Phase 6 memo win).
+ const srcRef = useRef(src)
+ srcRef.current = src
+ const cbRef = useRef({ onEdit, onDelete, onAdd, onChange, onCollapse })
+ cbRef.current = { onEdit, onDelete, onAdd, onChange, onCollapse }
+
+ const handlers = useMemo(() => {
+ const fireEdit = (row: FlatRow, newValue: any, oldValue: any) => {
+ const depth = row.path.length
+ const parentType = row.parentType
+ const parentPath = row.parentPath.map(String)
+ cbRef.current.onEdit?.({ newValue, oldValue, depth, src: srcRef.current, indexOrName: row.indexOrName as any, parentType, parentPath })
+ cbRef.current.onChange?.({ type: 'edit', depth, src: srcRef.current, indexOrName: row.indexOrName as any, parentType, parentPath })
+ }
+
+ return {
+ toggle(row) {
+ const key = row.expandKey!
+ const willExpand = row.kind === 'collapsed'
+ expand.current.set(key, willExpand)
+ cbRef.current.onCollapse?.({ isCollapsing: !willExpand, node: row.value, indexOrName: row.indexOrName, depth: row.path.length + 1 })
+ forceUpdate()
+ },
+ toggleChunk(row) {
+ const key = row.expandKey!
+ expand.current.set(key, row.kind === 'chunk')
+ forceUpdate()
+ },
+ editValue(row, newValue) {
+ const oldValue = row.value
+ if (row.path.length === 0) {
+ setSrc(newValue)
+ cbRef.current.onEdit?.({ newValue, oldValue, depth: 1, src: srcRef.current, indexOrName: row.indexOrName as any, parentType: null, parentPath: [] })
+ cbRef.current.onChange?.({ type: 'edit', depth: 1, src: srcRef.current, indexOrName: row.indexOrName as any, parentType: null, parentPath: [] })
+ } else {
+ const parent = getParentByPath(srcRef.current, row.path)
+ if (Array.isArray(parent)) parent[Number(row.indexOrName)] = newValue
+ else if (parent) parent[row.indexOrName as string] = newValue
+ fireEdit(row, newValue, oldValue)
+ }
+ setUI(s => ({ ...s, editingKey: undefined }))
+ forceUpdate()
+ },
+ deleteRow(row) {
+ const isContainer = row.kind === 'open' || row.kind === 'collapsed'
+ if (row.path.length === 0) {
+ setSrc(undefined)
+ cbRef.current.onDelete?.({ value: srcRef.current, depth: 1, src: srcRef.current, indexOrName: row.indexOrName as any, parentType: null, parentPath: [] })
+ cbRef.current.onChange?.({ type: 'delete', depth: 1, src: srcRef.current, indexOrName: row.indexOrName as any, parentType: null, parentPath: [] })
+ } else {
+ const parent = getParentByPath(srcRef.current, row.path)
+ if (Array.isArray(parent)) parent.splice(Number(row.indexOrName), 1)
+ else if (parent) delete parent[row.indexOrName as string]
+ const depth = row.path.length + 1
+ const parentType = isContainer ? (row.nodeType === 'array' ? 'array' : 'object') : row.parentType
+ const parentPath = (isContainer ? row.path : row.parentPath).map(String)
+ cbRef.current.onDelete?.({ value: row.value, depth, src: srcRef.current, indexOrName: row.indexOrName as any, parentType, parentPath })
+ cbRef.current.onChange?.({ type: 'delete', depth, src: srcRef.current, indexOrName: row.indexOrName as any, parentType, parentPath })
+ }
+ setUI(s => ({ ...s, deletingKey: undefined }))
+ forceUpdate()
+ },
+ addProperty(row, name) {
+ const container = getByPath(srcRef.current, row.path)
+ if (container && typeof container === 'object') container[name] = null
+ const depth = row.path.length + 1
+ const parentPath = row.path.map(String)
+ cbRef.current.onAdd?.({ indexOrName: name, depth, src: srcRef.current, parentType: 'object', parentPath })
+ cbRef.current.onChange?.({ type: 'add', indexOrName: name, depth, src: srcRef.current, parentType: 'object', parentPath })
+ setUI(s => ({ ...s, addingKey: undefined }))
+ forceUpdate()
+ },
+ pushArrayItem(row) {
+ const arr = getByPath(srcRef.current, row.path)
+ if (Array.isArray(arr)) {
+ arr.push(null)
+ const depth = row.path.length + 1
+ const parentPath = row.path.map(String)
+ cbRef.current.onAdd?.({ indexOrName: arr.length - 1, depth, src: srcRef.current, parentType: 'array', parentPath })
+ cbRef.current.onChange?.({ type: 'add', indexOrName: arr.length - 1, depth, src: srcRef.current, parentType: 'array', parentPath })
+ }
+ forceUpdate()
+ },
+ startEdit(row) {
+ setUI({ editingKey: pathKey(row.path) })
+ },
+ cancelEdit() {
+ setUI(s => ({ ...s, editingKey: undefined }))
+ },
+ startDelete(row) {
+ setUI({ deletingKey: pathKey(row.path) })
+ },
+ cancelDelete() {
+ setUI(s => ({ ...s, deletingKey: undefined }))
+ },
+ startAdd(row) {
+ setUI({ addingKey: row.expandKey })
+ },
+ cancelAdd() {
+ setUI(s => ({ ...s, addingKey: undefined }))
+ },
+ setStringExpanded(key, expanded) {
+ stringExpand.current.set(key, expanded)
+ forceUpdate()
+ },
+ stringExpanded(key) {
+ return stringExpand.current.get(key)
+ }
+ }
+ }, [forceUpdate])
+
+ const config = useMemo(
+ () => ({
+ collapseStringsAfterLength,
+ collapseStringMode,
+ customizeCollapseStringUI,
+ enableClipboard,
+ editable,
+ displaySize,
+ displayArrayIndex,
+ matchesURL,
+ urlRegExp,
+ customizeCopy,
+ CopyComponent,
+ CopiedComponent,
+ EditComponent,
+ CancelComponent,
+ DoneComponent,
+ CustomOperation
+ }),
+ [
+ collapseStringsAfterLength,
+ collapseStringMode,
+ customizeCollapseStringUI,
+ enableClipboard,
+ editable,
+ displaySize,
+ displayArrayIndex,
+ matchesURL,
+ urlRegExp,
+ customizeCopy,
+ CopyComponent,
+ CopiedComponent,
+ EditComponent,
+ CancelComponent,
+ DoneComponent,
+ CustomOperation
+ ]
+ )
+
+ const rows = useMemo(
+ () => flatten(src, { expand: expand.current, collapsed, collapseObjectsAfterLength, customizeNode, ignoreLargeArray, addingKey: ui.addingKey }),
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [src, version, ui.addingKey, collapsed, collapseObjectsAfterLength, customizeNode, ignoreLargeArray]
+ )
+
+ const flagsFor = useCallback(
+ (row: FlatRow) => {
+ const nodeKey = pathKey(row.path)
+ return {
+ editing: row.kind === 'value' && ui.editingKey === nodeKey,
+ deleting: (row.kind === 'value' || row.kind === 'open' || row.kind === 'collapsed') && ui.deletingKey === nodeKey,
+ adding: row.kind === 'open' && ui.addingKey === nodeKey,
+ stringTruncated: row.kind === 'value' && row.nodeType === 'string' ? stringExpand.current.get(nodeKey) : undefined
+ }
+ },
+ // version is a dep so string-truncation toggles (which bump it) recompute flags
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [ui.editingKey, ui.deletingKey, ui.addingKey, version]
+ )
+
+ const rootClassName = 'json-view' + (dark ? ' dark' : '') + (theme && theme !== 'default' ? ' json-view_' + theme : '') + (className ? ' ' + className : '')
+
+ const shouldVirtual = virtual === false ? false : virtual === true ? true : rows.length > rowVirtualThreshold || height != null || maxHeight != null
+ // A consumer-supplied scroll container owns scrolling, so skip the self-scroll
+ // box sizing (height/maxHeight and the 70vh fallback) in that mode.
+ const resolvedMaxHeight = scrollRef != null ? undefined : maxHeight != null ? maxHeight : shouldVirtual && height == null ? '70vh' : undefined
+
return (
-
-
- {
- setSrc(newValue)
- if (onEdit)
- onEdit({
- newValue,
- oldValue,
- depth: 1,
- src,
- indexOrName: indexOrName,
- parentType: null,
- parentPath: parentPath
- })
- if (onChange) onChange({ type: 'edit', depth: 1, src, indexOrName: indexOrName, parentType: null, parentPath: parentPath })
- }}
- deleteHandle={(indexOrName: number | string, parentPath: string[]) => {
- setSrc(undefined)
- if (onDelete)
- onDelete({
- value: src,
- depth: 1,
- src,
- indexOrName: indexOrName,
- parentType: null,
- parentPath: parentPath
- })
- if (onChange)
- onChange({
- depth: 1,
- src,
- indexOrName: indexOrName,
- parentType: null,
- type: 'delete',
- parentPath: parentPath
- })
- }}
- parentPath={[]}
- />
-
-
+
+
+ {shouldVirtual ? (
+
+ ) : (
+
+ {rows.map(row => {
+ const flags = flagsFor(row)
+ return |
+ })}
+
+ )}
+
+
)
}
diff --git a/src/components/large-array-node.tsx b/src/components/large-array-node.tsx
deleted file mode 100644
index 4e14e17..0000000
--- a/src/components/large-array-node.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { useCallback, useContext, useState } from 'react'
-import { JsonViewContext } from './json-view'
-import { customCopy, objectSize, ifDisplay } from '../utils'
-import { ReactComponent as AngleDownSVG } from '../svgs/angle-down.svg'
-import CopyButton from './copy-button'
-import NameValue from './name-value'
-import type { CustomizeOptions } from '../types'
-
-interface Props {
- originNode: Array
- node: Array
- depth: number
- index: number
- deleteHandle?: (_: string | number, currentPath: string[]) => void
- customOptions?: CustomizeOptions
- startIndex: number
- parent?: Record | Array
- parentPath: string[]
-}
-
-export default function LargeArrayNode({ originNode, node, depth, index, deleteHandle: _deleteSelf, customOptions, startIndex, parent, parentPath }: Props) {
- const { enableClipboard, src, onEdit, onChange, forceUpdate, displaySize, CustomOperation } = useContext(JsonViewContext)
-
- const currentPath = [...parentPath, String(index)]
-
- const [fold, setFold] = useState(true)
-
- // Edit property
- const editHandle = useCallback(
- (indexOrName: number | string, newValue: any, oldValue: any) => {
- originNode[indexOrName as number] = newValue
- if (onEdit)
- onEdit({
- newValue,
- oldValue,
- depth,
- src,
- indexOrName,
- parentType: 'array',
- parentPath
- })
- if (onChange) onChange({ type: 'edit', depth, src, indexOrName, parentType: 'array', parentPath })
- forceUpdate()
- },
- [node, onEdit, onChange, forceUpdate]
- )
-
- // Delete property
- const deleteHandle = (index: number | string) => {
- originNode.splice(index as number, 1)
- if (_deleteSelf) _deleteSelf(index, parentPath)
- forceUpdate()
- }
-
- const Icons = (
- <>
- {!fold && (
- setFold(true)} className='jv-size-chevron'>
- {ifDisplay(displaySize, depth, fold) && {objectSize(node)} Items}
-
-
-
- )}
-
- {!fold && enableClipboard && customCopy(customOptions) && (
-
- )}
- {typeof CustomOperation === 'function' ? : null}
-
- )
-
- return (
-
-
{'['}
-
- {Icons}
-
- {!fold ? (
-
- {node.map((n, i) => (
-
- ))}
-
- ) : (
-
- )}
-
-
{']'}
-
- {nestCollapsedArray.map((item, index) => (
-
- ))}
-
- ) : (
-
- )}
-
- {']'}
-
- {fold && ifDisplay(displaySize, depth, fold) && (
- setFold(false)} className='jv-size'>
- {node.length} Items
-
- )}
-
- )
-}
diff --git a/src/components/long-string.tsx b/src/components/long-string.tsx
index acf90da..6feb3e9 100644
--- a/src/components/long-string.tsx
+++ b/src/components/long-string.tsx
@@ -1,15 +1,21 @@
import React, { useContext, useRef, useState } from 'react'
-import { JsonViewContext } from './json-view'
+import { ConfigContext } from './contexts'
interface Props {
str: string
className: string
ctrlClick: ((event: React.MouseEvent) => void) | undefined
+ // When provided, truncation state is controlled by the caller (central store)
+ // so it survives virtualized unmount/remount. Falls back to local state.
+ truncated?: boolean
+ onToggleTruncated?: (next: boolean) => void
}
-const LongString = React.forwardRef(({ str, className, ctrlClick }, ref) => {
- let { collapseStringMode, collapseStringsAfterLength, customizeCollapseStringUI } = useContext(JsonViewContext)
- const [truncated, setTruncated] = useState(true)
+const LongString = React.forwardRef(({ str, className, ctrlClick, truncated: truncatedProp, onToggleTruncated }, ref) => {
+ let { collapseStringMode, collapseStringsAfterLength, customizeCollapseStringUI } = useContext(ConfigContext)
+ const [truncatedLocal, setTruncatedLocal] = useState(true)
+ const truncated = truncatedProp ?? truncatedLocal
+ const setTruncated = (next: boolean) => (onToggleTruncated ? onToggleTruncated(next) : setTruncatedLocal(next))
const strRef = useRef(null)
collapseStringsAfterLength = collapseStringsAfterLength > 0 ? collapseStringsAfterLength : 0
diff --git a/src/components/name-value.tsx b/src/components/name-value.tsx
deleted file mode 100644
index 76bf272..0000000
--- a/src/components/name-value.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useContext } from 'react'
-import { JsonViewContext } from './json-view'
-
-import JsonNode from './json-node'
-
-interface Props {
- indexOrName: number | string
- value: any
- depth: number
- parent?: Record | Array
- parentPath: string[]
- deleteHandle: (indexOrName: string | number, parentPath: string[]) => void
- editHandle: (indexOrName: string | number, newValue: any, oldValue: any, parentPath: string[]) => void
-}
-
-export default function NameValue({ indexOrName, value, depth, deleteHandle, editHandle, parent, parentPath }: Props) {
- const { displayArrayIndex } = useContext(JsonViewContext)
- const isArray = Array.isArray(parent)
-
- return (
-
- {!isArray || (isArray && displayArrayIndex) ? (
- <>
- {indexOrName}:{' '}
-
- ) : (
- <>
- )}
- deleteHandle(indexOrName, parentPath)}
- editHandle={(indexOrName, newValue, oldValue, parentPath) => editHandle(indexOrName, newValue, oldValue, parentPath)}
- parent={parent}
- indexOrName={indexOrName}
- parentPath={parentPath}
- />
-
- )
-}
diff --git a/src/components/object-node.tsx b/src/components/object-node.tsx
deleted file mode 100644
index eb186c4..0000000
--- a/src/components/object-node.tsx
+++ /dev/null
@@ -1,266 +0,0 @@
-import { useCallback, useContext, useEffect, useRef, useState } from 'react'
-import { JsonViewContext } from './json-view'
-import { isObject, customAdd, customCopy, customDelete, editableAdd, editableDelete, isCollapsed, objectSize, ifDisplay } from '../utils'
-import { ReactComponent as AngleDownSVG } from '../svgs/angle-down.svg'
-import CopyButton from './copy-button'
-import NameValue from './name-value'
-import { ReactComponent as DeleteSVG } from '../svgs/trash.svg'
-import { ReactComponent as AddSVG } from '../svgs/add-square.svg'
-import { ReactComponent as DoneSVG } from '../svgs/done.svg'
-import { ReactComponent as CancelSVG } from '../svgs/cancel.svg'
-import type { CustomizeOptions } from '../types'
-import LargeArray from './large-array'
-
-interface Props {
- node: Record | Array
- depth: number
- indexOrName?: number | string
- deleteHandle?: (_: string | number, currentPath: string[]) => void
- customOptions?: CustomizeOptions
- parent?: Record | Array
- parentPath: string[]
-}
-
-export default function ObjectNode({ node, depth, indexOrName, deleteHandle: _deleteSelf, customOptions, parent, parentPath }: Props) {
- const {
- collapsed,
- onCollapse,
- enableClipboard,
- ignoreLargeArray,
- collapseObjectsAfterLength,
- editable,
- onDelete,
- src,
- onAdd,
- onEdit,
- onChange,
- forceUpdate,
- displaySize,
- CustomOperation
- } = useContext(JsonViewContext)
-
- const currentPath = typeof indexOrName !== 'undefined' ? [...parentPath, String(indexOrName)] : parentPath
-
- if (!ignoreLargeArray && Array.isArray(node) && node.length > 100) {
- return
- }
-
- const isPlainObject = isObject(node)
-
- const [fold, _setFold] = useState(isCollapsed(node, depth, indexOrName, collapsed, collapseObjectsAfterLength, customOptions))
-
- const setFold = (value: boolean) => {
- onCollapse?.({ isCollapsing: !value, node, depth, indexOrName })
- _setFold(value)
- }
-
- useEffect(() => {
- setFold(isCollapsed(node, depth, indexOrName, collapsed, collapseObjectsAfterLength, customOptions))
- }, [collapsed, collapseObjectsAfterLength])
-
- // Edit property
- const editHandle = useCallback(
- (indexOrName: number | string, newValue: any, oldValue: any) => {
- if (Array.isArray(node)) {
- node[+indexOrName] = newValue
- } else if (node) {
- node[indexOrName] = newValue
- }
- if (onEdit)
- onEdit({
- newValue,
- oldValue,
- depth,
- src,
- indexOrName: indexOrName,
- parentType: isPlainObject ? 'object' : 'array',
- parentPath: currentPath
- })
- if (onChange) onChange({ type: 'edit', depth, src, indexOrName: indexOrName, parentType: isPlainObject ? 'object' : 'array', parentPath: currentPath })
- forceUpdate()
- },
- [node, onEdit, onChange, forceUpdate]
- )
-
- // Delete property
- const deleteHandle = (indexOrName: number | string) => {
- if (Array.isArray(node)) {
- node.splice(+indexOrName, 1)
- } else if (node) {
- delete node[indexOrName]
- }
- forceUpdate()
- }
-
- // Delete self
- const [deleting, setDeleting] = useState(false)
- const deleteSelf = () => {
- setDeleting(false)
- if (_deleteSelf) _deleteSelf(indexOrName!, currentPath)
- if (onDelete) onDelete({ value: node, depth, src, indexOrName: indexOrName!, parentType: isPlainObject ? 'object' : 'array', parentPath: currentPath })
- if (onChange)
- onChange({
- type: 'delete',
- depth,
- src,
- indexOrName: indexOrName!,
- parentType: isPlainObject ? 'object' : 'array',
- parentPath: currentPath
- })
- }
-
- // Add
- const [adding, setAdding] = useState(false)
- const inputRef = useRef(null)
- const add = () => {
- if (isPlainObject) {
- const inputName = inputRef.current?.value
-
- if (inputName) {
- ;(node as Record)[inputName] = null
-
- if (inputRef.current) inputRef.current.value = ''
- setAdding(false)
-
- if (onAdd) onAdd({ indexOrName: inputName, depth, src, parentType: 'object', parentPath: currentPath })
- if (onChange) onChange({ type: 'add', indexOrName: inputName, depth, src, parentType: 'object', parentPath: currentPath })
- }
- } else if (Array.isArray(node)) {
- const arr = node as unknown as any[]
- arr.push(null)
- if (onAdd) onAdd({ indexOrName: arr.length - 1, depth, src, parentType: 'array', parentPath: currentPath })
- if (onChange) onChange({ type: 'add', indexOrName: arr.length - 1, depth, src, parentType: 'array', parentPath: currentPath })
- }
- forceUpdate()
- }
- const handleAddKeyDown = (event: React.KeyboardEvent) => {
- if (event.key === 'Enter') {
- event.preventDefault()
- add()
- } else if (event.key === 'Escape') {
- cancel()
- }
- }
-
- const isEditing = deleting || adding
- const cancel = () => {
- setDeleting(false)
- setAdding(false)
- }
-
- const Icons = (
- <>
- {!fold && !isEditing && (
- setFold(true)} className='jv-size-chevron'>
- {ifDisplay(displaySize, depth, fold) && {objectSize(node)} Items}
-
-
-
- )}
-
- {adding && isPlainObject && }
-
- {isEditing && }
- {isEditing && }
-
- {!fold && !isEditing && enableClipboard && customCopy(customOptions) && (
-
- )}
- {!fold && !isEditing && editableAdd(editable) && customAdd(customOptions) && (
- {
- if (isPlainObject) {
- setAdding(true)
- setTimeout(() => inputRef.current?.focus())
- } else {
- add()
- }
- }}
- />
- )}
- {!fold && !isEditing && editableDelete(editable) && customDelete(customOptions) && _deleteSelf && (
- setDeleting(true)} />
- )}
- {typeof CustomOperation === 'function' ? : null}
-
- )
-
- if (Array.isArray(node)) {
- return (
- <>
- {'['}
-
- {Icons}
-
- {!fold ? (
-
- {node.map((n, i) => (
-
- ))}
-
- ) : (
-
- )}
-
- {']'}
-
- {fold && ifDisplay(displaySize, depth, fold) && (
- setFold(false)} className='jv-size'>
- {objectSize(node)} Items
-
- )}
-
- )
- } else if (isPlainObject) {
- return (
- <>
- {'{'}
-
- {Icons}
-
- {!fold ? (
-
- {Object.entries(node).map(([name, value]) => (
-
- ))}
-
- ) : (
-
- )}
-
- {'}'}
-
- {fold && ifDisplay(displaySize, depth, fold) && (
- setFold(false)} className='jv-size'>
- {objectSize(node)} Items
-
- )}
-
- )
- } else {
- return {String(node)}
- }
-}
diff --git a/src/components/row.tsx b/src/components/row.tsx
new file mode 100644
index 0000000..070199b
--- /dev/null
+++ b/src/components/row.tsx
@@ -0,0 +1,388 @@
+import React, { useContext, useEffect, useMemo, useRef } from 'react'
+import { ConfigContext, HandlersContext } from './contexts'
+import type { FlatRow } from '../core/row'
+import { pathKey } from '../core/path'
+import LongString from './long-string'
+import CopyButton from './copy-button'
+import { ReactComponent as AngleDownSVG } from '../svgs/angle-down.svg'
+import { ReactComponent as EditSVG } from '../svgs/edit.svg'
+import { ReactComponent as DeleteSVG } from '../svgs/trash.svg'
+import { ReactComponent as AddSVG } from '../svgs/add-square.svg'
+import { ReactComponent as DoneSVG } from '../svgs/done.svg'
+import { ReactComponent as CancelSVG } from '../svgs/cancel.svg'
+import { ReactComponent as LinkSVG } from '../svgs/link.svg'
+import {
+ editableEdit,
+ editableDelete,
+ editableAdd,
+ customEdit,
+ customDelete,
+ customAdd,
+ customCopy,
+ customMatchesURL,
+ ifDisplay,
+ resolveEvalFailedNewValue
+} from '../utils'
+import type { CustomizeOptions } from '../types'
+
+export interface RowProps {
+ row: FlatRow
+ editing: boolean
+ deleting: boolean
+ adding: boolean
+ /** central long-string truncation state (undefined = use LongString default) */
+ stringTruncated?: boolean
+ index?: number
+ style?: React.CSSProperties
+ measureRef?: (el: HTMLElement | null) => void
+}
+
+function Done({ onClick }: { onClick: (e: React.MouseEvent) => void }) {
+ const { DoneComponent } = useContext(ConfigContext)
+ const style = { display: 'inline-block' } as React.CSSProperties
+ return typeof DoneComponent === 'function' ? (
+
+ ) : (
+
+ )
+}
+function Cancel({ onClick }: { onClick: (e: React.MouseEvent) => void }) {
+ const { CancelComponent } = useContext(ConfigContext)
+ const style = { display: 'inline-block' } as React.CSSProperties
+ return typeof CancelComponent === 'function' ? (
+
+ ) : (
+
+ )
+}
+
+function Row({ row, editing, deleting, adding, stringTruncated, index, style, measureRef }: RowProps) {
+ const config = useContext(ConfigContext)
+ const handlers = useContext(HandlersContext)
+ const { displaySize, displayArrayIndex, CustomOperation } = config
+ const customOptions = row.customOptions
+
+ // hoverable rows keep the legacy .json-view--pair class so consumer hover CSS
+ // (icons revealed on pair:hover) keeps working; icons stay direct children.
+ const isPair = row.kind === 'value' || row.kind === 'open' || row.kind === 'collapsed' || row.kind === 'chunk' || row.kind === 'chunk-open' || row.kind === 'custom'
+ const wrap = (children: React.ReactNode) => (
+
+ {children}
+
+ )
+
+ const keyLabel =
+ row.path.length === 0 || (row.parentType === 'array' && !displayArrayIndex) ? null : (
+ <>
+ {row.indexOrName}:{' '}
+
+ )
+
+ switch (row.kind) {
+ case 'value':
+ return wrap(
+ <>
+ {keyLabel}
+
+
+ )
+ case 'open':
+ return wrap(
+ <>
+ {keyLabel}
+ {row.bracket}
+
+
+ )
+ case 'collapsed':
+ return wrap(
+ <>
+ {keyLabel}
+ {row.bracket}
+ {typeof CustomOperation === 'function' ? : null}
+
+ {row.bracket === '{' ? '}' : ']'}
+ {ifDisplay(displaySize, row.depth, true) && (
+ handlers.toggle(row)} className="jv-size">
+ {row.size} Items
+
+ )}
+
+ )
+ case 'close':
+ return wrap({row.bracket})
+ case 'chunk':
+ return wrap(
+ <>
+ {'['}
+ {typeof CustomOperation === 'function' ? : null}
+
+ {']'}
+
+ )
+ case 'chunk-open':
+ return wrap(
+ <>
+ {'['}
+ handlers.toggleChunk(row)} className="jv-size-chevron">
+ {ifDisplay(displaySize, row.depth, false) && {(row.value as any[]).length} Items}
+
+
+ {config.enableClipboard && customCopy(customOptions) && (
+
+ )}
+ {typeof CustomOperation === 'function' ? : null}
+
+ )
+ case 'chunk-close':
+ return wrap({']'})
+ case 'add-input':
+ return wrap()
+ case 'custom': {
+ const Custom = row.customRender as any
+ const content = React.isValidElement(Custom) ? Custom :
+ return wrap(
+ <>
+ {keyLabel}
+ {content}
+
+ )
+ }
+ default:
+ return null
+ }
+}
+
+// flatten() produces fresh FlatRow objects on every recompute, so a default
+// shallow compare would re-render every mounted row. Compare the fields that
+// actually affect output (incl. the virtual row's translateY) so unchanged rows
+// skip re-render — this is what keeps large / scrolling lists cheap.
+function areEqual(a: RowProps, b: RowProps): boolean {
+ if (a.editing !== b.editing || a.deleting !== b.deleting || a.adding !== b.adding || a.index !== b.index) return false
+ if (a.stringTruncated !== b.stringTruncated) return false
+ if (a.style?.transform !== b.style?.transform) return false
+ const r1 = a.row
+ const r2 = b.row
+ return (
+ r1.id === r2.id &&
+ r1.kind === r2.kind &&
+ r1.value === r2.value &&
+ r1.depth === r2.depth &&
+ r1.size === r2.size &&
+ r1.indexOrName === r2.indexOrName &&
+ r1.bracket === r2.bracket &&
+ r1.customOptions === r2.customOptions &&
+ r1.customRender === r2.customRender &&
+ r1.chunk?.index === r2.chunk?.index &&
+ r1.chunk?.start === r2.chunk?.start &&
+ r1.chunk?.end === r2.chunk?.end
+ )
+}
+
+export default React.memo(Row, areEqual)
+
+function ValueLeaf({ row, editing, deleting, stringTruncated }: { row: FlatRow; editing: boolean; deleting: boolean; stringTruncated?: boolean }) {
+ const config = useContext(ConfigContext)
+ const handlers = useContext(HandlersContext)
+ const { editable, enableClipboard, matchesURL, urlRegExp, EditComponent, CustomOperation } = config
+ const customOptions = row.customOptions as CustomizeOptions | undefined
+ const type = row.nodeType
+ const node = row.value
+ const valueRef = useRef(null)
+ const key = pathKey(row.path)
+
+ let className = 'json-view--string'
+ switch (type) {
+ case 'number':
+ case 'bigint':
+ className = 'json-view--number'
+ break
+ case 'boolean':
+ className = 'json-view--boolean'
+ break
+ case 'null':
+ className = 'json-view--null'
+ break
+ }
+ if (typeof customOptions?.className === 'string') className += ' ' + customOptions.className
+ if (deleting) className += ' json-view--deleting'
+
+ let displayValue = String(node)
+ if (type === 'bigint') displayValue += 'n'
+
+ const commit = () => {
+ const text = valueRef.current?.innerText ?? ''
+ try {
+ handlers.editValue(row, JSON.parse(text))
+ } catch {
+ handlers.editValue(row, resolveEvalFailedNewValue(type, text))
+ }
+ }
+ const handleKeyDown = (event: React.KeyboardEvent) => {
+ if (event.key === 'Enter') {
+ event.preventDefault()
+ commit()
+ } else if (event.key === 'Escape') {
+ handlers.cancelEdit()
+ }
+ }
+
+ useEffect(() => {
+ if (editing && valueRef.current) {
+ const el = valueRef.current
+ setTimeout(() => {
+ window.getSelection()?.selectAllChildren(el)
+ el.focus()
+ })
+ }
+ }, [editing])
+
+ const canEdit = editableEdit(editable) && customEdit(customOptions)
+ const ctrlClick =
+ !editing && !deleting && canEdit
+ ? (event: React.MouseEvent) => {
+ if (event.ctrlKey || event.metaKey) handlers.startEdit(row)
+ }
+ : undefined
+
+ const EditingElement = useMemo(
+ () => (
+
+ ),
+ [displayValue, type, className]
+ )
+
+ const isEditing = editing || deleting
+ const icons = (
+ <>
+ {isEditing && handlers.deleteRow(row) : commit} />}
+ {isEditing && handlers.cancelDelete() : () => handlers.cancelEdit()} />}
+
+ {!isEditing && enableClipboard && customCopy(customOptions) && (
+
+ )}
+ {!isEditing && matchesURL && type === 'string' && urlRegExp.test(node) && customMatchesURL(customOptions) && (
+
+
+
+ )}
+ {!isEditing &&
+ canEdit &&
+ (typeof EditComponent === 'function' ? (
+ handlers.startEdit(row)} />
+ ) : (
+ handlers.startEdit(row)} />
+ ))}
+ {!isEditing && editableDelete(editable) && customDelete(customOptions) && handlers.startDelete(row)} />}
+ {typeof CustomOperation === 'function' ? : null}
+
+ )
+
+ if (type === 'string') {
+ return (
+ <>
+ {editing ? (
+ EditingElement
+ ) : (
+ handlers.setStringExpanded(key, next)}
+ />
+ )}
+ {icons}
+
+ )
+ }
+ return (
+ <>
+ {editing ? (
+ EditingElement
+ ) : (
+
+ {displayValue}
+
+ )}
+ {icons}
+
+ )
+}
+
+function ContainerIcons({ row, deleting, adding, folded }: { row: FlatRow; deleting: boolean; adding: boolean; folded: boolean }) {
+ const config = useContext(ConfigContext)
+ const handlers = useContext(HandlersContext)
+ const { editable, enableClipboard, displaySize, CustomOperation } = config
+ const customOptions = row.customOptions
+ const isEditing = deleting || adding
+ const isArr = row.nodeType === 'array'
+
+ return (
+ <>
+ {!isEditing && (
+ handlers.toggle(row)} className="jv-size-chevron">
+ {ifDisplay(displaySize, row.depth, folded) && {row.size} Items}
+
+
+ )}
+
+ {deleting && handlers.deleteRow(row)} />}
+ {deleting && handlers.cancelDelete()} />}
+
+ {!isEditing && enableClipboard && customCopy(customOptions) && (
+
+ )}
+ {!isEditing && editableAdd(editable) && customAdd(customOptions) && (
+ (isArr ? handlers.pushArrayItem(row) : handlers.startAdd(row))} />
+ )}
+ {!isEditing && editableDelete(editable) && customDelete(customOptions) && handlers.startDelete(row)} />}
+ {typeof CustomOperation === 'function' ? : null}
+
+ )
+}
+
+function AddInput({ row }: { row: FlatRow }) {
+ const handlers = useContext(HandlersContext)
+ const inputRef = useRef(null)
+
+ useEffect(() => {
+ inputRef.current?.focus()
+ }, [])
+
+ const submit = () => {
+ const name = inputRef.current?.value
+ if (name) handlers.addProperty(row, name)
+ }
+ const onKeyDown = (event: React.KeyboardEvent) => {
+ if (event.key === 'Enter') {
+ event.preventDefault()
+ submit()
+ } else if (event.key === 'Escape') {
+ handlers.cancelAdd()
+ }
+ }
+
+ return (
+ <>
+
+
+ handlers.cancelAdd()} />
+
+ )
+}
diff --git a/src/components/virtual-list.tsx b/src/components/virtual-list.tsx
new file mode 100644
index 0000000..e9e4046
--- /dev/null
+++ b/src/components/virtual-list.tsx
@@ -0,0 +1,79 @@
+import { useLayoutEffect, useRef, useState } from 'react'
+import { useVirtualizer } from '@tanstack/react-virtual'
+import Row from './row'
+import type { FlatRow } from '../core/row'
+
+interface Props {
+ rows: FlatRow[]
+ flagsFor: (row: FlatRow) => { editing: boolean; deleting: boolean; adding: boolean; stringTruncated?: boolean }
+ className: string
+ style?: React.CSSProperties
+ height?: number | string
+ maxHeight?: number | string
+ estimatedRowHeight: number
+ overscan: number
+ scrollRef?: React.RefObject
+}
+
+export default function VirtualList({ rows, flagsFor, className, style, height, maxHeight, estimatedRowHeight, overscan, scrollRef }: Props) {
+ const rootRef = useRef(null)
+ // External mode: the caller's element scrolls and this list may sit below other
+ // content in it. Self mode: the root below is itself the scroll element.
+ const external = scrollRef != null
+
+ // In external mode the list can start partway down the scroll container, so the
+ // virtualizer needs that leading offset (scrollMargin) to map scroll position to
+ // rows. Measured from layout, refreshed when the row count changes; 0 in self mode.
+ const [scrollMargin, setScrollMargin] = useState(0)
+ useLayoutEffect(() => {
+ if (!external) {
+ setScrollMargin(0)
+ return
+ }
+ const scrollEl = scrollRef.current
+ const listEl = rootRef.current
+ if (!scrollEl || !listEl) return
+ setScrollMargin(listEl.getBoundingClientRect().top - scrollEl.getBoundingClientRect().top + scrollEl.scrollTop)
+ }, [external, scrollRef, rows.length])
+
+ const virtualizer = useVirtualizer({
+ count: rows.length,
+ getScrollElement: () => (external ? scrollRef.current : rootRef.current),
+ estimateSize: () => estimatedRowHeight,
+ overscan,
+ scrollMargin
+ })
+
+ const items = virtualizer.getVirtualItems()
+
+ return (
+ // Root is to match the non-virtualized path so the UA monospace font
+ // applies identically in both modes. In self mode it owns the scroll box
+ // (jv-scroll class + overflow + height/maxHeight); in external mode the
+ // caller's element scrolls, so drop the scroll class and box styling and let
+ // this be a plain sizer host.
+ }
+ className={external ? className : className + ' jv-scroll'}
+ style={external ? style : { overflow: 'auto', height, maxHeight, ...style }}
+ >
+
+ {/* rows */}
+ {items.map(vi => {
+ const row = rows[vi.index]
+ const flags = flagsFor(row)
+ return (
+ |
+ )
+ })}
+
+
+ )
+}
diff --git a/src/core/expand-state.ts b/src/core/expand-state.ts
new file mode 100644
index 0000000..1b5dd30
--- /dev/null
+++ b/src/core/expand-state.ts
@@ -0,0 +1,38 @@
+import type { Collapsed, CustomizeOptions } from '../types'
+import { isCollapsed, isCollapsed_largeArray } from '../utils'
+
+// The store holds ONLY explicit user overrides (true = expanded, false = folded).
+// Everything else resolves lazily from the existing isCollapsed helpers, so
+// collapsed subtrees are never walked and there is no full-tree pre-pass.
+export type ExpandState = Map
+
+export interface ExpandOpts {
+ collapsed: Collapsed
+ collapseObjectsAfterLength: number
+}
+
+/**
+ * Whether a container node is expanded. `ownDepth` is the node's own depth
+ * (= path.length + 1), matching what the legacy ObjectNode passed to isCollapsed.
+ */
+export function isContainerExpanded(
+ overrides: ExpandState,
+ key: string,
+ node: any,
+ ownDepth: number,
+ indexOrName: number | string | undefined,
+ opts: ExpandOpts,
+ largeArray: boolean,
+ customOptions?: CustomizeOptions
+): boolean {
+ if (overrides.has(key)) return overrides.get(key)!
+ const collapsedResult = largeArray
+ ? isCollapsed_largeArray(node, ownDepth, indexOrName, opts.collapsed, opts.collapseObjectsAfterLength, customOptions)
+ : isCollapsed(node, ownDepth, indexOrName, opts.collapsed, opts.collapseObjectsAfterLength, customOptions)
+ return !collapsedResult
+}
+
+/** Large-array chunks default to folded (legacy LargeArrayNode useState(true)). */
+export function isChunkExpanded(overrides: ExpandState, key: string): boolean {
+ return overrides.get(key) ?? false
+}
diff --git a/src/core/flatten.test.ts b/src/core/flatten.test.ts
new file mode 100644
index 0000000..5124cb9
--- /dev/null
+++ b/src/core/flatten.test.ts
@@ -0,0 +1,131 @@
+import { describe, test, expect } from 'vitest'
+import { flatten, FlattenOpts } from './flatten'
+import { ExpandState } from './expand-state'
+import { pathKey, chunkKey } from './path'
+
+function opts(over: Partial = {}): FlattenOpts {
+ return {
+ expand: new Map(),
+ collapsed: undefined,
+ collapseObjectsAfterLength: 99,
+ ignoreLargeArray: false,
+ ...over
+ }
+}
+
+const sig = (rows: ReturnType) => rows.map(r => `${r.kind}:${String(r.indexOrName)}@${r.depth}`)
+
+describe('flatten — primitives & containers', () => {
+ test('primitive root is a single value row at depth 1', () => {
+ const rows = flatten('hello', opts())
+ expect(rows).toHaveLength(1)
+ expect(rows[0]).toMatchObject({ kind: 'value', path: [], depth: 1, nodeType: 'string', parentType: null, value: 'hello' })
+ })
+
+ test('simple object: open, values, close in order with correct depths', () => {
+ const rows = flatten({ a: 1, b: 'x' }, opts())
+ expect(sig(rows)).toEqual(['open:undefined@1', 'value:a@2', 'value:b@2', 'close:undefined@1'])
+ expect(rows[1]).toMatchObject({ path: ['a'], parentType: 'object', nodeType: 'number' })
+ })
+
+ test('nested object depths follow visual nesting', () => {
+ const rows = flatten({ a: { b: 1 } }, opts())
+ expect(sig(rows)).toEqual(['open:undefined@1', 'open:a@2', 'value:b@3', 'close:a@2', 'close:undefined@1'])
+ expect(rows[2]).toMatchObject({ path: ['a', 'b'] })
+ })
+
+ test('array elements carry numeric indexOrName and array parentType', () => {
+ const rows = flatten([10, 20], opts())
+ expect(sig(rows)).toEqual(['open:undefined@1', 'value:0@2', 'value:1@2', 'close:undefined@1'])
+ expect(rows[1]).toMatchObject({ indexOrName: 0, parentType: 'array', path: [0] })
+ })
+
+ test('node types are classified (null vs object vs number vs bool)', () => {
+ const rows = flatten({ n: null, s: 'x', b: true, num: 3 }, opts())
+ const byName = Object.fromEntries(rows.filter(r => r.kind === 'value').map(r => [r.indexOrName, r.nodeType]))
+ expect(byName).toEqual({ n: 'null', s: 'string', b: 'boolean', num: 'number' })
+ })
+})
+
+describe('flatten — collapse defaults', () => {
+ test('collapsed=true yields a single collapsed row, children not walked', () => {
+ const rows = flatten({ a: 1, b: 2 }, opts({ collapsed: true }))
+ expect(rows).toHaveLength(1)
+ expect(rows[0]).toMatchObject({ kind: 'collapsed', depth: 1 })
+ })
+
+ test('collapsed as number collapses strictly below that depth', () => {
+ const rows = flatten({ a: { b: 1 } }, opts({ collapsed: 1 }))
+ // root (depth 1) open; inner object (own depth 2 > 1) collapsed
+ expect(sig(rows)).toEqual(['open:undefined@1', 'collapsed:a@2', 'close:undefined@1'])
+ })
+
+ test('collapseObjectsAfterLength folds oversized containers by default', () => {
+ const rows = flatten({ a: 1, b: 2, c: 3 }, opts({ collapseObjectsAfterLength: 2 }))
+ expect(rows[0].kind).toBe('collapsed')
+ })
+
+ test('expand override re-opens a would-be-collapsed node', () => {
+ const expand: ExpandState = new Map([[pathKey([]), true]])
+ const rows = flatten({ a: 1 }, opts({ collapsed: true, expand }))
+ expect(rows[0].kind).toBe('open')
+ })
+})
+
+describe('flatten — large-array chunking', () => {
+ const arr = Array.from({ length: 150 }, (_, i) => i)
+
+ test('folds into chunk rows (folded by default) under the array', () => {
+ const rows = flatten(arr, opts())
+ const kinds = rows.map(r => r.kind)
+ expect(kinds).toEqual(['open', 'chunk', 'chunk', 'close'])
+ expect(rows[1].chunk).toEqual({ index: 0, start: 0, end: 99 })
+ expect(rows[2].chunk).toEqual({ index: 1, start: 100, end: 149 })
+ // chunk rows sit one visual level below the array
+ expect(rows[1].depth).toBe(2)
+ })
+
+ test('expanding a chunk walks its real-indexed elements at depth+2', () => {
+ const expand: ExpandState = new Map([[chunkKey([], 1), true]])
+ const rows = flatten(arr, opts({ expand }))
+ const open = rows.find(r => r.kind === 'chunk-open')!
+ expect(open.depth).toBe(2)
+ const el = rows.find(r => r.kind === 'value' && r.indexOrName === 149)!
+ expect(el).toMatchObject({ depth: 3, parentType: 'array', path: [149] })
+ expect(rows.some(r => r.kind === 'chunk-close')).toBe(true)
+ })
+
+ test('ignoreLargeArray renders elements directly (no chunks)', () => {
+ const rows = flatten(arr, opts({ ignoreLargeArray: true, collapsed: false }))
+ expect(rows.some(r => r.kind.startsWith('chunk'))).toBe(false)
+ expect(rows.filter(r => r.kind === 'value')).toHaveLength(150)
+ })
+})
+
+describe('flatten — customizeNode & path safety', () => {
+ test('customizeNode element short-circuits to a custom row (subtree not walked)', () => {
+ const el = { $$typeof: Symbol.for('react.element'), type: 'span', props: {}, key: null } as any
+ const rows = flatten({ a: { deep: 1 } }, opts({ customizeNode: ({ indexOrName }) => (indexOrName === 'a' ? el : undefined) }))
+ expect(sig(rows)).toEqual(['open:undefined@1', 'custom:a@2', 'close:undefined@1'])
+ })
+
+ test('customizeNode options object feeds collapse (collapsed:true)', () => {
+ const rows = flatten({ a: { b: 1 } }, opts({ customizeNode: ({ indexOrName }) => (indexOrName === 'a' ? { collapsed: true } : undefined) }))
+ const aRow = rows.find(r => r.indexOrName === 'a')!
+ expect(aRow.kind).toBe('collapsed')
+ expect(aRow.customOptions).toEqual({ collapsed: true })
+ })
+
+ test('dotted keys do not collide in path ids', () => {
+ const rows = flatten({ 'a.b': 1, a: { b: 2 } }, opts())
+ const ids = rows.map(r => r.id)
+ expect(new Set(ids).size).toBe(ids.length)
+ })
+})
+
+describe('flatten — add-input injection', () => {
+ test('injects an add-input row right after the container open row', () => {
+ const rows = flatten({ a: 1 }, opts({ addingKey: pathKey([]) }))
+ expect(sig(rows)).toEqual(['open:undefined@1', 'add-input:undefined@2', 'value:a@2', 'close:undefined@1'])
+ })
+})
diff --git a/src/core/flatten.ts b/src/core/flatten.ts
new file mode 100644
index 0000000..c2a6a13
--- /dev/null
+++ b/src/core/flatten.ts
@@ -0,0 +1,162 @@
+import { isValidElement } from 'react'
+import type { Collapsed, CustomizeNode, CustomizeOptions } from '../types'
+import { objectSize, isReactComponent, safeCall } from '../utils'
+import { FlatRow, RowKind, getNodeType } from './row'
+import { pathKey, chunkKey } from './path'
+import { ExpandState, isContainerExpanded, isChunkExpanded } from './expand-state'
+
+export const CHUNK_SIZE = 100
+export const LARGE_ARRAY_THRESHOLD = 100
+
+export interface FlattenOpts {
+ expand: ExpandState
+ collapsed: Collapsed
+ collapseObjectsAfterLength: number
+ customizeNode?: CustomizeNode
+ ignoreLargeArray: boolean
+ /** pathKey of a container currently showing its add-property input row */
+ addingKey?: string
+}
+
+type Frame =
+ | { t: 'node'; value: any; path: (string | number)[]; depth: number; indexOrName: string | number | undefined; parentType: 'object' | 'array' | null }
+ | { t: 'chunk'; array: any[]; path: (string | number)[]; depth: number; index: number; start: number; end: number }
+ | { t: 'emit'; row: FlatRow }
+
+function makeId(path: (string | number)[], kind: RowKind, expandKey?: string): string {
+ if (kind === 'chunk' || kind === 'chunk-open' || kind === 'chunk-close') return expandKey + ':' + kind
+ return pathKey(path) + ':' + kind
+}
+
+/**
+ * Turn `root` + the expand-state overrides into an ordered flat array of visible
+ * rows. Collapsed subtrees are never walked, so cost is O(visible rows).
+ */
+export function flatten(root: any, opts: FlattenOpts): FlatRow[] {
+ const { expand, collapsed, collapseObjectsAfterLength, customizeNode, ignoreLargeArray, addingKey } = opts
+ const rows: FlatRow[] = []
+ const stack: Frame[] = [{ t: 'node', value: root, path: [], depth: 1, indexOrName: undefined, parentType: null }]
+
+ while (stack.length) {
+ const frame = stack.pop()!
+
+ if (frame.t === 'emit') {
+ rows.push(frame.row)
+ continue
+ }
+
+ if (frame.t === 'chunk') {
+ processChunk(frame, expand, rows, stack)
+ continue
+ }
+
+ const { value, path, depth, indexOrName, parentType } = frame
+ const ownDepth = path.length + 1
+
+ // customizeNode runs first, exactly like json-node.tsx short-circuit
+ let customOptions: CustomizeOptions | undefined
+ if (typeof customizeNode === 'function') {
+ const ret = safeCall(customizeNode, [{ node: value, depth: ownDepth, indexOrName }])
+ if (ret) {
+ if (isValidElement(ret)) {
+ rows.push(mkRow({ kind: 'custom', path, depth, indexOrName, parentType, value, customRender: ret }))
+ continue
+ } else if (isReactComponent(ret)) {
+ rows.push(mkRow({ kind: 'custom', path, depth, indexOrName, parentType, value, customRender: ret as React.ComponentType }))
+ continue
+ } else if (typeof ret === 'object') {
+ customOptions = ret as CustomizeOptions
+ }
+ }
+ }
+
+ const nodeType = getNodeType(value)
+ const isArr = nodeType === 'array'
+ const isObj = nodeType === 'object'
+
+ if (!isArr && !isObj) {
+ rows.push(mkRow({ kind: 'value', path, depth, indexOrName, parentType, value, nodeType, customOptions }))
+ continue
+ }
+
+ const key = pathKey(path)
+ const size = objectSize(value)
+ const largeArray = isArr && !ignoreLargeArray && (value as any[]).length > LARGE_ARRAY_THRESHOLD
+ const expanded = isContainerExpanded(expand, key, value, ownDepth, indexOrName, { collapsed, collapseObjectsAfterLength }, largeArray, customOptions)
+ const openBracket = isArr ? '[' : '{'
+ const closeBracket = isArr ? ']' : '}'
+
+ if (!expanded) {
+ rows.push(mkRow({ kind: 'collapsed', path, depth, indexOrName, parentType, value, nodeType, bracket: openBracket, size, expandKey: key, customOptions }))
+ continue
+ }
+
+ rows.push(mkRow({ kind: 'open', path, depth, indexOrName, parentType, value, nodeType, bracket: openBracket, size, expandKey: key, customOptions }))
+
+ const closeRow = mkRow({ kind: 'close', path, depth, indexOrName, parentType, value, nodeType, bracket: closeBracket, size, expandKey: key })
+ stack.push({ t: 'emit', row: closeRow })
+
+ // children, pushed reversed so the first child pops first
+ if (largeArray) {
+ const arr = value as any[]
+ const chunkCount = Math.ceil(arr.length / CHUNK_SIZE)
+ for (let c = chunkCount - 1; c >= 0; c--) {
+ const start = c * CHUNK_SIZE
+ const end = Math.min(arr.length, start + CHUNK_SIZE)
+ stack.push({ t: 'chunk', array: arr, path, depth: depth + 1, index: c, start, end })
+ }
+ } else if (isArr) {
+ const arr = value as any[]
+ for (let i = arr.length - 1; i >= 0; i--) {
+ stack.push({ t: 'node', value: arr[i], path: [...path, i], depth: depth + 1, indexOrName: i, parentType: 'array' })
+ }
+ } else {
+ const entries = Object.entries(value)
+ for (let i = entries.length - 1; i >= 0; i--) {
+ const [k, v] = entries[i]
+ stack.push({ t: 'node', value: v, path: [...path, k], depth: depth + 1, indexOrName: k, parentType: 'object' })
+ }
+ }
+
+ // add-input row emits right after the open row (top of stack)
+ if (addingKey !== undefined && addingKey === key) {
+ stack.push({ t: 'emit', row: mkRow({ kind: 'add-input', path, depth: depth + 1, indexOrName, parentType: isArr ? 'array' : 'object', value: null }) })
+ }
+ }
+
+ return rows
+}
+
+function processChunk(frame: Extract, expand: ExpandState, rows: FlatRow[], stack: Frame[]) {
+ const { array, path, depth, index, start, end } = frame
+ const key = chunkKey(path, index)
+ const chunkMeta = { index, start, end: end - 1 }
+ const expanded = isChunkExpanded(expand, key)
+
+ if (!expanded) {
+ rows.push(
+ mkRow({ kind: 'chunk', path, depth, indexOrName: undefined, parentType: 'array', value: array.slice(start, end), nodeType: 'array', bracket: '[', expandKey: key, chunk: chunkMeta })
+ )
+ return
+ }
+
+ rows.push(
+ mkRow({ kind: 'chunk-open', path, depth, indexOrName: undefined, parentType: 'array', value: array.slice(start, end), nodeType: 'array', bracket: '[', expandKey: key, chunk: chunkMeta })
+ )
+ const closeRow = mkRow({ kind: 'chunk-close', path, depth, indexOrName: undefined, parentType: 'array', value: null, nodeType: 'array', bracket: ']', expandKey: key, chunk: chunkMeta })
+ stack.push({ t: 'emit', row: closeRow })
+
+ for (let i = end - 1; i >= start; i--) {
+ stack.push({ t: 'node', value: array[i], path: [...path, i], depth: depth + 1, indexOrName: i, parentType: 'array' })
+ }
+}
+
+function mkRow(partial: Omit & { nodeType?: FlatRow['nodeType'] }): FlatRow {
+ const nodeType = partial.nodeType ?? getNodeType(partial.value)
+ return {
+ ...partial,
+ nodeType,
+ parentPath: partial.path.slice(0, -1),
+ id: makeId(partial.path, partial.kind, partial.expandKey)
+ }
+}
diff --git a/src/core/path.ts b/src/core/path.ts
new file mode 100644
index 0000000..7872fb2
Binary files /dev/null and b/src/core/path.ts differ
diff --git a/src/core/row.ts b/src/core/row.ts
new file mode 100644
index 0000000..39a43f8
--- /dev/null
+++ b/src/core/row.ts
@@ -0,0 +1,49 @@
+import type { ReactElement } from 'react'
+import type { CustomizeOptions } from '../types'
+
+// One visible line in the flattened tree.
+//
+// depth = VISUAL indentation level (root = 1); padding-left = (depth - 1) * 1em.
+// This differs from the callback/collapse "own depth" (= path.length + 1) only
+// inside large-array chunks, which add a visual indent level without a real path
+// segment. Callback depths are derived from `path` in the mutation layer, not
+// from `depth`, to preserve the exact legacy semantics.
+export type RowKind =
+ | 'open' // "[key: ]{" or "[key: ][" — expanded container header
+ | 'close' // "}" or "]" — expanded container footer
+ | 'collapsed' // "[key: ]{...} N Items" — folded container (children not walked)
+ | 'value' // "[key: ]primitive" — leaf
+ | 'custom' // customizeNode element/component (subtree not walked)
+ | 'chunk' // folded large-array bucket "[ start ... end ]"
+ | 'chunk-open' // "[" of an expanded bucket
+ | 'chunk-close' // "]" of an expanded bucket
+ | 'add-input' // transient add-property input row
+
+export type NodeType = 'object' | 'array' | 'string' | 'number' | 'boolean' | 'null' | 'undefined' | 'bigint' | 'function' | 'symbol'
+
+export interface FlatRow {
+ id: string
+ path: (string | number)[]
+ parentPath: (string | number)[]
+ depth: number
+ kind: RowKind
+ indexOrName: string | number | undefined
+ parentType: 'object' | 'array' | null
+ value: any
+ nodeType: NodeType
+ bracket?: '{' | '}' | '[' | ']'
+ size?: number
+ /** expand-state key for container/chunk rows (open/collapsed/chunk*) */
+ expandKey?: string
+ customOptions?: CustomizeOptions
+ customRender?: ReactElement | React.ComponentType
+ chunk?: { index: number; start: number; end: number }
+}
+
+export function getNodeType(node: any): NodeType {
+ if (node === null) return 'null'
+ if (Array.isArray(node)) return 'array'
+ const t = typeof node
+ if (t === 'object') return 'object'
+ return t as NodeType
+}
diff --git a/src/stories/json-view.stories.tsx b/src/stories/json-view.stories.tsx
index c7c515d..5bd4395 100644
--- a/src/stories/json-view.stories.tsx
+++ b/src/stories/json-view.stories.tsx
@@ -487,6 +487,59 @@ export const LargeArray: StoryObj = {
}
}
+const genWideObject = (n: number) => Object.fromEntries(Array.from({ length: n }, (_, i) => [`key_${i}`, { id: i, name: `item ${i}`, active: i % 2 === 0, tags: [`t${i}`, `t${i + 1}`] }]))
+
+// ~10k nodes (deep + wide). Bounded height => windowed rendering.
+export const Virtualized: StoryObj = {
+ args: {
+ src: genWideObject(2000),
+ height: 400,
+ collapsed: false,
+ displaySize: true
+ },
+ decorators: [
+ Story => (
+
+
+
+ )
+ ]
+}
+
+// 100k flat array via ignoreLargeArray (no chunking) — stress test.
+export const VirtualizedFlatArray: StoryObj = {
+ args: {
+ src: Array.from({ length: 100000 }, (_, i) => i),
+ ignoreLargeArray: true,
+ collapsed: false,
+ maxHeight: 400
+ },
+ decorators: [
+ Story => (
+
+
+
+ )
+ ]
+}
+
+// Editable inside a virtualized viewport.
+export const VirtualizedEditable: StoryObj = {
+ args: {
+ src: genWideObject(500),
+ editable: true,
+ height: 400,
+ collapsed: false
+ },
+ decorators: [
+ Story => (
+
+
+
+ )
+ ]
+}
+
export const CustomIcons: StoryObj = {
args: {
src: {
diff --git a/src/style.css b/src/style.css
index ec97279..e812686 100644
--- a/src/style.css
+++ b/src/style.css
@@ -31,6 +31,20 @@
.json-view .jv-indent {
padding-left: 1em;
}
+/* Flattened renderer: each visible line is a .jv-row; nesting is expressed via
+ inline padding-left (depth - 1)em instead of nested .jv-indent blocks. */
+.json-view .jv-row {
+ display: block;
+}
+/* Virtualized scroll container + absolute-positioned sizer. min-width:max-content
+ lets deeply-indented / long rows scroll horizontally together. */
+.json-view.jv-scroll {
+ overflow: auto;
+}
+.json-view .jv-sizer {
+ position: relative;
+ min-width: max-content;
+}
.json-view .jv-chevron {
display: inline-block;
vertical-align: -20%;
@@ -77,8 +91,8 @@
text-decoration-line: line-through;
}
-:is(.json-view:hover, .json-view--pair:hover) > :is(.json-view--copy, .json-view--edit),
-:is(.json-view:hover, .json-view--pair:hover) > .json-view--link svg {
+:is(.json-view:hover, .json-view--pair:hover, .jv-row:hover) > :is(.json-view--copy, .json-view--edit),
+:is(.json-view:hover, .json-view--pair:hover, .jv-row:hover) > .json-view--link svg {
display: inline-block;
}
diff --git a/src/test/characterization/callbacks.test.tsx b/src/test/characterization/callbacks.test.tsx
new file mode 100644
index 0000000..3a526c2
--- /dev/null
+++ b/src/test/characterization/callbacks.test.tsx
@@ -0,0 +1,146 @@
+import { describe, test, expect, vi } from 'vitest'
+import { render, screen, fireEvent, within } from '@testing-library/react'
+import JsonView from '../../components/json-view'
+
+/**
+ * Characterization tests: these lock the CURRENT observable callback behavior
+ * of the recursive renderer so the virtualization rewrite can be proven
+ * byte-compatible. They intentionally encode quirks (notably the edit-vs-delete
+ * `depth` inconsistency) — do NOT "fix" them here; replicate them in the rewrite.
+ */
+
+function editLeaf(pair: HTMLElement, newText: string) {
+ // enter edit mode via the pencil (first .json-view--edit in the leaf's pair)
+ const editIcon = pair.querySelector('.json-view--edit') as HTMLElement
+ fireEvent.click(editIcon)
+ const editable = pair.querySelector('[contenteditable]') as HTMLElement
+ editable.textContent = newText
+ // after entering edit mode, the first .json-view--edit is the Done control
+ const doneIcon = pair.querySelector('.json-view--edit') as HTMLElement
+ fireEvent.click(doneIcon)
+}
+
+describe('onEdit / onChange (leaf edit)', () => {
+ test('reports container depth (=1) and empty parentPath for a root-object leaf', () => {
+ const onEdit = vi.fn()
+ const onChange = vi.fn()
+ const src = { name: 'Alice' }
+ render()
+
+ const pair = screen.getByText('name').closest('.json-view--pair') as HTMLElement
+ editLeaf(pair, '"Bob"')
+
+ expect(onEdit).toHaveBeenCalledTimes(1)
+ expect(onEdit.mock.calls[0][0]).toMatchObject({
+ newValue: 'Bob',
+ oldValue: 'Alice',
+ depth: 1,
+ indexOrName: 'name',
+ parentType: 'object',
+ parentPath: []
+ })
+ expect(onChange).toHaveBeenCalledTimes(1)
+ expect(onChange.mock.calls[0][0]).toMatchObject({
+ type: 'edit',
+ depth: 1,
+ indexOrName: 'name',
+ parentType: 'object',
+ parentPath: []
+ })
+ })
+
+ test('nested leaf edit reports parent container depth and parentPath', () => {
+ const onEdit = vi.fn()
+ const src = { outer: { inner: 1 } }
+ render()
+
+ const pair = screen.getByText('inner').closest('.json-view--pair') as HTMLElement
+ editLeaf(pair, '2')
+
+ // `outer` object node is at depth 2 (root object depth 1 -> child object depth 2)
+ expect(onEdit.mock.calls[0][0]).toMatchObject({
+ newValue: 2,
+ oldValue: 1,
+ depth: 2,
+ indexOrName: 'inner',
+ parentType: 'object',
+ parentPath: ['outer']
+ })
+ })
+})
+
+describe('onDelete / onChange (leaf delete)', () => {
+ test('reports leaf depth (=container+1) — the edit/delete depth quirk', () => {
+ const onDelete = vi.fn()
+ const onChange = vi.fn()
+ const src = { name: 'Alice' }
+ render()
+
+ const pair = screen.getByText('name').closest('.json-view--pair') as HTMLElement
+ // click the leaf trash (first .json-view--edit in the pair), then confirm via Done
+ fireEvent.click(pair.querySelector('.json-view--edit') as HTMLElement)
+ fireEvent.click(pair.querySelector('.json-view--edit') as HTMLElement)
+
+ expect(onDelete).toHaveBeenCalledTimes(1)
+ expect(onDelete.mock.calls[0][0]).toMatchObject({
+ value: 'Alice',
+ depth: 2, // NOTE: edit reported depth 1 for this same leaf; delete reports 2
+ indexOrName: 'name',
+ parentType: 'object',
+ parentPath: []
+ })
+ expect(onChange.mock.calls[0][0]).toMatchObject({ type: 'delete', depth: 2, indexOrName: 'name', parentType: 'object', parentPath: [] })
+ })
+})
+
+describe('onAdd / onChange (add property to object)', () => {
+ test('reports container depth and parentPath', () => {
+ const onAdd = vi.fn()
+ const onChange = vi.fn()
+ const src = { a: 1 }
+ render()
+
+ // object-level add icon lives after the opening brace, not inside a pair
+ const root = document.querySelector('.json-view') as HTMLElement
+ const addIcon = root.querySelector('.json-view--edit') as HTMLElement
+ fireEvent.click(addIcon)
+ const input = root.querySelector('.json-view--input') as HTMLInputElement
+ fireEvent.change(input, { target: { value: 'b' } })
+ fireEvent.keyDown(input, { key: 'Enter' })
+
+ expect(onAdd).toHaveBeenCalledTimes(1)
+ expect(onAdd.mock.calls[0][0]).toMatchObject({ indexOrName: 'b', depth: 1, parentType: 'object', parentPath: [] })
+ expect(onChange.mock.calls[0][0]).toMatchObject({ type: 'add', indexOrName: 'b', depth: 1, parentType: 'object', parentPath: [] })
+ })
+})
+
+describe('onCollapse (fold toggle)', () => {
+ // INTENTIONAL BEHAVIOR CHANGE in the virtualization rewrite (semver-major):
+ // the legacy renderer fired onCollapse once per container on MOUNT and used an
+ // INVERTED isCollapsing flag (collapsing reported false). Replicating the
+ // mount-fire under windowing would spam the callback on every scroll, and the
+ // inverted flag was a bug. The rewrite fires onCollapse only on user toggle,
+ // with isCollapsing:true when the node is being collapsed.
+ test('does not fire on mount; fires with isCollapsing:true on collapse click', () => {
+ const onCollapse = vi.fn()
+ const src = { a: 1, b: 2 }
+ render()
+
+ expect(onCollapse).not.toHaveBeenCalled()
+
+ const chevron = document.querySelector('.jv-size-chevron') as HTMLElement
+ fireEvent.click(chevron)
+
+ expect(onCollapse).toHaveBeenCalledTimes(1)
+ expect(onCollapse.mock.calls[0][0]).toMatchObject({ isCollapsing: true, depth: 1, indexOrName: undefined })
+ expect(onCollapse.mock.calls[0][0].node).toBe(src)
+ })
+
+ test('fires with isCollapsing:false when expanding a folded node', () => {
+ const onCollapse = vi.fn()
+ render()
+ fireEvent.click(screen.getByText('...'))
+ expect(onCollapse).toHaveBeenCalledTimes(1)
+ expect(onCollapse.mock.calls[0][0]).toMatchObject({ isCollapsing: false, depth: 1 })
+ })
+})
diff --git a/src/test/characterization/custom.test.tsx b/src/test/characterization/custom.test.tsx
new file mode 100644
index 0000000..748ad6e
--- /dev/null
+++ b/src/test/characterization/custom.test.tsx
@@ -0,0 +1,56 @@
+import { describe, test, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import JsonView from '../../components/json-view'
+
+describe('customizeNode', () => {
+ test('returning a React element replaces the node and skips its subtree', () => {
+ const rendered = render(
+ (indexOrName === 'a' ? CUSTOM : undefined)}
+ />
+ )
+ expect(rendered.getByTestId('custom-a')).toHaveTextContent('CUSTOM')
+ // subtree not walked
+ expect(screen.queryByText('deep')).toBeNull()
+ // sibling still renders normally
+ expect(screen.getByText('b')).toBeInTheDocument()
+ })
+
+ test('returning a component renders it with node/depth/indexOrName props', () => {
+ const Comp = ({ node, indexOrName }: any) => (
+
+ {String(indexOrName)}={String(node)}
+
+ )
+ render( (indexOrName === 'x' ? Comp : undefined)} />)
+ expect(screen.getByTestId('comp')).toHaveTextContent('x=42')
+ })
+
+ test('returning options applies className to the leaf', () => {
+ render( (indexOrName === 'v' ? { className: 'my-class' } : undefined)} />)
+ expect(screen.getByText('"hi"')).toHaveClass('my-class')
+ })
+})
+
+describe('CustomOperation', () => {
+ test('renders after each node', () => {
+ const Op = ({ node }: any) => op
+ const { container } = render()
+ // one per value leaf + one on the container open row
+ expect(container.querySelectorAll('.op').length).toBeGreaterThanOrEqual(3)
+ })
+})
+
+describe('custom Copy component', () => {
+ test('uses the provided CopyComponent', () => {
+ const Copy = ({ onClick }: any) => (
+
+ )
+ const { container } = render()
+ expect(container.querySelector('.my-copy')).toBeInTheDocument()
+ })
+})
diff --git a/src/test/characterization/render.test.tsx b/src/test/characterization/render.test.tsx
new file mode 100644
index 0000000..b42f5ff
--- /dev/null
+++ b/src/test/characterization/render.test.tsx
@@ -0,0 +1,115 @@
+import { describe, test, expect } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import JsonView from '../../components/json-view'
+
+/** Characterization: current DOM/text output. Locks parity targets for the rewrite. */
+
+describe('object / array rendering', () => {
+ test('renders object keys as .json-view--property and primitive values', () => {
+ render()
+ expect(screen.getByText('name')).toHaveClass('json-view--property')
+ expect(screen.getByText('age')).toHaveClass('json-view--property')
+ // values
+ expect(screen.getByText('"Alice"')).toHaveClass('json-view--string')
+ expect(screen.getByText('30')).toHaveClass('json-view--number')
+ expect(screen.getByText('true')).toHaveClass('json-view--boolean')
+ expect(screen.getByText('null')).toHaveClass('json-view--null')
+ })
+
+ test('array indices render as .json-view--index when displayArrayIndex is default (true)', () => {
+ render()
+ expect(screen.getByText('0')).toHaveClass('json-view--index')
+ expect(screen.getByText('1')).toHaveClass('json-view--index')
+ })
+
+ test('array indices are hidden when displayArrayIndex is false', () => {
+ render()
+ expect(screen.queryByText('0')).toBeNull()
+ expect(screen.queryByText('1')).toBeNull()
+ expect(screen.getByText('10')).toBeInTheDocument()
+ })
+
+ test('renders function / symbol / bigint values without crashing', () => {
+ const src = { fn: function () {}, sym: Symbol('x'), big: BigInt(10) }
+ const { container } = render()
+ const text = container.textContent || ''
+ expect(text).toContain('fn')
+ expect(text).toContain('10n') // bigint suffix
+ expect(text).toContain('Symbol(x)')
+ })
+
+ test('nested indentation uses per-row padding-left (depth - 1 em)', () => {
+ // The flattened renderer replaces nested .jv-indent divs with inline
+ // padding-left = (depth - 1)em on each row.
+ render()
+ const aRow = screen.getByText('a').closest('.jv-row') as HTMLElement
+ const bRow = screen.getByText('b').closest('.jv-row') as HTMLElement
+ expect(aRow.style.paddingLeft).toBe('1em') // depth 2
+ expect(bRow.style.paddingLeft).toBe('2em') // depth 3
+ })
+})
+
+describe('collapse behavior', () => {
+ test('collapsed={true} renders the "..." button and hides children', () => {
+ render()
+ expect(screen.getByText('...')).toBeInTheDocument()
+ expect(screen.queryByText('a')).toBeNull()
+ })
+
+ test('collapsed as a number collapses only below that depth', () => {
+ render()
+ // depth-1 root stays open (key `a` visible), depth-2 object is folded
+ expect(screen.getByText('a')).toBeInTheDocument()
+ expect(screen.queryByText('b')).toBeNull()
+ })
+
+ test('displaySize renders the "N Items" label', () => {
+ render()
+ expect(screen.getByText(/3 Items/)).toBeInTheDocument()
+ })
+})
+
+describe('long strings', () => {
+ test('directly mode truncates after collapseStringsAfterLength with an ellipsis', () => {
+ const { container } = render()
+ const text = container.textContent || ''
+ expect(text).toContain('abcde')
+ expect(text).toContain('...')
+ expect(text).not.toContain('fghij')
+ })
+
+ test('strings at or below the threshold render in full', () => {
+ render()
+ expect(screen.getByText('"short"')).toBeInTheDocument()
+ })
+
+ test('clicking a truncated string expands it (central truncation state)', () => {
+ const { container } = render()
+ expect(container.textContent).not.toContain('fghij')
+ const strSpan = container.querySelector('.json-view--string') as HTMLElement
+ fireEvent.click(strSpan)
+ expect(container.textContent).toContain('abcdefghij')
+ })
+})
+
+describe('large array chunking (>100 items)', () => {
+ test('renders 100-item chunk buttons labelled "start ... end", folded by default', () => {
+ const arr = Array.from({ length: 150 }, (_, i) => i)
+ const { container } = render()
+ const buttons = Array.from(container.querySelectorAll('button.jv-button')).map(b => b.textContent)
+ expect(buttons).toContain('0 ... 99')
+ expect(buttons).toContain('100 ... 149')
+ })
+
+ test('ignoreLargeArray renders elements directly (no chunk buttons)', () => {
+ const arr = Array.from({ length: 150 }, (_, i) => i)
+ // collapsed={false} keeps the (>99-item) array expanded so elements render inline
+ // virtual={false} keeps all rows in the DOM (jsdom has no layout, so the
+ // virtualizer would otherwise render 0 rows)
+ const { container } = render()
+ const chunkButtons = Array.from(container.querySelectorAll('button.jv-button')).filter(b => /\.\.\./.test(b.textContent || ''))
+ expect(chunkButtons.length).toBe(0)
+ // element 149 is present (both its index label and value render as "149")
+ expect(screen.getAllByText('149').length).toBeGreaterThan(0)
+ })
+})
diff --git a/src/test/setup.ts b/src/test/setup.ts
new file mode 100644
index 0000000..c05e5a0
--- /dev/null
+++ b/src/test/setup.ts
@@ -0,0 +1,40 @@
+import '@testing-library/jest-dom/vitest'
+
+// jsdom lacks ResizeObserver (required by @tanstack/react-virtual) and
+// Element.prototype.scrollTo / scrollToIndex targets. Polyfill both so
+// virtualized components can mount in tests.
+if (typeof globalThis.ResizeObserver === 'undefined') {
+ globalThis.ResizeObserver = class {
+ observe() {}
+ unobserve() {}
+ disconnect() {}
+ } as unknown as typeof ResizeObserver
+}
+
+if (typeof Element !== 'undefined' && !Element.prototype.scrollTo) {
+ Element.prototype.scrollTo = function () {} as unknown as typeof Element.prototype.scrollTo
+}
+
+// json-node's edit() schedules a focus/selection in a setTimeout. If the edit
+// is committed synchronously in a test, the contentEditable unmounts and the
+// timer fires with a null node, which jsdom's selectAllChildren rejects. Make
+// it a safe no-op for tests.
+if (typeof Selection !== 'undefined') {
+ Selection.prototype.selectAllChildren = function () {}
+}
+
+// jsdom does not implement `innerText` (returns undefined). The component's
+// in-place edit commit reads `valueRef.current.innerText`, so alias it to
+// `textContent` for tests. Layout-aware differences between the two don't
+// matter here — edited values are single-line text.
+if (typeof HTMLElement !== 'undefined' && !Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'innerText')) {
+ Object.defineProperty(HTMLElement.prototype, 'innerText', {
+ configurable: true,
+ get() {
+ return this.textContent
+ },
+ set(value: string) {
+ this.textContent = value
+ }
+ })
+}
diff --git a/src/test/virtualization.test.tsx b/src/test/virtualization.test.tsx
new file mode 100644
index 0000000..303eeb3
--- /dev/null
+++ b/src/test/virtualization.test.tsx
@@ -0,0 +1,56 @@
+import { describe, test, expect, beforeAll, afterAll } from 'vitest'
+import { render } from '@testing-library/react'
+import JsonView from '../components/json-view'
+
+// jsdom has no layout, so give the scroll container and rows fake sizes and
+// prove that only a viewport-sized window of rows is mounted. @tanstack/react-virtual
+// (v3.14+) reads offsetWidth/offsetHeight for both the scroll rect and row measurement.
+const VIEWPORT = 200
+const ROW_H = 20
+
+const sizeGetter = (dim: 'height' | 'width') =>
+ function (this: HTMLElement) {
+ if (dim === 'width') return 400
+ return this.classList?.contains('jv-scroll') ? VIEWPORT : ROW_H
+ }
+
+let originals: Record = {}
+
+beforeAll(() => {
+ originals.offsetHeight = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetHeight')
+ originals.offsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth')
+ Object.defineProperty(HTMLElement.prototype, 'offsetHeight', { configurable: true, get: sizeGetter('height') })
+ Object.defineProperty(HTMLElement.prototype, 'offsetWidth', { configurable: true, get: sizeGetter('width') })
+})
+afterAll(() => {
+ if (originals.offsetHeight) Object.defineProperty(HTMLElement.prototype, 'offsetHeight', originals.offsetHeight)
+ if (originals.offsetWidth) Object.defineProperty(HTMLElement.prototype, 'offsetWidth', originals.offsetWidth)
+})
+
+describe('virtualization windowing', () => {
+ test('only a window of rows is mounted for a large array (default auto)', () => {
+ const arr = Array.from({ length: 5000 }, (_, i) => i)
+ const { container } = render()
+
+ // virtual path engaged
+ expect(container.querySelector('.jv-scroll')).toBeInTheDocument()
+ expect(container.querySelector('.jv-sizer')).toBeInTheDocument()
+
+ const rendered = container.querySelectorAll('.jv-row').length
+ // 5000 elements -> 5002 rows; a ~200px viewport at 20px/row should mount
+ // far fewer than the full set.
+ expect(rendered).toBeGreaterThan(0)
+ expect(rendered).toBeLessThan(80)
+ })
+
+ test('small documents stay non-virtualized under auto (no scroll container)', () => {
+ const { container } = render()
+ expect(container.querySelector('.jv-scroll')).toBeNull()
+ expect(container.querySelector('code.json-view')).toBeInTheDocument()
+ })
+
+ test('explicit height forces virtualization even for small documents', () => {
+ const { container } = render()
+ expect(container.querySelector('.jv-scroll')).toBeInTheDocument()
+ })
+})
diff --git a/tsconfig.json b/tsconfig.json
index 18c6225..c10422e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,5 +16,5 @@
"declarationDir": "./dist"
},
"include": ["./src"],
- "exclude": ["./node_modules", "./test", "**/*.stories.tsx"]
+ "exclude": ["./node_modules", "./test", "**/*.stories.tsx", "**/*.test.ts", "**/*.test.tsx", "./src/test"]
}
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 0000000..a15af77
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,36 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+import type { Plugin } from 'vite'
+
+// Stub `*.svg` imports so the `import { ReactComponent as X } from '../svgs/x.svg'`
+// convention resolves in tests without pulling in vite-plugin-svgr (which has a
+// conflicting vite peer range). Tests don't care about the SVG content — a
+// forwardRef