Flowbite Svelte + Flowbite Svelte But Better

[zoltanszogyenyi]

Hey @edde746 and @shinokada,

I couldn't reach out otherwise so I'm just opening the issue. I'm one of the founders of Flowbite and thanks for your contribution to creating another Svelte library. It's quite impressive!

I think it would be a good idea to objectively compare the two libraries and settle for a version or merge before an alpha release. We could use this thread for the discussion. @shinokada has been one of the first devs to start a Svelte integration and I've talked with him that we should mention it in the main library.

I myself am not a Svelte dev, however, I've worked with React before. In my mind it would be nice if the Svelte community joined forces and contributed to one single repository, this way, the community would benefit a whole lot more.

As one of the core devs from Flowbite I would be more than happy to help out in this process!

As a good example, the React community has joined up very nicely and there are a lot of devs actively working and maintaining the repository and from my knowledge are very close to an alpha release.

That being said, here are the things that I would definitely upgrade for the current Flowbite Svelte library:

• use the main library documentation layout for better readability, marketing, SEO, and overall UI/UX (just copy the main docs layout)
• instead of passing an array of data to a component I would prefer to manually create more components and be able to add other elements as well (a good example is the comparison of the dropdown components from the two libraries)

Flowbite Svelte: https://flowbite-svelte.com/dropdowns/default

I think that the problem arises when I want to:

• customize the dropdown item
• add custom Tailwind CSS classes to the dropdown item
• add attributes to the anchor tag
• it's another layer of complexity by forcing the user to use a certain data set

Flowbite Svelte BB: https://flowbite-svelte-but-better.vercel.app/dropdown

This is quite a bit nicer because I can customize the component however I want and the code is cleaner frankly. It's also not forcing the developer into using a certain dataset.

In other areas, such as the badge component there are not that many differences:

https://flowbite-svelte.com/badges/default https://flowbite-svelte-but-better.vercel.app/badges

What I propose is to update the main Flowbite Svelte repository based on some of the improvements and @edde746 , I'm sure that these changes would be more than welcome by everyone!

The main reason would be that:

• it's already installed by thousands of devs
• it has been the presented Svelte library of Flowbite for quite some time
• there is no alpha release yet so we can make breaking changes (although painful)
• keeping around two libraries is worse than having a single one with more people contributing to it

Please keep it a positive discussion, we're all here to provide value to the open-source community ❤️

[edde746]

Hello, the main reason to make this separate repo and package is due to the clutter and bad code practices of flowbite-svelte, it was simpler to just port over the flowbite-react to svelte from scratch than fixing the already existing code.

[zoltanszogyenyi]

Hey @edde746,

Thanks for the comment. Could you make a list of bad code practices that you would change for the current Flowbite Svelte library? As I've said, I think that rather than keeping two libraries parallel it would be more beneficial to adopt a single one.

I believe that dialogue together with @shinokada would be helpful.

Thanks!

[edde746]

• Global styles on the demo page interfering with examples
• Splitting the same component into multiple different ones... Another one
• Repeating classes... everywhere
• Global stores are used which limits you to one instance of the component per page... Another one
• Doesn't use popper, sure, it might actually be a better and more performant way to do dropdowns & tooltips, but it's not consistent with flowbite.js and flowbite-react.

The entire demo page looks bad, it does not look anything like the flowbite-react page or the official flowbite page.

[shinokada]

Thank you for pointing out the shortcomings.

I think the library is still at the early stage and there are more to fix. It will be nice that the community can help to grow.

1. Global styles: Should we have another repo for a demo?
2. Repeating classes: need to be factorized or use a library. But we need to discuss about dependencies. Since Svelte is able to do so much, should we use dependencies?
3. Global stores can change to other methods.
4. Regarding the demo page, why Flowbite-Svelte needs to be the same looks like Flowbite-React or Flowbite?

[zoltanszogyenyi]

@shinokada I've stated previously as well, the presentation of Flowbite Svelte needs to be changed and improved and the best way to do it is to use the same layout as from the main docs.

This will help in terms of usability, general UI/UX, SEO, marketing, and more.

As much as I appreciate the code work that you've put into the current library, the presentation has to get up to the standard of the main version which was designed by professional UI/UX designers.

Just my 2 cents.

[shinokada]

@zoltanszogyenyi Sure. I need help to make it similar to Flowbite.com.