Skip to content

Commit ce7a88f

Browse files
trevor-scheertrevor-scheer
authored
Speed up monaco-graphql bundle assertion test (#4298)
## Summary - Replaces the `examples/monaco-graphql-react-vite` build target with a minimal fixture under `packages/monaco-graphql/__fixtures__/bundle-test/` that imports only `monaco-graphql`'s public API and wires graphql + json workers. No React, no example-app baggage, no TypeScript language support. - Replaces the previous `execa`-driven `yarn workspace ... build` shell-out with Vite's programmatic `build()` API. Drops `write: false`, `minify: false`, `target: 'esnext'`, `reportCompressedSize: false`, and `treeshake: false` since the assertion only cares about the chunk file list, not the bundle contents or size. - Adds an explicit negative regex assertion against `/typescript|tsMode|tsWorker|ts\.worker|cssMode|css\.worker|htmlMode|html\.worker/i`, so the test's intent ("don't bundle unwanted Monaco language modules") is readable from the assertion, not just the snapshot. - Removes the now-unused `execa` devDependency. - Local test runtime drops from ~8.5s to ~2.3s. CI runtime is ~32s, dominated by Rollup traversing monaco-editor's module graph; the new minimal-fixture surface and dropped transforms don't change that floor. Vitest timeout set to 60s (~28s headroom). ## Test plan - [x] Run `yarn workspace monaco-graphql test` and confirm both tests pass in under 5s locally. - [x] Confirm the snapshot lists only editor core, graphql, and json chunks (no TypeScript, CSS, or HTML language service modules). - [x] Sanity-check the negative assertion by manually adding a TypeScript worker import to the fixture, rerunning the test, and confirming it fails with the explicit message before reverting.
1 parent 76a5169 commit ce7a88f

6 files changed

Lines changed: 86 additions & 34 deletions

File tree

‎packages/monaco-graphql/__fixtures__/bundle-test/index.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
</head>
6+
<body>
7+
<script type="module" src="./index.ts"></script>
8+
</body>
9+
</html>

‎packages/monaco-graphql/__fixtures__/bundle-test/index.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker.js?worker';
2+
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker.js?worker';
3+
import GraphQLWorker from 'monaco-graphql/esm/graphql.worker.js?worker';
4+
import 'monaco-graphql';
5+
6+
globalThis.MonacoEnvironment = {
7+
getWorker(_workerId: string, label: string) {
8+
switch (label) {
9+
case 'json':
10+
return new JsonWorker();
11+
case 'graphql':
12+
return new GraphQLWorker();
13+
}
14+
return new EditorWorker();
15+
},
16+
};

‎packages/monaco-graphql/__tests__/monaco-editor.test.ts‎

Lines changed: 60 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,69 @@
11
import { describe, it, expect } from 'vitest';
2-
import { $ } from 'execa';
2+
import { build, type UserConfig } from 'vite';
3+
import path from 'node:path';
34

4-
// eslint-disable-next-line no-control-regex
5-
const ANSI_COLOR_REGEX = /\u001b\[\d+m/g;
6-
7-
const VOLATILE_LINE =
8-
/modules transformed|rendering chunks|computing gzip size|transforming|built in|building for production/;
5+
const FIXTURE_ROOT = path.resolve(
6+
import.meta.dirname,
7+
'../__fixtures__/bundle-test',
8+
);
99

1010
describe('monaco-editor', () => {
11-
it('should include in bundle only graphql/json languages', async () => {
12-
const { stdout } =
13-
await $`yarn workspace example-monaco-graphql-react-vite build`;
14-
// When process.env.CI is set, stdout contains ANSI color codes, and vite doesn't have
15-
// `--no-colors` flag
16-
const files = stdout
17-
.replaceAll(ANSI_COLOR_REGEX, '')
18-
.split('\n')
19-
.map(line => line.replaceAll(/\s{2,}.*/gm, '').trim())
20-
.filter(line => line && !VOLATILE_LINE.test(line));
11+
it('should not bundle Monaco language modules beyond graphql and json', async () => {
12+
const result = await build({
13+
root: FIXTURE_ROOT,
14+
logLevel: 'warn',
15+
build: {
16+
write: false,
17+
minify: false,
18+
target: 'esnext',
19+
reportCompressedSize: false,
20+
rollupOptions: {
21+
treeshake: false,
22+
output: {
23+
entryFileNames: '[name].js',
24+
chunkFileNames: 'assets/[name].js',
25+
assetFileNames: 'assets/[name].[ext]',
26+
},
27+
},
28+
},
29+
worker: {
30+
format: 'es',
31+
rollupOptions: {
32+
treeshake: false,
33+
output: {
34+
entryFileNames: 'workers/[name].js',
35+
chunkFileNames: 'workers/[name].js',
36+
},
37+
},
38+
},
39+
} satisfies UserConfig);
40+
41+
const mainOutput = Array.isArray(result) ? result[0] : result;
42+
const files = mainOutput.output.map(chunk => chunk.fileName).sort();
43+
44+
// Explicit negative assertion: importing monaco-graphql must not pull in
45+
// TypeScript, CSS, or HTML language services. A consumer who only wants
46+
// GraphQL + JSON should not be forced to ship them.
47+
for (const file of files) {
48+
expect(file).not.toMatch(
49+
/typescript|tsMode|tsWorker|ts\.worker|cssMode|css\.worker|htmlMode|html\.worker/i,
50+
);
51+
}
52+
2153
expect(files).toMatchInlineSnapshot(`
2254
[
23-
"dist/index.html",
24-
"dist/workers/graphql.js",
25-
"dist/assets/codicon.ttf",
26-
"dist/workers/standalone.js",
27-
"dist/workers/editor.worker.js",
28-
"dist/workers/json.worker.js",
29-
"dist/workers/graphql.worker.js",
30-
"dist/workers/ts.worker.js",
31-
"dist/assets/index.css",
32-
"dist/assets/graphql.js",
33-
"dist/assets/typescript.js",
34-
"dist/assets/index.js",
35-
"dist/assets/tsMode.js",
36-
"dist/assets/jsonMode.js",
37-
"dist/assets/graphqlMode.js",
38-
"dist/index.js",
55+
"assets/codicon.ttf",
56+
"assets/graphql.js",
57+
"assets/graphqlMode.js",
58+
"assets/index.css",
59+
"assets/jsonMode.js",
60+
"index.html",
61+
"index.js",
62+
"workers/editor.worker.js",
63+
"workers/graphql.js",
64+
"workers/graphql.worker.js",
65+
"workers/json.worker.js",
66+
"workers/standalone.js",
3967
]
4068
`);
4169
}, 60_000);

‎packages/monaco-graphql/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,6 @@
7676
"picomatch-browser": "^2.2.6"
7777
},
7878
"devDependencies": {
79-
"execa": "^7.1.1",
8079
"graphql": "^16.9.0",
8180
"monaco-editor": "0.52.2",
8281
"prettier": "3.3.2",

‎resources/custom-words.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -229,6 +229,7 @@ therox
229229
thomasheyenbrock
230230
timsuchanek
231231
tokenizes
232+
treeshake
232233
tsup
233234
turbopack
234235
typeahead

‎yarn.lock‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17112,7 +17112,6 @@ __metadata:
1711217112
version: 0.0.0-use.local
1711317113
resolution: "monaco-graphql@workspace:packages/monaco-graphql"
1711417114
dependencies:
17115-
execa: "npm:^7.1.1"
1711617115
graphql: "npm:^16.9.0"
1711717116
graphql-language-service: "npm:^5.5.1"
1711817117
monaco-editor: "npm:0.52.2"

0 commit comments

Comments
 (0)