stepzen-graphiql 2.1.3-experimental.1 → 2.1.3-experimental.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 +59 -0
- package/dist/lib/setupMonacoWorkers.d.ts +13 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,6 +7,65 @@
|
|
|
7
7
|
- React 18 or React 19
|
|
8
8
|
- React DOM 18 or React DOM 19
|
|
9
9
|
|
|
10
|
+
## Setup
|
|
11
|
+
|
|
12
|
+
### 1. Configure Monaco workers
|
|
13
|
+
|
|
14
|
+
This package uses Monaco Editor (via `@graphiql/react`), which requires web workers to be configured **before any other imports** in your app entry point (e.g. `main.tsx`):
|
|
15
|
+
|
|
16
|
+
```tsx
|
|
17
|
+
// main.tsx — worker setup must come before all other imports
|
|
18
|
+
self.MonacoEnvironment = {
|
|
19
|
+
getWorker(_id, label) {
|
|
20
|
+
if (label === 'json') {
|
|
21
|
+
return new Worker(
|
|
22
|
+
new URL('monaco-editor/esm/vs/language/json/json.worker', import.meta.url),
|
|
23
|
+
{ type: 'module' },
|
|
24
|
+
)
|
|
25
|
+
}
|
|
26
|
+
if (label === 'graphql') {
|
|
27
|
+
return new Worker(
|
|
28
|
+
new URL('monaco-graphql/esm/graphql.worker', import.meta.url),
|
|
29
|
+
{ type: 'module' },
|
|
30
|
+
)
|
|
31
|
+
}
|
|
32
|
+
return new Worker(
|
|
33
|
+
new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url),
|
|
34
|
+
{ type: 'module' },
|
|
35
|
+
)
|
|
36
|
+
},
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
import { StrictMode } from 'react'
|
|
40
|
+
import { createRoot } from 'react-dom/client'
|
|
41
|
+
import App from './App.tsx'
|
|
42
|
+
|
|
43
|
+
createRoot(document.getElementById('root')!).render(
|
|
44
|
+
<StrictMode>
|
|
45
|
+
<App />
|
|
46
|
+
</StrictMode>,
|
|
47
|
+
)
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
> **Without this setup** the response panel will render incorrectly (wrong height, appears editable) because Monaco falls back to running on the main thread without proper language support.
|
|
51
|
+
|
|
52
|
+
### 2. Add height styles to your HTML
|
|
53
|
+
|
|
54
|
+
```html
|
|
55
|
+
<style>
|
|
56
|
+
html, body { height: 100%; margin: 0; padding: 0; }
|
|
57
|
+
#root { height: 100%; display: flex; flex-direction: column; }
|
|
58
|
+
</style>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### 4. Wrap the component in a full-height container
|
|
62
|
+
|
|
63
|
+
```tsx
|
|
64
|
+
<div style={{ height: '100vh' }}>
|
|
65
|
+
<GraphiQLExplorer config={config} />
|
|
66
|
+
</div>
|
|
67
|
+
```
|
|
68
|
+
|
|
10
69
|
## Install
|
|
11
70
|
|
|
12
71
|
```bash
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Configures Monaco Editor web workers. Must be called before any other
|
|
3
|
+
* imports in your app entry point (e.g. main.tsx / index.tsx).
|
|
4
|
+
*
|
|
5
|
+
* @example
|
|
6
|
+
* // main.tsx — must be the very first line
|
|
7
|
+
* import { setupMonacoWorkers } from 'stepzen-graphiql'
|
|
8
|
+
* setupMonacoWorkers()
|
|
9
|
+
*
|
|
10
|
+
* import { StrictMode } from 'react'
|
|
11
|
+
* ...
|
|
12
|
+
*/
|
|
13
|
+
export declare function setupMonacoWorkers(): void;
|