First you need your JSX components transpiled and bundled at dist/templates.js. Check out my example repo on how to get it done here
Using it by side with htmx-json-attribute, one can do this:
<meta name='htmx-config' content='{"selfRequestsOnly":false}'>
<script src='https://unpkg.com/[email protected]'></script>
<script src='json-attribute.js'></script>
<script src='jsx-template.js'></script>
<div
hx-post='https://api.hive.blog'
hx-trigger='load'
hx-swap='outerHTML'
hx-target='div'
hx-ext='json-attr, jsx-template'
hx-json='{
"jsonrpc": "2.0",
"method": "condenser_api.get_blog_entries",
"params": ["numasi", 0, 10],
"id": 1
}'
hx-template='BlogEntries'
></div>
It depends on JSX components transpiled with kita-js HTML string generation funcition in place of React's classic createElement. The extension looks for this bundle at file dist/template.js, importing all the components from there upon initaliazation, and serve them upon a response by matching component function name to hx-template attribute (defined by the extension), passing the parsed JSON response as parameter.
- Option to change template directory
- More build options (using ESBuild for auto-aggregation)
- Experimenting with on-the-fly (client-side) transpile
- Dynamic template imports (on need)
- Error handling
- Tests