forked from mengyxu/noob-components
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
3.0 KiB
64 lines
3.0 KiB
3 months ago
|
# Build Virtualized `json-view` Component
|
||
|
|
|
||
|
|
## Goal
|
||
|
|
|
||
|
|
Build a new `json-view` component under `packages/base/data/` that behaves similarly to `vue-json-pretty`, with strong support for large payloads via virtual scrolling and a more DOM-efficient rendering strategy.
|
||
|
|
|
||
|
|
## Requirements
|
||
|
|
|
||
|
|
- Create a new base component alongside `list-table-v2.vue`.
|
||
|
|
- Render formatted JSON objects/arrays/primitives in an interactive tree viewer.
|
||
|
|
- Keep the supported public API close to `vue-json-pretty` where practical.
|
||
|
|
- Support most `vue-json-pretty` viewer features except:
|
||
|
|
- selector
|
||
|
|
- inline editing
|
||
|
|
- Support expand/collapse interactions.
|
||
|
|
- Support virtual scrolling for large JSON trees.
|
||
|
|
- Reuse and adapt relevant pretext-based utilities from `packages/base/data/list-table-v2/` where useful.
|
||
|
|
- Optimize DOM output aggressively compared with `vue-json-pretty`, including:
|
||
|
|
- sharing one indentation element across multiple contiguous lines of the same level where possible
|
||
|
|
- using CSS pseudo-elements for affordances such as expand/collapse icons
|
||
|
|
- Place the component implementation under `packages/base/data/`, near `list-table-v2.vue`.
|
||
|
|
|
||
|
|
## Feature Targets Compared to `vue-json-pretty`
|
||
|
|
|
||
|
|
- Tree expansion/collapse
|
||
|
|
- Key/value display for objects
|
||
|
|
- Array index display
|
||
|
|
- Primitive type styling
|
||
|
|
- Empty object/array handling
|
||
|
|
- Path-aware rendering as needed for stable keys and interactions
|
||
|
|
- Optional depth/default-expand behavior
|
||
|
|
- `showLine`, `showLineNumber`, `showIcon`, `showDoubleQuotes`
|
||
|
|
- `collapsedNodeLength`, `deep`, `collapsedOnClickBrackets`
|
||
|
|
- render hooks/slots for node key and value
|
||
|
|
- virtual list controls such as `virtual`, `height`, `itemHeight`
|
||
|
|
- Virtualized rendering of visible rows
|
||
|
|
|
||
|
|
## Acceptance Criteria
|
||
|
|
|
||
|
|
- [ ] A new `json-view` component exists under `packages/base/data/`
|
||
|
|
- [ ] Component can render nested JSON structures with correct formatting
|
||
|
|
- [ ] Expand/collapse works for objects and arrays
|
||
|
|
- [ ] Large JSON payloads render with virtualization rather than mounting every visible line at once
|
||
|
|
- [ ] DOM structure is materially leaner than a naive per-line/per-indent implementation
|
||
|
|
- [ ] Shared utilities are reused where it improves consistency with `list-table-v2`
|
||
|
|
- [ ] Public API stays close to `vue-json-pretty` for the supported subset
|
||
|
|
- [ ] Public API is documented in code/types and is coherent for consumers
|
||
|
|
- [ ] `npm run type-check` passes
|
||
|
|
|
||
|
|
## Technical Notes
|
||
|
|
|
||
|
|
- Likely architecture:
|
||
|
|
- normalize JSON into a flat row model representing visible logical lines
|
||
|
|
- track expansion state by stable path keys
|
||
|
|
- compute visible rows from expansion state
|
||
|
|
- use a virtualizer similar to `useVirtualRows` from `list-table-v2`
|
||
|
|
- DOM minimization ideas to validate:
|
||
|
|
- row text assembled with fewer wrapper nodes
|
||
|
|
- indentation rendered via CSS background/pseudo-elements where practical
|
||
|
|
- toggle affordances rendered without dedicated icon nodes
|
||
|
|
- Need targeted research on:
|
||
|
|
- `vue-json-pretty` feature surface and prop API
|
||
|
|
- DOM-efficient strategies for indentation/toggles/row assembly
|