@uiw/react-json-view 1.11.0 → 1.12.0

package/README.md

@@ -190,6 +190,7 @@ const object = {
   null: null,
   undefined,
   timer: 0,
+  nan: NaN,
   url: new URL('https://example.com'),
   date: new Date('Tue Sep 13 2022 14:07:44 GMT-0500 (Central Daylight Time)'),
   array: [19, 100.86, 'test', NaN, Infinity],
@@ -228,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/editor/value.js

@@ -121,6 +121,9 @@ function ReValue(props) {
             } else if (typeof text === 'string' && /^(null)$/gi.test(text)) {
               text = null;
               _typeStr = 'null';
+            } else if (typeof text === 'string' && /^(NaN)$/gi.test(text)) {
+              text = NaN;
+              _typeStr = 'NaN';
             } else if (typeof text === 'string' && /^(undefined)$/gi.test(text)) {
               text = undefined;
               _typeStr = 'undefined';
@@ -183,7 +186,7 @@ function ReValue(props) {
   var typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Type, {
     type: typeStr
   });
-  if (typeStr === 'null' || typeStr === 'undefined') {
+  if (typeStr === 'null' || typeStr === 'undefined' || type.toLocaleLowerCase() === 'nan') {
     typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
   }
   var deleteHandle = function deleteHandle(_x) {

package/cjs/index.js

@@ -57,7 +57,8 @@ var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     lineHeight: 1.4,
     fontFamily: 'var(--w-rjv-font-family, Menlo, monospace)',
     color: 'var(--w-rjv-color, #002b36)',
-    backgroundColor: 'var(--w-rjv-background-color, #00000000)'
+    backgroundColor: 'var(--w-rjv-background-color, #00000000)',
+    fontSize: 13
   }, style);
   var cls = "w-json-view-container w-rjv ".concat(className || '');
   var keyid = (0, _react.useId)();

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,
@@ -218,13 +226,10 @@ function ValueView(props) {
       fontWeight: 'bold'
     };
   }
-  if (value === undefined || type === 'NaN') {
+  if (value === undefined || type.toLocaleLowerCase() === 'nan' || !displayDataTypes) {
     typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
   }
   var isURL = value instanceof URL;
-  if (!displayDataTypes) {
-    typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
-  }
   color = ((_typeMap$type = typeMap[type]) === null || _typeMap$type === void 0 ? void 0 : _typeMap$type.color) || '';
   var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),

package/esm/editor/value.js

@@ -93,6 +93,9 @@ export function ReValue(props) {
         } else if (typeof text === 'string' && /^(null)$/gi.test(text)) {
           text = null;
           _typeStr = 'null';
+        } else if (typeof text === 'string' && /^(NaN)$/gi.test(text)) {
+          text = NaN;
+          _typeStr = 'NaN';
         } else if (typeof text === 'string' && /^(undefined)$/gi.test(text)) {
           text = undefined;
           _typeStr = 'undefined';
@@ -149,7 +152,7 @@ export function ReValue(props) {
   var typeView = /*#__PURE__*/_jsx(Type, {
     type: typeStr
   });
-  if (typeStr === 'null' || typeStr === 'undefined') {
+  if (typeStr === 'null' || typeStr === 'undefined' || type.toLocaleLowerCase() === 'nan') {
     typeView = /*#__PURE__*/_jsx(Fragment, {});
   }
   var deleteHandle = function deleteHandle(_x) {

package/esm/index.js

@@ -19,7 +19,8 @@ var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
     lineHeight: 1.4,
     fontFamily: 'var(--w-rjv-font-family, Menlo, monospace)',
     color: 'var(--w-rjv-color, #002b36)',
-    backgroundColor: 'var(--w-rjv-background-color, #00000000)'
+    backgroundColor: 'var(--w-rjv-background-color, #00000000)',
+    fontSize: 13
   }, style);
   var cls = "w-json-view-container w-rjv " + (className || '');
   var keyid = useId();

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);
   };
@@ -201,13 +208,10 @@ export function ValueView(props) {
       fontWeight: 'bold'
     };
   }
-  if (value === undefined || type === 'NaN') {
+  if (value === undefined || type.toLocaleLowerCase() === 'nan' || !displayDataTypes) {
     typeView = /*#__PURE__*/_jsx(Fragment, {});
   }
   var isURL = value instanceof URL;
-  if (!displayDataTypes) {
-    typeView = /*#__PURE__*/_jsx(Fragment, {});
-  }
   color = ((_typeMap$type = typeMap[type]) == null ? void 0 : _typeMap$type.color) || '';
   var [showTools, setShowTools] = useState(false);
   var tools = useMemo(() => enableClipboard && showTools && /*#__PURE__*/_jsx(Copied, {

package/package.json

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