Release note v1.1.10

Added

• overscan prop to improve virtualization/rendering behavior in ObjectView and the underlying virtual scroller.
• Search improvements via a new useObjectViewSearch hook and related refactors in the search component.
• More flexible actions: support for a custom button wrapper in ActionRender.
• Sticky rendering enhancements by adding originalIndex to sticky metadata and adjusting sticky key computation to avoid React key collisions.

Changed

• Refactor: extract search logic into useObjectViewSearch and wire it into SearchComponent.
• Action rendering refactor to use a dedicated wrapper for improved action handling/state management.
• Tree indentation and parent visual indicators adjusted.

Fixed

• CSS/layout fixes:
  • Correct box-sizing on the root container for more consistent layout.
  • Adjust spacing/layout in components.
  • Set expand-symbol line-height to unset to avoid rendering issues.
• Virtualization/sticky behavior fixes:
  • Optimize start/end index calculations in sticky+virtual rendering.
  • Keep sticky headers stable when overscan is enabled (including top overscan) by avoiding React key collisions (via originalIndex).
• Hover interaction performance/behavior fixes:
  • Improve hover interaction timeout handling in RenderNode / hover hooks.

Documentation

• Clarify immutability expectations and valueGetter behavior; remove outdated note about requiring manual refresh for in-place mutations.

Tests

• Add tests for useObjectViewSearch (including debouncing behavior).
• Add/adjust tests for:
  • Custom action wrapper behavior.
  • Sticky index calculations.
  • Hover debounce/timer handling.

Full Changelog: v1.1.8...v1.1.10

v1.1.8

Release Notes v1.1.8

🚀 Features

Custom Actions

• New Custom Actions Support: Added support for custom actions in ObjectView and RenderNode, allowing developers to add custom buttons or interactions to object nodes.

Other Improvements

• Exports: Reorganized exports in index.ts for clearer structure and included RESOLVER.

🐛 Fixes

Search & Iteration

• Search Logic: Updated search function to handle default onResult, allowed clearing search highlights without arguments, and enhanced filtering logic.
• Advanced Search Options: Added new search options to ObjectView for enhanced filtering capabilities.
• Custom Object Support: Enhanced search functionality to support custom object types in traversal.
• Flexible Iteration: Added fullSearchShouldIterate parameter to traversal and find paths for better control over search depth.
• Object Walking:
  • Excluded LazyValue and InternalPromise instances from search traversal (travelAndSearch) to prevent errors.
  • Added guard clause to prevent iteration when iterateCounter is negative.
  • Updated ENUMERABLE_BIT usage to ENUMERABLE_BUT_COLLAPSE for improved iterator behavior.
  • Updated Map and Set resolvers to ensure next() is called correctly.
• Types: Corrected boolean type in walkingFactory parameters.

Styling & UX

• Hover Effect: Updated row background color for improved hover visibility.
• Button Styling: Standardized button width to 1.5em.
• Highlight Updates: Enabled highlightUpdate by default for better visual feedback on data changes.

📚 Documentation

• Best Practices: Added guide for using stableRef in memoization examples.
• Search Guide: Added programmatic search section and custom search bar example to the usage guide.
• Updates: Updated README and API documentation to reflect new search options and removed outdated search shortcuts.

🛠 Migration Guide

Migrating from actionRenders to customActions

The actionRenders prop is now deprecated. It allowed for a single component to render actions for a row. The new customActions prop allows you to define multiple independent actions that are automatically managed (loading states, error handling, etc.).

Before (actionRenders):

<ObjectView
  actionRenders={(props) => {
    const { node } = props;
    if (node.name === 'myTarget') {
      return <button onClick={() => console.log(node.value)}>Log</button>;
    }
    return null;
  }}
/>

After (customActions):

const logAction: CustomAction = {
  name: 'Log Action',
  // 1. Check if action applies and prepare data
  prepareAction: (node) => {
    if (node.name === 'myTarget') {
      return { value: node.value }; // Passed to render/perform
    }
    return null; // Action not shown
  },
  // 2. Define the action logic
  performAction: async ({ value }) => {
    console.log(value);
  },
  // 3. Define the UI
  actionRender: 'Log', // Or a component: ({ value }) => <span>Log</span>
  actionRunRender: 'Logging...',
};

<ObjectView
  customActions={[logAction]}
/>

Release Notes v1.1.3

Highlights

• New search capability: ObjectView now exposes search(filterFn, markTerm, onResult, options) and scrollToPaths. The floating SearchComponent offers debounced input, keyboard shortcuts, a loading indicator, and inline highlights.
• Search options: Control maxResult, maxDepth, iterateSize, fullSearch, and normalizeSymbol; memoize the options object to keep it stable.
• Navigation & expansion: More reliable path expansion (expandAndGetIndex, setExpand, setChildExpand) with yield-friendly traversal to keep the UI responsive.
• Virtual scroller: Ref now exposes scrollTo with clamped bounds to avoid out-of-range jumps.
• Themes & demo: Added new presets (including themeGeneral and extra light palettes) and refreshed the demo with a theme picker, updated datasets, and the search overlay.
• Docs & tests: Documentation now covers the search API and memoized options guidance; search integration tests added for the new handle and UI.

Upgrade Notes

• Add a ref to ObjectView and call search(filterFn, markTerm, onResult, options); filterFn decides matches and markTerm drives highlights.
• Use the packaged SearchComponent for out-of-the-box UI. Pass memoized options (e.g., { normalizeSymbol, maxResult, maxDepth }) and wire handleSearch to ref.current?.search and scrollToPaths accordingly.
• Existing ObjectView usage without search requires no changes.

Release Notes v1.1.2

Highlights

• Async Walking & Performance: Introduced asynchronous walking iteration in useReactTree to prevent blocking the main thread when processing massive data structures. The library can now smoothly handle objects with 400,000 rows × 20 columns without freezing the browser. Added iterateSize prop to control the chunk size of async steps.
• Enhanced Typed Array Support: Improved visualization for SharedArrayBuffer, Uint8ClampedArray, and other typed arrays. Added specialized renderers and styles for buffer items. (#10)

Features

• Rendering:
  • Added RenderRegex component for better Regex visualization.
  • Disabled text selection for non-content elements (line numbers, tree indents, action buttons) to improve UI usability. (#7)
  • Added white-space styling to buffer views for better formatting.
• Configuration:
  • Added unplugin-macros support for build-time optimizations.

Bug Fixes

• React 19 Compatibility: Fixed promise resolution issues by implementing useInternalPromise to align with React 19's use API.
• Grouping Logic:
  • Fixed an issue where non-enumerable properties were hidden when grouping was enabled. (#6)
  • Fixed an issue where grouping was not collapsing by default even when expandDepth was set.
  • Refactored groupArrayResolver and groupObjectResolver to correctly handle Proxy objects.
• Tree State:
  • Fixed error handling in getNodeByIndex to prevent crashes during data retrieval. (#9)
  • Fixed computeItemKey to return an empty string for out-of-bounds indices.
• Types:
  • Resolved various TypeScript errors in type signatures and demo files.
  • Updated getEntry method to specify correct return types.

Demo & Documentation

• Interactive Demo: Fixed the "Features" badges in the demo header to be interactive toggles instead of static labels. (#8)
• Examples: Added a Massive (400k items) dataset to demonstrate the new async walking performance, along with comprehensive TypedArray examples.
• Docs: Added copilot-instructions.md to assist AI-based workflows.

Refactoring

• Refactored object walking logic to use bitwise metadata for better performance.
• Removed the deprecated objectHasChild function.

Known Limitations

• Browser Scroll Limits: While the library can virtualize millions of rows, the browser's native scrollbar has a maximum pixel height limit (approx. 33M pixels in Chrome/Edge, 17M in Firefox). Expanding the "Massive" dataset fully may exceed this limit, causing the scrollbar to behave unexpectedly.

Release Notes v1.1.1

Changelog

Release Notes v1.1.1

🚀 Features

• Core Exports: Exposed internal modules TreeCore, ReactTreeView, and VirtualScroller via the public API. This enables developers to build custom tree views using the underlying architecture of ObjectView.
• Type Definitions: Exported ObjectViewRenderRowProps to assist with custom actionRenders implementation.
• Demo Improvements: Added a Light/Dark/Auto theme toggle to the demo page and refactored the demo to use modern CSS light-dark() for seamless theme switching.

📚 Documentation

• Advanced Usage: Added a new section to README.md demonstrating how to use the newly exported core libraries.
• API Docs: Updated API_DOCUMENTATION.md with details on Core Libraries and corrected examples for custom action renders.
• Guides: Updated docs/GENERIC_TREE_VIEW.md to reference public API exports instead of internal paths.
• Refinement: Polished feature descriptions in the README for better clarity.

Release Notes v1.1.0

Release Notes v1.1.0

🚀 Features

• Generic Tree Architecture: The core tree walking and virtualization logic has been decoupled into a generic tree-core and react-tree-view. This major architectural shift allows for building any type of tree visualization (file systems, component trees, etc.) beyond just JSON objects.
• Interactive Actions:
  • actionRenders Prop: Added support for custom action buttons on each row via the actionRenders prop.
  • Default Actions: Implemented built-in "Copy" functionality and default action buttons.
  • Hover Effects: Added hover interactions to tree nodes for better UI feedback.
• Enhanced Theming System:
  • New Color Keys: Introduced specific theme keys for action buttons (actionBtn, actionSuccess, actionError).
  • Accessibility: Updated button styles to use oklch colors for better contrast.
  • Standardization: Refactored theme definitions to use colorThemeKeys for consistency.
• New Value Renderers: Added specialized components for rendering Functions, Strings, and Popovers (RenderFunction, RenderString, RenderPopover).
• Line Numbers: Added an option to display line numbers in the virtual scroller.

🐛 Bug Fixes

• UI/Layout: Fixed flex layout issues in action buttons and row components.
• Visuals: Corrected opacity calculations for tree guide lines and circular tags.
• Virtualization: Fixed logic for determining the last sticky item in useRednerIndexesWithSticky.
• Stability: Added optional chaining and missing ref parameters to prevent potential runtime errors in getEntriesCb and transformValue.

🛠 Refactoring

• Core Split: Extracted walkingFactory, StateFactory, and virtualization logic into the standalone src/libs directory.
• Theme Overhaul: Replaced string-based theme keys with a type-safe ThemeColor definition.
• Performance: Streamlined component props and removed unused performance test files.

🧪 Testing & Quality

• Snapshot Testing: Added comprehensive snapshot and incremental update tests for walkingFactory to ensure tree state stability.
• Unit Tests: Added extensive coverage for ReactTreeView, VirtualScrollRowRender, FlattenNodeWrapper, and custom hooks.
• Benchmarks: Refactored benchmarks to use the new objectTreeWalkingFactory.

📚 Documentation

• Guide Split: Separated documentation into Generic Tree View and Object Tree View guides to reflect the new architecture.
• Updates: Updated TESTING.md and API documentation to match the new features.

v1.0.7

What’s New

• Sticky path headers

  • VirtualScroller now pins ancestor rows while scrolling through their descendants so you never lose context in deep trees.
  • Controlled via the new stickyPathHeaders prop (default: true) and exposed in the demo’s feature toggle grid.

• API surface

  • ObjectViewProps gains stickyPathHeaders?: boolean, letting consumers opt out when they prefer free-scrolling rows.
  • Hooks seamlessly into existing virtualization options without extra configuration.

• Docs & guides

  • README features table highlights the sticky header capability, and the props table documents the new flag.
  • API docs include the updated type/prop descriptions.
  • Usage guide adds a “Sticky Path Headers” recipe explaining when to keep it on and how to disable it.

v1.0.6

What's Changed

• Add comprehensive test infrastructure with 230 tests and Node 22/24 + Yarn v4 compatibility by @Copilot in #3

Full Changelog: v1.05...v1.0.6

v1.05

v1.0.5 — First Release

Highlights

• High-performance ObjectView component with virtualized rendering, deterministic valueGetters, grouping for massive arrays/objects, change highlighting, line numbers, and rich theme hooks.
• Resolver system covers promises, custom iterables, maps/sets, lazy values, grouped proxies, and circular refs, with extension points via resolver maps.

New: Sticky Path Headers

• VirtualScroller now pins ancestor rows while their children scroll, keeping deep navigation grounded.
• Controlled by the new stickyPathHeaders prop (defaults to true) and exposed in the demo toggle grid.

API Surface

• ObjectViewProps now includes: expandLevel, arrayGroupSize, objectGroupSize, resolver, highlightUpdate, stickyPathHeaders, preview, nonEnumerable, includeSymbols, showLineNumbers, lineHeight, style, className.

Documentation & Guides

• README explains installation, quickstart, props, styling/themes, and testing commands.
• API_DOCUMENTATION.md details the resolver contract, theme presets, behaviour notes, and supporting utilities.
• USAGE_GUIDE.md covers recipes for API debugging, state inspection, configuration views, change detection, sticky headers, line numbers, and custom resolvers.

Demo & Tooling

• Interactive test harness (src/Test.tsx) exposes feature switches—sticky headers, grouping, resolvers, preview mode, symbol inclusion, highlighting.
• Vitest suite ready via npm test, npm run test:watch, npm run test:ui, and npm run test:coverage.