fix production usage with bundlers (fix #14, fix #15)

[undefined-moe]

Using the original way, the resource was imported into whatever resource bundle, meaning that the url contains not only the requested worker, but lots of other modules (vite dev mode don't perform a bundle action so it works like magic in dev but broke in production).
Need to use a way to tell bundlers that it needs to be a seperate chunk and it runs in a worker environment (otherwise some bundlers might inject some dependency management stuff using non-exist document variable)
Luckily most bundlers understand new Worker(new URL(src, import.meta.url)) syntax:

• https://vite.dev/guide/features.html#web-workers
• https://webpack.js.org/guides/web-workers/
• https://parceljs.org/languages/javascript/#web-workers

Integration on esm.sh might need to be tested as I don't know how it processes those code

[undefined-moe]

also might be helpful for #10

[ije]

for esm.sh, change worker.js to worker.mjs

// for esm.sh
new Worker(new URL("./worker.mjs", import.meta.url), { type: "module"})

[ije]

does this work in nextjs with turbopack?

[undefined-moe]

• [turbopack] [webworker] After import webworker, can not execute webworker script vercel/turborepo#3643 (comment)

Seems turbopack will, or already supports this.

• [turbopack] [webworker] After import webworker, can not execute webworker script vercel/turborepo#3643 (comment)

And I can't see any message indicating web workers not supported in turbopack docs so i guess it's already fixed

[undefined-moe]

for esm.sh, change worker.js to worker.mjs

// for esm.sh
new Worker(new URL("./worker.mjs", import.meta.url), { type: "module"})

This actully breaks bundler (mjs file doesn't exist)
The fix is to use new Worker(new URL(eval("./worker.mjs"), import.meta.url), { type: "module" }) which throws a compile warning but works; wonder if there's better way to do it (maybe ?format=mjs in querystring?)

[ije]

just check if the import.meta.url is from esm.sh:

if (new URL(import.meta.url).hostname === "esm.sh") {
  return new Worker(new URL("./worker.mjs", import.meta.url), { type: "module"})
}
return new Worker(new URL("./worker.js", import.meta.url), { type: "module"})

[undefined-moe]

No it's a compile time error, not runtime
Bundler will try to locate this file, add it to dist, find it not there, and throw an error

[undefined-moe]

that eval is to make the path dynamic, and then bundlers will skip to process this file and throw 2 warnings (eval usage, unhandled dynamic import)

[ije]

if (new URL(import.meta.url).hostname === "esm.sh") {
  const workerUrl = new URL("./worker.mjs", import.meta.url).href
  return new Worker(workerUrl, { type: "module"})
}

does dynamic worker url work?

[undefined-moe]

bundlers also handle new URL(string, import.meta.url) as it's a common way to load raw assets so bundlers will copy the original resource as-is to dist folder, the file still needs to be present

src = new URL("./icon.txt", import.meta.url)
req = await fetch(src)
content = await req.text()

[undefined-moe]

Guess it will work now

[ije]

thanks!

[ije]

@undefined-moe i just released the changes, now neither dev nor prod build works in vite😭

[undefined-moe]

modern-monaco/src/lsp/css/setup.ts

Lines 48 to 55 in 6996826

	const workerUrl: URL = new URL("./worker.mjs", import.meta.url);
	// create a blob url for cross-origin workers if the url is not same-origin
	if (workerUrl.origin !== location.origin) {
	return new Worker(
	URL.createObjectURL(new Blob([`import "${workerUrl.href}"`], { type: "application/javascript" })),
	{ type: "module" },
	);
	}

No you can't do this, it must be new Worker(new URL(path, import.meta.url), options), in the same line, otherwise bundlers will not process this reference, and it trys to load non-exist worker scripts

[ije]

it never reach the cross-origin condition in vite env, the new Worker(new URL(path, import.meta.url), options) return a non-existent js:

[ije]

anyway, i will fix it in #27

[undefined-moe]

That resource was inlined, thus workerUrl.origin is null

bundlers also handle new URL(string, import.meta.url) as it's a common way to load raw assets so bundlers will copy the original resource as-is to dist folder, the file still needs to be present

src = new URL("./icon.txt", import.meta.url)
req = await fetch(src)
content = await req.text()

[ije]

Shhhh! Any idea for fixing the cross-origin worker from CDN?

[undefined-moe]

Not very sure. What's blocking it from loading from another origin?

[ije]

i removed the cross-origin condition, new Worker(new URL(path, import.meta.url), options) still doesn't work in vite development mode, however the prod build works fine

npm i https://pkg.pr.new/esm-dev/modern-monaco@d5a7c7c

[undefined-moe]

just need to add it to optimizeDeps.exclude in vite.config.ts and everything should work

[ije]

ideally we don't need the extra optimizeDeps.exclude option. besides that, why do development and production builds behave differently?

[undefined-moe]

Vite doesn't bundle inputs when starting dev server. Instead, it transforms code once requested (pretty similar to what esm.sh does), using module support built into the browser (and that's why it's dev server is super fast compared to other ones), which works pretty well under most scenarios.

And that inconsistency is the issue so they are planning to switch to full bundle mode in the future

https://vite.dev/guide/rolldown.html#why-introducing-a-full-bundle-mode