@devtools-ui/object-inspector 0.2.1--canary.27.1370 → 0.2.1-next.0
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/dist/cjs/index.cjs +35 -31
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/index.legacy-esm.js +35 -31
- package/dist/index.mjs +35 -31
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
- package/src/components/ObjectInspectorComponent.tsx +49 -41
- package/src/components/__tests__/pureFunctions.test.ts +37 -0
- package/types/components/ObjectInspectorComponent.d.ts +2 -0
package/dist/cjs/index.cjs
CHANGED
|
@@ -30,7 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
30
30
|
// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/index.ts
|
|
31
31
|
var src_exports = {};
|
|
32
32
|
__export(src_exports, {
|
|
33
|
-
ObjectInspector: () =>
|
|
33
|
+
ObjectInspector: () => ObjectInspector2,
|
|
34
34
|
ObjectInspectorComponent: () => ObjectInspectorComponent,
|
|
35
35
|
objectInspectorTransform: () => objectInspectorTransform
|
|
36
36
|
});
|
|
@@ -41,38 +41,38 @@ var import_react = __toESM(require("react"));
|
|
|
41
41
|
var import_react2 = require("@chakra-ui/react");
|
|
42
42
|
var import_object_inspector = require("@devtools-ds/object-inspector");
|
|
43
43
|
var import_react3 = require("@player-ui/react");
|
|
44
|
-
var
|
|
44
|
+
var isObject = (value) => {
|
|
45
|
+
return value != null && (value.constructor === Object || !value.constructor && typeof value === "object" || Array.isArray(value));
|
|
46
|
+
};
|
|
47
|
+
var getPathvalue = (object, path) => {
|
|
48
|
+
const keys = path.split(".");
|
|
49
|
+
let result = object;
|
|
50
|
+
for (const key of keys) {
|
|
51
|
+
const arrayIndex = key.search(/\[\d+\]$/);
|
|
52
|
+
if (result[key] === void 0 && arrayIndex === -1)
|
|
53
|
+
return "No result for the given path";
|
|
54
|
+
if (arrayIndex > -1) {
|
|
55
|
+
const subkey = key.substring(0, arrayIndex);
|
|
56
|
+
const subIndexMatch = key.match(/(?<=\[)\d+(?=\])/);
|
|
57
|
+
result = result[subkey][subIndexMatch ? subIndexMatch[0] : 0];
|
|
58
|
+
if (result === void 0)
|
|
59
|
+
return "No result for the given index";
|
|
60
|
+
} else {
|
|
61
|
+
result = result[key];
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
return result;
|
|
65
|
+
};
|
|
66
|
+
var FilterObjectInspector = (props) => {
|
|
45
67
|
const { data, id } = props;
|
|
46
68
|
const [filterCriteria, setFilterCriteria] = (0, import_react.useState)("");
|
|
47
69
|
const [resultData, setResultData] = (0, import_react.useState)(data);
|
|
48
|
-
const isObject = (value) => {
|
|
49
|
-
return value != null && (value.constructor === Object || !value.constructor && typeof value === "object" || Array.isArray(value));
|
|
50
|
-
};
|
|
51
|
-
const getPathvalue = (object, path) => {
|
|
52
|
-
const keys = path.split(".");
|
|
53
|
-
let result = object;
|
|
54
|
-
for (const key of keys) {
|
|
55
|
-
const arrayIndex = key.search(/\[\d+\]$/);
|
|
56
|
-
if (result[key] === void 0 && arrayIndex === -1)
|
|
57
|
-
return "No result for the given path";
|
|
58
|
-
if (arrayIndex > -1) {
|
|
59
|
-
const subkey = key.substring(0, arrayIndex);
|
|
60
|
-
const subIndexMatch = key.match(/(?<=\[)\d+(?=\])/);
|
|
61
|
-
result = result[subkey][subIndexMatch ? subIndexMatch[0] : 0];
|
|
62
|
-
if (result === void 0)
|
|
63
|
-
return "No result for the given index";
|
|
64
|
-
} else {
|
|
65
|
-
result = result[key];
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
return result;
|
|
69
|
-
};
|
|
70
70
|
const onChangeHandler = (e) => {
|
|
71
71
|
setFilterCriteria(e.target.value);
|
|
72
72
|
const result = getPathvalue(data, e.target.value);
|
|
73
73
|
setResultData(e.target.value.length ? result : data);
|
|
74
74
|
};
|
|
75
|
-
return /* @__PURE__ */ import_react.default.createElement(
|
|
75
|
+
return /* @__PURE__ */ import_react.default.createElement("div", { style: { margin: "16px" } }, /* @__PURE__ */ import_react.default.createElement(
|
|
76
76
|
import_react2.Input,
|
|
77
77
|
{
|
|
78
78
|
placeholder: "Search path...",
|
|
@@ -100,9 +100,9 @@ var FilterResults = (props) => {
|
|
|
100
100
|
) : null
|
|
101
101
|
));
|
|
102
102
|
};
|
|
103
|
-
var
|
|
104
|
-
const { data,
|
|
105
|
-
return /* @__PURE__ */ import_react.default.createElement(
|
|
103
|
+
var ObjectInspector = (props) => {
|
|
104
|
+
const { data, id } = props;
|
|
105
|
+
return /* @__PURE__ */ import_react.default.createElement(
|
|
106
106
|
import_object_inspector.ObjectInspector,
|
|
107
107
|
{
|
|
108
108
|
data,
|
|
@@ -110,7 +110,11 @@ var ObjectInspectorComponent = (props) => {
|
|
|
110
110
|
expandLevel: 7,
|
|
111
111
|
id
|
|
112
112
|
}
|
|
113
|
-
)
|
|
113
|
+
);
|
|
114
|
+
};
|
|
115
|
+
var ObjectInspectorComponent = (props) => {
|
|
116
|
+
const { filter, data, label } = props;
|
|
117
|
+
return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, label && /* @__PURE__ */ import_react.default.createElement(import_react3.ReactAsset, { ...label }), data ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, filter ? /* @__PURE__ */ import_react.default.createElement(FilterObjectInspector, { ...props }) : /* @__PURE__ */ import_react.default.createElement(ObjectInspector, { ...props })) : /* @__PURE__ */ import_react.default.createElement(import_react2.Text, null, "No data available"));
|
|
114
118
|
};
|
|
115
119
|
|
|
116
120
|
// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/dsl/ObjectInspector.tsx
|
|
@@ -118,14 +122,14 @@ var import_react4 = __toESM(require("react"));
|
|
|
118
122
|
var import_dsl = require("@player-tools/dsl");
|
|
119
123
|
var import_text = require("@devtools-ui/text");
|
|
120
124
|
var import_collection = require("@devtools-ui/collection");
|
|
121
|
-
var
|
|
125
|
+
var ObjectInspector2 = (props) => {
|
|
122
126
|
const { children, binding, ...rest } = props;
|
|
123
127
|
return /* @__PURE__ */ import_react4.default.createElement(import_dsl.Asset, { type: "object-inspector", ...rest }, binding && /* @__PURE__ */ import_react4.default.createElement("property", { name: "binding" }, binding.toValue()), children);
|
|
124
128
|
};
|
|
125
129
|
var CollectionComp = (props) => {
|
|
126
130
|
return /* @__PURE__ */ import_react4.default.createElement(import_collection.Collection, null, /* @__PURE__ */ import_react4.default.createElement(import_collection.Collection.Values, null, props.children));
|
|
127
131
|
};
|
|
128
|
-
|
|
132
|
+
ObjectInspector2.Label = (0, import_dsl.createSlot)({
|
|
129
133
|
name: "label",
|
|
130
134
|
TextComp: import_text.Text,
|
|
131
135
|
CollectionComp,
|
package/dist/cjs/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/index.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/components/ObjectInspectorComponent.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/dsl/ObjectInspector.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/transformer/index.ts"],"sourcesContent":["export * from \"./components\";\nexport * from \"./dsl\";\nexport * from \"./types\";\nexport * from \"./transformer\";\n","import React, { useState } from \"react\";\nimport { Text, Input } from \"@chakra-ui/react\";\nimport { ObjectInspector as ObjectorInspectorDS } from \"@devtools-ds/object-inspector\";\nimport { ReactAsset } from \"@player-ui/react\";\nimport { Flow } from \"@player-ui/types\";\nimport { ObjectInspectorAsset } from \"../types\";\n\
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/index.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/components/ObjectInspectorComponent.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/dsl/ObjectInspector.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/transformer/index.ts"],"sourcesContent":["export * from \"./components\";\nexport * from \"./dsl\";\nexport * from \"./types\";\nexport * from \"./transformer\";\n","import React, { useState } from \"react\";\nimport { Text, Input } from \"@chakra-ui/react\";\nimport { ObjectInspector as ObjectorInspectorDS } from \"@devtools-ds/object-inspector\";\nimport { ReactAsset } from \"@player-ui/react\";\nimport { Flow } from \"@player-ui/types\";\nimport { ObjectInspectorAsset } from \"../types\";\n\nexport const isObject = (value: any): boolean => {\n return (\n value != null &&\n (value.constructor === Object ||\n (!value.constructor && typeof value === \"object\") ||\n Array.isArray(value))\n );\n};\n\nexport const getPathvalue = (object: object, path: string) => {\n const keys = path.split(\".\");\n let result: any = object;\n for (const key of keys) {\n const arrayIndex = key.search(/\\[\\d+\\]$/);\n\n if (result[key] === undefined && arrayIndex === -1)\n return \"No result for the given path\";\n\n // If key has a numeric index, e.g. for Multi-copy and/or array values.\n if (arrayIndex > -1) {\n const subkey = key.substring(0, arrayIndex);\n const subIndexMatch = key.match(/(?<=\\[)\\d+(?=\\])/);\n\n result = result[subkey][subIndexMatch ? subIndexMatch[0] : 0];\n if (result === undefined) return \"No result for the given index\";\n } else {\n result = result[key];\n }\n }\n return result;\n};\n\nconst FilterObjectInspector = (props: ObjectInspectorAsset) => {\n const { data, id } = props;\n\n const [filterCriteria, setFilterCriteria] = useState(\"\");\n const [resultData, setResultData] = useState(data);\n\n const onChangeHandler: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n setFilterCriteria(e.target.value);\n\n const result = getPathvalue(data as Flow, e.target.value);\n setResultData(e.target.value.length ? result : data);\n };\n\n return (\n <div style={{ margin: \"16px\" }}>\n <Input\n placeholder=\"Search path...\"\n value={filterCriteria}\n onChange={onChangeHandler}\n />\n <div\n style={{\n border: \"1px solid #e0e0e0\",\n borderRadius: \"8px\",\n padding: \"8px\",\n }}\n >\n {!isObject(resultData) ? (\n <Text style={{ padding: \"0 16px\", color: \"#EE8956\" }}>\n {resultData as any}\n </Text>\n ) : null}\n\n {isObject(resultData) ? (\n <ObjectorInspectorDS\n data={resultData as Flow}\n includePrototypes={false}\n expandLevel={3}\n id={`filter-${id}`}\n />\n ) : null}\n </div>\n </div>\n );\n};\n\nconst ObjectInspector = (props: ObjectInspectorAsset) => {\n const { data, id } = props;\n\n return (\n <ObjectorInspectorDS\n data={data as Flow}\n includePrototypes={false}\n expandLevel={7}\n id={id}\n />\n );\n};\n\nexport const ObjectInspectorComponent = (props: ObjectInspectorAsset) => {\n const { filter, data, label } = props;\n\n return (\n <>\n {label && <ReactAsset {...label} />}\n {data ? (\n <>\n {filter ? (\n <FilterObjectInspector {...props} />\n ) : (\n <ObjectInspector {...props} />\n )}\n </>\n ) : (\n <Text>No data available</Text>\n )}\n </>\n );\n};\n","import React from \"react\";\nimport {\n AssetPropsWithChildren,\n Asset,\n createSlot,\n BindingTemplateInstance,\n} from \"@player-tools/dsl\";\nimport type { Asset as AssetType } from \"@player-ui/player\";\nimport { Text } from \"@devtools-ui/text\";\nimport { Collection } from \"@devtools-ui/collection\";\nimport type { ObjectInspectorAsset } from \"../types\";\n\nexport const ObjectInspector = (\n props: Omit<AssetPropsWithChildren<ObjectInspectorAsset>, \"binding\"> & {\n /** The binding */\n binding?: BindingTemplateInstance;\n }\n) => {\n const { children, binding, ...rest } = props;\n\n return (\n <Asset type=\"object-inspector\" {...rest}>\n {binding && <property name=\"binding\">{binding.toValue()}</property>}\n {children}\n </Asset>\n );\n};\n\nconst CollectionComp = (props: AssetPropsWithChildren<AssetType>) => {\n return (\n <Collection>\n <Collection.Values>{props.children}</Collection.Values>\n </Collection>\n );\n};\n\nObjectInspector.Label = createSlot({\n name: \"label\",\n TextComp: Text,\n CollectionComp,\n isArray: false,\n wrapInAsset: true,\n});\n","import type { TransformFunction } from \"@player-ui/player\";\nimport { ObjectInspectorAsset, TransformedObjectInspector } from \"../types\";\n\n/**\n * Access the object from the data model\n */\nexport const objectInspectorTransform: TransformFunction<\n ObjectInspectorAsset,\n TransformedObjectInspector\n> = (asset, options) => {\n return {\n ...asset,\n data:\n asset.binding === undefined\n ? undefined\n : options.data.model.get(asset.binding, {\n includeInvalid: true,\n formatted: false,\n }),\n };\n};\n"],"mappings":"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","names":["ObjectInspector","import_react","React","ObjectorInspectorDS","import_react","ObjectInspector","React"]}
|
package/dist/index.legacy-esm.js
CHANGED
|
@@ -3,38 +3,38 @@ import React, { useState } from "react";
|
|
|
3
3
|
import { Text, Input } from "@chakra-ui/react";
|
|
4
4
|
import { ObjectInspector as ObjectorInspectorDS } from "@devtools-ds/object-inspector";
|
|
5
5
|
import { ReactAsset } from "@player-ui/react";
|
|
6
|
-
var
|
|
6
|
+
var isObject = (value) => {
|
|
7
|
+
return value != null && (value.constructor === Object || !value.constructor && typeof value === "object" || Array.isArray(value));
|
|
8
|
+
};
|
|
9
|
+
var getPathvalue = (object, path) => {
|
|
10
|
+
const keys = path.split(".");
|
|
11
|
+
let result = object;
|
|
12
|
+
for (const key of keys) {
|
|
13
|
+
const arrayIndex = key.search(/\[\d+\]$/);
|
|
14
|
+
if (result[key] === void 0 && arrayIndex === -1)
|
|
15
|
+
return "No result for the given path";
|
|
16
|
+
if (arrayIndex > -1) {
|
|
17
|
+
const subkey = key.substring(0, arrayIndex);
|
|
18
|
+
const subIndexMatch = key.match(/(?<=\[)\d+(?=\])/);
|
|
19
|
+
result = result[subkey][subIndexMatch ? subIndexMatch[0] : 0];
|
|
20
|
+
if (result === void 0)
|
|
21
|
+
return "No result for the given index";
|
|
22
|
+
} else {
|
|
23
|
+
result = result[key];
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
return result;
|
|
27
|
+
};
|
|
28
|
+
var FilterObjectInspector = (props) => {
|
|
7
29
|
const { data, id } = props;
|
|
8
30
|
const [filterCriteria, setFilterCriteria] = useState("");
|
|
9
31
|
const [resultData, setResultData] = useState(data);
|
|
10
|
-
const isObject = (value) => {
|
|
11
|
-
return value != null && (value.constructor === Object || !value.constructor && typeof value === "object" || Array.isArray(value));
|
|
12
|
-
};
|
|
13
|
-
const getPathvalue = (object, path) => {
|
|
14
|
-
const keys = path.split(".");
|
|
15
|
-
let result = object;
|
|
16
|
-
for (const key of keys) {
|
|
17
|
-
const arrayIndex = key.search(/\[\d+\]$/);
|
|
18
|
-
if (result[key] === void 0 && arrayIndex === -1)
|
|
19
|
-
return "No result for the given path";
|
|
20
|
-
if (arrayIndex > -1) {
|
|
21
|
-
const subkey = key.substring(0, arrayIndex);
|
|
22
|
-
const subIndexMatch = key.match(/(?<=\[)\d+(?=\])/);
|
|
23
|
-
result = result[subkey][subIndexMatch ? subIndexMatch[0] : 0];
|
|
24
|
-
if (result === void 0)
|
|
25
|
-
return "No result for the given index";
|
|
26
|
-
} else {
|
|
27
|
-
result = result[key];
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
return result;
|
|
31
|
-
};
|
|
32
32
|
const onChangeHandler = (e) => {
|
|
33
33
|
setFilterCriteria(e.target.value);
|
|
34
34
|
const result = getPathvalue(data, e.target.value);
|
|
35
35
|
setResultData(e.target.value.length ? result : data);
|
|
36
36
|
};
|
|
37
|
-
return /* @__PURE__ */ React.createElement(
|
|
37
|
+
return /* @__PURE__ */ React.createElement("div", { style: { margin: "16px" } }, /* @__PURE__ */ React.createElement(
|
|
38
38
|
Input,
|
|
39
39
|
{
|
|
40
40
|
placeholder: "Search path...",
|
|
@@ -62,9 +62,9 @@ var FilterResults = (props) => {
|
|
|
62
62
|
) : null
|
|
63
63
|
));
|
|
64
64
|
};
|
|
65
|
-
var
|
|
66
|
-
const { data,
|
|
67
|
-
return /* @__PURE__ */ React.createElement(
|
|
65
|
+
var ObjectInspector = (props) => {
|
|
66
|
+
const { data, id } = props;
|
|
67
|
+
return /* @__PURE__ */ React.createElement(
|
|
68
68
|
ObjectorInspectorDS,
|
|
69
69
|
{
|
|
70
70
|
data,
|
|
@@ -72,7 +72,11 @@ var ObjectInspectorComponent = (props) => {
|
|
|
72
72
|
expandLevel: 7,
|
|
73
73
|
id
|
|
74
74
|
}
|
|
75
|
-
)
|
|
75
|
+
);
|
|
76
|
+
};
|
|
77
|
+
var ObjectInspectorComponent = (props) => {
|
|
78
|
+
const { filter, data, label } = props;
|
|
79
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, label && /* @__PURE__ */ React.createElement(ReactAsset, { ...label }), data ? /* @__PURE__ */ React.createElement(React.Fragment, null, filter ? /* @__PURE__ */ React.createElement(FilterObjectInspector, { ...props }) : /* @__PURE__ */ React.createElement(ObjectInspector, { ...props })) : /* @__PURE__ */ React.createElement(Text, null, "No data available"));
|
|
76
80
|
};
|
|
77
81
|
|
|
78
82
|
// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/dsl/ObjectInspector.tsx
|
|
@@ -83,14 +87,14 @@ import {
|
|
|
83
87
|
} from "@player-tools/dsl";
|
|
84
88
|
import { Text as Text2 } from "@devtools-ui/text";
|
|
85
89
|
import { Collection } from "@devtools-ui/collection";
|
|
86
|
-
var
|
|
90
|
+
var ObjectInspector2 = (props) => {
|
|
87
91
|
const { children, binding, ...rest } = props;
|
|
88
92
|
return /* @__PURE__ */ React2.createElement(Asset, { type: "object-inspector", ...rest }, binding && /* @__PURE__ */ React2.createElement("property", { name: "binding" }, binding.toValue()), children);
|
|
89
93
|
};
|
|
90
94
|
var CollectionComp = (props) => {
|
|
91
95
|
return /* @__PURE__ */ React2.createElement(Collection, null, /* @__PURE__ */ React2.createElement(Collection.Values, null, props.children));
|
|
92
96
|
};
|
|
93
|
-
|
|
97
|
+
ObjectInspector2.Label = createSlot({
|
|
94
98
|
name: "label",
|
|
95
99
|
TextComp: Text2,
|
|
96
100
|
CollectionComp,
|
|
@@ -109,7 +113,7 @@ var objectInspectorTransform = (asset, options) => {
|
|
|
109
113
|
};
|
|
110
114
|
};
|
|
111
115
|
export {
|
|
112
|
-
ObjectInspector,
|
|
116
|
+
ObjectInspector2 as ObjectInspector,
|
|
113
117
|
ObjectInspectorComponent,
|
|
114
118
|
objectInspectorTransform
|
|
115
119
|
};
|
package/dist/index.mjs
CHANGED
|
@@ -3,38 +3,38 @@ import React, { useState } from "react";
|
|
|
3
3
|
import { Text, Input } from "@chakra-ui/react";
|
|
4
4
|
import { ObjectInspector as ObjectorInspectorDS } from "@devtools-ds/object-inspector";
|
|
5
5
|
import { ReactAsset } from "@player-ui/react";
|
|
6
|
-
var
|
|
6
|
+
var isObject = (value) => {
|
|
7
|
+
return value != null && (value.constructor === Object || !value.constructor && typeof value === "object" || Array.isArray(value));
|
|
8
|
+
};
|
|
9
|
+
var getPathvalue = (object, path) => {
|
|
10
|
+
const keys = path.split(".");
|
|
11
|
+
let result = object;
|
|
12
|
+
for (const key of keys) {
|
|
13
|
+
const arrayIndex = key.search(/\[\d+\]$/);
|
|
14
|
+
if (result[key] === void 0 && arrayIndex === -1)
|
|
15
|
+
return "No result for the given path";
|
|
16
|
+
if (arrayIndex > -1) {
|
|
17
|
+
const subkey = key.substring(0, arrayIndex);
|
|
18
|
+
const subIndexMatch = key.match(/(?<=\[)\d+(?=\])/);
|
|
19
|
+
result = result[subkey][subIndexMatch ? subIndexMatch[0] : 0];
|
|
20
|
+
if (result === void 0)
|
|
21
|
+
return "No result for the given index";
|
|
22
|
+
} else {
|
|
23
|
+
result = result[key];
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
return result;
|
|
27
|
+
};
|
|
28
|
+
var FilterObjectInspector = (props) => {
|
|
7
29
|
const { data, id } = props;
|
|
8
30
|
const [filterCriteria, setFilterCriteria] = useState("");
|
|
9
31
|
const [resultData, setResultData] = useState(data);
|
|
10
|
-
const isObject = (value) => {
|
|
11
|
-
return value != null && (value.constructor === Object || !value.constructor && typeof value === "object" || Array.isArray(value));
|
|
12
|
-
};
|
|
13
|
-
const getPathvalue = (object, path) => {
|
|
14
|
-
const keys = path.split(".");
|
|
15
|
-
let result = object;
|
|
16
|
-
for (const key of keys) {
|
|
17
|
-
const arrayIndex = key.search(/\[\d+\]$/);
|
|
18
|
-
if (result[key] === void 0 && arrayIndex === -1)
|
|
19
|
-
return "No result for the given path";
|
|
20
|
-
if (arrayIndex > -1) {
|
|
21
|
-
const subkey = key.substring(0, arrayIndex);
|
|
22
|
-
const subIndexMatch = key.match(/(?<=\[)\d+(?=\])/);
|
|
23
|
-
result = result[subkey][subIndexMatch ? subIndexMatch[0] : 0];
|
|
24
|
-
if (result === void 0)
|
|
25
|
-
return "No result for the given index";
|
|
26
|
-
} else {
|
|
27
|
-
result = result[key];
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
return result;
|
|
31
|
-
};
|
|
32
32
|
const onChangeHandler = (e) => {
|
|
33
33
|
setFilterCriteria(e.target.value);
|
|
34
34
|
const result = getPathvalue(data, e.target.value);
|
|
35
35
|
setResultData(e.target.value.length ? result : data);
|
|
36
36
|
};
|
|
37
|
-
return /* @__PURE__ */ React.createElement(
|
|
37
|
+
return /* @__PURE__ */ React.createElement("div", { style: { margin: "16px" } }, /* @__PURE__ */ React.createElement(
|
|
38
38
|
Input,
|
|
39
39
|
{
|
|
40
40
|
placeholder: "Search path...",
|
|
@@ -62,9 +62,9 @@ var FilterResults = (props) => {
|
|
|
62
62
|
) : null
|
|
63
63
|
));
|
|
64
64
|
};
|
|
65
|
-
var
|
|
66
|
-
const { data,
|
|
67
|
-
return /* @__PURE__ */ React.createElement(
|
|
65
|
+
var ObjectInspector = (props) => {
|
|
66
|
+
const { data, id } = props;
|
|
67
|
+
return /* @__PURE__ */ React.createElement(
|
|
68
68
|
ObjectorInspectorDS,
|
|
69
69
|
{
|
|
70
70
|
data,
|
|
@@ -72,7 +72,11 @@ var ObjectInspectorComponent = (props) => {
|
|
|
72
72
|
expandLevel: 7,
|
|
73
73
|
id
|
|
74
74
|
}
|
|
75
|
-
)
|
|
75
|
+
);
|
|
76
|
+
};
|
|
77
|
+
var ObjectInspectorComponent = (props) => {
|
|
78
|
+
const { filter, data, label } = props;
|
|
79
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, label && /* @__PURE__ */ React.createElement(ReactAsset, { ...label }), data ? /* @__PURE__ */ React.createElement(React.Fragment, null, filter ? /* @__PURE__ */ React.createElement(FilterObjectInspector, { ...props }) : /* @__PURE__ */ React.createElement(ObjectInspector, { ...props })) : /* @__PURE__ */ React.createElement(Text, null, "No data available"));
|
|
76
80
|
};
|
|
77
81
|
|
|
78
82
|
// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/dsl/ObjectInspector.tsx
|
|
@@ -83,14 +87,14 @@ import {
|
|
|
83
87
|
} from "@player-tools/dsl";
|
|
84
88
|
import { Text as Text2 } from "@devtools-ui/text";
|
|
85
89
|
import { Collection } from "@devtools-ui/collection";
|
|
86
|
-
var
|
|
90
|
+
var ObjectInspector2 = (props) => {
|
|
87
91
|
const { children, binding, ...rest } = props;
|
|
88
92
|
return /* @__PURE__ */ React2.createElement(Asset, { type: "object-inspector", ...rest }, binding && /* @__PURE__ */ React2.createElement("property", { name: "binding" }, binding.toValue()), children);
|
|
89
93
|
};
|
|
90
94
|
var CollectionComp = (props) => {
|
|
91
95
|
return /* @__PURE__ */ React2.createElement(Collection, null, /* @__PURE__ */ React2.createElement(Collection.Values, null, props.children));
|
|
92
96
|
};
|
|
93
|
-
|
|
97
|
+
ObjectInspector2.Label = createSlot({
|
|
94
98
|
name: "label",
|
|
95
99
|
TextComp: Text2,
|
|
96
100
|
CollectionComp,
|
|
@@ -109,7 +113,7 @@ var objectInspectorTransform = (asset, options) => {
|
|
|
109
113
|
};
|
|
110
114
|
};
|
|
111
115
|
export {
|
|
112
|
-
ObjectInspector,
|
|
116
|
+
ObjectInspector2 as ObjectInspector,
|
|
113
117
|
ObjectInspectorComponent,
|
|
114
118
|
objectInspectorTransform
|
|
115
119
|
};
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/components/ObjectInspectorComponent.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/dsl/ObjectInspector.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/transformer/index.ts"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Text, Input } from \"@chakra-ui/react\";\nimport { ObjectInspector as ObjectorInspectorDS } from \"@devtools-ds/object-inspector\";\nimport { ReactAsset } from \"@player-ui/react\";\nimport { Flow } from \"@player-ui/types\";\nimport { ObjectInspectorAsset } from \"../types\";\n\
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/components/ObjectInspectorComponent.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/dsl/ObjectInspector.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/transformer/index.ts"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Text, Input } from \"@chakra-ui/react\";\nimport { ObjectInspector as ObjectorInspectorDS } from \"@devtools-ds/object-inspector\";\nimport { ReactAsset } from \"@player-ui/react\";\nimport { Flow } from \"@player-ui/types\";\nimport { ObjectInspectorAsset } from \"../types\";\n\nexport const isObject = (value: any): boolean => {\n return (\n value != null &&\n (value.constructor === Object ||\n (!value.constructor && typeof value === \"object\") ||\n Array.isArray(value))\n );\n};\n\nexport const getPathvalue = (object: object, path: string) => {\n const keys = path.split(\".\");\n let result: any = object;\n for (const key of keys) {\n const arrayIndex = key.search(/\\[\\d+\\]$/);\n\n if (result[key] === undefined && arrayIndex === -1)\n return \"No result for the given path\";\n\n // If key has a numeric index, e.g. for Multi-copy and/or array values.\n if (arrayIndex > -1) {\n const subkey = key.substring(0, arrayIndex);\n const subIndexMatch = key.match(/(?<=\\[)\\d+(?=\\])/);\n\n result = result[subkey][subIndexMatch ? subIndexMatch[0] : 0];\n if (result === undefined) return \"No result for the given index\";\n } else {\n result = result[key];\n }\n }\n return result;\n};\n\nconst FilterObjectInspector = (props: ObjectInspectorAsset) => {\n const { data, id } = props;\n\n const [filterCriteria, setFilterCriteria] = useState(\"\");\n const [resultData, setResultData] = useState(data);\n\n const onChangeHandler: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n setFilterCriteria(e.target.value);\n\n const result = getPathvalue(data as Flow, e.target.value);\n setResultData(e.target.value.length ? result : data);\n };\n\n return (\n <div style={{ margin: \"16px\" }}>\n <Input\n placeholder=\"Search path...\"\n value={filterCriteria}\n onChange={onChangeHandler}\n />\n <div\n style={{\n border: \"1px solid #e0e0e0\",\n borderRadius: \"8px\",\n padding: \"8px\",\n }}\n >\n {!isObject(resultData) ? (\n <Text style={{ padding: \"0 16px\", color: \"#EE8956\" }}>\n {resultData as any}\n </Text>\n ) : null}\n\n {isObject(resultData) ? (\n <ObjectorInspectorDS\n data={resultData as Flow}\n includePrototypes={false}\n expandLevel={3}\n id={`filter-${id}`}\n />\n ) : null}\n </div>\n </div>\n );\n};\n\nconst ObjectInspector = (props: ObjectInspectorAsset) => {\n const { data, id } = props;\n\n return (\n <ObjectorInspectorDS\n data={data as Flow}\n includePrototypes={false}\n expandLevel={7}\n id={id}\n />\n );\n};\n\nexport const ObjectInspectorComponent = (props: ObjectInspectorAsset) => {\n const { filter, data, label } = props;\n\n return (\n <>\n {label && <ReactAsset {...label} />}\n {data ? (\n <>\n {filter ? (\n <FilterObjectInspector {...props} />\n ) : (\n <ObjectInspector {...props} />\n )}\n </>\n ) : (\n <Text>No data available</Text>\n )}\n </>\n );\n};\n","import React from \"react\";\nimport {\n AssetPropsWithChildren,\n Asset,\n createSlot,\n BindingTemplateInstance,\n} from \"@player-tools/dsl\";\nimport type { Asset as AssetType } from \"@player-ui/player\";\nimport { Text } from \"@devtools-ui/text\";\nimport { Collection } from \"@devtools-ui/collection\";\nimport type { ObjectInspectorAsset } from \"../types\";\n\nexport const ObjectInspector = (\n props: Omit<AssetPropsWithChildren<ObjectInspectorAsset>, \"binding\"> & {\n /** The binding */\n binding?: BindingTemplateInstance;\n }\n) => {\n const { children, binding, ...rest } = props;\n\n return (\n <Asset type=\"object-inspector\" {...rest}>\n {binding && <property name=\"binding\">{binding.toValue()}</property>}\n {children}\n </Asset>\n );\n};\n\nconst CollectionComp = (props: AssetPropsWithChildren<AssetType>) => {\n return (\n <Collection>\n <Collection.Values>{props.children}</Collection.Values>\n </Collection>\n );\n};\n\nObjectInspector.Label = createSlot({\n name: \"label\",\n TextComp: Text,\n CollectionComp,\n isArray: false,\n wrapInAsset: true,\n});\n","import type { TransformFunction } from \"@player-ui/player\";\nimport { ObjectInspectorAsset, TransformedObjectInspector } from \"../types\";\n\n/**\n * Access the object from the data model\n */\nexport const objectInspectorTransform: TransformFunction<\n ObjectInspectorAsset,\n TransformedObjectInspector\n> = (asset, options) => {\n return {\n ...asset,\n data:\n asset.binding === undefined\n ? undefined\n : options.data.model.get(asset.binding, {\n includeInvalid: true,\n formatted: false,\n }),\n };\n};\n"],"mappings":"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","names":["React","Text","ObjectInspector"]}
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@devtools-ui/object-inspector",
|
|
3
|
-
"version": "0.2.1
|
|
3
|
+
"version": "0.2.1-next.0",
|
|
4
4
|
"main": "dist/cjs/index.cjs",
|
|
5
5
|
"dependencies": {
|
|
6
|
-
"@devtools-ui/collection": "0.2.1
|
|
7
|
-
"@devtools-ui/text": "0.2.1
|
|
6
|
+
"@devtools-ui/collection": "0.2.1-next.0",
|
|
7
|
+
"@devtools-ui/text": "0.2.1-next.0",
|
|
8
8
|
"@types/react": "^18.2.51",
|
|
9
9
|
"react": "^18.2.0",
|
|
10
10
|
"@devtools-ds/object-inspector": "^1.1.2",
|
|
@@ -5,43 +5,43 @@ import { ReactAsset } from "@player-ui/react";
|
|
|
5
5
|
import { Flow } from "@player-ui/types";
|
|
6
6
|
import { ObjectInspectorAsset } from "../types";
|
|
7
7
|
|
|
8
|
-
const
|
|
9
|
-
|
|
8
|
+
export const isObject = (value: any): boolean => {
|
|
9
|
+
return (
|
|
10
|
+
value != null &&
|
|
11
|
+
(value.constructor === Object ||
|
|
12
|
+
(!value.constructor && typeof value === "object") ||
|
|
13
|
+
Array.isArray(value))
|
|
14
|
+
);
|
|
15
|
+
};
|
|
10
16
|
|
|
11
|
-
|
|
12
|
-
const
|
|
17
|
+
export const getPathvalue = (object: object, path: string) => {
|
|
18
|
+
const keys = path.split(".");
|
|
19
|
+
let result: any = object;
|
|
20
|
+
for (const key of keys) {
|
|
21
|
+
const arrayIndex = key.search(/\[\d+\]$/);
|
|
13
22
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
value != null &&
|
|
17
|
-
(value.constructor === Object ||
|
|
18
|
-
(!value.constructor && typeof value === "object") ||
|
|
19
|
-
Array.isArray(value))
|
|
20
|
-
);
|
|
21
|
-
};
|
|
23
|
+
if (result[key] === undefined && arrayIndex === -1)
|
|
24
|
+
return "No result for the given path";
|
|
22
25
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
const arrayIndex = key.search(/\[\d+\]$/);
|
|
26
|
+
// If key has a numeric index, e.g. for Multi-copy and/or array values.
|
|
27
|
+
if (arrayIndex > -1) {
|
|
28
|
+
const subkey = key.substring(0, arrayIndex);
|
|
29
|
+
const subIndexMatch = key.match(/(?<=\[)\d+(?=\])/);
|
|
28
30
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
+
result = result[subkey][subIndexMatch ? subIndexMatch[0] : 0];
|
|
32
|
+
if (result === undefined) return "No result for the given index";
|
|
33
|
+
} else {
|
|
34
|
+
result = result[key];
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
return result;
|
|
38
|
+
};
|
|
31
39
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
const subkey = key.substring(0, arrayIndex);
|
|
35
|
-
const subIndexMatch = key.match(/(?<=\[)\d+(?=\])/);
|
|
40
|
+
const FilterObjectInspector = (props: ObjectInspectorAsset) => {
|
|
41
|
+
const { data, id } = props;
|
|
36
42
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
} else {
|
|
40
|
-
result = result[key];
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
return result;
|
|
44
|
-
};
|
|
43
|
+
const [filterCriteria, setFilterCriteria] = useState("");
|
|
44
|
+
const [resultData, setResultData] = useState(data);
|
|
45
45
|
|
|
46
46
|
const onChangeHandler: React.ChangeEventHandler<HTMLInputElement> = (e) => {
|
|
47
47
|
setFilterCriteria(e.target.value);
|
|
@@ -51,7 +51,7 @@ const FilterResults = (props: ObjectInspectorAsset) => {
|
|
|
51
51
|
};
|
|
52
52
|
|
|
53
53
|
return (
|
|
54
|
-
|
|
54
|
+
<div style={{ margin: "16px" }}>
|
|
55
55
|
<Input
|
|
56
56
|
placeholder="Search path..."
|
|
57
57
|
value={filterCriteria}
|
|
@@ -79,12 +79,25 @@ const FilterResults = (props: ObjectInspectorAsset) => {
|
|
|
79
79
|
/>
|
|
80
80
|
) : null}
|
|
81
81
|
</div>
|
|
82
|
-
|
|
82
|
+
</div>
|
|
83
|
+
);
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
const ObjectInspector = (props: ObjectInspectorAsset) => {
|
|
87
|
+
const { data, id } = props;
|
|
88
|
+
|
|
89
|
+
return (
|
|
90
|
+
<ObjectorInspectorDS
|
|
91
|
+
data={data as Flow}
|
|
92
|
+
includePrototypes={false}
|
|
93
|
+
expandLevel={7}
|
|
94
|
+
id={id}
|
|
95
|
+
/>
|
|
83
96
|
);
|
|
84
97
|
};
|
|
85
98
|
|
|
86
99
|
export const ObjectInspectorComponent = (props: ObjectInspectorAsset) => {
|
|
87
|
-
const { data, label
|
|
100
|
+
const { filter, data, label } = props;
|
|
88
101
|
|
|
89
102
|
return (
|
|
90
103
|
<>
|
|
@@ -92,14 +105,9 @@ export const ObjectInspectorComponent = (props: ObjectInspectorAsset) => {
|
|
|
92
105
|
{data ? (
|
|
93
106
|
<>
|
|
94
107
|
{filter ? (
|
|
95
|
-
<
|
|
108
|
+
<FilterObjectInspector {...props} />
|
|
96
109
|
) : (
|
|
97
|
-
<
|
|
98
|
-
data={data}
|
|
99
|
-
includePrototypes={false}
|
|
100
|
-
expandLevel={7}
|
|
101
|
-
id={id}
|
|
102
|
-
/>
|
|
110
|
+
<ObjectInspector {...props} />
|
|
103
111
|
)}
|
|
104
112
|
</>
|
|
105
113
|
) : (
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { describe, expect, test } from "vitest";
|
|
2
|
+
import { isObject, getPathvalue } from "../ObjectInspectorComponent";
|
|
3
|
+
|
|
4
|
+
describe("Testing the isObject pure utility function", () => {
|
|
5
|
+
test("It verifies correct item values as objects", () => {
|
|
6
|
+
expect(isObject({ some: "prop" })).toBe(true);
|
|
7
|
+
expect(isObject([{ arr: "prop" }])).toBe(true);
|
|
8
|
+
});
|
|
9
|
+
test("It verifies incorrect item values as no objects", () => {
|
|
10
|
+
expect(isObject("prop")).toBe(false);
|
|
11
|
+
expect(isObject(20)).toBe(false);
|
|
12
|
+
});
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
describe("Testing the getPathvalue pure utility function", () => {
|
|
16
|
+
const testObject = {
|
|
17
|
+
mainProp: "Some value",
|
|
18
|
+
arrProp: [
|
|
19
|
+
{
|
|
20
|
+
someProp: "foo",
|
|
21
|
+
booleanProp: "false",
|
|
22
|
+
},
|
|
23
|
+
],
|
|
24
|
+
};
|
|
25
|
+
test("It verifies regular path in object", () => {
|
|
26
|
+
expect(getPathvalue(testObject, "mainProp")).toBe(testObject.mainProp);
|
|
27
|
+
expect(getPathvalue(testObject, "something")).toBe(
|
|
28
|
+
"No result for the given path"
|
|
29
|
+
);
|
|
30
|
+
});
|
|
31
|
+
test("It verifies path with array index", () => {
|
|
32
|
+
expect(getPathvalue(testObject, "arrProp[0].someProp")).toBe("foo");
|
|
33
|
+
expect(getPathvalue(testObject, "arrProp[1].someProp")).toBe(
|
|
34
|
+
"No result for the given index"
|
|
35
|
+
);
|
|
36
|
+
});
|
|
37
|
+
});
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ObjectInspectorAsset } from "../types";
|
|
3
|
+
export declare const isObject: (value: any) => boolean;
|
|
4
|
+
export declare const getPathvalue: (object: object, path: string) => any;
|
|
3
5
|
export declare const ObjectInspectorComponent: (props: ObjectInspectorAsset) => React.JSX.Element;
|
|
4
6
|
//# sourceMappingURL=ObjectInspectorComponent.d.ts.map
|