How would I go about making a framework agnostic typescript component library?

[grim tinsel]

so any guides you guys know of or something?

[broken moss]

That link is vanilla, not framework agnostic. If you don't like frameworks you should probably look into web components.

What are you trying to support? Why not write styles in something that doesn't rely on JS (like SASS) if you have lots of different stacks that you're trying to bring together?

Personally, I've found that the systems which try to support multiple frameworks are huge and inefficient.

[grim tinsel]

framework agnostic means that it doesnt depend on any framework which you can call vanilla, and i have no problem with frameworks i just want to make a library that anyone can use even if they use a newly made framework regardless if it isn't supported by default (example like the link i sent, highlightjs, gridjs etc)

also the library isnt just a styled component its a library that needs to use javascript otherwise it would defeat the purpose

Excuse my ignorance it's not purely vanilla as I plan to use highlightjs with it for codeblocks

[broken moss]

What's the use case? Is this some SaaS drop-in component? Is it a design system for a corporation with too many stacks? Is it an open-source widget that you want to be easy for people with different frameworks or no framework to drop in?

Is it a full component library like Chakra UI or is it a specific tool like Novu or Mapbox?

Knowing what you're trying to write is pretty important to knowing where you should begin.

[grim tinsel]

Open source component that people can easily drop in regardless if they use or not a framework

Not a full component library but only one component

[broken moss]

Ok. Novu is an example (though ugly) of writing a component with a framework and then adding it into a system without caring whether that system uses that framework.

What is it actually supposed to do and be? Why is it important that it shouldn't be tied to one framework? What does it need to talk to, and what information needs to be specified to use it, and where?

Does it have lots of bits of DOM that it moves around? Does it have videos? Why does it need to live on the client?

Who would want to drop it in to their project and why?

[grim tinsel]

dont really understand why this entire surgey is required since its really simple, the reason i want to make it a library is cuz I am already writing my own implementation, so why not extract it to a library

[grim tinsel]

so what are the steps i should do to intialize my project then?

[broken moss]

I am already writing my own implementation, so why not extract it to a library

aha, that's really useful
If possible, the best way is to open-source the whole project it's living in. That way, you don't have to do any extra work, and you can ask in the discussions for people to mention if they're interested in factoring out the widget into its own module. That's how academics usually do it.

Otherwise, you should look at writing it in a git submodule. If you're using node as a server or to run a compiler, you'll want to make sure that the folder with the package.json of the package you're building is a sibling of the package.json folder of the whole project. Otherwise, they'll interfere with each others' module resolution.

People will want a package available to try the component, which indicates using that approach, where you have a tsconfig.json and package.json for your main codebase and module. There's tutorials available (e.g. https://www.intricatecloud.io/2020/02/creating-a-simple-npm-library-to-use-in-and-out-of-the-browser/), but packaging is harder than it sounds at first. Even if nobody downloads your package, it's a fun and rewarding learning experience. I've only packaged for pip, though, so I can't vouch for that particular tutorial.

[grim tinsel]

so i simply have to npm init as usual but what about the packaging? i see it uses babel and also uses webpack

i am gonna close this thread and make a new one, this simply isnt really helpful for me