Hey! I’m not a JS dev so I’m trying to ensure that native bindings I create work with a webview just through debugging in the webview console. – however it appears that we can only call native functions if we load the JUCE index js file.
Is there a reason that some shims can be injected and some need to be loaded manual? window.JUCE.getNativeFuction() is what I reached for but it appears that there are two separate JUCE JS libs?
There is one JUCE lib, but it has two layers. Only the low level layer is being injected prior to loading a page.
There is check_native_interop.js which is equivalent to what’s being injected. And there is the higher level index.js which also imports the lower level .js module.
The idea is that injecting code is more fragile (there are some workarounds on Android) as a technique, and the code injected is sometimes harder to inspect, modify or debug. So we want to inject the minimum amount of code that we have to, in order to make the native integrations work.
Everything else should be explicitly imported, because this way we aren’t littering the JS namespace with anything that the web developer doesn’t need. The imported code is also visible in the dev tools, so you can always jump to definitions inside them. They are also much easier to modify and iterate on.
You can still repeat the same code that you find in index.js so the code below would call a native function without index.js loaded. But for the higher level functions, yes, you do need the import.
window.__JUCE__.backend.emitEvent("__juce__invoke", {
name: "someNativeFunction",
params: [],
resultId: 1,
});
Thanks Attila! That’s super helpful – I just got it working.
I would argue that the getNativeFunction makes sense in the shim – I’m including the frontend binding classes but all I need access to is that! Was very useful to see how it’s working though. Thanks!
