QtLoader is deprecated in qt6.6.0

[Mesrine]

Hello everyone.

I was normally using QtLoader function from qtloader.js.
And then call loadEmscriptenModule .
With this, I could load several Qt applications on the same page, just setting the URL and the APP's name to load https://URL/APP.js and https://URL/APP.wasm.

But this API is deprecated in qt6.6.0.
Now the API is asking me about a entryFunction that if not given takes by default window.createQtAppInstance defined in APP.js file.

But this function has hardcoded the name of the APP.wasm to be downloaded and loaded by the module.

Does anyone know how to load a qt wasm application from the internet, like setting the path of wasmBinaryFile to https://URL/APP.wasm.

Or, how to load several Qt applications on the same page.

Many thanks for your time.

[lorn.potter]

@Mesrine There are new instructions for using qtloader
https://doc-snapshots.qt.io/qt6-6.6/wasm.html#using-qtloader

Hope this helps!

[Mesrine]

@lorn-potter Many thanks.
But that does not help.

with the previous API I could do

qtLoader = QtLoader({
		path: wasm_url,
               canvasElements : [canvas],
		...
               });
qtLoader.loadEmscriptenModule(app_name);

So I could set the different canvases for different qt applications, and download qt applications from the web by just setting wasm_url and app_name.

But now with the new API I presume(If I manage to make it work) there will be a name clash with the window.createQtAppInstance function.

But this is more a problem of my poor javascript knowledge :) than a Qt API problem.

[Mesrine]

@Mesrine This is fixed in qt6.7.0 .
Now instead of createQtAppInstance function it is called App_entry. Where App is the name of the Qt application.
Maybe my javascript is not so bad :).

[Karmo]

Hi! I'm having the same issue that the wasm binary is not in the same path as the html file. In Qt 5.15 I used to modify the loadEmscriptenModule line:

qtLoader.loadEmscriptenModule("/path/to/app_binary");

Could you give me a code example of how it should be done in the latest Qt? I'm not sure how to correctly modify the new createQtAppInstance.

[Karmo]

Ok, after some trial and error I managed to figure it out how to get it to work like I need. Basically, in the html file, look for the line:

entryFunction: window.createQtAppInstance,

and replace it with:

entryFunction: (config) => {
  config['locateFile'] = (path, scriptDirectory) => scriptDirectory + path;
  window.createQtAppInstance(config);
},

What this does, is it restores the default behavior of app_name.js locateFile which is to load the .wasm file from the same directory as the app_name.js script file directory. Why I am saying "restores" is because the following code in qtloader.js seems to override the locateFile to ignore the second scriptDirectory argument:

config.locateFile = filename =>
{
    const originalLocatedFilename = originalLocateFile ? originalLocateFile(filename) : filename;
    if (originalLocatedFilename.startsWith('libQt6'))
        return `${config.qt.qtdir}/lib/${originalLocatedFilename}`;
    return originalLocatedFilename;
}

Is that an intentional behavior change @lorn-potter or a bug? Note the app_name.js calls the function as:

if (Module['locateFile']) {
  return Module['locateFile'](path, scriptDirectory);
}
return scriptDirectory + path;

So it now the qtloader.js override silently discards the second scriptDirectory argument which means while in older Qt the wasm binary was loaded from the same directory as app_name.js script, now newer Qt loads it from the directory where the html file is located.

EDIT: For a completely custom directory, one could replace the config['locateFile'] = (path, scriptDirectory) => scriptDirectory + path; in my example with any other path. In my previous post I said I want to load the binary from "/path/to/app_binary" but for me the app_name.js was in the same directory next to the binary, so the scriptDirectory + path; worked for me as well.

EDIT2: Sorry, if I look my older html files, seems I misremembered. By default, older Qt also loaded the wasm binary from next to the html file, so I guess the current behavior is correct. It just used to be easier to change the directory.

[Elliot Dunk]

If you want to fetch your wasm file from a server using the new Qt 6.6 qt loader api you can do it like this:

const wasmPromise = WebAssembly.compileStreaming(fetch(url));
                const instance = await qtLoad({
                    qt: {
                        onLoaded: () => {
                            loadingScreen.style.display = "none";
                        },
                        onExit: exitData =>
                        {
                            console.log(exitData);
                        },
                        entryFunction: window.createQtAppInstance,
                        containerElements: [mainScreen],
                        module: wasmPromise,
                        
                    }
                });