@uiw/react-json-view 2.0.0-alpha.1 → 2.0.0-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +17 -19
- package/cjs/Container.js +3 -6
- package/cjs/comps/Key.js +3 -1
- package/cjs/comps/NestedOpen.js +2 -2
- package/cjs/comps/ReRender/Types.d.ts +6 -12
- package/cjs/comps/ReRender/Types.js +26 -21
- package/cjs/index.js +1 -1
- package/cjs/store/Symbols.js +1 -0
- package/esm/Container.js +4 -5
- package/esm/comps/Key.js +3 -1
- package/esm/comps/NestedOpen.js +2 -2
- package/esm/comps/ReRender/Types.d.ts +6 -12
- package/esm/comps/ReRender/Types.js +24 -19
- package/esm/index.js +1 -1
- package/esm/store/Symbols.js +1 -0
- package/package.json +1 -1
- package/cjs/type.d.ts +0 -50
- package/cjs/type.js +0 -57
- package/esm/type.d.ts +0 -50
- package/esm/type.js +0 -50
package/README.md
CHANGED
|
@@ -30,7 +30,7 @@ The new version [**v2**](https://raw.githack.com/uiwjs/react-json-view/v2-docs/i
|
|
|
30
30
|
|
|
31
31
|
- [x] Complete all features of displaying JSON in v1.
|
|
32
32
|
- [ ] Add editing functionality to v2.
|
|
33
|
-
- [
|
|
33
|
+
- [x] Add test cases to v2.
|
|
34
34
|
|
|
35
35
|
## Quick Start
|
|
36
36
|
|
|
@@ -716,7 +716,6 @@ import { BracketsLeft } from './symbol/BracketsLeft';
|
|
|
716
716
|
import { BracketsRight } from './symbol/BracketsRight';
|
|
717
717
|
import { Arrow } from './symbol/Arrow';
|
|
718
718
|
import { Colon } from './symbol/Colon';
|
|
719
|
-
import { Ellipsis } from './symbol/Ellipsis';
|
|
720
719
|
import { Quote } from './symbol/Quote';
|
|
721
720
|
import { ValueQuote } from './symbol/ValueQuote';
|
|
722
721
|
import { Bigint } from './types/Bigint';
|
|
@@ -735,10 +734,8 @@ import { Url } from './types/Url';
|
|
|
735
734
|
import { Copied } from './section/Copied';
|
|
736
735
|
import { CountInfo } from './section/CountInfo';
|
|
737
736
|
import { CountInfoExtra } from './section/CountInfoExtra';
|
|
737
|
+
import { Ellipsis } from './section/Ellipsis';
|
|
738
738
|
import { KeyName } from './section/KeyName';
|
|
739
|
-
import { type CountInfoProps } from "./comps/CountInfo";
|
|
740
|
-
import { type CopiedOption } from "./comps/Copied";
|
|
741
|
-
import { type NestedOpenProps } from "./comps/NestedOpen";
|
|
742
739
|
|
|
743
740
|
type JsonViewComponent = React.FC<React.PropsWithRef<JsonViewProps<object>>> & {
|
|
744
741
|
Bigint: typeof Bigint;
|
|
@@ -776,19 +773,20 @@ export default JsonView;
|
|
|
776
773
|
|
|
777
774
|
Here is the size benchmark (using [bundlephobia.com](https://bundlephobia.com)) against similar React libraries (found by [`npmjs.com/search`](https://www.npmjs.com/search?q=react%20json&ranking=popularity)):
|
|
778
775
|
|
|
779
|
-
| Library | Bundle size (gzip) | Deps | Last commit | Download | Editable |
|
|
780
|
-
| ------- | ------- | ------- | ------- | ------- | ------- |
|
|
781
|
-
|
|
|
782
|
-
| react-json-view-lite | [](https://bundlephobia.com/result?p=react-json-view-lite) [](https://bundlephobia.com/result?p=react-json-view-lite) | [](https://bundlephobia.com/result?p=react-json-view-lite) | [](https://github.com/AnyRoad/react-json-view-lite/commits) | [](https://www.npmjs.com/package/react-json-view-lite) | ❌ |
|
|
783
|
-
| react-json-pretty | [](https://bundlephobia.com/result?p=react-json-pretty) [](https://bundlephobia.com/result?p=react-json-pretty) | [](https://bundlephobia.com/result?p=react-json-pretty) | [](https://github.com/chenckang/react-json-pretty/commits) | [](https://www.npmjs.com/package/react-json-pretty) | ❌ |
|
|
784
|
-
| react-json-inspector | [](https://bundlephobia.com/result?p=react-json-inspector) [](https://bundlephobia.com/result?p=react-json-inspector) | [](https://bundlephobia.com/result?p=react-json-inspector) | [](https://github.com/Lapple/react-json-inspector/commits) | [](https://www.npmjs.com/package/react-json-inspector) | ❌ |
|
|
785
|
-
| react-json-tree | [](https://bundlephobia.com/result?p=react-json-tree) [](https://bundlephobia.com/result?p=react-json-tree) | [](https://bundlephobia.com/result?p=react-json-tree) | [](https://github.com/reduxjs/redux-devtools/commits) | [](https://www.npmjs.com/package/react-json-tree) | ❌ |
|
|
786
|
-
| ~~react-json-view~~ | [](https://bundlephobia.com/result?p=react-json-view) [](https://bundlephobia.com/result?p=react-json-view) | [](https://bundlephobia.com/result?p=react-json-view) | [](https://github.com/mac-s-g/react-json-view/commits) | [](https://www.npmjs.com/package/react-json-view) | ✅ |
|
|
787
|
-
|
|
|
788
|
-
| react-
|
|
789
|
-
|
|
|
790
|
-
|
|
|
791
|
-
|
|
|
776
|
+
| Library | Bundle size (gzip) | Deps | Last commit | Download | Editable | Demo |
|
|
777
|
+
| ------- | ------- | ------- | ------- | ------- | ------- | ------- |
|
|
778
|
+
| **[@uiw/react-json-view](https://github.com/uiwjs/react-json-view)** | [](https://bundlephobia.com/result?p=@uiw/react-json-view) [](https://bundlephobia.com/result?p=@uiw/react-json-view) | [](https://bundlephobia.com/result?p=@uiw/react-json-view) | [](https://github.com/uiwjs/react-json-view/commits) | [](https://www.npmjs.com/package/@uiw/react-json-view) | ✅ | [demo](https://uiwjs.github.io/react-json-view/) |
|
|
779
|
+
| [react-json-view-lite](https://github.com/anyroad/react-json-view-lite) | [](https://bundlephobia.com/result?p=react-json-view-lite) [](https://bundlephobia.com/result?p=react-json-view-lite) | [](https://bundlephobia.com/result?p=react-json-view-lite) | [](https://github.com/AnyRoad/react-json-view-lite/commits) | [](https://www.npmjs.com/package/react-json-view-lite) | ❌ | [demo](https://anyroad.github.io/react-json-view-lite/) |
|
|
780
|
+
| [react-json-pretty](https://github.com/chenckang/react-json-pretty) | [](https://bundlephobia.com/result?p=react-json-pretty) [](https://bundlephobia.com/result?p=react-json-pretty) | [](https://bundlephobia.com/result?p=react-json-pretty) | [](https://github.com/chenckang/react-json-pretty/commits) | [](https://www.npmjs.com/package/react-json-pretty) | ❌ | - |
|
|
781
|
+
| [~~react-json-inspector~~](https://github.com/Lapple/react-json-inspector) | [](https://bundlephobia.com/result?p=react-json-inspector) [](https://bundlephobia.com/result?p=react-json-inspector) | [](https://bundlephobia.com/result?p=react-json-inspector) | [](https://github.com/Lapple/react-json-inspector/commits) | [](https://www.npmjs.com/package/react-json-inspector) | ❌ | [demo](https://lapple.github.io/react-json-inspector/)
|
|
782
|
+
| [react-json-tree](https://github.com/reduxjs/redux-devtools/tree/main/packages/react-json-tree) | [](https://bundlephobia.com/result?p=react-json-tree) [](https://bundlephobia.com/result?p=react-json-tree) | [](https://bundlephobia.com/result?p=react-json-tree) | [](https://github.com/reduxjs/redux-devtools/commits) | [](https://www.npmjs.com/package/react-json-tree) | ❌ |
|
|
783
|
+
| ~~[react-json-view](https://github.com/mac-s-g/react-json-view)~~ | [](https://bundlephobia.com/result?p=react-json-view) [](https://bundlephobia.com/result?p=react-json-view) | [](https://bundlephobia.com/result?p=react-json-view) | [](https://github.com/mac-s-g/react-json-view/commits) | [](https://www.npmjs.com/package/react-json-view) | ✅ | [demo](https://mac-s-g.github.io/react-json-view/demo/dist/) |
|
|
784
|
+
| [react-inspector](https://github.com/storybookjs/react-inspector) | [](https://bundlephobia.com/result?p=react-inspector) [](https://bundlephobia.com/result?p=react-inspector) | [](https://bundlephobia.com/result?p=react-inspector) | [](https://github.com/storybookjs/react-inspector/commits) | [](https://www.npmjs.com/package/react-inspector) | ❌ | [demo](https://react-inspector.netlify.app/) |
|
|
785
|
+
| [react-domify](https://github.com/JedWatson/react-domify) | [](https://bundlephobia.com/result?p=react-domify) [](https://bundlephobia.com/result?p=react-domify) | [](https://bundlephobia.com/result?p=react-domify) | [](https://github.com/JedWatson/react-domify/commits) | [](https://www.npmjs.com/package/react-domify) | ❌ | [demo](https://jedwatson.github.io/react-domify/) |
|
|
786
|
+
| [react18-json-view](https://github.com/YYsuni/react18-json-view) | [](https://bundlephobia.com/result?p=react18-json-view) [](https://bundlephobia.com/result?p=react18-json-view) | [](https://bundlephobia.com/result?p=react18-json-view) | [](https://github.com/YYsuni/react18-json-view/commits) | [](https://www.npmjs.com/package/react18-json-view) | ❌ | [demo](https://jv.yysuni.com/) |
|
|
787
|
+
| [@textea/json-viewer](https://github.com/TexteaInc/json-viewer) | [](https://bundlephobia.com/result?p=@textea/json-viewer) [](https://bundlephobia.com/result?p=@textea/json-viewer) | [](https://bundlephobia.com/result?p=@textea/json-viewer) | [](https://github.com/TexteaInc/json-viewer/commits) | [](https://www.npmjs.com/package/@textea/json-viewer) | ✅ | [demo](https://stackblitz.com/edit/textea-json-viewer-v3-b4wgxq) |
|
|
788
|
+
| [react-editable-json-tree](https://github.com/oxyno-zeta/react-editable-json-tree) | [](https://bundlephobia.com/result?p=react-editable-json-tree) [](https://bundlephobia.com/result?p=react-editable-json-tree) | [](https://bundlephobia.com/result?p=react-editable-json-tree) | [](https://github.com/TexteaInc/json-viewer/commits) | [](https://www.npmjs.com/package/react-editable-json-tree) | ✅ | [demo](https://oxyno-zeta.github.io/react-editable-json-tree/) |
|
|
789
|
+
| [react-json-view](https://github.com/HuolalaTech/react-json-view) | [](https://bundlephobia.com/result?p=@huolala-tech/react-json-view) [](https://bundlephobia.com/result?p=@huolala-tech/react-json-view) | [](https://bundlephobia.com/result?p=@huolala-tech/react-json-view) | [](https://github.com/HuolalaTech/react-json-view/commits) | [](https://www.npmjs.com/package/@huolala-tech/react-json-view) | ❌ | [demo](https://huolalatech.github.io/react-json-view/) |
|
|
792
790
|
|
|
793
791
|
## Development
|
|
794
792
|
|
|
@@ -819,7 +817,7 @@ As always, thanks to our amazing contributors!
|
|
|
819
817
|
<img src="https://uiwjs.github.io/react-json-view/CONTRIBUTORS.svg" />
|
|
820
818
|
</a>
|
|
821
819
|
|
|
822
|
-
Made with [
|
|
820
|
+
Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).
|
|
823
821
|
|
|
824
822
|
## License
|
|
825
823
|
|
package/cjs/Container.js
CHANGED
|
@@ -28,13 +28,9 @@ var Container = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
28
28
|
initialValue = props.initialValue,
|
|
29
29
|
keyName = props.keyName,
|
|
30
30
|
elmProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
|
|
31
|
-
var $ref = (0, _react.useRef)(null);
|
|
32
31
|
var dispatch = (0, _ShowTools.useShowToolsDispatch)();
|
|
33
|
-
(0, _react.useImperativeHandle)(ref, function () {
|
|
34
|
-
return $ref.current;
|
|
35
|
-
}, [$ref]);
|
|
36
32
|
var subkeyid = (0, _react.useId)();
|
|
37
|
-
var defaultClassNames =
|
|
33
|
+
var defaultClassNames = [className, 'w-rjv-inner'].filter(Boolean).join(' ');
|
|
38
34
|
var reset = {
|
|
39
35
|
onMouseEnter: function onMouseEnter() {
|
|
40
36
|
return dispatch((0, _defineProperty2["default"])({}, subkeyid, true));
|
|
@@ -44,7 +40,8 @@ var Container = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
44
40
|
}
|
|
45
41
|
};
|
|
46
42
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
|
|
47
|
-
className: defaultClassNames
|
|
43
|
+
className: defaultClassNames,
|
|
44
|
+
ref: ref
|
|
48
45
|
}, elmProps), reset), {}, {
|
|
49
46
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_NestedOpen.NestedOpen, {
|
|
50
47
|
expandKey: subkeyid,
|
package/cjs/comps/Key.js
CHANGED
|
@@ -26,7 +26,9 @@ var Key = function Key(props) {
|
|
|
26
26
|
reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded);
|
|
27
27
|
reset.style = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset.style), style);
|
|
28
28
|
var Elm = as || 'span';
|
|
29
|
-
var child = render && typeof render === 'function' && render(reset, {
|
|
29
|
+
var child = render && typeof render === 'function' && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
|
|
30
|
+
children: children
|
|
31
|
+
}), {
|
|
30
32
|
value: value,
|
|
31
33
|
keyName: keyName
|
|
32
34
|
});
|
package/cjs/comps/NestedOpen.js
CHANGED
|
@@ -66,9 +66,9 @@ var NestedOpen = function NestedOpen(props) {
|
|
|
66
66
|
}), (keyName || typeof keyName === 'number') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyValues.KayName, {
|
|
67
67
|
keyName: keyName
|
|
68
68
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Types.SetComp, {
|
|
69
|
-
|
|
69
|
+
value: initialValue
|
|
70
70
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Types.MapComp, {
|
|
71
|
-
|
|
71
|
+
value: initialValue
|
|
72
72
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Symbols.BracketsOpen, {
|
|
73
73
|
isBrackets: isArray || isMySet
|
|
74
74
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ellipsis.Ellipsis, {
|
|
@@ -1,16 +1,10 @@
|
|
|
1
1
|
import { FC, PropsWithChildren } from 'react';
|
|
2
|
-
export declare const SetComp: {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
8
|
-
export declare const MapComp: {
|
|
9
|
-
({ isMap }: {
|
|
10
|
-
isMap: boolean;
|
|
11
|
-
}): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
|
|
12
|
-
displayName: string;
|
|
13
|
-
};
|
|
2
|
+
export declare const SetComp: FC<PropsWithChildren<{
|
|
3
|
+
value: unknown;
|
|
4
|
+
}>>;
|
|
5
|
+
export declare const MapComp: FC<PropsWithChildren<{
|
|
6
|
+
value: unknown;
|
|
7
|
+
}>>;
|
|
14
8
|
type TypeProps = PropsWithChildren<{
|
|
15
9
|
expandKey: string;
|
|
16
10
|
keyName: string | number;
|
|
@@ -29,42 +29,46 @@ var _excluded = ["as", "render"],
|
|
|
29
29
|
_excluded13 = ["as", "render"],
|
|
30
30
|
_excluded14 = ["as", "render"];
|
|
31
31
|
var SetComp = function SetComp(_ref) {
|
|
32
|
-
var
|
|
32
|
+
var value = _ref.value;
|
|
33
33
|
var _useTypesStore = (0, _Types.useTypesStore)(),
|
|
34
34
|
_useTypesStore$Set = _useTypesStore.Set,
|
|
35
|
-
|
|
35
|
+
Comp = _useTypesStore$Set === void 0 ? {} : _useTypesStore$Set,
|
|
36
36
|
displayDataTypes = _useTypesStore.displayDataTypes;
|
|
37
|
+
var isSet = value instanceof Set;
|
|
37
38
|
if (!isSet || !displayDataTypes) return null;
|
|
38
|
-
var as =
|
|
39
|
-
render =
|
|
40
|
-
reset = (0, _objectWithoutProperties2["default"])(
|
|
39
|
+
var as = Comp.as,
|
|
40
|
+
render = Comp.render,
|
|
41
|
+
reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded);
|
|
41
42
|
var isRender = render && typeof render === 'function';
|
|
42
43
|
var type = isRender && render(reset, {
|
|
43
|
-
type: 'type'
|
|
44
|
+
type: 'type',
|
|
45
|
+
value: value
|
|
44
46
|
});
|
|
45
47
|
if (type) return type;
|
|
46
|
-
var
|
|
47
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
48
|
+
var Elm = as || 'span';
|
|
49
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, reset));
|
|
48
50
|
};
|
|
49
51
|
exports.SetComp = SetComp;
|
|
50
52
|
SetComp.displayName = 'JVR.SetComp';
|
|
51
53
|
var MapComp = function MapComp(_ref2) {
|
|
52
|
-
var
|
|
54
|
+
var value = _ref2.value;
|
|
53
55
|
var _useTypesStore2 = (0, _Types.useTypesStore)(),
|
|
54
56
|
_useTypesStore2$Map = _useTypesStore2.Map,
|
|
55
|
-
|
|
57
|
+
Comp = _useTypesStore2$Map === void 0 ? {} : _useTypesStore2$Map,
|
|
56
58
|
displayDataTypes = _useTypesStore2.displayDataTypes;
|
|
59
|
+
var isMap = value instanceof Map;
|
|
57
60
|
if (!isMap || !displayDataTypes) return null;
|
|
58
|
-
var as =
|
|
59
|
-
render =
|
|
60
|
-
reset = (0, _objectWithoutProperties2["default"])(
|
|
61
|
+
var as = Comp.as,
|
|
62
|
+
render = Comp.render,
|
|
63
|
+
reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded2);
|
|
61
64
|
var isRender = render && typeof render === 'function';
|
|
62
65
|
var type = isRender && render(reset, {
|
|
63
|
-
type: 'type'
|
|
66
|
+
type: 'type',
|
|
67
|
+
value: value
|
|
64
68
|
});
|
|
65
69
|
if (type) return type;
|
|
66
|
-
var
|
|
67
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
70
|
+
var Elm = as || 'span';
|
|
71
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, reset));
|
|
68
72
|
};
|
|
69
73
|
exports.MapComp = MapComp;
|
|
70
74
|
MapComp.displayName = 'JVR.MapComp';
|
|
@@ -366,7 +370,7 @@ var TypeUrl = function TypeUrl(_ref9) {
|
|
|
366
370
|
value: children
|
|
367
371
|
});
|
|
368
372
|
var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
|
|
369
|
-
children: children,
|
|
373
|
+
children: children === null || children === void 0 ? void 0 : children.href,
|
|
370
374
|
className: 'w-rjv-value'
|
|
371
375
|
}), {
|
|
372
376
|
type: 'value',
|
|
@@ -410,8 +414,9 @@ var TypeDate = function TypeDate(_ref10) {
|
|
|
410
414
|
type: 'type',
|
|
411
415
|
value: children
|
|
412
416
|
});
|
|
417
|
+
var childStr = children === null || children === void 0 ? void 0 : children.toString();
|
|
413
418
|
var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
|
|
414
|
-
children:
|
|
419
|
+
children: childStr,
|
|
415
420
|
className: 'w-rjv-value'
|
|
416
421
|
}), {
|
|
417
422
|
type: 'value',
|
|
@@ -422,7 +427,7 @@ var TypeDate = function TypeDate(_ref10) {
|
|
|
422
427
|
style: style
|
|
423
428
|
}))), child || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
|
|
424
429
|
className: "w-rjv-value",
|
|
425
|
-
children:
|
|
430
|
+
children: childStr
|
|
426
431
|
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Copied.Copied, {
|
|
427
432
|
keyName: keyName,
|
|
428
433
|
value: children,
|
|
@@ -531,7 +536,7 @@ var TypeNan = function TypeNan(_ref13) {
|
|
|
531
536
|
value: children
|
|
532
537
|
});
|
|
533
538
|
var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
|
|
534
|
-
children: children,
|
|
539
|
+
children: children === null || children === void 0 ? void 0 : children.toString(),
|
|
535
540
|
className: 'w-rjv-value'
|
|
536
541
|
}), {
|
|
537
542
|
type: 'value',
|
|
@@ -587,4 +592,4 @@ var TypeEmptyValue = function TypeEmptyValue(_ref14) {
|
|
|
587
592
|
});
|
|
588
593
|
};
|
|
589
594
|
exports.TypeEmptyValue = TypeEmptyValue;
|
|
590
|
-
|
|
595
|
+
TypeEmptyValue.displayName = 'JVR.TypeEmptyValue';
|
package/cjs/index.js
CHANGED
|
@@ -140,7 +140,7 @@ var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
140
140
|
backgroundColor: 'var(--w-rjv-background-color, #00000000)',
|
|
141
141
|
fontSize: 13
|
|
142
142
|
}, style);
|
|
143
|
-
var cls =
|
|
143
|
+
var cls = ['w-json-view-container', 'w-rjv', className].filter(Boolean).join(' ');
|
|
144
144
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_store.Provider, {
|
|
145
145
|
initialState: {
|
|
146
146
|
value: value,
|
package/cjs/store/Symbols.js
CHANGED
package/esm/Container.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
|
3
3
|
var _excluded = ["className", "children", "parentValue", "keyid", "level", "value", "initialValue", "keyName"];
|
|
4
|
-
import React, { forwardRef, useId
|
|
4
|
+
import React, { forwardRef, useId } from 'react';
|
|
5
5
|
import { NestedClose } from './comps/NestedClose';
|
|
6
6
|
import { NestedOpen } from './comps/NestedOpen';
|
|
7
7
|
import { KeyValues } from './comps/KeyValues';
|
|
@@ -17,11 +17,9 @@ export var Container = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
17
17
|
keyName
|
|
18
18
|
} = props,
|
|
19
19
|
elmProps = _objectWithoutPropertiesLoose(props, _excluded);
|
|
20
|
-
var $ref = useRef(null);
|
|
21
20
|
var dispatch = useShowToolsDispatch();
|
|
22
|
-
useImperativeHandle(ref, () => $ref.current, [$ref]);
|
|
23
21
|
var subkeyid = useId();
|
|
24
|
-
var defaultClassNames =
|
|
22
|
+
var defaultClassNames = [className, 'w-rjv-inner'].filter(Boolean).join(' ');
|
|
25
23
|
var reset = {
|
|
26
24
|
onMouseEnter: () => dispatch({
|
|
27
25
|
[subkeyid]: true
|
|
@@ -31,7 +29,8 @@ export var Container = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
31
29
|
})
|
|
32
30
|
};
|
|
33
31
|
return /*#__PURE__*/_jsxs("div", _extends({
|
|
34
|
-
className: defaultClassNames
|
|
32
|
+
className: defaultClassNames,
|
|
33
|
+
ref: ref
|
|
35
34
|
}, elmProps, reset, {
|
|
36
35
|
children: [/*#__PURE__*/_jsx(NestedOpen, {
|
|
37
36
|
expandKey: subkeyid,
|
package/esm/comps/Key.js
CHANGED
|
@@ -23,7 +23,9 @@ export var Key = props => {
|
|
|
23
23
|
reset = _objectWithoutPropertiesLoose(Comp, _excluded);
|
|
24
24
|
reset.style = _extends({}, reset.style, style);
|
|
25
25
|
var Elm = as || 'span';
|
|
26
|
-
var child = render && typeof render === 'function' && render(reset, {
|
|
26
|
+
var child = render && typeof render === 'function' && render(_extends({}, reset, {
|
|
27
|
+
children
|
|
28
|
+
}), {
|
|
27
29
|
value,
|
|
28
30
|
keyName
|
|
29
31
|
});
|
package/esm/comps/NestedOpen.js
CHANGED
|
@@ -63,9 +63,9 @@ export var NestedOpen = props => {
|
|
|
63
63
|
}), (keyName || typeof keyName === 'number') && /*#__PURE__*/_jsx(KayName, {
|
|
64
64
|
keyName: keyName
|
|
65
65
|
}), /*#__PURE__*/_jsx(SetComp, {
|
|
66
|
-
|
|
66
|
+
value: initialValue
|
|
67
67
|
}), /*#__PURE__*/_jsx(MapComp, {
|
|
68
|
-
|
|
68
|
+
value: initialValue
|
|
69
69
|
}), /*#__PURE__*/_jsx(BracketsOpen, {
|
|
70
70
|
isBrackets: isArray || isMySet
|
|
71
71
|
}), /*#__PURE__*/_jsx(Ellipsis, {
|
|
@@ -1,16 +1,10 @@
|
|
|
1
1
|
import { FC, PropsWithChildren } from 'react';
|
|
2
|
-
export declare const SetComp: {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
8
|
-
export declare const MapComp: {
|
|
9
|
-
({ isMap }: {
|
|
10
|
-
isMap: boolean;
|
|
11
|
-
}): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
|
|
12
|
-
displayName: string;
|
|
13
|
-
};
|
|
2
|
+
export declare const SetComp: FC<PropsWithChildren<{
|
|
3
|
+
value: unknown;
|
|
4
|
+
}>>;
|
|
5
|
+
export declare const MapComp: FC<PropsWithChildren<{
|
|
6
|
+
value: unknown;
|
|
7
|
+
}>>;
|
|
14
8
|
type TypeProps = PropsWithChildren<{
|
|
15
9
|
expandKey: string;
|
|
16
10
|
keyName: string | number;
|
|
@@ -23,48 +23,52 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
23
23
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
24
|
export var SetComp = _ref => {
|
|
25
25
|
var {
|
|
26
|
-
|
|
26
|
+
value
|
|
27
27
|
} = _ref;
|
|
28
28
|
var {
|
|
29
|
-
Set = {},
|
|
29
|
+
Set: Comp = {},
|
|
30
30
|
displayDataTypes
|
|
31
31
|
} = useTypesStore();
|
|
32
|
+
var isSet = value instanceof Set;
|
|
32
33
|
if (!isSet || !displayDataTypes) return null;
|
|
33
34
|
var {
|
|
34
35
|
as,
|
|
35
36
|
render
|
|
36
|
-
} =
|
|
37
|
-
reset = _objectWithoutPropertiesLoose(
|
|
37
|
+
} = Comp,
|
|
38
|
+
reset = _objectWithoutPropertiesLoose(Comp, _excluded);
|
|
38
39
|
var isRender = render && typeof render === 'function';
|
|
39
40
|
var type = isRender && render(reset, {
|
|
40
|
-
type: 'type'
|
|
41
|
+
type: 'type',
|
|
42
|
+
value
|
|
41
43
|
});
|
|
42
44
|
if (type) return type;
|
|
43
|
-
var
|
|
44
|
-
return /*#__PURE__*/_jsx(
|
|
45
|
+
var Elm = as || 'span';
|
|
46
|
+
return /*#__PURE__*/_jsx(Elm, _extends({}, reset));
|
|
45
47
|
};
|
|
46
48
|
SetComp.displayName = 'JVR.SetComp';
|
|
47
49
|
export var MapComp = _ref2 => {
|
|
48
50
|
var {
|
|
49
|
-
|
|
51
|
+
value
|
|
50
52
|
} = _ref2;
|
|
51
53
|
var {
|
|
52
|
-
Map = {},
|
|
54
|
+
Map: Comp = {},
|
|
53
55
|
displayDataTypes
|
|
54
56
|
} = useTypesStore();
|
|
57
|
+
var isMap = value instanceof Map;
|
|
55
58
|
if (!isMap || !displayDataTypes) return null;
|
|
56
59
|
var {
|
|
57
60
|
as,
|
|
58
61
|
render
|
|
59
|
-
} =
|
|
60
|
-
reset = _objectWithoutPropertiesLoose(
|
|
62
|
+
} = Comp,
|
|
63
|
+
reset = _objectWithoutPropertiesLoose(Comp, _excluded2);
|
|
61
64
|
var isRender = render && typeof render === 'function';
|
|
62
65
|
var type = isRender && render(reset, {
|
|
63
|
-
type: 'type'
|
|
66
|
+
type: 'type',
|
|
67
|
+
value
|
|
64
68
|
});
|
|
65
69
|
if (type) return type;
|
|
66
|
-
var
|
|
67
|
-
return /*#__PURE__*/_jsx(
|
|
70
|
+
var Elm = as || 'span';
|
|
71
|
+
return /*#__PURE__*/_jsx(Elm, _extends({}, reset));
|
|
68
72
|
};
|
|
69
73
|
MapComp.displayName = 'JVR.MapComp';
|
|
70
74
|
var defalutStyle = {
|
|
@@ -383,7 +387,7 @@ export var TypeUrl = _ref9 => {
|
|
|
383
387
|
value: children
|
|
384
388
|
});
|
|
385
389
|
var child = isRender && render(_extends({}, reset, {
|
|
386
|
-
children,
|
|
390
|
+
children: children == null ? void 0 : children.href,
|
|
387
391
|
className: 'w-rjv-value'
|
|
388
392
|
}), {
|
|
389
393
|
type: 'value',
|
|
@@ -430,8 +434,9 @@ export var TypeDate = _ref10 => {
|
|
|
430
434
|
type: 'type',
|
|
431
435
|
value: children
|
|
432
436
|
});
|
|
437
|
+
var childStr = children == null ? void 0 : children.toString();
|
|
433
438
|
var child = isRender && render(_extends({}, reset, {
|
|
434
|
-
children,
|
|
439
|
+
children: childStr,
|
|
435
440
|
className: 'w-rjv-value'
|
|
436
441
|
}), {
|
|
437
442
|
type: 'value',
|
|
@@ -442,7 +447,7 @@ export var TypeDate = _ref10 => {
|
|
|
442
447
|
style: style
|
|
443
448
|
}))), child || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
|
|
444
449
|
className: "w-rjv-value",
|
|
445
|
-
children:
|
|
450
|
+
children: childStr
|
|
446
451
|
})), /*#__PURE__*/_jsx(Copied, {
|
|
447
452
|
keyName: keyName,
|
|
448
453
|
value: children,
|
|
@@ -560,7 +565,7 @@ export var TypeNan = _ref13 => {
|
|
|
560
565
|
value: children
|
|
561
566
|
});
|
|
562
567
|
var child = isRender && render(_extends({}, reset, {
|
|
563
|
-
children,
|
|
568
|
+
children: children == null ? void 0 : children.toString(),
|
|
564
569
|
className: 'w-rjv-value'
|
|
565
570
|
}), {
|
|
566
571
|
type: 'value',
|
|
@@ -618,4 +623,4 @@ export var TypeEmptyValue = _ref14 => {
|
|
|
618
623
|
})]
|
|
619
624
|
});
|
|
620
625
|
};
|
|
621
|
-
|
|
626
|
+
TypeEmptyValue.displayName = 'JVR.TypeEmptyValue';
|
package/esm/index.js
CHANGED
|
@@ -62,7 +62,7 @@ var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
62
62
|
backgroundColor: 'var(--w-rjv-background-color, #00000000)',
|
|
63
63
|
fontSize: 13
|
|
64
64
|
}, style);
|
|
65
|
-
var cls =
|
|
65
|
+
var cls = ['w-json-view-container', 'w-rjv', className].filter(Boolean).join(' ');
|
|
66
66
|
return /*#__PURE__*/_jsxs(Provider, {
|
|
67
67
|
initialState: {
|
|
68
68
|
value,
|
package/esm/store/Symbols.js
CHANGED
package/package.json
CHANGED
package/cjs/type.d.ts
DELETED
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
export declare const typeMap: {
|
|
2
|
-
string: {
|
|
3
|
-
color: string;
|
|
4
|
-
label: string;
|
|
5
|
-
};
|
|
6
|
-
number: {
|
|
7
|
-
color: string;
|
|
8
|
-
label: string;
|
|
9
|
-
};
|
|
10
|
-
float: {
|
|
11
|
-
color: string;
|
|
12
|
-
label: string;
|
|
13
|
-
};
|
|
14
|
-
bigint: {
|
|
15
|
-
color: string;
|
|
16
|
-
label: string;
|
|
17
|
-
};
|
|
18
|
-
boolean: {
|
|
19
|
-
color: string;
|
|
20
|
-
label: string;
|
|
21
|
-
};
|
|
22
|
-
date: {
|
|
23
|
-
color: string;
|
|
24
|
-
label: string;
|
|
25
|
-
};
|
|
26
|
-
url: {
|
|
27
|
-
color: string;
|
|
28
|
-
label: string;
|
|
29
|
-
};
|
|
30
|
-
null: {
|
|
31
|
-
color: string;
|
|
32
|
-
label: string;
|
|
33
|
-
};
|
|
34
|
-
NaN: {
|
|
35
|
-
color: string;
|
|
36
|
-
label: string;
|
|
37
|
-
};
|
|
38
|
-
undefined: {
|
|
39
|
-
color: string;
|
|
40
|
-
label: string;
|
|
41
|
-
};
|
|
42
|
-
Set: {
|
|
43
|
-
color: string;
|
|
44
|
-
label: string;
|
|
45
|
-
};
|
|
46
|
-
Map: {
|
|
47
|
-
color: string;
|
|
48
|
-
label: string;
|
|
49
|
-
};
|
|
50
|
-
};
|
package/cjs/type.js
DELETED
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.typeMap = void 0;
|
|
7
|
-
var typeMap = {
|
|
8
|
-
string: {
|
|
9
|
-
color: 'var(--w-rjv-type-string-color, #cb4b16)',
|
|
10
|
-
label: 'string'
|
|
11
|
-
},
|
|
12
|
-
number: {
|
|
13
|
-
color: 'var(--w-rjv-type-int-color, #268bd2)',
|
|
14
|
-
label: 'int'
|
|
15
|
-
},
|
|
16
|
-
"float": {
|
|
17
|
-
color: 'var(--w-rjv-type-float-color, #859900)',
|
|
18
|
-
label: 'float'
|
|
19
|
-
},
|
|
20
|
-
bigint: {
|
|
21
|
-
color: 'var(--w-rjv-type-bigint-color, #268bd2)',
|
|
22
|
-
label: 'bigint'
|
|
23
|
-
},
|
|
24
|
-
"boolean": {
|
|
25
|
-
color: 'var(--w-rjv-type-boolean-color, #2aa198)',
|
|
26
|
-
label: 'bool'
|
|
27
|
-
},
|
|
28
|
-
date: {
|
|
29
|
-
color: 'var(--w-rjv-type-date-color, #586e75)',
|
|
30
|
-
label: 'date'
|
|
31
|
-
},
|
|
32
|
-
url: {
|
|
33
|
-
color: 'var(--w-rjv-type-url-color, #0969da)',
|
|
34
|
-
label: 'url'
|
|
35
|
-
},
|
|
36
|
-
"null": {
|
|
37
|
-
color: 'var(--w-rjv-type-null-color, #d33682)',
|
|
38
|
-
label: 'null'
|
|
39
|
-
},
|
|
40
|
-
NaN: {
|
|
41
|
-
color: 'var(--w-rjv-type-nan-color, #859900)',
|
|
42
|
-
label: 'NaN'
|
|
43
|
-
},
|
|
44
|
-
undefined: {
|
|
45
|
-
color: 'var(--w-rjv-type-undefined-color, #586e75)',
|
|
46
|
-
label: 'undefined'
|
|
47
|
-
},
|
|
48
|
-
Set: {
|
|
49
|
-
color: 'var(--w-rjv-type-set-color, #268bd2)',
|
|
50
|
-
label: 'Set'
|
|
51
|
-
},
|
|
52
|
-
Map: {
|
|
53
|
-
color: 'var(--w-rjv-type-map-color, #268bd2)',
|
|
54
|
-
label: 'Map'
|
|
55
|
-
}
|
|
56
|
-
};
|
|
57
|
-
exports.typeMap = typeMap;
|
package/esm/type.d.ts
DELETED
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
export declare const typeMap: {
|
|
2
|
-
string: {
|
|
3
|
-
color: string;
|
|
4
|
-
label: string;
|
|
5
|
-
};
|
|
6
|
-
number: {
|
|
7
|
-
color: string;
|
|
8
|
-
label: string;
|
|
9
|
-
};
|
|
10
|
-
float: {
|
|
11
|
-
color: string;
|
|
12
|
-
label: string;
|
|
13
|
-
};
|
|
14
|
-
bigint: {
|
|
15
|
-
color: string;
|
|
16
|
-
label: string;
|
|
17
|
-
};
|
|
18
|
-
boolean: {
|
|
19
|
-
color: string;
|
|
20
|
-
label: string;
|
|
21
|
-
};
|
|
22
|
-
date: {
|
|
23
|
-
color: string;
|
|
24
|
-
label: string;
|
|
25
|
-
};
|
|
26
|
-
url: {
|
|
27
|
-
color: string;
|
|
28
|
-
label: string;
|
|
29
|
-
};
|
|
30
|
-
null: {
|
|
31
|
-
color: string;
|
|
32
|
-
label: string;
|
|
33
|
-
};
|
|
34
|
-
NaN: {
|
|
35
|
-
color: string;
|
|
36
|
-
label: string;
|
|
37
|
-
};
|
|
38
|
-
undefined: {
|
|
39
|
-
color: string;
|
|
40
|
-
label: string;
|
|
41
|
-
};
|
|
42
|
-
Set: {
|
|
43
|
-
color: string;
|
|
44
|
-
label: string;
|
|
45
|
-
};
|
|
46
|
-
Map: {
|
|
47
|
-
color: string;
|
|
48
|
-
label: string;
|
|
49
|
-
};
|
|
50
|
-
};
|
package/esm/type.js
DELETED
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
export var typeMap = {
|
|
2
|
-
string: {
|
|
3
|
-
color: 'var(--w-rjv-type-string-color, #cb4b16)',
|
|
4
|
-
label: 'string'
|
|
5
|
-
},
|
|
6
|
-
number: {
|
|
7
|
-
color: 'var(--w-rjv-type-int-color, #268bd2)',
|
|
8
|
-
label: 'int'
|
|
9
|
-
},
|
|
10
|
-
float: {
|
|
11
|
-
color: 'var(--w-rjv-type-float-color, #859900)',
|
|
12
|
-
label: 'float'
|
|
13
|
-
},
|
|
14
|
-
bigint: {
|
|
15
|
-
color: 'var(--w-rjv-type-bigint-color, #268bd2)',
|
|
16
|
-
label: 'bigint'
|
|
17
|
-
},
|
|
18
|
-
boolean: {
|
|
19
|
-
color: 'var(--w-rjv-type-boolean-color, #2aa198)',
|
|
20
|
-
label: 'bool'
|
|
21
|
-
},
|
|
22
|
-
date: {
|
|
23
|
-
color: 'var(--w-rjv-type-date-color, #586e75)',
|
|
24
|
-
label: 'date'
|
|
25
|
-
},
|
|
26
|
-
url: {
|
|
27
|
-
color: 'var(--w-rjv-type-url-color, #0969da)',
|
|
28
|
-
label: 'url'
|
|
29
|
-
},
|
|
30
|
-
null: {
|
|
31
|
-
color: 'var(--w-rjv-type-null-color, #d33682)',
|
|
32
|
-
label: 'null'
|
|
33
|
-
},
|
|
34
|
-
NaN: {
|
|
35
|
-
color: 'var(--w-rjv-type-nan-color, #859900)',
|
|
36
|
-
label: 'NaN'
|
|
37
|
-
},
|
|
38
|
-
undefined: {
|
|
39
|
-
color: 'var(--w-rjv-type-undefined-color, #586e75)',
|
|
40
|
-
label: 'undefined'
|
|
41
|
-
},
|
|
42
|
-
Set: {
|
|
43
|
-
color: 'var(--w-rjv-type-set-color, #268bd2)',
|
|
44
|
-
label: 'Set'
|
|
45
|
-
},
|
|
46
|
-
Map: {
|
|
47
|
-
color: 'var(--w-rjv-type-map-color, #268bd2)',
|
|
48
|
-
label: 'Map'
|
|
49
|
-
}
|
|
50
|
-
};
|