@devtools-ui/object-inspector 0.4.0 → 0.4.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/README.md +101 -0
- package/dist/cjs/index.cjs +3 -3
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/index.legacy-esm.js +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +13 -13
- package/src/dsl/ObjectInspector.tsx +1 -1
- package/src/dsl/__tests__/ObjectInspector.test.tsx +1 -1
- package/types/dsl/ObjectInspector.d.ts +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
# @devtools-ui/object-inspector
|
|
2
|
+
|
|
3
|
+
## Overview
|
|
4
|
+
|
|
5
|
+
`@devtools-ui/object-inspector` is a component package designed to be leveraged by a [Player-UI assets plugin](https://player-ui.github.io/next/plugins).
|
|
6
|
+
|
|
7
|
+
It provides an `ObjectInspector` component to display objects for debugging purposes.
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
To install `@devtools-ui/object-inspector`, you can use pnpm or yarn:
|
|
12
|
+
|
|
13
|
+
```sh
|
|
14
|
+
pnpm i @devtools-ui/object-inspector
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
or
|
|
18
|
+
|
|
19
|
+
```sh
|
|
20
|
+
yarn add @devtools-ui/object-inspector
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Usage
|
|
24
|
+
|
|
25
|
+
You can leverage this asset through the `@devtools-ui/plugin`:
|
|
26
|
+
|
|
27
|
+
```ts
|
|
28
|
+
import { ObjectInspector } from "@devtools-ui/plugin";
|
|
29
|
+
|
|
30
|
+
// and use it to define your Player-UI content:
|
|
31
|
+
myFlow = {
|
|
32
|
+
id: "my_flow",
|
|
33
|
+
views: [
|
|
34
|
+
<MyView>
|
|
35
|
+
<ObjectInspector binding={b`foo`}>
|
|
36
|
+
<ObjectInspector.Label>Label</ObjectInspector.Label>
|
|
37
|
+
</ObjectInspector>
|
|
38
|
+
</MyView>,
|
|
39
|
+
],
|
|
40
|
+
};
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
For more information on how to author Player-UI content using DSL, please check our [Player-UI docs](https://player-ui.github.io/next/dsl#tsxjsx-content-authoring-player-dsl).
|
|
44
|
+
|
|
45
|
+
Or, your can leverage this asset in your own plugin:
|
|
46
|
+
|
|
47
|
+
```ts
|
|
48
|
+
// TransformPlugin.ts
|
|
49
|
+
import type { Player, PlayerPlugin } from "@player-ui/player";
|
|
50
|
+
import { AssetTransformPlugin } from "@player-ui/asset-transform-plugin";
|
|
51
|
+
import { objectInspectorTransform } from "@devtools-ui/object-inspector";
|
|
52
|
+
|
|
53
|
+
export class TransformsPlugin implements PlayerPlugin {
|
|
54
|
+
name = "my-plugin-transforms";
|
|
55
|
+
|
|
56
|
+
apply(player: Player) {
|
|
57
|
+
player.registerPlugin(
|
|
58
|
+
new AssetTransformPlugin([
|
|
59
|
+
[{ type: "object-inspector" }, objectInspectorTransform],
|
|
60
|
+
])
|
|
61
|
+
);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
```ts
|
|
67
|
+
// AssetRegistryPlugin.ts
|
|
68
|
+
import React from "react";
|
|
69
|
+
import type { Player } from "@player-ui/player";
|
|
70
|
+
import type {
|
|
71
|
+
ExtendedPlayerPlugin,
|
|
72
|
+
ReactPlayer,
|
|
73
|
+
ReactPlayerPlugin,
|
|
74
|
+
} from "@player-ui/react";
|
|
75
|
+
import { AssetProviderPlugin } from "@player-ui/asset-provider-plugin-react";
|
|
76
|
+
import { TransformsPlugin } from "./TransformPlugin";
|
|
77
|
+
import {
|
|
78
|
+
ObjectInspectorAsset,
|
|
79
|
+
ObjectInspectorComponent,
|
|
80
|
+
} from "@devtools-ui/object-inspector";
|
|
81
|
+
|
|
82
|
+
export class AssetsRegistryPlugin
|
|
83
|
+
implements ReactPlayerPlugin, ExtendedPlayerPlugin<[ObjectInspectorAsset]>
|
|
84
|
+
{
|
|
85
|
+
name = "my-plugin";
|
|
86
|
+
|
|
87
|
+
applyReact(reactPlayer: ReactPlayer) {
|
|
88
|
+
reactPlayer.registerPlugin(
|
|
89
|
+
new AssetProviderPlugin([["object-inspector", ObjectInspectorComponent]])
|
|
90
|
+
);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
apply(player: Player) {
|
|
94
|
+
player.registerPlugin(new TransformsPlugin());
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## Contributing
|
|
100
|
+
|
|
101
|
+
We welcome contributions to `@devtools-ui/object-inspector`!
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -119,17 +119,17 @@ var ObjectInspectorComponent = (props) => {
|
|
|
119
119
|
|
|
120
120
|
// ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/object-inspector/src/dsl/ObjectInspector.tsx
|
|
121
121
|
var import_react4 = __toESM(require("react"));
|
|
122
|
-
var
|
|
122
|
+
var import_react_dsl = require("@player-lang/react-dsl");
|
|
123
123
|
var import_text = require("@devtools-ui/text");
|
|
124
124
|
var import_collection = require("@devtools-ui/collection");
|
|
125
125
|
var ObjectInspector2 = (props) => {
|
|
126
126
|
const { children, binding, ...rest } = props;
|
|
127
|
-
return /* @__PURE__ */ import_react4.default.createElement(
|
|
127
|
+
return /* @__PURE__ */ import_react4.default.createElement(import_react_dsl.Asset, { type: "object-inspector", ...rest }, binding && /* @__PURE__ */ import_react4.default.createElement("property", { name: "binding" }, binding.toValue()), children);
|
|
128
128
|
};
|
|
129
129
|
var CollectionComp = (props) => {
|
|
130
130
|
return /* @__PURE__ */ import_react4.default.createElement(import_collection.Collection, null, /* @__PURE__ */ import_react4.default.createElement(import_collection.Collection.Values, null, props.children));
|
|
131
131
|
};
|
|
132
|
-
ObjectInspector2.Label = (0,
|
|
132
|
+
ObjectInspector2.Label = (0, import_react_dsl.createSlot)({
|
|
133
133
|
name: "label",
|
|
134
134
|
TextComp: import_text.Text,
|
|
135
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\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-
|
|
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-lang/react-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
|
@@ -84,7 +84,7 @@ import React2 from "react";
|
|
|
84
84
|
import {
|
|
85
85
|
Asset,
|
|
86
86
|
createSlot
|
|
87
|
-
} from "@player-
|
|
87
|
+
} from "@player-lang/react-dsl";
|
|
88
88
|
import { Text as Text2 } from "@devtools-ui/text";
|
|
89
89
|
import { Collection } from "@devtools-ui/collection";
|
|
90
90
|
var ObjectInspector2 = (props) => {
|
package/dist/index.mjs
CHANGED
|
@@ -84,7 +84,7 @@ import React2 from "react";
|
|
|
84
84
|
import {
|
|
85
85
|
Asset,
|
|
86
86
|
createSlot
|
|
87
|
-
} from "@player-
|
|
87
|
+
} from "@player-lang/react-dsl";
|
|
88
88
|
import { Text as Text2 } from "@devtools-ui/text";
|
|
89
89
|
import { Collection } from "@devtools-ui/collection";
|
|
90
90
|
var ObjectInspector2 = (props) => {
|
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\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-
|
|
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-lang/react-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,16 @@
|
|
|
1
1
|
{
|
|
2
|
+
"sideEffects": false,
|
|
3
|
+
"files": [
|
|
4
|
+
"dist",
|
|
5
|
+
"src",
|
|
6
|
+
"types"
|
|
7
|
+
],
|
|
2
8
|
"name": "@devtools-ui/object-inspector",
|
|
3
|
-
"version": "0.4.0",
|
|
9
|
+
"version": "0.4.1-next.0",
|
|
4
10
|
"main": "dist/cjs/index.cjs",
|
|
5
11
|
"dependencies": {
|
|
6
|
-
"@devtools-ui/collection": "0.4.0",
|
|
7
|
-
"@devtools-ui/text": "0.4.0",
|
|
12
|
+
"@devtools-ui/collection": "0.4.1-next.0",
|
|
13
|
+
"@devtools-ui/text": "0.4.1-next.0",
|
|
8
14
|
"@chakra-ui/react": "^2.8.2",
|
|
9
15
|
"@devtools-ds/object-inspector": "^1.1.2",
|
|
10
16
|
"@emotion/react": "^11.11.4",
|
|
@@ -17,7 +23,6 @@
|
|
|
17
23
|
},
|
|
18
24
|
"module": "dist/index.legacy-esm.js",
|
|
19
25
|
"types": "types/index.d.ts",
|
|
20
|
-
"sideEffects": false,
|
|
21
26
|
"exports": {
|
|
22
27
|
"./package.json": "./package.json",
|
|
23
28
|
"./dist/index.css": "./dist/index.css",
|
|
@@ -27,15 +32,10 @@
|
|
|
27
32
|
"default": "./dist/cjs/index.cjs"
|
|
28
33
|
}
|
|
29
34
|
},
|
|
30
|
-
"files": [
|
|
31
|
-
"dist",
|
|
32
|
-
"src",
|
|
33
|
-
"types"
|
|
34
|
-
],
|
|
35
35
|
"peerDependencies": {
|
|
36
|
-
"@player-ui/player": "0.
|
|
37
|
-
"@player-ui/react": "0.
|
|
38
|
-
"@player-ui/types": "0.
|
|
39
|
-
"@player-
|
|
36
|
+
"@player-ui/player": "0.15.5",
|
|
37
|
+
"@player-ui/react": "0.15.5",
|
|
38
|
+
"@player-ui/types": "0.15.5",
|
|
39
|
+
"@player-lang/react-dsl": "1.0.1"
|
|
40
40
|
}
|
|
41
41
|
}
|
|
@@ -4,7 +4,7 @@ import {
|
|
|
4
4
|
Asset,
|
|
5
5
|
createSlot,
|
|
6
6
|
BindingTemplateInstance,
|
|
7
|
-
} from "@player-
|
|
7
|
+
} from "@player-lang/react-dsl";
|
|
8
8
|
import type { Asset as AssetType } from "@player-ui/player";
|
|
9
9
|
import { Text } from "@devtools-ui/text";
|
|
10
10
|
import { Collection } from "@devtools-ui/collection";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { describe, expect, test } from "vitest";
|
|
3
|
-
import { render, binding as b } from "@player-
|
|
3
|
+
import { render, binding as b } from "@player-lang/react-dsl";
|
|
4
4
|
import { ObjectInspector } from "../ObjectInspector";
|
|
5
5
|
|
|
6
6
|
describe("DSL: Object Inspector", () => {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { AssetPropsWithChildren, BindingTemplateInstance } from "@player-
|
|
2
|
+
import { AssetPropsWithChildren, BindingTemplateInstance } from "@player-lang/react-dsl";
|
|
3
3
|
import type { ObjectInspectorAsset } from "../types";
|
|
4
4
|
export declare const ObjectInspector: {
|
|
5
5
|
(props: Omit<AssetPropsWithChildren<ObjectInspectorAsset>, "binding"> & {
|