4 ms·
Show HN: JSX-Htmx that doesn't conflict with react
Hey folks,
I've been tinkering with a TypeScript/JSX library that might interest some of you: jsx-htmx.
HTMX has been gaining traction lately for its simplicity and performance benefits in handling dynamic HTML content. However, as someone who values type safety and enjoys working with TypeScript, I found the existing options for integrating HTMX with TSX files to conflict with what I wanted to achieve.
So, I decided to roll up my sleeves and create jsx-htmx. With just a single line (`/* @jsxImportSource jsx-htmx */`) added to your TSX file, you can seamlessly blend HTMX into your TypeScript projects while maintaining type safety. I've also included types to ensure your components align with the HTMX API, providing an extra layer of confidence in your codebase.
```tsx
const Badge: SimpleCustomComponent = (props) => {
return <div class="component">{props.children}</div>;
};
```
I've been using jsx-htmx in a couple of production sites, and so far, the performance has been solid, with render times consistently in the low milliseconds range.
I'm eager to hear your thoughts and suggestions on how to improve jsx-htmx. Are there any specific features you'd like to see added? Any ideas for enhancing type safety or optimizing performance?
Looking forward to your feedback!
Cheers, M
- cranberryturkey 2y agoCheckout primatejs
- mrinc 2y agoThe whole point is I didn't want all the extra bloat and lock-ins that come with those types of libraries. I just want a simple fastify WS that can do HTMX with type safety. Add in react.email for emails and not break the rest of my app. ref: https://news.ycombinator.com/item?id=35156338 https://news.ycombinator.com/item?id=35156338
- cranberryturkey 2y agoyou misunderstand what primatejs is
- mrinc 2y agoI misunderstand yet you provide no further information on my supposed misunderstanding... -_- thanks From reading the docs: All code for an HTMX app would be in a view - a .htmx file. The .htmx file is then rendered as a templated view. 1) The files are .htmx ... they are not Typesafe. 2) I am forced to use a the webserver and formatting (files/dirs/paths) provided by primatejs. 3) The htmx files are not written in JSX - so typesafety is completely lost - it is the same as using any other templating engine at this point - as per their docs: "Client side templates to be used by the client-side-templates extension. Possible values: "handlebars", "mustache" and "nunjucks". Make sure you add "client-side-templates" to the extensions array option." So you write the code using a template renderer, I have been there done that. It works but you lose all type safety The lack of type-safety was the whole reason I did this.