feat: add highlightUpdates props.

Author: jaywcjlove

core/README.md

@@ -23,7 +23,8 @@ A React component for displaying and editing javascript arrays and JSON objects.
 📚 Use Typescript to write, better code hints.  
 🎨 Support theme customization & [`online editing`](https://uiwjs.github.io/react-json-view/#online-editing-theme) theme  
 🌒 Support dark/light mode  
-📦 Zero dependencies
+📦 Zero dependencies  
+♻️ Whether to highlight updates.
 
 ## Quick Start
 
@@ -306,6 +307,50 @@ export default function Demo() {
 }
 ```
 
+## Highlight Updates
+
+```tsx mdx:preview
+import React, { useState, useEffect } from 'react';
+import JsonView from '@uiw/react-json-view';
+import { TriangleArrow } from '@uiw/react-json-view/triangle-arrow';
+import { TriangleSolidArrow } from '@uiw/react-json-view/triangle-solid-arrow';
+
+const object = {
+  string: 'Lorem ipsum dolor sit amet',
+  integer: 42,
+  timer: 0,
+  object: { 'first-child': true, 'second-child': false, 'last-child': null },
+}
+export default function Demo() {
+  const [src, setSrc] = useState({ ...object })
+  useEffect(() => {
+    const loop = () => {
+      setSrc(src => ({
+        ...src,
+        timer: src.timer + 1
+      }))
+    }
+    const id = setInterval(loop, 1000)
+    return () => clearInterval(id)
+  }, []);
+
+  return (
+    <JsonView
+      value={src}
+      keyName="root"
+      style={{
+        '--w-rjv-background-color': '#ffffff',
+        '--w-rjv-border-left': '1px dashed #ebebeb',
+        // ✅ Change default update background color ✅
+        '--w-rjv-update-color': '#ff6ffd',
+      }}
+    />
+  )
+}
+```
+
+This feature can be disabled with `highlightUpdates={false}`, and the default color can be changed with `--w-rjv-update-color`.
+
 ## Modify Icon Style
 
 Use built-in default icons.
@@ -425,6 +470,8 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
   keyName?: string | number;
   /** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */
   enableClipboard?: boolean;
+  /** Whether to highlight updates. @default true */
+  highlightUpdates?: boolean;
   /** Display for quotes in object-key @default " */
   quotes?: "'" | '"' | '';
   /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false */

core/src/copied.tsx

@@ -3,17 +3,17 @@ import { useState } from 'react';
 export interface CopiedProps<T = object> extends React.SVGProps<SVGSVGElement> {
   show?: boolean;
   text?: T;
-  onCopied?: (text: string, obj: T) => void;
+  onCopied?: (text: string, obj: T | '') => void;
   render?: (props: Omit<CopiedProps<T>, 'render'>) => JSX.Element;
 }
 
 export function Copied<T>(props: CopiedProps<T>) {
-  const { children, style, text = '', render, show, ...reset } = props;
+  const { children, style, text = '', onCopied, render, show, ...reset } = props;
   if (!show) return null;
   const [copied, setCopied] = useState(false);
   const click = (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => {
     event.stopPropagation();
-    let copyText = JSON.stringify(text, (key, value) => {
+    let copyText = JSON.stringify(text || '', (key, value) => {
       if (typeof value === 'bigint') {
         return value.toString()
       }
@@ -24,6 +24,7 @@ export function Copied<T>(props: CopiedProps<T>) {
 
     navigator.clipboard.writeText(copyText)
       .then(() => {
+        onCopied && onCopied(copyText, text);
         setCopied(true);
         const timer = setTimeout(() => {
           setCopied(false);

core/src/index.tsx

@@ -20,6 +20,8 @@ export interface JsonViewProps<T extends object>
   keyName?: string | number;
   /** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */
   enableClipboard?: boolean;
+  /** Whether to highlight updates. @default true */
+  highlightUpdates?: boolean;
   /** Display for quotes in object-key @default " */
   quotes?: "'" | '"' | '';
   /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false */

core/src/node.tsx

@@ -1,4 +1,4 @@
-import { FC, Fragment, PropsWithChildren, useId, cloneElement, useState } from 'react';
+import { FC, Fragment, PropsWithChildren, useId, cloneElement, useState, useMemo, useRef, useEffect } from 'react';
 import { ValueView, ValueViewProps, Colon, Label, LabelProps, Line, typeMap } from './value';
 import { TriangleArrow } from './arrow/TriangleArrow';
 import { useExpandsStatus, store } from './store';
@@ -11,6 +11,14 @@ export interface MetaProps extends LabelProps {
   render?: (props: Pick<MetaProps, 'start' | 'isArray' | 'className' | 'children'>) => JSX.Element;
 }
 
+export function usePrevious<T>(value: T) {
+  const ref = useRef<T>();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
 export function Meta(props: MetaProps) {
   const { isArray = false, start = false, className, render, ...reset } = props;
   const mark = isArray ? '[]' : '{}';
@@ -46,6 +54,7 @@ export const Ellipsis: FC<PropsWithChildren<EllipsisProps>> = ({ style, render,
 };
 export interface SemicolonProps extends LabelProps {
   show?: boolean;
+  highlightUpdates?: boolean;
   quotes?: JsonViewProps<object>['quotes'];
   value?: object;
   render?: (props: Omit<SemicolonProps, 'show'> & {}) => JSX.Element;
@@ -57,13 +66,60 @@ export const Semicolon: FC<PropsWithChildren<SemicolonProps>> = ({
   value,
   className = 'w-rjv-object-key',
   show,
+  highlightUpdates,
   quotes,
   ...props
 }) => {
+  const prevValue = usePrevious(value);
+  const highlightContainer = useRef<HTMLSpanElement>(null)
+  const isHighlight = useMemo(() => {
+    if (!highlightUpdates || prevValue === undefined) return false
+    // highlight if value type changed
+    if (typeof value !== typeof prevValue) {
+      return true
+    }
+    if (typeof value === 'number') {
+      // notice: NaN !== NaN
+      if (isNaN(value) && isNaN(prevValue as unknown as number)) return false
+      return value !== prevValue
+    }
+    // highlight if isArray changed
+    if (Array.isArray(value) !== Array.isArray(prevValue)) {
+      return true
+    }
+    // not highlight object/function
+    // deep compare they will be slow
+    if (typeof value === 'object' || typeof value === 'function') {
+      return false
+    }
+
+    // highlight if not equal
+    if (value !== prevValue) {
+      return true
+    }
+
+    return false
+  }, [highlightUpdates, value]);
+
+  useEffect(() => {
+    if (highlightContainer.current && isHighlight && 'animate' in highlightContainer.current) {
+      highlightContainer.current.animate(
+        [
+          { backgroundColor: 'var(--w-rjv-update-color, #ebcb8b)' },
+          { backgroundColor: '' }
+        ],
+        {
+          duration: 1000,
+          easing: 'ease-in'
+        }
+      )
+    }
+  }, [isHighlight, value]);
+
   const content = show ? `${quotes}${children}${quotes}` : children;
   if (render) return render({ className, ...props, value, style: { color }, children: content });
   return (
-    <Label className={className} color={color} {...props}>
+    <Label className={className} color={color} {...props} ref={highlightContainer}>
       {content}
     </Label>
   );
@@ -92,6 +148,7 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
     components = {},
     displayObjectSize = true,
     enableClipboard = true,
+    highlightUpdates = true,
     indentWidth = 15,
     collapsed,
     level = 1,
@@ -117,6 +174,7 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
     displayDataTypes,
     displayObjectSize,
     enableClipboard,
+    highlightUpdates,
     onCopied,
     onExpand,
     collapsed,
@@ -178,6 +236,7 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
                 <Semicolon
                   value={item}
                   quotes={quotes}
+                  highlightUpdates={highlightUpdates}
                   render={components.objectKey}
                   color={typeof key === 'number' ? typeMap['number'].color : ''}
                   show={typeof key === 'string'}

core/src/theme/dark.ts

@@ -6,6 +6,7 @@ export const darkTheme = {
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
   '--w-rjv-info-color': '#656565',
   '--w-rjv-copied-color': '#0184a6',
+  '--w-rjv-update-color': '#ebcb8b',
   '--w-rjv-copied-success-color': '#28a745',
 
   '--w-rjv-curlybraces-color': '#1896b6',

core/src/theme/light.ts

@@ -5,6 +5,7 @@ export const lightTheme = {
   '--w-rjv-line-color': '#ebebeb',
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
   '--w-rjv-info-color': '#0000004d',
+  '--w-rjv-update-color': '#ebcb8b',
   '--w-rjv-copied-color': '#002b36',
   '--w-rjv-copied-success-color': '#28a745',
 

core/src/value.tsx

@@ -1,4 +1,4 @@
-import { FC, Fragment, PropsWithChildren, useState } from 'react';
+import { FC, Fragment, PropsWithChildren, PropsWithRef, forwardRef, useState } from 'react';
 import { Meta, MetaProps, CountInfo } from './node';
 import { Copied } from './copied';
 
@@ -136,7 +136,7 @@ export function ValueView<T = object>(props: ValueViewProps<T>) {
     );
     return (
       <Line {...eventProps}>
-        <Label {...reset}>
+        <Label {...reset} ref={null}>
           {renderKey}
           <Colon />
           {typeView}
@@ -156,7 +156,7 @@ export function ValueView<T = object>(props: ValueViewProps<T>) {
   )
   return (
     <Line {...eventProps}>
-      <Label {...reset}>
+      <Label {...reset} ref={null}>
         {renderKey}
         <Colon />
         {typeView}
@@ -174,19 +174,19 @@ export interface LabelProps extends React.HTMLAttributes<HTMLSpanElement> {
   paddingRight?: number;
 }
 
-export const Label: FC<PropsWithChildren<LabelProps>> = ({
+export const Label = forwardRef<HTMLSpanElement, LabelProps>(({
   children,
   color,
   fontSize,
   opacity,
   paddingRight,
   style,
   ...reset
-}) => (
-  <span style={{ color, fontSize, opacity, paddingRight, ...style }} {...reset}>
+}, ref) => (
+  <span style={{ color, fontSize, opacity, paddingRight, ...style }} {...reset} ref={ref}>
     {children}
   </span>
-);
+));
 
 export interface TypeProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
   type: keyof typeof typeMap;