@uiw/react-json-view 1.11.1 → 1.12.0

package/README.md

@@ -229,9 +229,11 @@ const customTheme = {
   '--w-rjv-type-boolean-color': '#559bd4',
   '--w-rjv-type-date-color': '#586e75',
   '--w-rjv-type-url-color': '#0969da',
-  '--w-rjv-type-null-color': '#d33682',
   '--w-rjv-type-nan-color': '#859900',
   '--w-rjv-type-undefined-color': '#586e75',
+  '--w-rjv-type-null-color': '#d33682',
+  '--w-rjv-type-set-color': '#268bd2',
+  '--w-rjv-type-map-color': '#268bd2',
 };
 
 export default function Demo() {

package/cjs/node.d.ts

@@ -7,6 +7,8 @@ export interface RootNodeProps<T extends object> extends JsonViewProps<T> {
     keyid?: string;
     level?: number;
     parentValue?: T;
+    isSet?: boolean;
+    isMap?: boolean;
     namespace?: Array<string | number>;
     setParentValue?: React.Dispatch<React.SetStateAction<T>>;
 }

package/cjs/node.js

@@ -19,7 +19,7 @@ var _copied = require("./copied");
 var _ellipsis = require("./comps/ellipsis");
 var _meta = require("./comps/meta");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "shortenTextAfterLength", "collapsed", "level", "keyid", "quotes", "namespace", "onCopied", "onExpand", "parentValue", "setParentValue"];
+var _excluded = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "shortenTextAfterLength", "collapsed", "level", "keyid", "quotes", "namespace", "isSet", "isMap", "onCopied", "onExpand", "parentValue", "setParentValue"];
 function getLength(obj) {
   try {
     return Object.keys(obj).length;
@@ -72,6 +72,10 @@ var RootNode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     quotes = _props$quotes === void 0 ? '"' : _props$quotes,
     _props$namespace = props.namespace,
     namespace = _props$namespace === void 0 ? [] : _props$namespace,
+    _props$isSet = props.isSet,
+    isSet = _props$isSet === void 0 ? false : _props$isSet,
+    _props$isMap = props.isMap,
+    isMap = _props$isMap === void 0 ? false : _props$isMap,
     onCopied = props.onCopied,
     onExpand = props.onExpand,
     parentValue = props.parentValue,
@@ -220,6 +224,10 @@ var RootNode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           parentName: keyName,
           color: typeof keyName === 'number' ? _value.typeMap['number'].color : ''
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Colon, {})]
+      }), isSet && /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Type, {
+        type: "Set"
+      }), isMap && /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Type, {
+        type: "Map"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_meta.Meta, {
         start: true,
         isArray: isArray,
@@ -250,35 +258,40 @@ var RootNode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           key = _ref11[0],
           itemVal = _ref11[1];
         var item = itemVal;
-        var isEmpty = Array.isArray(item) && item.length === 0 || (0, _typeof2["default"])(item) === 'object' && item && !(item instanceof Date) && Object.keys(item).length === 0;
-        if (Array.isArray(item) && !isEmpty) {
+        var isMySet = item instanceof Set;
+        var isMyMap = item instanceof Map;
+        var myValue = isMySet ? Array.from(item) : isMyMap ? Object.fromEntries(item) : item;
+        var isEmpty = Array.isArray(myValue) && myValue.length === 0 || (0, _typeof2["default"])(myValue) === 'object' && myValue && !(myValue instanceof Date) && Object.keys(myValue).length === 0;
+        if ((Array.isArray(myValue) || isMySet || isMyMap) && !isEmpty) {
           var label = isArray ? idx : key;
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
             className: "w-rjv-wrap",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RootNode, (0, _objectSpread2["default"])({
-              value: item,
+              value: myValue,
+              isSet: isMySet,
+              isMap: isMyMap,
               namespace: [].concat((0, _toConsumableArray2["default"])(namespace), [label]),
               keyName: label,
               keyid: keyid + subkeyid + label
             }, subNodeProps))
           }, label + idx);
         }
-        if ((0, _typeof2["default"])(item) === 'object' && item && !(item instanceof Date) && !isEmpty) {
+        if ((0, _typeof2["default"])(myValue) === 'object' && myValue && !(myValue instanceof Date) && !isEmpty) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
             className: "w-rjv-wrap",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RootNode, (0, _objectSpread2["default"])({
-              value: item,
+              value: myValue,
               namespace: [].concat((0, _toConsumableArray2["default"])(namespace), [key]),
               keyName: key,
               keyid: keyid + subkeyid + key
             }, subNodeProps))
           }, key + '' + idx);
         }
-        if (typeof item === 'function') {
+        if (typeof myValue === 'function') {
           return;
         }
         var renderKey = /*#__PURE__*/(0, _jsxRuntime.jsx)(_semicolon.Semicolon, {
-          value: item,
+          value: myValue,
           "data-keys": keyid,
           quotes: quotes,
           namespace: [].concat((0, _toConsumableArray2["default"])(namespace), [key]),
@@ -288,7 +301,7 @@ var RootNode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           color: typeof key === 'number' ? _value.typeMap['number'].color : '',
           keyName: key
         });
-        var length = Array.isArray(item) ? item.length : getLength(item);
+        var length = Array.isArray(myValue) ? myValue.length : getLength(myValue);
         countInfo = /*#__PURE__*/(0, _jsxRuntime.jsx)(CountInfo, {
           children: length
         });
@@ -306,7 +319,8 @@ var RootNode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           countInfo: countInfo,
           renderKey: renderKey,
           keyName: key,
-          value: item
+          isSet: isSet,
+          value: myValue
         }), idx);
       })
     }), expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {

package/cjs/value.d.ts

@@ -35,6 +35,14 @@ export declare const typeMap: {
         color: string;
         label: string;
     };
+    Set: {
+        color: string;
+        label: string;
+    };
+    Map: {
+        color: string;
+        label: string;
+    };
     NaN: {
         color: string;
         label: string;
@@ -53,6 +61,7 @@ export interface ValueViewProps<T extends object> extends React.DetailedHTMLProp
     displayDataTypes: boolean;
     displayObjectSize: boolean;
     enableClipboard: boolean;
+    isSet: boolean;
     indentWidth: number;
     level?: number;
     shortenTextAfterLength?: JsonViewProps<T>['shortenTextAfterLength'];
@@ -64,7 +73,7 @@ export interface ValueViewProps<T extends object> extends React.DetailedHTMLProp
     setValue?: React.Dispatch<React.SetStateAction<T>>;
 }
 export declare function getValueString<T>(value: T): {
-    type: "string" | "number" | "bigint" | "boolean" | "undefined" | "date" | "url" | "float" | "null" | "NaN";
+    type: "string" | "number" | "bigint" | "boolean" | "undefined" | "date" | "url" | "float" | "null" | "Set" | "Map" | "NaN";
     content: string;
 };
 export declare function ValueView<T extends object>(props: ValueViewProps<T>): import("react/jsx-runtime").JSX.Element;

package/cjs/value.js

@@ -19,7 +19,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["children", "style"],
   _excluded2 = ["children", "length", "style"],
   _excluded3 = ["color", "style", "isURL", "href", "children"],
-  _excluded4 = ["value", "parentValue", "setValue", "countInfo", "data", "keyName", "indentWidth", "namespace", "renderKey", "components", "quotes", "level", "enableClipboard", "displayObjectSize", "displayDataTypes", "shortenTextAfterLength"],
+  _excluded4 = ["value", "parentValue", "setValue", "countInfo", "data", "keyName", "indentWidth", "isSet", "namespace", "renderKey", "components", "quotes", "level", "enableClipboard", "displayObjectSize", "displayDataTypes", "shortenTextAfterLength"],
   _excluded5 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
 var Line = function Line(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])({}, props));
@@ -63,6 +63,14 @@ var typeMap = {
     color: 'var(--w-rjv-type-null-color, #d33682)',
     label: 'null'
   },
+  Set: {
+    color: 'var(--w-rjv-type-set-color, #268bd2)',
+    label: 'Set'
+  },
+  Map: {
+    color: 'var(--w-rjv-type-map-color, #268bd2)',
+    label: 'Map'
+  },
   NaN: {
     color: 'var(--w-rjv-type-nan-color, #859900)',
     label: 'NaN'
@@ -146,7 +154,6 @@ var RenderShortenTextValue = function RenderShortenTextValue(_ref2) {
     shorten = _useState2[0],
     setShorten = _useState2[1];
   var click = function click() {
-    console.log(shorten);
     if (length && childrenStr.length <= length) return setShorten(false);
     setShorten(!shorten);
   };
@@ -193,6 +200,7 @@ function ValueView(props) {
     data = props.data,
     keyName = props.keyName,
     indentWidth = props.indentWidth,
+    isSet = props.isSet,
     namespace = props.namespace,
     renderKey = props.renderKey,
     _props$components = props.components,

package/esm/node.d.ts

@@ -7,6 +7,8 @@ export interface RootNodeProps<T extends object> extends JsonViewProps<T> {
     keyid?: string;
     level?: number;
     parentValue?: T;
+    isSet?: boolean;
+    isMap?: boolean;
     namespace?: Array<string | number>;
     setParentValue?: React.Dispatch<React.SetStateAction<T>>;
 }

package/esm/node.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "shortenTextAfterLength", "collapsed", "level", "keyid", "quotes", "namespace", "onCopied", "onExpand", "parentValue", "setParentValue"];
+var _excluded = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "shortenTextAfterLength", "collapsed", "level", "keyid", "quotes", "namespace", "isSet", "isMap", "onCopied", "onExpand", "parentValue", "setParentValue"];
 import { Fragment, useId, cloneElement, useState, useEffect, forwardRef } from 'react';
-import { ValueView, Colon, Label, Line, typeMap } from './value';
+import { ValueView, Type, Colon, Label, Line, typeMap } from './value';
 import { TriangleArrow } from './arrow/TriangleArrow';
 import { useExpandsStatus, store } from './store';
 import { Semicolon } from './semicolon';
@@ -52,6 +52,8 @@ export var RootNode = /*#__PURE__*/forwardRef((props, ref) => {
       keyid = 'root',
       quotes = '"',
       namespace = [],
+      isSet = false,
+      isMap = false,
       onCopied,
       onExpand,
       parentValue,
@@ -181,6 +183,10 @@ export var RootNode = /*#__PURE__*/forwardRef((props, ref) => {
           parentName: keyName,
           color: typeof keyName === 'number' ? typeMap['number'].color : ''
         }), /*#__PURE__*/_jsx(Colon, {})]
+      }), isSet && /*#__PURE__*/_jsx(Type, {
+        type: "Set"
+      }), isMap && /*#__PURE__*/_jsx(Type, {
+        type: "Map"
       }), /*#__PURE__*/_jsx(Meta, {
         start: true,
         isArray: isArray,
@@ -209,35 +215,40 @@ export var RootNode = /*#__PURE__*/forwardRef((props, ref) => {
       children: entries.length > 0 && [...entries].map((_ref6, idx) => {
         var [key, itemVal] = _ref6;
         var item = itemVal;
-        var isEmpty = Array.isArray(item) && item.length === 0 || typeof item === 'object' && item && !(item instanceof Date) && Object.keys(item).length === 0;
-        if (Array.isArray(item) && !isEmpty) {
+        var isMySet = item instanceof Set;
+        var isMyMap = item instanceof Map;
+        var myValue = isMySet ? Array.from(item) : isMyMap ? Object.fromEntries(item) : item;
+        var isEmpty = Array.isArray(myValue) && myValue.length === 0 || typeof myValue === 'object' && myValue && !(myValue instanceof Date) && Object.keys(myValue).length === 0;
+        if ((Array.isArray(myValue) || isMySet || isMyMap) && !isEmpty) {
           var label = isArray ? idx : key;
           return /*#__PURE__*/_jsx(Line, {
             className: "w-rjv-wrap",
             children: /*#__PURE__*/_jsx(RootNode, _extends({
-              value: item,
+              value: myValue,
+              isSet: isMySet,
+              isMap: isMyMap,
               namespace: [...namespace, label],
               keyName: label,
               keyid: keyid + subkeyid + label
             }, subNodeProps))
           }, label + idx);
         }
-        if (typeof item === 'object' && item && !(item instanceof Date) && !isEmpty) {
+        if (typeof myValue === 'object' && myValue && !(myValue instanceof Date) && !isEmpty) {
           return /*#__PURE__*/_jsx(Line, {
             className: "w-rjv-wrap",
             children: /*#__PURE__*/_jsx(RootNode, _extends({
-              value: item,
+              value: myValue,
               namespace: [...namespace, key],
               keyName: key,
               keyid: keyid + subkeyid + key
             }, subNodeProps))
           }, key + '' + idx);
         }
-        if (typeof item === 'function') {
+        if (typeof myValue === 'function') {
           return;
         }
         var renderKey = /*#__PURE__*/_jsx(Semicolon, {
-          value: item,
+          value: myValue,
           "data-keys": keyid,
           quotes: quotes,
           namespace: [...namespace, key],
@@ -247,7 +258,7 @@ export var RootNode = /*#__PURE__*/forwardRef((props, ref) => {
           color: typeof key === 'number' ? typeMap['number'].color : '',
           keyName: key
         });
-        var length = Array.isArray(item) ? item.length : getLength(item);
+        var length = Array.isArray(myValue) ? myValue.length : getLength(myValue);
         countInfo = /*#__PURE__*/_jsx(CountInfo, {
           children: length
         });
@@ -265,7 +276,8 @@ export var RootNode = /*#__PURE__*/forwardRef((props, ref) => {
           countInfo: countInfo,
           renderKey: renderKey,
           keyName: key,
-          value: item
+          isSet: isSet,
+          value: myValue
         }), idx);
       })
     }), expand && /*#__PURE__*/_jsx(Line, {

package/esm/value.d.ts

@@ -35,6 +35,14 @@ export declare const typeMap: {
         color: string;
         label: string;
     };
+    Set: {
+        color: string;
+        label: string;
+    };
+    Map: {
+        color: string;
+        label: string;
+    };
     NaN: {
         color: string;
         label: string;
@@ -53,6 +61,7 @@ export interface ValueViewProps<T extends object> extends React.DetailedHTMLProp
     displayDataTypes: boolean;
     displayObjectSize: boolean;
     enableClipboard: boolean;
+    isSet: boolean;
     indentWidth: number;
     level?: number;
     shortenTextAfterLength?: JsonViewProps<T>['shortenTextAfterLength'];
@@ -64,7 +73,7 @@ export interface ValueViewProps<T extends object> extends React.DetailedHTMLProp
     setValue?: React.Dispatch<React.SetStateAction<T>>;
 }
 export declare function getValueString<T>(value: T): {
-    type: "string" | "number" | "bigint" | "boolean" | "undefined" | "date" | "url" | "float" | "null" | "NaN";
+    type: "string" | "number" | "bigint" | "boolean" | "undefined" | "date" | "url" | "float" | "null" | "Set" | "Map" | "NaN";
     content: string;
 };
 export declare function ValueView<T extends object>(props: ValueViewProps<T>): import("react/jsx-runtime").JSX.Element;

package/esm/value.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["children", "style"],
   _excluded2 = ["children", "length", "style"],
   _excluded3 = ["color", "style", "isURL", "href", "children"],
-  _excluded4 = ["value", "parentValue", "setValue", "countInfo", "data", "keyName", "indentWidth", "namespace", "renderKey", "components", "quotes", "level", "enableClipboard", "displayObjectSize", "displayDataTypes", "shortenTextAfterLength"],
+  _excluded4 = ["value", "parentValue", "setValue", "countInfo", "data", "keyName", "indentWidth", "isSet", "namespace", "renderKey", "components", "quotes", "level", "enableClipboard", "displayObjectSize", "displayDataTypes", "shortenTextAfterLength"],
   _excluded5 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
 import { Fragment, forwardRef, useMemo, useState } from 'react';
 import { Meta } from './comps/meta';
@@ -46,6 +46,14 @@ export var typeMap = {
     color: 'var(--w-rjv-type-null-color, #d33682)',
     label: 'null'
   },
+  Set: {
+    color: 'var(--w-rjv-type-set-color, #268bd2)',
+    label: 'Set'
+  },
+  Map: {
+    color: 'var(--w-rjv-type-map-color, #268bd2)',
+    label: 'Map'
+  },
   NaN: {
     color: 'var(--w-rjv-type-nan-color, #859900)',
     label: 'NaN'
@@ -127,7 +135,6 @@ var RenderShortenTextValue = _ref2 => {
   var childrenStr = children;
   var [shorten, setShorten] = useState(length && childrenStr.length >= length);
   var click = () => {
-    console.log(shorten);
     if (length && childrenStr.length <= length) return setShorten(false);
     setShorten(!shorten);
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-json-view",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "description": "JSON viewer for react.",
   "main": "cjs/index.js",
   "module": "esm/index.js",