Configuring jsx in addRenderer

[dusty jungle]

I'm working on a custom astro integration for a lesser known framework (hyperapp). The client and server renderers are working and now I'd like to add jsx support.

Hyperapp gets jsx-compatibility from the package hyperapp-jsx-pragma . The default export from it can be set as the jsx-pragma with a magic comment //@jsx h. Here is a full working example of this:

https://stackblitz.com/edit/stackblitz-starters-c3soab?file=astrojs-hyperapp%2Frenderer-client.js,astrojs-hyperapp%2Frenderer-server.js,astrojs-hyperapp%2Findex.js,src%2Fcomponents%2Fcounter.jsx

I'd prefer to use the new "automatic" form of jsx processing so I don't have to import anything in my components. hyperapp-jsx-pragma/jsx-runtime exports jsx and jsxs functions to do just this. So I tried configuring my integration this way:

export default () => ({
  name: 'hyperapp',
  hooks: {
    'astro:config:setup': ({ addRenderer }) => {
      addRenderer({
        name: 'hyperapp',
        clientEntrypoint: './astrojs-hyperapp/renderer-client.js',
        serverEntrypoint: './astrojs-hyperapp/renderer-server.js',
        jsxImportSource: 'hyperapp-jsx-pragma/jsx-runtime',
      });
    },
  },
});

...but it simply does not work. npm run dev task fails with console output that React is not defined (trying to use React.createElement for my jsx apparently)

How do I use jsxImportSource or alternatively jsxTransformOptions to explain to astro, that when using my hyperapp renderer, it should use 'hyperapp-jsx-pragma' to process jsx files?

EDIT: After playing around with the jsxImportSource and jsxTransformOptions options a bit, I'm starting to get the feeling that they are being completely ignored, and that somewhere else, the assumption is made that jsx should be parsed with React.createElement.

[plain fable]

Quiet in here?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.

[dusty jungle]

I did finally get it to work - but using updateConfig alongside addRenderer . Seems now I can't enable the react integration alongside my own. So I'm still probably not doing this quite the right way. Pointers would be much appreciated.

export default () => ({
  name: 'hyperapp',
  hooks: {
    'astro:config:setup': ({ addRenderer, updateConfig }) => {
      updateConfig({
        vite: {
          esbuild: {
            jsxFactory: '_jsx',
            jsxInject: 'import _jsx from "hyperapp-jsx-pragma"',
          },
        },
      });
      addRenderer({
        name: 'hyperapp',
        clientEntrypoint: './astrojs-hyperapp/renderer-client.js',
        serverEntrypoint: './astrojs-hyperapp/renderer-server.js',
      });
    },
  },
});