Preact

[jasonhilldm]

Love this tool. It would be awesome to have Preact as one of the UI frameworks.

[magne4000]

From @rhildred #423

Would you please add preact to bati?

I am writing microfrontends using fastapi and plain javascript for the custom element. I would prefer to have a fullstack typescript solution that I can serve from cloudflare pages. I would like to use preact-custom-element and hono for the microservice.

I got most of the way there with brillout/vike-preact. I was super excited because I could use vike and mdx for my api documentation by just hacking the demo a little. Unfortunately i failed when i tried to add hono in and ran out of time.

I think that microfrontends are a great application for vike. Vike is great for the documentation and cloudflare/hono is great for backends like stripe/square .... I feel that i will have more cycles in a few weeks to get it working. If you would please get preact in bati, I could move on to the preact-custom-element piece.

[magne4000]

Complete preact support is not a high priority on Vike's/Bati's radar right now. Supporting it inside Bati is not as simple as replacing vike-react with vike-preact sadly.
PR are welcome to bring support to it though.

[rhildred]

Yes, I know that it isn't as simple as that. I tried and failed, starting with brillout/vike-preact. Right now I am thinking I will write my custom element in tsx and add something like this:

const CompileServiceWorker = () => ({
  name: 'compile-service-worker',
  async writeBundle(_options, _outputBundle) {
    const inputOptions = {
      input: 'src/sw.js',
      plugins: [
        json(),
        replace({
          'process.env.NODE_ENV': JSON.stringify('production'),
          preventAssignment: true,
        }),
        nodeResolve(),
      ],
    };
    const outputOptions = {
      file: 'dist/client/sw.js',
      format: 'es',
    };
    const bundle = await rollup(inputOptions);
    await bundle.write(outputOptions);
    await bundle.close();
  },
});

export default {
  plugins: [
    CompileServiceWorker(),

still full stack typescript ... am I right?