feat: Add Svelte to project

[phated]

This adds Svelte to the project and sets it up within the testing harness. I also converted the Quasar icon to a Svelte component and wrote some tests for it to show how we should go about the conversions!

I think it's best to write tests for the new Svelte components since we need to convert everything before we will actually wire them up and we want to know they are working correctly.

Note that we are using (you'll probably need to look up various APIs to write good tests):

1. https://vitest.dev/guide/ to run the tests
2. https://testing-library.com/docs/svelte-testing-library/intro to mount and query against Svelte components

And you can find some other helpful tips at https://sveltesociety.dev/recipes/testing-and-debugging/unit-testing-svelte-component (though some of the advice might be out-of-date because it seems $set might be frowned upon???)

[cha0sg0d]

@phated is there a way to test these more generically? ie, I just pass in the name of the icon and the it does the three following tests?

In that same vein, I noticed that Icons.tsx has a bunch of the same code that just differs in name, image source, and alt text. Is there any way to reduce boilerplate here or better to hardcode.

As an example, I'm thinking like:

function buildIcon(name: string, imgPath: string): JSX.element

and we'd just pass in the name and url of the icon. lmk!

[phated]

is there a way to test these more generically? ie, I just pass in the name of the icon and the it does the three following tests?

Since the tests are just TS, you could easily write a helper function to produce a "suite":

function suite(iconName: string) {
   // ...test stuff here but use iconName where you need it!
}

In that same vein, I noticed that Icons.tsx has a bunch of the same code that just differs in name, image source, and alt text. Is there any way to reduce boilerplate here or better to hardcode.

I think that is a great idea and I even did it for a lot of the other icons in the project as part of the ui package. I'm torn on how much "improvement" to do vs refactor during the changes. 🤔

[cha0sg0d]

I agree we don't want to refactor too much. But the more we refactor UI, the fewer components we have to port to Svelte 🤷

[phated]

Moving this to draft since it never was approved and merged and I want to use it as the branch to push refactored code