S
SolidJS2mo ago
Goulven

How do I build my component?

Hi guys 👋 I'm a bit confused about how I could build a SolidJS component into JS that I could publish on NPM, and that my users could integrate on their website. 1. I can't find any info about that on the documentation. 2. I tried to make my own RollUp config (with babel-preset-solid) without success. 3. I tried rollup-preset-solid but it's not updated anymore and it don't work. (the result use external import like [...] from 'solid-js/web';) Honestly, I am a bit disappointed that something as fundamental as building for the web is neither documented nor straightforward. Is SolidJS not meant to be used for component libraries? Are we supposed to only use the turnkey solutions provided in the documentation? Thank you for your help and feedback.
18 Replies
REEEEE
REEEEE2mo ago
You can take a look at examples like Kobalte and Corvu that are component libraries
jer3m01
jer3m012mo ago
This might be easier to look at than Corvu and Kobalte https://github.com/hope-ui/hope-ui/tree/main/packages/solid
GitHub
hope-ui/packages/solid at main · hope-ui/hope-ui
🤞 The SolidJS component library you've hoped for. Contribute to hope-ui/hope-ui development by creating an account on GitHub.
Goulven
Goulven2mo ago
Hum, thanks @REEEEE @jer3m01 , I'll look into that. But I have to admit that it surprise me a little bit that I have to take a look at librairies's complex repository from others orgs, that use different bundlers than me... Just for something as simple as building for the web? For comparison, here is the procedure on Preact, which I used before switching to SolidJS: my-app/tsconfig.json
{
"compilerOptions": {
"skipLibCheck": true,
"module": "NodeNext",
"jsx": "react-jsx",
"jsxImportSource": "preact",
}
}
{
"compilerOptions": {
"skipLibCheck": true,
"module": "NodeNext",
"jsx": "react-jsx",
"jsxImportSource": "preact",
}
}
And then run tsc for TypeScript to compile. Even though the process is not as straightforward on SolidJS, I think it still deserves to be bundler-agnostic and to be documented somewhere...
jer3m01
jer3m012mo ago
Solid requires a custom compilation step, but you are correct the libraries above are complex. If you want something simpler https://github.com/solidjs-community/solid-lib-starter
GitHub
GitHub - solidjs-community/solid-lib-starter: SolidJS library start...
SolidJS library starter template. Use it to create your own solid package. - solidjs-community/solid-lib-starter
Goulven
Goulven2mo ago
I tried to create my own configuration from this starter example. However, I was not able to translate the tsup/esbuild configs from this repo into a working rollup config... but I will continue my attempts.
jer3m01
jer3m012mo ago
GitHub
GitHub - solidjs-community/rollup-preset-solid: A small opinionated...
A small opinionated preset for rollup to bundle your solid libraries with rollup. - solidjs-community/rollup-preset-solid
jer3m01
jer3m012mo ago
Although I would recommend vite (built on top of rollup)
Goulven
Goulven2mo ago
As I said in my first message :
I tried rollup-preset-solid but it's not updated anymore and it don't work. (the result use external import like [...] from 'solid-js/web';)
jer3m01
jer3m012mo ago
What do you mean external import? solid-js/web is part of solid
Goulven
Goulven2mo ago
Vite devs don't recommend to use Vite for building libs. And anyway, I still thinks this should be documented and/or bundler-agnostic. If it's not the scope of SolidJS I can understand, but I'll have to come back to Preact. My goal is to build a component that I can publish on NPM, so my users can easily import it into their website. I can't asume that they will use it at compile time (they could just put it in a <script> tag) not that they use Solid themself.
jer3m01
jer3m012mo ago
True, I personally prefer tsup for building libs and we currently use rollup for Kobalte. I'm not sure I understand correctly
this should be documented and/or bundler-agnostic
If you want your library to be useable without importing Solid, you're not making a library you're making an app
Goulven
Goulven2mo ago
Yeah, you can say that. But it doesn't change much about my problem, I still need to output an "App" (my component) as a js files that can be add to any website. Even not at compile time, and even if this website don't use SolidJS. (I said lib because I was thinking as a "NPM lib" not a "SolidJS lib") (Sorry if it was confusing)
jer3m01
jer3m012mo ago
You can use plugins such as https://www.npmjs.com/package/@rollup/plugin-node-resolve to include node modules into your dist
npm
@rollup/plugin-node-resolve
Locate and bundle third-party dependencies in node_modules. Latest version: 15.2.3, last published: 6 months ago. Start using @rollup/plugin-node-resolve in your project by running npm i @rollup/plugin-node-resolve. There are 3225 other projects in the npm registry using @rollup/plugin-node-resolve.
Goulven
Goulven2mo ago
I'll give it a try, thanks!
mrVinicius
mrVinicius2mo ago
isn't this a usecase for web components?
Goulven
Goulven2mo ago
You can do it with WebComponents, but it was complex enough that using a framework should have help.
mrVinicius
mrVinicius2mo ago
This might be what you're looking for then: https://www.npmjs.com/package/solid-element
npm
solid-element
Webcomponents wrapper for Solid. Latest version: 1.8.0, last published: 7 months ago. Start using solid-element in your project by running npm i solid-element. There are 98 other projects in the npm registry using solid-element.
mrVinicius
mrVinicius2mo ago
Medium
Porting an app to SolidJS using Web Components
My team is currently busy rewriting our application, away from an unmaintained “compile to JS” framework (thanks Google). Our plan is to…
Want results from more Discord servers?
Add your server
More Posts
Practice of handling application globals in Solid(Start) symmetrically across client and server?Example: In the CSR-only days it was idiomatic to store context value as a module-global value: `Ideal way to load settings/configsSuppose I have a bunch of settings like user preferences (dark mode), or configs which I load using How to call `useNavigate` outside of routerI am trying to create my own "page viewer" where I will be able to navigate between pages within theHydration Mismatch Error Every Time I Update a ComponentI am rewriting an OAuth2 service for one of my apps in SolidStart. I keep getting this error every tHow can I synchronize two stores without running into an infinite loop?The following code triggers an infinite loop: ```ts const [store1, setStore1] = createStore({a: 1, What is the most idiomatic way of disabling an effect after a condition is met?Is it possible to disable an effect after some condition is met or should I just use an early returnpage refresh taking alot of time or may be not loadingI'm new to Solid.js, and I'm facing a problem with browser refreshing. When I make changes to my proGetting `Error | Uncaught Client Exception` without any errors in the consoleRecently, I'm seeing `Error | Uncaught Client Exception` in my browser when navigating to a new pageTypeError: useContext is not a function or its return value is not iterableI create a model component for reuse. I got "TypeError: useContext is not a function or its return vBuild process with solidstartHi I'm looking into using solidjs with SolidStart primarily for its build process. However, I have