SolidJS•9mo ago

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•9mo ago

You can take a look at examples like Kobalte and Corvu that are component libraries

jer3m01•9mo 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.

GoulvenOP•9mo 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•9mo 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

GoulvenOP•9mo 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•9mo ago

We have a preset for rollup https://github.com/solidjs-community/rollup-preset-solid

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•9mo ago

Although I would recommend vite (built on top of rollup)

GoulvenOP•9mo 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•9mo ago

What do you mean external import? solid-js/web is part of solid

GoulvenOP•9mo 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•9mo 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

GoulvenOP•9mo 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•9mo 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.

GoulvenOP•9mo ago

I'll give it a try, thanks!

mrVinicius•9mo ago

isn't this a usecase for web components?

GoulvenOP•8mo ago

You can do it with WebComponents, but it was complex enough that using a framework should have help.

mrVinicius•8mo 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•8mo ago

https://medium.com/@raymondboswel/porting-an-app-to-solidjs-using-web-components-2ad76a0e8360

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…

Gaming

Programming

How do I build my component?