UIBuilder/Svelte/TypeScript

First of all hello everyone and a big thank you to the UIBuilder team.
I am a "young" retiree :wink: and I coded my home automation application (knx) using Node-Red and Dashboard 1.
At the same time I discovered svelte/sveltekit and in my eyes as a beginner it is a superb framework, with clear syntax and easy to learn.
I love TypeScript because it's clearer to me when variables are typed.
I would like to start a new interface for my home automation with great freedom on the UI and I think that UIBuilder/Svelte/Node-red are the suitable tools.
I followed the UIBuilder tutorial for Svelte but which remains on JS.
I searched the web without much success.
If you have a tutorial for a UIBuilder/Svelte/TypeScript configuration....think of me.
thank you all and see you soon for reading.
Sorry for my English but this is a Google translation.
OldChap83

Hi, thanks for trying out UIBUILDER. I am "the team" for the most part with occasional most welcome contributions from others.

Unfortunately, I don't use TypeScript. I'm too old to want to learn another language and at the same type end up writing twice as many files and be forced to always have to have a build step.

I realise that there are benefits too but none that are sufficient to make up for the extra effort.

I already get many of the benefits of TypeScript simply by making good use of JSDoc, ESLINT and VSCode.

With that rant out of the way. :grinning: I think that I would first recommend that you work out how to use Svelte with TypeScript. If you can work that out, integrating with UIBUILDER should be easy. That's because UIBUILDER sticks as close as possible to web standards and it lets you easily integrate web development toolchains because part of it is simple web development.

Assuming you can work out where the "instance root" is for your uibuilder node, then just make sure you are using that folder for your development. This is, in fact, the essence of the Svelte examples in the documentation and the Svelte template. Svelte's toolchain is one of the few that plays nice with UIBUILDER and Node-RED with no real messing about. They did a really good job there.

If you have a uibuilder node and you gave it the name (url) "myweb", and if you have a very standard Node-RED install, then your instance root folder will be at ~/.node-red/uibuilder/myweb/ on the Node-RED server.

It should already be set up with a package.json file and so is ready to use and you can install any dev tools you need, in fact all the tools should already be defined in that file if you used the Svelte-basic template (though you might need to update them to the latest versions).

cd ~/.node-red/uibuilder/myweb/
npm install
npm update

You will just need to work out how to integrate the TypeScript build step into the Svelte build. Maybe some tutorials such as this one will help:

If you manage to do this, please consider taking notes along the way because I'd love to get a new entry on the WIKI or a new page into the docs so that others can benefit as well. :slight_smile:

Good evening Julian and thank you for your personal feedback.
I'm not very comfortable with all that yet but I love searching and trying to understand.
I promise you that if I have a correct solution I will submit it to you.
Thank you again
Yours sincerely

1 Like