refactor: refactor the code to completa all features view JSON.

Author: jaywcjlove

core/README.md

@@ -0,0 +1,35 @@
+import React, { forwardRef, useId, useImperativeHandle, useRef } from 'react';
+import { NestedClose } from './comps/NestedClose';
+import { NestedOpen } from './comps/NestedOpen';
+import { KeyValues } from './comps/KeyValues';
+import { useShowToolsDispatch } from './store/ShowTools';
+
+export interface ContainerProps<T extends object> extends React.HTMLAttributes<HTMLDivElement> {
+  keyName?: string | number;
+  keyid?: string;
+  parentValue?: T;
+  level?: number;
+  value?: T;
+  initialValue?: T;
+}
+export const Container = forwardRef(<T extends object>(props: ContainerProps<T>, ref: React.Ref<HTMLDivElement>) => {
+  const { className = '', children, parentValue, keyid, level = 1, value, initialValue, keyName, ...elmProps } = props;
+  const $ref = useRef<HTMLDivElement>(null);
+  const dispatch = useShowToolsDispatch();
+  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(ref, () => $ref.current, [$ref]);
+  const subkeyid = useId();
+  const defaultClassNames = `w-rjv-inner ${className}`;
+  const reset: React.HTMLAttributes<HTMLDivElement> = {
+    onMouseEnter: () => dispatch({ [subkeyid]: true }),
+    onMouseLeave: () => dispatch({ [subkeyid]: false }),
+  };
+  return (
+    <div className={defaultClassNames} {...elmProps} {...reset}>
+      <NestedOpen expandKey={subkeyid} value={value} level={level} keyName={keyName} initialValue={initialValue} />
+      <KeyValues expandKey={subkeyid} value={value} level={level} />
+      <NestedClose expandKey={subkeyid} value={value} level={level} />
+    </div>
+  );
+});
+
+Container.displayName = 'JVR.Container';

core/src/Container.tsx

@@ -7,6 +7,8 @@ export function TriangleArrow(props: TriangleArrowProps) {
     cursor: 'pointer',
     height: '1em',
     width: '1em',
+    userSelect: 'none',
+    display: 'flex',
     ...style,
   };
   return (

core/src/arrow/TriangleArrow.tsx

@@ -7,11 +7,20 @@ export function TriangleSolidArrow(props: TriangleSolidArrowProps) {
     cursor: 'pointer',
     height: '1em',
     width: '1em',
+    userSelect: 'none',
+    display: 'flex',
     ...style,
   };
   return (
-    <svg viewBox="0 0 15 15" fill="var(--w-rjv-arrow-color, currentColor)" style={defaultStyle} {...reset}>
-      <path d="M0 5l6 6 6-6z"></path>
+    <svg
+      viewBox="0 0 30 30"
+      fill="var(--w-rjv-arrow-color, currentColor)"
+      height="1em"
+      width="1em"
+      style={defaultStyle}
+      {...reset}
+    >
+      <path d="M14.1758636,22.5690012 C14.3620957,22.8394807 14.6694712,23.001033 14.9978636,23.001033 C15.326256,23.001033 15.6336315,22.8394807 15.8198636,22.5690012 L24.8198636,9.56900125 C25.0322035,9.2633716 25.0570548,8.86504616 24.8843497,8.5353938 C24.7116447,8.20574144 24.3700159,7.99941506 23.9978636,8 L5.9978636,8 C5.62665,8.00153457 5.28670307,8.20817107 5.11443241,8.53699428 C4.94216175,8.86581748 4.96580065,9.26293681 5.1758636,9.56900125 L14.1758636,22.5690012 Z" />
     </svg>
   );
 }

core/src/arrow/TriangleSolidArrow.test.tsx

@@ -1,20 +1,35 @@
 import { useState } from 'react';
+import { useStore } from '../store';
+import { useShowToolsStore } from '../store/ShowTools';
+import { useSectionStore } from '../store/Section';
+import { type TagType } from '../store/Types';
 
-export interface CopiedProps<T = object> extends React.SVGProps<SVGSVGElement> {
-  show?: boolean;
-  text?: T;
-  onCopied?: (text: string, obj: T | '') => void;
-  render?: (props: Omit<CopiedProps<T>, 'render'>) => JSX.Element;
+export type CopiedOption<T extends object> = {
+  value?: T;
+  copied: boolean;
+  setCopied: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export interface CopiedProps<T extends object> extends React.SVGProps<SVGSVGElement> {
+  value?: T;
+  keyName: string | number;
+  expandKey: string;
 }
 
-export function Copied<T>(props: CopiedProps<T>) {
-  const { children, style, text = '', onCopied, render, show, ...reset } = props;
-  if (!show) return null;
+export const Copied = <T extends object, K extends TagType>(props: CopiedProps<T>) => {
+  const { keyName, value, expandKey, ...other } = props;
+  const { onCopied, enableClipboard } = useStore();
+  const showTools = useShowToolsStore();
+  const isShowTools = showTools[expandKey];
   const [copied, setCopied] = useState(false);
+  const { Copied: Comp = {} } = useSectionStore();
+
+  if (enableClipboard === false || !isShowTools) return null;
+
   const click = (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => {
     event.stopPropagation();
     let copyText = JSON.stringify(
-      text || '',
+      value,
       (key, value) => {
         if (typeof value === 'bigint') {
           return value.toString();
@@ -23,13 +38,13 @@ export function Copied<T>(props: CopiedProps<T>) {
       },
       2,
     );
-
-    if (text === Infinity) copyText = Infinity;
-
+    if (typeof value === 'number' && value === Infinity) copyText = 'Infinity';
+    if (typeof value === 'number' && isNaN(value)) copyText = 'NaN';
+    if (typeof value === 'bigint') copyText = value + 'n';
     navigator.clipboard
       .writeText(copyText)
       .then(() => {
-        onCopied && onCopied(copyText, text);
+        onCopied && onCopied(copyText, value);
         setCopied(true);
         const timer = setTimeout(() => {
           setCopied(false);
@@ -38,29 +53,29 @@ export function Copied<T>(props: CopiedProps<T>) {
       })
       .catch((error) => {});
   };
-  const defalutStyle = { ...style, cursor: 'pointer', verticalAlign: 'middle', marginLeft: 5 } as React.CSSProperties;
   const svgProps: React.SVGProps<SVGSVGElement> = {
-    height: '1em',
-    width: '1em',
-    fill: 'var(--w-rjv-copied-color, currentColor)',
+    fill: copied ? 'var(--w-rjv-copied-success-color, #28a745)' : 'var(--w-rjv-copied-color, currentColor)',
     onClick: click,
-    style: defalutStyle,
-    className: 'w-rjv-copied',
-    ...reset,
   };
-  if (render) return render({ ...props, ...svgProps });
+  const { as, render, ...reset } = Comp;
+
+  const elmProps: React.SVGProps<SVGSVGElement> = { ...reset, ...other, ...svgProps } as React.SVGProps<SVGSVGElement>;
+  const isRender = render && typeof render === 'function';
+  const child =
+    isRender && render({ ...elmProps, 'data-copied': copied } as React.HTMLAttributes<K>, { value, keyName });
+  if (child) return child;
   if (copied) {
     return (
-      <svg viewBox="0 0 32 36" {...svgProps} fill="var(--w-rjv-copied-success-color, #28a745)">
-        <path d="M27.5,33 L2.5,33 L2.5,12.5 L27.5,12.5 L27.5,15.2249049 C29.1403264,13.8627542 29.9736597,13.1778155 30,13.1700887 C30,11.9705278 30,10.0804982 30,7.5 C30,6.1 28.9,5 27.5,5 L20,5 C20,2.2 17.8,0 15,0 C12.2,0 10,2.2 10,5 L2.5,5 C1.1,5 0,6.1 0,7.5 L0,33 C0,34.4 1.1,36 2.5,36 L27.5,36 C28.9,36 30,34.4 30,33 L30,26.1114493 L27.5,28.4926435 L27.5,33 Z M7.5,7.5 L10,7.5 C10,7.5 12.5,6.4 12.5,5 C12.5,3.6 13.6,2.5 15,2.5 C16.4,2.5 17.5,3.6 17.5,5 C17.5,6.4 18.8,7.5 20,7.5 L22.5,7.5 C22.5,7.5 25,8.6 25,10 L5,10 C5,8.5 6.1,7.5 7.5,7.5 Z M5,27.5 L10,27.5 L10,25 L5,25 L5,27.5 Z M28.5589286,16 L32,19.6 L21.0160714,30.5382252 L13.5303571,24.2571429 L17.1303571,20.6571429 L21.0160714,24.5428571 L28.5589286,16 Z M17.5,15 L5,15 L5,17.5 L17.5,17.5 L17.5,15 Z M10,20 L5,20 L5,22.5 L10,22.5 L10,20 Z"></path>
+      <svg viewBox="0 0 32 36" {...elmProps}>
+        <path d="M27.5,33 L2.5,33 L2.5,12.5 L27.5,12.5 L27.5,15.2249049 C29.1403264,13.8627542 29.9736597,13.1778155 30,13.1700887 C30,11.9705278 30,10.0804982 30,7.5 C30,6.1 28.9,5 27.5,5 L20,5 C20,2.2 17.8,0 15,0 C12.2,0 10,2.2 10,5 L2.5,5 C1.1,5 0,6.1 0,7.5 L0,33 C0,34.4 1.1,36 2.5,36 L27.5,36 C28.9,36 30,34.4 30,33 L30,26.1114493 L27.5,28.4926435 L27.5,33 Z M7.5,7.5 L10,7.5 C10,7.5 12.5,6.4 12.5,5 C12.5,3.6 13.6,2.5 15,2.5 C16.4,2.5 17.5,3.6 17.5,5 C17.5,6.4 18.8,7.5 20,7.5 L22.5,7.5 C22.5,7.5 25,8.6 25,10 L5,10 C5,8.5 6.1,7.5 7.5,7.5 Z M5,27.5 L10,27.5 L10,25 L5,25 L5,27.5 Z M28.5589286,16 L32,19.6 L21.0160714,30.5382252 L13.5303571,24.2571429 L17.1303571,20.6571429 L21.0160714,24.5428571 L28.5589286,16 Z M17.5,15 L5,15 L5,17.5 L17.5,17.5 L17.5,15 Z M10,20 L5,20 L5,22.5 L10,22.5 L10,20 Z" />
       </svg>
     );
   }
   return (
-    <svg viewBox="0 0 32 36" {...svgProps}>
-      <path d="M27.5,33 L2.5,33 L2.5,12.5 L27.5,12.5 L27.5,20 L30,20 L30,7.5 C30,6.1 28.9,5 27.5,5 L20,5 C20,2.2 17.8,0 15,0 C12.2,0 10,2.2 10,5 L2.5,5 C1.1,5 0,6.1 0,7.5 L0,33 C0,34.4 1.1,36 2.5,36 L27.5,36 C28.9,36 30,34.4 30,33 L30,29 L27.5,29 L27.5,33 Z M7.5,7.5 L10,7.5 C10,7.5 12.5,6.4 12.5,5 C12.5,3.6 13.6,2.5 15,2.5 C16.4,2.5 17.5,3.6 17.5,5 C17.5,6.4 18.8,7.5 20,7.5 L22.5,7.5 C22.5,7.5 25,8.6 25,10 L5,10 C5,8.5 6.1,7.5 7.5,7.5 Z M5,27.5 L10,27.5 L10,25 L5,25 L5,27.5 Z M22.5,21.5 L22.5,16.5 L12.5,24 L22.5,31.5 L22.5,26.5 L32,26.5 L32,21.5 L22.5,21.5 Z M17.5,15 L5,15 L5,17.5 L17.5,17.5 L17.5,15 Z M10,20 L5,20 L5,22.5 L10,22.5 L10,20 Z"></path>
+    <svg viewBox="0 0 32 36" {...elmProps}>
+      <path d="M27.5,33 L2.5,33 L2.5,12.5 L27.5,12.5 L27.5,20 L30,20 L30,7.5 C30,6.1 28.9,5 27.5,5 L20,5 C20,2.2 17.8,0 15,0 C12.2,0 10,2.2 10,5 L2.5,5 C1.1,5 0,6.1 0,7.5 L0,33 C0,34.4 1.1,36 2.5,36 L27.5,36 C28.9,36 30,34.4 30,33 L30,29 L27.5,29 L27.5,33 Z M7.5,7.5 L10,7.5 C10,7.5 12.5,6.4 12.5,5 C12.5,3.6 13.6,2.5 15,2.5 C16.4,2.5 17.5,3.6 17.5,5 C17.5,6.4 18.8,7.5 20,7.5 L22.5,7.5 C22.5,7.5 25,8.6 25,10 L5,10 C5,8.5 6.1,7.5 7.5,7.5 Z M5,27.5 L10,27.5 L10,25 L5,25 L5,27.5 Z M22.5,21.5 L22.5,16.5 L12.5,24 L22.5,31.5 L22.5,26.5 L32,26.5 L32,21.5 L22.5,21.5 Z M17.5,15 L5,15 L5,17.5 L17.5,17.5 L17.5,15 Z M10,20 L5,20 L5,22.5 L10,22.5 L10,20 Z" />
     </svg>
   );
-}
+};
 
 Copied.displayName = 'JVR.Copied';

core/src/arrow/TriangleSolidArrow.tsx

@@ -0,0 +1,56 @@
+import { useStore } from '../store';
+import { useSectionStore, type SectionElementProps } from '../store/Section';
+import { type TagType } from '../store/Types';
+
+export interface CountInfoProps<T extends object> {
+  value?: T;
+  keyName: string | number;
+}
+
+export const CountInfo = <T extends object>(
+  props: SectionElementProps<TagType> & CountInfoProps<T> & React.HTMLAttributes<HTMLElement>,
+) => {
+  const { value = {}, keyName, ...other } = props;
+  const { displayObjectSize } = useStore();
+
+  const { CountInfo: Comp = {} } = useSectionStore();
+
+  if (!displayObjectSize) return null;
+
+  const { as, render, ...reset } = Comp;
+  const Elm = as || 'span';
+
+  reset.style = { ...reset.style, ...props.style };
+
+  const len = Object.keys(value).length;
+  if (!reset.children) {
+    reset.children = `${len} items`;
+  }
+
+  const elmProps = { ...reset, ...other };
+  const isRender = render && typeof render === 'function';
+  const child = isRender && render({ ...elmProps, 'data-length': len }, { value, keyName });
+  if (child) return child;
+  return <Elm {...elmProps} />;
+};
+
+CountInfo.displayName = 'JVR.CountInfo';
+
+export interface CountInfoExtraProps<T extends object> {
+  value?: T;
+  keyName: string | number;
+}
+
+export const CountInfoExtra = <T extends object>(props: SectionElementProps<TagType> & CountInfoExtraProps<T>) => {
+  const { value = {}, keyName, ...other } = props;
+  const { CountInfoExtra: Comp = {} } = useSectionStore();
+  const { as, render, ...reset } = Comp;
+  const Elm = as || 'span';
+  const isRender = render && typeof render === 'function';
+  const elmProps = { ...reset, ...other };
+  const child = isRender && render(elmProps, { value, keyName });
+  if (child) return child;
+  return <Elm {...elmProps} />;
+};
+
+CountInfoExtra.displayName = 'JVR.CountInfoExtra';

core/src/copied.tsx renamed to core/src/comps/Copied.tsx

@@ -0,0 +1,23 @@
+import { FC, PropsWithChildren } from 'react';
+import { useSectionStore } from '../store/Section';
+
+type KeyProps = {
+  keyName: string | number;
+  value?: unknown;
+};
+export const Key: FC<PropsWithChildren<KeyProps>> = (props) => {
+  const { children, value, keyName } = props;
+  const isNumber = typeof children === 'number';
+  const style: React.CSSProperties = {
+    color: isNumber ? 'var(--w-rjv-key-number, #268bd2)' : 'var(--w-rjv-key-string, #002b36)',
+  };
+  const { KeyName: Comp = {} } = useSectionStore();
+  const { as, render, ...reset } = Comp;
+  reset.style = { ...reset.style, ...style };
+  const Elm = as || 'span';
+  const child = render && typeof render === 'function' && render(reset, { value, keyName });
+  if (child) return child;
+  return <Elm {...reset}>{children}</Elm>;
+};
+
+Key.displayName = 'JVR.Key';

core/src/comps/CountInfo.tsx

@@ -0,0 +1,109 @@
+import { Fragment, useId, useRef } from 'react';
+import { useStore } from '../store';
+import { useExpandsStore } from '../store/Expands';
+import { useShowToolsDispatch } from '../store/ShowTools';
+import { Value } from './Value';
+import { Key } from './Key';
+import { Container } from '../Container';
+import { Quote, Colon } from './ReRender/Symbols';
+import { useHighlight } from '../utils/useHighlight';
+
+interface KeyValuesProps<T extends object> {
+  keyName?: string | number;
+  value?: T;
+  parentValue?: T;
+  expandKey?: string;
+  level: number;
+}
+
+export const KeyValues = <T extends object>(props: KeyValuesProps<T>) => {
+  const { value, expandKey = '', level } = props;
+  const expands = useExpandsStore();
+  const { objectSortKeys, indentWidth, collapsed } = useStore();
+  const isMyArray = Array.isArray(value);
+  const isExpanded =
+    expands[expandKey] ??
+    (typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false);
+  if (isExpanded) {
+    return null;
+  }
+  // object
+  let entries: [key: string | number, value: T][] = isMyArray
+    ? Object.entries(value).map((m) => [Number(m[0]), m[1]])
+    : Object.entries(value as T);
+  if (objectSortKeys) {
+    entries =
+      objectSortKeys === true
+        ? entries.sort(([a], [b]) => (typeof a === 'string' && typeof b === 'string' ? a.localeCompare(b) : 0))
+        : entries.sort(([a], [b]) => (typeof a === 'string' && typeof b === 'string' ? objectSortKeys(a, b) : 0));
+  }
+
+  const style = {
+    borderLeft: 'var(--w-rjv-border-left-width, 1px) var(--w-rjv-line-style, solid) var(--w-rjv-line-color, #ebebeb)',
+    paddingLeft: indentWidth,
+    marginLeft: 6,
+  };
+  return (
+    <div className="w-rjv-wrap" style={style}>
+      {entries.map(([key, val], idx) => {
+        return <KeyValuesItem parentValue={value} keyName={key} value={val} key={idx} level={level} />;
+      })}
+    </div>
+  );
+};
+
+KeyValues.displayName = 'JVR.KeyValues';
+
+interface KayNameProps<T extends object> extends Omit<KeyValuesProps<T>, 'level'> {}
+export const KayName = <T extends object>(props: KayNameProps<T>) => {
+  const { keyName, value } = props;
+  const { highlightUpdates } = useStore();
+  const isNumber = typeof keyName === 'number';
+  const highlightContainer = useRef<HTMLSpanElement>(null);
+  useHighlight({ value, highlightUpdates, highlightContainer });
+  return (
+    <Fragment>
+      <span ref={highlightContainer}>
+        <Quote isNumber={isNumber} />
+        <Key keyName={keyName!} value={value}>
+          {keyName}
+        </Key>
+        <Quote isNumber={isNumber} />
+      </span>
+      <Colon />
+    </Fragment>
+  );
+};
+
+KayName.displayName = 'JVR.KayName';
+
+export const KeyValuesItem = <T extends object>(props: KeyValuesProps<T>) => {
+  const { keyName, value, parentValue, level = 0 } = props;
+  const dispatch = useShowToolsDispatch();
+  const subkeyid = useId();
+  const isMyArray = Array.isArray(value);
+  const isMySet = value instanceof Set;
+  const isMyMap = value instanceof Map;
+  const isDate = value instanceof Date;
+  const isUrl = value instanceof URL;
+  const isMyObject = value && typeof value === 'object' && !isMyArray && !isMySet && !isMyMap && !isDate && !isUrl;
+  const isNested = isMyObject || isMyArray || isMySet || isMyMap;
+  if (isNested) {
+    const myValue = isMySet ? Array.from(value as Set<any>) : isMyMap ? Object.fromEntries(value) : value;
+    return (
+      <Container keyName={keyName} value={myValue} parentValue={parentValue} initialValue={value} level={level + 1} />
+    );
+  }
+  const reset: React.HTMLAttributes<HTMLDivElement> = {
+    onMouseEnter: () => dispatch({ [subkeyid]: true }),
+    onMouseLeave: () => dispatch({ [subkeyid]: false }),
+  };
+  return (
+    <div className="w-rjv-line" {...reset}>
+      <KayName keyName={keyName} value={value} />
+      <Value keyName={keyName!} value={value} expandKey={subkeyid} />
+    </div>
+  );
+};
+
+KeyValuesItem.displayName = 'JVR.KeyValuesItem';