ruru-components 2.0.0-alpha.2 → 2.0.0-beta.10
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/CHANGELOG.md +130 -11
- package/dist/components/Copy.d.ts +2 -1
- package/dist/components/Copy.d.ts.map +1 -1
- package/dist/components/Copy.js +8 -11
- package/dist/components/Copy.js.map +1 -1
- package/dist/components/ErrorPopup.js +2 -6
- package/dist/components/ErrorPopup.js.map +1 -1
- package/dist/components/Explain.d.ts +5 -0
- package/dist/components/Explain.d.ts.map +1 -1
- package/dist/components/Explain.js +46 -46
- package/dist/components/Explain.js.map +1 -1
- package/dist/components/Footer.js +2 -6
- package/dist/components/Footer.js.map +1 -1
- package/dist/components/FormatSQL.js +14 -18
- package/dist/components/FormatSQL.js.map +1 -1
- package/dist/components/Mermaid.d.ts +2 -1
- package/dist/components/Mermaid.d.ts.map +1 -1
- package/dist/components/Mermaid.js +24 -17
- package/dist/components/Mermaid.js.map +1 -1
- package/dist/defaultQuery.js +1 -4
- package/dist/defaultQuery.js.map +1 -1
- package/dist/hooks/useExplain.d.ts +1 -1
- package/dist/hooks/useExplain.js +9 -13
- package/dist/hooks/useExplain.js.map +1 -1
- package/dist/hooks/useFetcher.d.ts +5 -4
- package/dist/hooks/useFetcher.d.ts.map +1 -1
- package/dist/hooks/useFetcher.js +18 -22
- package/dist/hooks/useFetcher.js.map +1 -1
- package/dist/hooks/useGraphQLChangeStream.js +6 -10
- package/dist/hooks/useGraphQLChangeStream.js.map +1 -1
- package/dist/hooks/usePrettify.js +6 -10
- package/dist/hooks/usePrettify.js.map +1 -1
- package/dist/hooks/useStorage.d.ts +0 -2
- package/dist/hooks/useStorage.d.ts.map +1 -1
- package/dist/hooks/useStorage.js +5 -11
- package/dist/hooks/useStorage.js.map +1 -1
- package/dist/index.js +1 -5
- package/dist/index.js.map +1 -1
- package/dist/interfaces.d.ts +27 -0
- package/dist/interfaces.d.ts.map +1 -1
- package/dist/interfaces.js +1 -2
- package/dist/plugins/explain.js +9 -12
- package/dist/plugins/explain.js.map +1 -1
- package/dist/ruru.d.ts +3 -1
- package/dist/ruru.d.ts.map +1 -1
- package/dist/ruru.js +43 -45
- package/dist/ruru.js.map +1 -1
- package/package.json +30 -23
- package/dist/hooks/useSchema.d.ts +0 -8
- package/dist/hooks/useSchema.d.ts.map +0 -1
- package/dist/hooks/useSchema.js +0 -75
- package/dist/hooks/useSchema.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,14 +1,133 @@
|
|
|
1
1
|
# ruru-components
|
|
2
2
|
|
|
3
|
+
## 2.0.0-beta.10
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
[[`3fdc2bce4`](https://github.com/graphile/crystal/commit/3fdc2bce42418773f808c5b8309dfb361cd95ce9),
|
|
9
|
+
[`aeef362b5`](https://github.com/graphile/crystal/commit/aeef362b5744816f01e4a6f714bbd77f92332bc5),
|
|
10
|
+
[`8a76db07f`](https://github.com/graphile/crystal/commit/8a76db07f4c110cecc6225504f9a05ccbcbc7b92),
|
|
11
|
+
[`8a0cdb95f`](https://github.com/graphile/crystal/commit/8a0cdb95f200b28b0ea1ab5caa12b23dce5f374f),
|
|
12
|
+
[`1c9f1c0ed`](https://github.com/graphile/crystal/commit/1c9f1c0edf4e621a5b6345d3a41527a18143c6ae)]:
|
|
13
|
+
- grafast@0.1.1-beta.2
|
|
14
|
+
|
|
15
|
+
## 2.0.0-beta.9
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- [#1833](https://github.com/graphile/crystal/pull/1833)
|
|
20
|
+
[`11ceb1753`](https://github.com/graphile/crystal/commit/11ceb1753ee42ee6d991e618dedc670a6f238fab)
|
|
21
|
+
Thanks [@benjie](https://github.com/benjie)! - Rework how schema fetching
|
|
22
|
+
works to solve issue with headers not being sent. Thanks @JoviDeCroock for the
|
|
23
|
+
inspiration.
|
|
24
|
+
- Updated dependencies
|
|
25
|
+
[[`49fcb0d58`](https://github.com/graphile/crystal/commit/49fcb0d585b31b291c9072c339d6f5b550eefc9f)]:
|
|
26
|
+
- grafast@0.1.1-beta.1
|
|
27
|
+
|
|
28
|
+
## 2.0.0-beta.8
|
|
29
|
+
|
|
30
|
+
### Patch Changes
|
|
31
|
+
|
|
32
|
+
- [#1799](https://github.com/graphile/crystal/pull/1799)
|
|
33
|
+
[`3dd5d86d6`](https://github.com/graphile/crystal/commit/3dd5d86d6c1ea7ba106c08e8a315ec47ed6cfa2d)
|
|
34
|
+
Thanks [@jvandermey](https://github.com/jvandermey)! - Can now pass onEdit
|
|
35
|
+
callbacks through the Ruru config via the plugin system; e.g. to update the
|
|
36
|
+
URL search params with the current editor state.
|
|
37
|
+
|
|
38
|
+
## 2.0.0-beta.7
|
|
39
|
+
|
|
40
|
+
### Patch Changes
|
|
41
|
+
|
|
42
|
+
- [#1796](https://github.com/graphile/crystal/pull/1796)
|
|
43
|
+
[`ebb0b817e`](https://github.com/graphile/crystal/commit/ebb0b817e3efe210445d3f3396ff4bc53ebab3e7)
|
|
44
|
+
Thanks [@benjie](https://github.com/benjie)! - Can now set initial query and
|
|
45
|
+
variables in Ruru via the plugin system; e.g. to set query/variables based on
|
|
46
|
+
query string.
|
|
47
|
+
|
|
48
|
+
## 2.0.0-beta.6
|
|
49
|
+
|
|
50
|
+
### Patch Changes
|
|
51
|
+
|
|
52
|
+
- Updated dependencies
|
|
53
|
+
[[`4a4d26d87`](https://github.com/graphile/crystal/commit/4a4d26d87ce74589429b8ca5126a7bfdf30351b8),
|
|
54
|
+
[`b2bce88da`](https://github.com/graphile/crystal/commit/b2bce88da26c7a8965468be16fc2d935eadd3434),
|
|
55
|
+
[`861a8a306`](https://github.com/graphile/crystal/commit/861a8a306ef42a821da19e77903ddd7e8130bfb3)]:
|
|
56
|
+
- grafast@0.1.1-beta.0
|
|
57
|
+
|
|
58
|
+
## 2.0.0-beta.5
|
|
59
|
+
|
|
60
|
+
### Patch Changes
|
|
61
|
+
|
|
62
|
+
- [#514](https://github.com/graphile/crystal-pre-merge/pull/514)
|
|
63
|
+
[`c9848f693`](https://github.com/graphile/crystal-pre-merge/commit/c9848f6936a5abd7740c0638bfb458fb5551f03b)
|
|
64
|
+
Thanks [@benjie](https://github.com/benjie)! - Update package.json repository
|
|
65
|
+
information
|
|
66
|
+
|
|
67
|
+
- Updated dependencies
|
|
68
|
+
[[`c9848f693`](https://github.com/graphile/crystal-pre-merge/commit/c9848f6936a5abd7740c0638bfb458fb5551f03b),
|
|
69
|
+
[`ede1092fe`](https://github.com/graphile/crystal-pre-merge/commit/ede1092fe197719b6fa786f4cfa75f6a1f4c56c1),
|
|
70
|
+
[`566983fbd`](https://github.com/graphile/crystal-pre-merge/commit/566983fbd99c4b2df8c4ebd6260521670a2b7dfc),
|
|
71
|
+
[`409bf6071`](https://github.com/graphile/crystal-pre-merge/commit/409bf607180d4d8faec658c803e5ec4d1a00c451)]:
|
|
72
|
+
- grafast@0.0.1-beta.8
|
|
73
|
+
- tamedevil@0.0.0-beta.3
|
|
74
|
+
|
|
75
|
+
## 2.0.0-beta.4
|
|
76
|
+
|
|
77
|
+
### Patch Changes
|
|
78
|
+
|
|
79
|
+
- Updated dependencies
|
|
80
|
+
[[`3700e204f`](https://github.com/benjie/crystal/commit/3700e204f430db182c92ca7abc82017c81fa1f9b)]:
|
|
81
|
+
- grafast@0.0.1-beta.7
|
|
82
|
+
|
|
83
|
+
## 2.0.0-beta.3
|
|
84
|
+
|
|
85
|
+
### Patch Changes
|
|
86
|
+
|
|
87
|
+
- [#496](https://github.com/benjie/crystal/pull/496)
|
|
88
|
+
[`c9bfd9892`](https://github.com/benjie/crystal/commit/c9bfd989247f9433fb5b18c5175c9d8d64cd21a1)
|
|
89
|
+
Thanks [@benjie](https://github.com/benjie)! - Update dependencies (sometimes
|
|
90
|
+
through major versions).
|
|
91
|
+
|
|
92
|
+
- [#496](https://github.com/benjie/crystal/pull/496)
|
|
93
|
+
[`1867d365f`](https://github.com/benjie/crystal/commit/1867d365f360ac8411f622b0813ca76a19ab4013)
|
|
94
|
+
Thanks [@benjie](https://github.com/benjie)! - Ruru now runs on React 18
|
|
95
|
+
|
|
96
|
+
- [#496](https://github.com/benjie/crystal/pull/496)
|
|
97
|
+
[`c747d91e9`](https://github.com/benjie/crystal/commit/c747d91e9646409c66e73c12195dbf6cbd97b211)
|
|
98
|
+
Thanks [@benjie](https://github.com/benjie)! - Modules converted to ESM to fix
|
|
99
|
+
compatibility with GraphiQL.
|
|
100
|
+
|
|
101
|
+
- Updated dependencies
|
|
102
|
+
[[`c9bfd9892`](https://github.com/benjie/crystal/commit/c9bfd989247f9433fb5b18c5175c9d8d64cd21a1),
|
|
103
|
+
[`e613b476d`](https://github.com/benjie/crystal/commit/e613b476d6ee867d1f7509c895dabee40e7f9a31)]:
|
|
104
|
+
- grafast@0.0.1-beta.6
|
|
105
|
+
- tamedevil@0.0.0-beta.2
|
|
106
|
+
|
|
107
|
+
## 2.0.0-beta.2
|
|
108
|
+
|
|
109
|
+
### Patch Changes
|
|
110
|
+
|
|
111
|
+
- [#488](https://github.com/benjie/crystal/pull/488)
|
|
112
|
+
[`9f82b8612`](https://github.com/benjie/crystal/commit/9f82b861206fdd2b8a7c50ba5184112dfb57b54a)
|
|
113
|
+
Thanks [@benjie](https://github.com/benjie)! - Fix detection of SQL aliases
|
|
114
|
+
|
|
115
|
+
## 2.0.0-beta.1
|
|
116
|
+
|
|
117
|
+
### Patch Changes
|
|
118
|
+
|
|
119
|
+
- [`cbd987385`](https://github.com/benjie/crystal/commit/cbd987385f99bd1248bc093ac507cc2f641ba3e8)
|
|
120
|
+
Thanks [@benjie](https://github.com/benjie)! - Bump all packages to beta
|
|
121
|
+
|
|
3
122
|
## 2.0.0-alpha.2
|
|
4
123
|
|
|
5
124
|
### Patch Changes
|
|
6
125
|
|
|
7
|
-
- [`2fe247f75`](https://github.com/benjie/
|
|
126
|
+
- [`2fe247f75`](https://github.com/benjie/crystal/commit/2fe247f751377e18b3d6809cba39a01aa1602dbc)
|
|
8
127
|
Thanks [@benjie](https://github.com/benjie)! - Added ability to download
|
|
9
128
|
mermaid plan diagram as SVG.
|
|
10
129
|
|
|
11
|
-
- [`7f857950a`](https://github.com/benjie/
|
|
130
|
+
- [`7f857950a`](https://github.com/benjie/crystal/commit/7f857950a7e4ec763c936eb6bd1fb77824041d71)
|
|
12
131
|
Thanks [@benjie](https://github.com/benjie)! - Upgrade to the latest
|
|
13
132
|
TypeScript/tslib
|
|
14
133
|
|
|
@@ -16,7 +135,7 @@
|
|
|
16
135
|
|
|
17
136
|
### Patch Changes
|
|
18
137
|
|
|
19
|
-
- [`759ad403d`](https://github.com/benjie/
|
|
138
|
+
- [`759ad403d`](https://github.com/benjie/crystal/commit/759ad403d71363312c5225c165873ae84b8a098c)
|
|
20
139
|
Thanks [@benjie](https://github.com/benjie)! - Alpha release - see
|
|
21
140
|
https://postgraphile.org/news/2023-04-26-version-5-alpha
|
|
22
141
|
|
|
@@ -24,12 +143,12 @@
|
|
|
24
143
|
|
|
25
144
|
### Patch Changes
|
|
26
145
|
|
|
27
|
-
- [#267](https://github.com/benjie/
|
|
28
|
-
[`159735204`](https://github.com/benjie/
|
|
146
|
+
- [#267](https://github.com/benjie/crystal/pull/267)
|
|
147
|
+
[`159735204`](https://github.com/benjie/crystal/commit/15973520462d4a95e3cdf04fdacfc71ca851122f)
|
|
29
148
|
Thanks [@benjie](https://github.com/benjie)! - Add formatting for SQL aliases
|
|
30
149
|
|
|
31
|
-
- [#260](https://github.com/benjie/
|
|
32
|
-
[`d5312e6b9`](https://github.com/benjie/
|
|
150
|
+
- [#260](https://github.com/benjie/crystal/pull/260)
|
|
151
|
+
[`d5312e6b9`](https://github.com/benjie/crystal/commit/d5312e6b968fbeb46d074b82a41b4bdbc166598c)
|
|
33
152
|
Thanks [@benjie](https://github.com/benjie)! - TypeScript v5 is now required
|
|
34
153
|
|
|
35
154
|
## 2.0.0-0.9
|
|
@@ -42,8 +161,8 @@
|
|
|
42
161
|
|
|
43
162
|
### Patch Changes
|
|
44
163
|
|
|
45
|
-
- [#229](https://github.com/benjie/
|
|
46
|
-
[`b795b3da5`](https://github.com/benjie/
|
|
164
|
+
- [#229](https://github.com/benjie/crystal/pull/229)
|
|
165
|
+
[`b795b3da5`](https://github.com/benjie/crystal/commit/b795b3da5f8e8f13c495be3a8cf71667f3d149f8)
|
|
47
166
|
Thanks [@benjie](https://github.com/benjie)! - Upgrade GraphiQL, gaining the
|
|
48
167
|
watch mode fix.
|
|
49
168
|
|
|
@@ -51,8 +170,8 @@
|
|
|
51
170
|
|
|
52
171
|
### Patch Changes
|
|
53
172
|
|
|
54
|
-
- [#200](https://github.com/benjie/
|
|
55
|
-
[`e11698473`](https://github.com/benjie/
|
|
173
|
+
- [#200](https://github.com/benjie/crystal/pull/200)
|
|
174
|
+
[`e11698473`](https://github.com/benjie/crystal/commit/e1169847303790570bfafa07eb25d8fce53a0391)
|
|
56
175
|
Thanks [@benjie](https://github.com/benjie)! - Add support for websocket
|
|
57
176
|
subscriptions to Ruru.
|
|
58
177
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Copy.d.ts","sourceRoot":"","sources":["../../src/components/Copy.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Copy.d.ts","sourceRoot":"","sources":["../../src/components/Copy.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,QAAQ,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;CAChD,CA8BA,CAAC"}
|
package/dist/components/Copy.js
CHANGED
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
-
const
|
|
7
|
-
const ref = (0, react_1.useRef)(null);
|
|
8
|
-
const copy = (0, react_1.useCallback)(() => {
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useMemo, useRef } from "react";
|
|
3
|
+
export const Copy = ({ text: rawText, json, children }) => {
|
|
4
|
+
const text = useMemo(() => rawText ?? (json !== undefined ? JSON.stringify(json) : undefined), [rawText, json]);
|
|
5
|
+
const ref = useRef(null);
|
|
6
|
+
const copy = useCallback(() => {
|
|
9
7
|
const el = ref.current;
|
|
10
8
|
if (el) {
|
|
11
9
|
/* Select the text field */
|
|
@@ -15,9 +13,8 @@ const Copy = ({ text, children }) => {
|
|
|
15
13
|
navigator.clipboard.writeText(el.value);
|
|
16
14
|
}
|
|
17
15
|
}, []);
|
|
18
|
-
return ((
|
|
16
|
+
return (_jsxs(_Fragment, { children: [_jsx("textarea", { ref: (el) => {
|
|
19
17
|
ref.current = el;
|
|
20
|
-
}, value: text, readOnly: true, style: { display: "none" } }), (
|
|
18
|
+
}, value: text, readOnly: true, style: { display: "none" } }), _jsx("button", { onClick: copy, children: children })] }));
|
|
21
19
|
};
|
|
22
|
-
exports.Copy = Copy;
|
|
23
20
|
//# sourceMappingURL=Copy.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Copy.js","sourceRoot":"","sources":["../../src/components/Copy.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Copy.js","sourceRoot":"","sources":["../../src/components/Copy.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAErD,MAAM,CAAC,MAAM,IAAI,GAIZ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE;IACzC,MAAM,IAAI,GAAG,OAAO,CAClB,GAAG,EAAE,CAAC,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EACxE,CAAC,OAAO,EAAE,IAAI,CAAC,CAChB,CAAC;IACF,MAAM,GAAG,GAAG,MAAM,CAA6B,IAAI,CAAC,CAAC;IACrD,MAAM,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5B,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,IAAI,EAAE,EAAE;YACN,2BAA2B;YAC3B,EAAE,CAAC,MAAM,EAAE,CAAC;YACZ,EAAE,CAAC,iBAAiB,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,wBAAwB;YAExD,yCAAyC;YACzC,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;SACzC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,CACL,8BACE,mBACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE;oBACV,GAAG,CAAC,OAAO,GAAG,EAAE,CAAC;gBACnB,CAAC,EACD,KAAK,EAAE,IAAI,EACX,QAAQ,QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAC1B,EACF,iBAAQ,OAAO,EAAE,IAAI,YAAG,QAAQ,GAAU,IACzC,CACJ,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.ErrorPopup = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
2
|
// TODO: this needs proper design and accessibility considerations
|
|
6
|
-
const ErrorPopup = ({ error, onClose, }) => ((
|
|
7
|
-
exports.ErrorPopup = ErrorPopup;
|
|
3
|
+
export const ErrorPopup = ({ error, onClose, }) => (_jsxs("div", { className: "errorPopup", children: [_jsx("button", { className: "errorPopupClose", onClick: onClose, children: "\uD83D\uDDD9" }), _jsx("div", { className: "errorPopupError", children: String(error) })] }));
|
|
8
4
|
//# sourceMappingURL=ErrorPopup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ErrorPopup.js","sourceRoot":"","sources":["../../src/components/ErrorPopup.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ErrorPopup.js","sourceRoot":"","sources":["../../src/components/ErrorPopup.tsx"],"names":[],"mappings":";AAEA,kEAAkE;AAElE,MAAM,CAAC,MAAM,UAAU,GAA8C,CAAC,EACpE,KAAK,EACL,OAAO,GACR,EAAE,EAAE,CAAC,CACJ,eAAK,SAAS,EAAC,YAAY,aACzB,iBAAQ,SAAS,EAAC,iBAAiB,EAAC,OAAO,EAAE,OAAO,6BAE3C,EACT,cAAK,SAAS,EAAC,iBAAiB,YAAE,MAAM,CAAC,KAAK,CAAC,GAAO,IAClD,CACP,CAAC"}
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import type { FC } from "react";
|
|
2
2
|
import type { ExplainHelpers } from "../hooks/useExplain.js";
|
|
3
3
|
import type { ExplainResults } from "../hooks/useFetcher.js";
|
|
4
|
+
declare global {
|
|
5
|
+
interface Window {
|
|
6
|
+
mermaid?: any;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
4
9
|
export declare const Explain: FC<{
|
|
5
10
|
explain: boolean;
|
|
6
11
|
setExplain: (newExplain: boolean) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Explain.d.ts","sourceRoot":"","sources":["../../src/components/Explain.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAK7D,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,OAAO,EAAE,cAAc,CAAC;IACxB,OAAO,EAAE,cAAc,GAAG,IAAI,CAAC;CAChC,CA6BA,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC;IAC3B,OAAO,EAAE,cAAc,CAAC;IACxB,OAAO,EAAE,cAAc,CAAC;CACzB,
|
|
1
|
+
{"version":3,"file":"Explain.d.ts","sourceRoot":"","sources":["../../src/components/Explain.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAK7D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,OAAO,CAAC,EAAE,GAAG,CAAC;KACf;CACF;AAED,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,OAAO,EAAE,cAAc,CAAC;IACxB,OAAO,EAAE,cAAc,GAAG,IAAI,CAAC;CAChC,CA6BA,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC;IAC3B,OAAO,EAAE,cAAc,CAAC;IACxB,OAAO,EAAE,cAAc,CAAC;CACzB,CA8IA,CAAC"}
|
|
@@ -1,80 +1,80 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
const FormatSQL_js_1 = require("./FormatSQL.js");
|
|
11
|
-
const Mermaid_js_1 = require("./Mermaid.js");
|
|
12
|
-
const Explain = ({ explain, setExplain, helpers, results }) => {
|
|
13
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !results ? (!explain ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { children: "WARNING: you've not enabled the 'explain' functionality" }), (0, jsx_runtime_1.jsx)("p", { children: (0, jsx_runtime_1.jsx)("button", { onClick: () => setExplain(true), children: "Enable explain" }) })] })) : ((0, jsx_runtime_1.jsx)("p", { children: "There are no explain results to display - perhaps you have not yet ran an operation against a server that supports this feature?" }))) : results.operations.length === 0 ? ((0, jsx_runtime_1.jsx)("p", { children: "Empty explain results" })) : ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(exports.ExplainMain, { helpers: helpers, results: results }) })) }));
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { planToMermaid } from "grafast/mermaid";
|
|
3
|
+
import { useCallback, useEffect, useRef, useState } from "react";
|
|
4
|
+
import { createPortal } from "react-dom";
|
|
5
|
+
import { Copy } from "./Copy.js";
|
|
6
|
+
import { FormatSQL } from "./FormatSQL.js";
|
|
7
|
+
import { Mermaid } from "./Mermaid.js";
|
|
8
|
+
export const Explain = ({ explain, setExplain, helpers, results }) => {
|
|
9
|
+
return (_jsx(_Fragment, { children: !results ? (!explain ? (_jsxs(_Fragment, { children: [_jsx("p", { children: "WARNING: you've not enabled the 'explain' functionality" }), _jsx("p", { children: _jsx("button", { onClick: () => setExplain(true), children: "Enable explain" }) })] })) : (_jsx("p", { children: "There are no explain results to display - perhaps you have not yet ran an operation against a server that supports this feature?" }))) : results.operations.length === 0 ? (_jsx("p", { children: "Empty explain results" })) : (_jsx("div", { children: _jsx(ExplainMain, { helpers: helpers, results: results }) })) }));
|
|
14
10
|
};
|
|
15
|
-
|
|
16
|
-
const
|
|
17
|
-
|
|
18
|
-
(0, react_1.useEffect)(() => {
|
|
11
|
+
export const ExplainMain = ({ results }) => {
|
|
12
|
+
const [selectedIndex, setSelectedIndex] = useState(0);
|
|
13
|
+
useEffect(() => {
|
|
19
14
|
setSelectedIndex(0);
|
|
20
15
|
}, [results]);
|
|
21
16
|
const selectedResult = results.operations[selectedIndex];
|
|
22
|
-
const [expanded, setExpanded] =
|
|
23
|
-
const expand =
|
|
17
|
+
const [expanded, setExpanded] = useState(false);
|
|
18
|
+
const expand = useCallback(() => {
|
|
24
19
|
setExpanded(true);
|
|
25
20
|
}, []);
|
|
26
|
-
const nodeRef =
|
|
21
|
+
const nodeRef = useRef();
|
|
27
22
|
if (!nodeRef.current) {
|
|
28
23
|
nodeRef.current = document.createElement("div");
|
|
29
24
|
}
|
|
30
25
|
const node = nodeRef.current;
|
|
31
|
-
|
|
26
|
+
useEffect(() => {
|
|
32
27
|
document.body.appendChild(node);
|
|
33
28
|
return () => {
|
|
34
29
|
document.body.removeChild(node);
|
|
35
30
|
};
|
|
36
31
|
}, [node]);
|
|
37
|
-
const [saving, setSaving] =
|
|
38
|
-
const saveSVG =
|
|
39
|
-
if (!selectedResult || selectedResult.type !== "
|
|
32
|
+
const [saving, setSaving] = useState(false);
|
|
33
|
+
const saveSVG = useCallback(() => {
|
|
34
|
+
if (!selectedResult || selectedResult.type !== "plan")
|
|
40
35
|
return;
|
|
41
36
|
setSaving(true);
|
|
42
37
|
setTimeout(() => {
|
|
43
|
-
|
|
44
|
-
const
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
38
|
+
if (window.mermaid) {
|
|
39
|
+
const diagram = planToMermaid(selectedResult.plan);
|
|
40
|
+
window.mermaid.mermaidAPI.render("id1", diagram, (svg) => {
|
|
41
|
+
const file = new File([svg.replace(/<br>/g, "<br/>")], "grafast-plan.svg");
|
|
42
|
+
const a = document.createElement("a");
|
|
43
|
+
a.href = URL.createObjectURL(file);
|
|
44
|
+
a.download = file.name;
|
|
45
|
+
a.style.display = "none";
|
|
46
|
+
document.body.appendChild(a);
|
|
47
|
+
a.click();
|
|
48
|
+
setSaving(false);
|
|
49
|
+
setTimeout(() => {
|
|
50
|
+
URL.revokeObjectURL(a.href);
|
|
51
|
+
a.parentNode.removeChild(a);
|
|
52
|
+
}, 0);
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
else {
|
|
56
|
+
alert("Mermaid hasn't loaded (yet)");
|
|
57
|
+
}
|
|
57
58
|
}, 0);
|
|
58
59
|
}, [selectedResult]);
|
|
59
60
|
const component = (() => {
|
|
60
61
|
switch (selectedResult?.type) {
|
|
61
62
|
case "sql": {
|
|
62
|
-
return ((
|
|
63
|
+
return (_jsxs("div", { children: [selectedResult.explain ? (_jsxs(_Fragment, { children: [_jsxs("h4", { children: ["Result from SQL", " ", _jsx("a", { href: "https://www.postgresql.org/docs/current/sql-explain.html", children: "EXPLAIN" }), " ", "on executed query:"] }), _jsx("pre", { className: "explain-plan", children: _jsx("code", { children: selectedResult.explain }) }), _jsx(Copy, { text: selectedResult.explain, children: "Copy plan" })] })) : null, _jsx("h4", { children: "Executed SQL query:" }), _jsx(FormatSQL, { sql: selectedResult.query }), _jsx(Copy, { text: selectedResult.query, children: "Copy SQL" })] }));
|
|
63
64
|
}
|
|
64
|
-
case "
|
|
65
|
-
return ((
|
|
66
|
-
?
|
|
65
|
+
case "plan": {
|
|
66
|
+
return (_jsxs(_Fragment, { children: [_jsx(Copy, { json: selectedResult.plan, children: "Copy plan JSON" }), _jsx("button", { onClick: saveSVG, disabled: saving, children: "Save Mermaid Diagram" }), _jsx("div", { onClick: expand, children: _jsx(Mermaid, { plan: selectedResult.plan }) }), expanded
|
|
67
|
+
? createPortal(_jsxs("div", { className: "explainExpandedContainer", children: [_jsx("div", { className: "explainExpandedTitle", children: "Operation Plan" }), _jsx("div", { className: "explainExpandedCloseContainer", children: _jsx("button", { className: "explainExpandedCloseButton", onClick: () => setExpanded(false), children: "\u00D7" }) }), _jsx("div", { className: "explainExpandedMain", children: _jsx(Mermaid, { plan: selectedResult.plan }) })] }), node)
|
|
67
68
|
: null] }));
|
|
68
69
|
}
|
|
69
70
|
case undefined: {
|
|
70
|
-
return ((
|
|
71
|
+
return (_jsxs("div", { children: ["Explain result type '$", selectedResult.type, "' not yet supported."] }));
|
|
71
72
|
}
|
|
72
73
|
default: {
|
|
73
|
-
return (
|
|
74
|
+
return _jsx("div", {});
|
|
74
75
|
}
|
|
75
76
|
}
|
|
76
77
|
})();
|
|
77
|
-
return ((
|
|
78
|
+
return (_jsxs("div", { children: [_jsx("select", { value: String(selectedIndex), onChange: (e) => setSelectedIndex(parseInt(e.target.value, 10)), children: results.operations.map((o, i) => (_jsx("option", { value: String(i), children: o.title }, i))) }), component] }));
|
|
78
79
|
};
|
|
79
|
-
exports.ExplainMain = ExplainMain;
|
|
80
80
|
//# sourceMappingURL=Explain.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Explain.js","sourceRoot":"","sources":["../../src/components/Explain.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Explain.js","sourceRoot":"","sources":["../../src/components/Explain.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
exports.RuruFooter = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const RuruFooter = () => ((0, jsx_runtime_1.jsxs)("div", { style: { padding: 7 }, children: ["Community-funded OSS \uD83D\uDE4F", " ", (0, jsx_runtime_1.jsx)("a", { title: "All our projects are supported by the community, please sponsor ongoing development", href: "https://graphile.org/sponsor/", target: "new", children: "please sponsor" }), " ", "\uD83D\uDC96"] }));
|
|
6
|
-
exports.RuruFooter = RuruFooter;
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
export const RuruFooter = () => (_jsxs("div", { style: { padding: 7 }, children: ["Community-funded OSS \uD83D\uDE4F", " ", _jsx("a", { title: "All our projects are supported by the community, please sponsor ongoing development", href: "https://graphile.org/sponsor/", target: "new", children: "please sponsor" }), " ", "\uD83D\uDC96"] }));
|
|
7
3
|
//# sourceMappingURL=Footer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Footer.js","sourceRoot":"","sources":["../../src/components/Footer.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Footer.js","sourceRoot":"","sources":["../../src/components/Footer.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,UAAU,GAAO,GAAG,EAAE,CAAC,CAClC,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,kDACA,GAAG,EAC3B,YACE,KAAK,EAAC,qFAAqF,EAC3F,IAAI,EAAC,+BAA+B,EACpC,MAAM,EAAC,KAAK,+BAGV,EAAC,GAAG,oBAEJ,CACP,CAAC"}
|
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
-
const FormatSQL = ({ sql }) => {
|
|
7
|
-
const [highlitIndex, setHighlitIndex] = (0, react_1.useState)(null);
|
|
8
|
-
const formattedSQL = (0, react_1.useMemo)(() => {
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useMemo, useState } from "react";
|
|
3
|
+
export const FormatSQL = ({ sql }) => {
|
|
4
|
+
const [highlitIndex, setHighlitIndex] = useState(null);
|
|
5
|
+
const formattedSQL = useMemo(() => {
|
|
9
6
|
const lines = sql.split("\n");
|
|
10
7
|
const elements = [];
|
|
11
8
|
const knownIdentifiers = new Map();
|
|
@@ -13,13 +10,13 @@ const FormatSQL = ({ sql }) => {
|
|
|
13
10
|
const makeParts = (line) => {
|
|
14
11
|
const parts = [];
|
|
15
12
|
let idx = 0;
|
|
16
|
-
const re = /__([a-zA-Z0-9](_?[a-zA-Z0-9])*)__/g;
|
|
13
|
+
const re = /__([a-zA-Z0-9](_?[a-zA-Z0-9])*)(__|_[0-9]+(?![a-zA-Z0-9_]))/g;
|
|
17
14
|
let matches;
|
|
18
15
|
while ((matches = re.exec(line))) {
|
|
19
16
|
const start = matches.index;
|
|
20
17
|
const fin = re.lastIndex;
|
|
21
18
|
if (start > idx) {
|
|
22
|
-
parts.push((
|
|
19
|
+
parts.push(_jsx(_Fragment, { children: line.substring(idx, start) }));
|
|
23
20
|
}
|
|
24
21
|
idx = fin;
|
|
25
22
|
const [full] = matches;
|
|
@@ -29,20 +26,20 @@ const FormatSQL = ({ sql }) => {
|
|
|
29
26
|
}
|
|
30
27
|
else {
|
|
31
28
|
const index = identifierCount++;
|
|
32
|
-
const sub = ((
|
|
29
|
+
const sub = (_jsx(Highlight, { n: index, highlit: index === highlitIndex, setHighlitIndex: setHighlitIndex, children: full }));
|
|
33
30
|
knownIdentifiers.set(full, sub);
|
|
34
31
|
parts.push(sub);
|
|
35
32
|
}
|
|
36
33
|
}
|
|
37
34
|
if (idx < line.length) {
|
|
38
|
-
parts.push((
|
|
35
|
+
parts.push(_jsx(_Fragment, { children: line.substring(idx) }));
|
|
39
36
|
}
|
|
40
37
|
return parts;
|
|
41
38
|
};
|
|
42
39
|
for (let i = 0, l = lines.length; i < l; i++) {
|
|
43
40
|
const line = lines[i];
|
|
44
41
|
const parts = makeParts(line);
|
|
45
|
-
elements.push((
|
|
42
|
+
elements.push(_jsx("code", { style: {
|
|
46
43
|
display: "block",
|
|
47
44
|
marginLeft: "1.8rem",
|
|
48
45
|
textIndent: "-1.8rem",
|
|
@@ -50,9 +47,8 @@ const FormatSQL = ({ sql }) => {
|
|
|
50
47
|
}
|
|
51
48
|
return elements;
|
|
52
49
|
}, [sql, highlitIndex]);
|
|
53
|
-
return (
|
|
50
|
+
return _jsx("pre", { className: "explain-sql", children: formattedSQL });
|
|
54
51
|
};
|
|
55
|
-
exports.FormatSQL = FormatSQL;
|
|
56
52
|
const COLORS = [
|
|
57
53
|
"#00bfff",
|
|
58
54
|
"#ffa500",
|
|
@@ -76,12 +72,12 @@ const Highlight = ({ n, highlit, setHighlitIndex, children }) => {
|
|
|
76
72
|
backgroundColor: "hsla(var(--color-primary),var(--alpha-background-medium))",
|
|
77
73
|
}
|
|
78
74
|
: { color };
|
|
79
|
-
const onMouseEnter =
|
|
75
|
+
const onMouseEnter = useCallback(() => {
|
|
80
76
|
setHighlitIndex(n);
|
|
81
77
|
}, [setHighlitIndex, n]);
|
|
82
|
-
const onMouseLeave =
|
|
78
|
+
const onMouseLeave = useCallback(() => {
|
|
83
79
|
setHighlitIndex(null);
|
|
84
80
|
}, [setHighlitIndex]);
|
|
85
|
-
return ((
|
|
81
|
+
return (_jsx("strong", { style: style, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children }));
|
|
86
82
|
};
|
|
87
83
|
//# sourceMappingURL=FormatSQL.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormatSQL.js","sourceRoot":"","sources":["../../src/components/FormatSQL.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FormatSQL.js","sourceRoot":"","sources":["../../src/components/FormatSQL.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Mermaid.d.ts","sourceRoot":"","sources":["../../src/components/Mermaid.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Mermaid.d.ts","sourceRoot":"","sources":["../../src/components/Mermaid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAKhC,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC;IAAE,IAAI,EAAE,eAAe,CAAA;CAAE,CA2BjD,CAAC"}
|
|
@@ -1,21 +1,28 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
const
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { planToMermaid } from "grafast/mermaid";
|
|
3
|
+
import { useEffect, useMemo } from "react";
|
|
4
|
+
let initialized = false;
|
|
5
|
+
export const Mermaid = ({ plan }) => {
|
|
6
|
+
const diagram = useMemo(() => planToMermaid(plan), [plan]);
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
if (window.mermaid) {
|
|
9
|
+
if (!initialized) {
|
|
10
|
+
initialized = true;
|
|
11
|
+
window.mermaid.initialize({
|
|
12
|
+
startOnLoad: true,
|
|
13
|
+
maxTextSize: 1000000,
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
if (diagram) {
|
|
17
|
+
window.mermaid.contentLoaded();
|
|
18
|
+
}
|
|
16
19
|
}
|
|
17
20
|
}, [diagram]);
|
|
18
|
-
|
|
21
|
+
if (window.mermaid) {
|
|
22
|
+
return (_jsx("div", { className: "mermaid", children: diagram }, diagram));
|
|
23
|
+
}
|
|
24
|
+
else {
|
|
25
|
+
return (_jsx("div", { children: "Mermaid hasn't (yet) loaded, so we cannot render plan diagrams" }));
|
|
26
|
+
}
|
|
19
27
|
};
|
|
20
|
-
exports.Mermaid = Mermaid;
|
|
21
28
|
//# sourceMappingURL=Mermaid.js.map
|