How to author libraries for solid-start?

[KingSora]

Good day!

I've ported a library to solid-js and was using vite-plugin-solid without any configuration. It was brought to my attention that users are getting the following error when they try to use it with solid-start:

An unhandler error occured: TypeError: s.template is not a function.

The template function is coming from the solid-js/web import.

After some trial and error I've "fixed" it with some adjustments to the vite-plugin-solid config. I'm exposing a cjs and esm version of the component. Previously both of them was the same just with different module formats. With the "fix" I've configured the esm version like:

// vite.config.js
export default mergeConfig(base, {
  build: {
    lib: {
      formats: ['es'],
    },
  },
  plugins: [
    solidPlugin({
      solid: {
        generate: 'dom',
        hydratable: true,
      },
    }),
  ],
});

And the cjs version like:

// vite.config.js
export default mergeConfig(base, {
  build: {
    lib: {
      formats: ['cjs'],
    },
  },
  plugins: [
    solidPlugin({
      solid: {
        generate: 'ssr',
        hydratable: true,
      },
    }),
  ],
});

The cjs is the Server version and esm is the Client version. This also means that the cjs and esm differs not only in terms of module format but also in terms of code. Like this it works pretty well, but I am not very happy with that "fix" because I'm authoring one server and one client version and kinda exploit the fact that node will load the cjs version.

My question is now how is this supposed to be handled, is there a official way?

[atk]

You need an additional "solid" export with the JSX untranspiled so the framework can pick it up from there.

[KingSora]

@atk untranspiled jsx is not valid javascript thats why I would be a bit hesitant to do that an publish it.. Are you sure this is the only way to do that..? Does vite-plugin-solid provide an option like this?

[ryansolid]

We have multiple compilation configs so solid export is recommended look at the https://github.com/solidjs/solid-router package. There is also https://github.com/solidjs-community/rollup-preset-solid.

We haven't been able to get Vite to publish libraries the way we want so we still generally use rollup for libraries.

[KingSora]

@ryansolid thanks for the answer and reference

If understand rollup-preset-solid correctly it does everything what vite-plugin-solid does except that it has the ts plugin which generates the jsx file for the solid export in the package.json... am I correct?
If so, couldn't I just use vite-plugin-solid for the esm and cjs version and just run tsc (or copy the rollup plugin) for the solid export version?