grafana-react 0.0.1 → 0.0.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 +6 -6
- package/build/cli/index.js +18 -2
- package/build/lib/utils.js +2 -1
- package/package.json +10 -8
package/README.md
CHANGED
|
@@ -19,7 +19,7 @@ React-based DSL for creating Grafana dashboards. Write dashboards as JSX compone
|
|
|
19
19
|
## Installation
|
|
20
20
|
|
|
21
21
|
```bash
|
|
22
|
-
npm install grafana-react react
|
|
22
|
+
npm install grafana-react react@19 tsx@4
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
## Quick Start
|
|
@@ -55,7 +55,7 @@ export default function MyDashboard() {
|
|
|
55
55
|
Build to JSON using the CLI:
|
|
56
56
|
|
|
57
57
|
```bash
|
|
58
|
-
grafana-react build my-dashboard.tsx output/my-dashboard.json
|
|
58
|
+
npx grafana-react build my-dashboard.tsx output/my-dashboard.json
|
|
59
59
|
```
|
|
60
60
|
|
|
61
61
|
Or programmatically with `renderToString`:
|
|
@@ -80,10 +80,10 @@ Full documentation is available at: **[kiwi-research.github.io/grafana-react](ht
|
|
|
80
80
|
## CLI Commands
|
|
81
81
|
|
|
82
82
|
```bash
|
|
83
|
-
grafana-react build <input.tsx> [output.json] # Build single dashboard
|
|
84
|
-
grafana-react build-all <dir> [output-dir] # Build all dashboards
|
|
85
|
-
grafana-react validate <input.tsx> # Validate without output
|
|
86
|
-
grafana-react watch <dir> [output-dir] # Watch and rebuild
|
|
83
|
+
npx grafana-react build <input.tsx> [output.json] # Build single dashboard
|
|
84
|
+
npx grafana-react build-all <dir> [output-dir] # Build all dashboards
|
|
85
|
+
npx grafana-react validate <input.tsx> # Validate without output
|
|
86
|
+
npx grafana-react watch <dir> [output-dir] # Watch and rebuild
|
|
87
87
|
```
|
|
88
88
|
|
|
89
89
|
## License
|
package/build/cli/index.js
CHANGED
|
@@ -10,6 +10,22 @@
|
|
|
10
10
|
* grafana-react validate <input> Validate a dashboard without output
|
|
11
11
|
* grafana-react watch <dir> [outdir] Watch and rebuild on changes
|
|
12
12
|
*/
|
|
13
|
+
// Register tsx loader for TypeScript/TSX support
|
|
14
|
+
try {
|
|
15
|
+
const { register } = await import('tsx/esm/api');
|
|
16
|
+
register();
|
|
17
|
+
}
|
|
18
|
+
catch {
|
|
19
|
+
console.error(`Error: The grafana-react CLI requires 'tsx' to be installed.
|
|
20
|
+
|
|
21
|
+
Install it with:
|
|
22
|
+
npm install tsx@4
|
|
23
|
+
|
|
24
|
+
Or install all peer dependencies:
|
|
25
|
+
npm install react@19 tsx@4
|
|
26
|
+
`);
|
|
27
|
+
process.exit(1);
|
|
28
|
+
}
|
|
13
29
|
import * as fs from 'node:fs';
|
|
14
30
|
import * as path from 'node:path';
|
|
15
31
|
import React from 'react';
|
|
@@ -71,8 +87,8 @@ async function loadDashboard(inputFile) {
|
|
|
71
87
|
if (ext !== '.tsx' && ext !== '.ts') {
|
|
72
88
|
error(`Expected .tsx or .ts file, got ${ext}`);
|
|
73
89
|
}
|
|
74
|
-
// Import the module
|
|
75
|
-
const module = await import(absolutePath);
|
|
90
|
+
// Import the module (tsx loader handles TSX transformation)
|
|
91
|
+
const module = (await import(absolutePath));
|
|
76
92
|
// Find the dashboard component
|
|
77
93
|
const Component = module.default ??
|
|
78
94
|
module.Dashboard ??
|
package/build/lib/utils.js
CHANGED
|
@@ -6,7 +6,8 @@ import React from 'react';
|
|
|
6
6
|
* Get children from a React element as an array
|
|
7
7
|
*/
|
|
8
8
|
export function getChildren(element) {
|
|
9
|
-
const
|
|
9
|
+
const props = element.props;
|
|
10
|
+
const children = props?.children;
|
|
10
11
|
if (!children)
|
|
11
12
|
return [];
|
|
12
13
|
return React.Children.toArray(children);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "grafana-react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.2",
|
|
4
4
|
"description": "React-based DSL for creating Grafana dashboards",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -49,19 +49,21 @@
|
|
|
49
49
|
"lint-fix:prettier": "prettier . --write",
|
|
50
50
|
"test": "node --test build/**/*.test.js"
|
|
51
51
|
},
|
|
52
|
-
"dependencies": {
|
|
53
|
-
"react": "^18.3.1"
|
|
54
|
-
},
|
|
52
|
+
"dependencies": {},
|
|
55
53
|
"devDependencies": {
|
|
56
|
-
"
|
|
57
|
-
"
|
|
54
|
+
"react": "^19.2.3",
|
|
55
|
+
"tsx": "^4.21.0",
|
|
56
|
+
"@types/node": "^25.0.5",
|
|
57
|
+
"@types/react": "^19.2.7",
|
|
58
58
|
"@typescript/native-preview": "^7.0.0-dev.20260109.1",
|
|
59
59
|
"eslint": "^9.39.2",
|
|
60
60
|
"prettier": "^3.7.4",
|
|
61
|
-
"typescript": "^5.
|
|
62
|
-
"typescript-eslint": "^8.
|
|
61
|
+
"typescript": "^5.9.3",
|
|
62
|
+
"typescript-eslint": "^8.52.0"
|
|
63
63
|
},
|
|
64
64
|
"peerDependencies": {
|
|
65
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
66
|
+
"tsx": "^4.0.0",
|
|
65
67
|
"typescript": "^5.0.0"
|
|
66
68
|
}
|
|
67
69
|
}
|