Question; can Vue and Angular be built as well?

[Zonalds]

Hi,

Forgive what is probably an ignorant question. Can't find the QA site.

I am completely new to this.. I'd love to know if this can also be used to build Vue & Angular components or if it is exclusive to react.

[moishinetzer]

Hey Zonalds, and thanks for reaching out! I've just finished doing some research and here is what I think:

Supporting other Frameworks

PBandJ addresses the issue of creating and publishing component frameworks for React. Naturally, the continuation of this would be to expand PBandJ to be framework-agnostic. I think this makes sense and is a good idea but it has some technical challenges to be addressed:

Is it possible?

I don't think the solution lies in a way of making the project "framework-agnostic" given there are too many moving parts that would need custom configuration across the board. For example, Storybook and Vite might need two separate plugins and integrations to get support for another framework.

This leads me to think the way forward is expanding the CLI and making a bunch of templates that override the base defaults. Along with this, the CI/CD pipeline would need to expand as such, having separate workflows for each framework supported, making sure any new tools added don't cause regressions across any of the frameworks.

For example, the CLI would copy the relevant framework folder to the root directory:

.
├── package.json
├── tsconfig.json
├── .github
├── .changeset
└── framework
    ├── react
    │   ├── lib
    │   │   └── Button.tsx
    │   │
    │   └── stories
    │       └── Button.stories.ts
    └── vue
        ├── lib
        │   └── Button.vue
        │
        └── stories
            └── Button.stories.ts

The Approach

After researching some other frameworks I think there are two different types of frameworks out there. I'm not sure how to classify them but I'm going to use Vue and Angular and contrast them as the two different types. (I haven't used either of these technologies so forgive me if I'm wrong)

Vue seems to be easily bundled using either Vite or a handy esbuild plugin. This is useful because tsup is built on top of esbuild and will work just fine with a plugin for any given framework that has an esbuild plugin.

Angular on the other hand, requires a separate build tool ng build. This brings into question the bundler used in PBandJ as well. Should tsup be swapped out where appropriate? After all, it's just a script in the package.json so it would be easy enough. I think it would complicate the project too much and makes me suspect to support frameworks that require this.

Conclusion

Ultimately, it seems very viable and possible to do so but it is going to require some help and deeper thought. I see a world where Vue, Svelte, SolidJs and many others are supported but I'm not sure how we get there. My initial thought is to get one of them working. I would approach Vue first given its documentation and tooling is great with first-class Vite support. But there will need to be serious changes to the CLI.

I would love to hear your thoughts and perhaps implementation suggestions? I'm going to need all the help I can get for this!

[Zonalds]

Thank you very much @moishinetzer

I think expanding it to include other frameworks is a great idea but I am not sure if we are just an edge case or others might have need for it. When I build component libraries I often build for just React. Our need for other frameworks was because our users need embed the component on their app and that could be React, Angular, SolidJs or Vue. So at the moment, I have the React build and got it working on other platforms using iframe. Works fine for us but I can imagine this only be OK if you are looking to embed the component.

It seems like a huge amount of work but I think the structure you laid out above is intuitive, simple and easy. With the CLI you can add --framework flags like react, angular and you have a starter in that framework initialised.

I took a look at some multi-framework component repos out their like https://github.com/novuhq/novu and a couple others and it seems they have it glued up with Turporepo and other similar packages.