Rollup / Vite integration

[braebo]

Hey there! Absolutely love this project!!

I was wondering if there was a story around integration with rollup / vite? Perhaps there is an example integration I could read over?

Anyways- thanks for this awesome project. It's a much needed addition to the native landscape!

[shirakaba]

Thank you!

Our webpack config is quite simple: https://github.com/nodegui/svelte-nodegui/blob/main/demo/webpack.config.js

I'm unfamiliar with Vite, but to port it to something like Rollup, I think the main thing that would be needed would be a Rollup equivalent of native-addon-loader (which I'm unfamiliar with). Beyond that, you'd pretty much just take the Svelte starter template (which uses Rollup) and fill in the differences.

Vite is famous for using esbuild under-the-hood, but I'm not sure how that works for Node environments (it is typically used in browser environments).

Contributions welcome!

[msyfls123]

I have tried to simply bundle svelte-nodegui App with Rollup and found it wouldn't be executed. There are several problems:

• *.node should be handled like native-addon-loader (maybe @rollup/plugin-url is qualified enough)
• nodegui itself has PostCSS and addon unknown QObject export bindings issues

So I just set @nodegui/nodegui as externals, and it could be left in node_modules without being bundled which make the Application succeed to be executed. 🤣🤣🤣

Here is my example project, hope it could inspire you.

[braebo]

Thanks @msyfls123! I will take a look!

@shirakaba As far as Vite goes, it's built on rollup and supports all rollup config options.

Sveltekit is built on Vite which is built on Rollup so it should be possible. Sveltekit builds for node by default with svelte-adapter-node. I believe it leverages ESBuild's native node bundling support.

As far as using .node addons in Rollup, I'm wondering if rollup-plugin-natives is what we would need?

[shirakaba]

So I just set @nodegui/nodegui as externals, and it could be left in node_modules without being bundled which make the Application succeed to be executed. 🤣🤣🤣

It's a valid workaround. I think I might have gave up and done the same with phin as well (it's a really awkward library). It may have consequences for when you come to package the final app, however, so let's try to get past it!

Sveltekit is built on Vite which is built on Rollup so it should be possible. Sveltekit builds for node by default with svelte-adapter-node. I believe it leverages ESBuild's native node bundling support.

Oh nice, sounds promising :)

As far as using .node addons in Rollup, I'm wondering if rollup-plugin-natives is what we would need?

That certainly looks like it might do the trick!

[enpitsuLin]

There is a simple way to use vite is use vite api.

Just build a script that uses the vite plugin which add logic during writeBundle to run the packaged product in qode.

I made a react-based template, vue and svelte also should be work : react-nodegui-vite-starter