Update Svelte Major Version to 4

[Ghrehh]

NOTE: This PR is split into 2 commits, one has a bunch of repetitive changes temporarily commenting out Svelte warnings, and the other contains the actual real changes.

Description

Main change

• Bumps the Svelte version in all relevant packages from 3.49.0 to 4.2.10 which at time of writing is the latest stable version, this was mostly painless but has a few run on effects.

Changes to packages/account-portal

There is a corresponding account portal change the should be merged first https://github.com/Budibase/account-portal/pull/530

Changes to packages/server

• The svelte/register function we previously used to render our client app templates was removed. The Svelte docs in general are a bit lacking on SSR stuff, and the recommended approach for Svelte 4 seems to be "use a bundler or Sveltekit". I opted to add a custom plugin for esbuild, which is the build tool we use for our backend projects, which manually calls the compile function Svelte exports. These changes are in scripts/build.js.
• This means that Svelte components can be directly imported into our backend code bases and are treated like JS.
• This means we no longer need to import the component at runtime like we did previously.
• These changes also mean that a Svelte file imported and rendered on the backend can itself import and use other Svelte components, which wasn't possible before.
• This does mean that that components and the Svelte runtime are bundled into the main js output, but at a glance this extra code makes no noticeable difference to size, it's at least as small a change as 100kb, but possibly much smaller, that's just how granular ls was when I checked.
• It'd also be pretty easy to handle our hbs files in a similar way to the Svelte files, and import them directly and include them in the bundle, currently we're also opening those files at run time.
• I made some general changes to the main scripts/build.js to make the js/hbs/svelte build process a little more async.
• I opted to remove the use of glob in the above files, because as far as I can tell it's only available for use as it's a dependency of a dependency, and isn't directly pinned anywhere. To avoid adding another dependency I opted to use fsPromises.opendir with the recursive flag which seems to fulfil the same task.

Hope this work all looks good, I appreciate that making changes to the build process is stepping on other team's toes a bit, so would appreciate any input🙏

Changes to packages/client

• The client package uses Rollup instead of Vite, and the client would trigger any onMount hooks unless we updated to the latest version of Vite which is from 2.44.0 -> 4.9.6. Were still using some deprecated Rollup plugins, but the client seems to function fine.

Changes to all frontend packages

• Svelte now loudly complains about a lack of accessibility considerations, like onclick events with no button events etc. I've a PR in the works that addresses some of this stuff, so I opted to just add comments to disable them all for now.

Ticket

https://linear.app/budibase/issue/BUDI-7995/update-svelte-to-latest-4x

[poirazis]

Sorry to bump in ! Will this require updating the custom components to Svelte 4 too ?

[aptkingston]

Sorry to bump in ! Will this require updating the custom components to Svelte 4 too ?

Hey! Custom components will automatically use the version of svelte that Budibase is using, so any custom components already built and being used inside apps will automatically start using version 4. This shouldn't cause any issues - there were no major changes. We will update the skeleton repository for plugins to ship with version 4 too.

You can absolutely update your own plugins to version 4 if you want, but it should only affect the build step as we don't bundle Svelte itself inside custom components.

TLDR: No need to make any changes, unless you want to! Everything should continue to work just fine.

[poirazis]

Thanks @aptkingston ! I will definetly rebuild all with v4 ! It offers 12% smaller build size they claim and faster performace ! Great job guys !