Open sapphi-red opened 2 years ago
Related to this issue, https://github.com/vitejs/vite/issues/9606 was closed with the reasoning:
Worklets are an experimental feature
Would it be possible to clarify what is meant by this? I don't think worklets are considered experimental in the spec and have very wide browser support. Does it mean Vite's support for them is experimental?
Also I'd be interested to know if there are any workarounds for TypeScript worklets with dependencies? I can't place "the processor JS code inside the public directory" as suggested in #9606 as they need to be transpiled and have their dependencies bundled.
Ok figured it out, I can do
import MyWorkletProcessorUrl from "./MyWorkletProcessor?worker&url";
...
await context.audioWorklet.addModule(MyWorkletProcessorUrl);
https://github.com/vitejs/vite/blob/main/docs/guide/features.md#import-with-query-suffixes
This does not work when you build a lib and have to inline the worklet into the bundle, e.g. using: ?worker&url&inline
. That results in the inlined code not being compiled as expected and with an mp2t mime type in case you use typescript as also mentioned in some other issues like #11823.
AudioWorklet has been supported since 2018 by Chrome and since early 2021 by Safari so I'm also surprised to find Vite still considers this to be an experimental API.
So far I have not found any way to get this working besides using another build tool or phase to prepare a JS bundle file for vite to consume which seems painfully cumbersome to me. Rewriting the worklet code into JS that can be imported and used raw, doesn't seem practical either. Could this be resolved using a plugin? So far I've only found vite-plugin-worker, but it's deprecated.
Shall I create a new issue for adding support for importing with ?worklet&inline
or ?audioworklet&inline
like we can already with ?worker&inline
?
Or could somebody please suggest a better workaround for me here? Thanks!
I'm currently working around this using the quickly hacked together plugin below in case anybody else is interested. Unfortunately emoji characters within my script don't get decoded to utf8 as expected on the other side; I'm still trying to figure out how to fix that.
function tsBundleUrlPlugin(): PluginOption {
let viteConfig: UserConfig;
return {
name: 'vite-plugin-ts-bundle-url',
apply: 'build',
enforce: 'post',
config(config) {
viteConfig = config;
},
async transform(_code, id) {
if (!id.endsWith('.ts?url')) {
return;
}
const quietLogger = createLogger();
quietLogger.info = () => undefined;
const output = await build({
...viteConfig,
configFile: false,
clearScreen: false,
customLogger: quietLogger,
build: {
...viteConfig.build,
lib: {
entry: id.replace('?url', ''),
name: '_',
formats: ['iife'],
},
write: false,
},
});
if (!(output instanceof Array)) {
throw new Error('Expected output to be Array');
}
const iife = output[0].output[0].code;
const encoded = Buffer.from(iife, 'utf8').toString('base64');
const transformed = `export default "data:text/javascript;base64,${encoded}";`;
// TODO: Fix this so emoji etc. get properly decoded from within audio worklet module added using this url
const relative = relativePath('.', id);
console.log(
`TypeScript bundle url: ${relative} (${transformed.length} bytes)`,
);
// eslint-disable-next-line consistent-return -- We need to return a string here and undefined above
return transformed;
},
};
}
For people looking for a workaround, this worked for me: https://github.com/vitejs/vite/issues/15431#issuecomment-1870052169
Ok figured it out, I can do
import MyWorkletProcessorUrl from "./MyWorkletProcessor?worker&url"; ... await context.audioWorklet.addModule(MyWorkletProcessorUrl);
https://github.com/vitejs/vite/blob/main/docs/guide/features.md#import-with-query-suffixes
This can temporarily solve my problem, but I don't think it's a good solution because, when I'm in development mode, '?url' can work, but once it's built, it doesn't meet expectations. '?worker&url' seems like a hacky way to use it.
Describe the bug
When the following conditions are met, it works with
vite dev
but it does not withvite preview
.foo.js
) contains aimport
foo.js
is imported byimport 'foo.js?url'
When running
vite preview
, the error below happened.It seems like files imported with
?url
are not bundled because./foo
does not exist indist
.Reproduction
https://stackblitz.com/edit/vitejs-vite-cdjop5?file=main.js
System Info
Used Package Manager
npm
Logs
Validations