babel-plugin-macros VS htm

One of the more promising alternatives is twin.macro - a Babel macro that processes Tailwind classes to generate JS objects understandable by various CSS-in-JS libraries. The developer experience (DX) of using it is amazing as you not only get all of Tailwind’s features without much change to your code, but you also get much more flexibility - all that on top of the traditional benefits of CSS-in-JS. Here’s an example code:

For example with Babel you could use babel-plugin-macros to execute this file at compile time and replace the file contents with the result of the computation. So appSettings would only have the configs for the current environment and nothing more and your source wouldn't need to change much.

It does require babel-plugin-macros which should also help with keeping things nice and performant in production. The package is part of a larger initiative im trying to achieve which is to create file-system based routing for all mainstream React and React Native routing packages. I have done everything I can to keep it as boilerplate free as I can. To give an example

MacroError: The macro you imported from "undefined" is being executed outside the context of compilation with babel-plugin-macros. This indicates that you don't have the babel plugin "babel-plugin-macros" configured correctly. Please see the documentation for how to configure babel-plugin-macros properly: https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md

Yes, it also does that. https://github.com/kentcdodds/babel-plugin-macros

babel-plugin-macros

eBay: 30+ fields (item specifics, variations, shipping) Each schema is a JSON file defining field names, data types, and validation rules. The mapper walks source → target assignments and applies type coercion (string → number, date formatting, etc.) before export. The entire app stays under 200 KB gzipped by avoiding heavy UI libraries. It's built with Preact + htm (no JSX build step) and styled with Tailwind CSS v4. Export & Practical Considerations Export uses the standard Blob + download API. No server round-trip — just an ephemeral click with URL.createObjectURL(). The free tier handles 50 rows, enough to validate the mapping before committing. Column mapping profiles can be saved and reused, which is useful when the same supplier sends weekly inventory files with identical headers. Try It If you deal with supplier files regularly, you might find this useful. SKUMart handles all of this out of the box — just drop a file and export.

```

Where the `template!` macro instructs the engine how to translate the tokens into their JavaScript syntax and the `#[reactive]` macro converts the class member into a getter/setter that triggers a re-render calculation.

It would need to be adopted by TC39 of course and the expectation would be that, if provided at runtime, a JavaScript engine could handle the preprocessing however transpilers should be able to pre-compute the outputs so they don't need to be evaluated at runtime.

We sort of get around this today using template literals and eval, but it's janky. https://github.com/developit/htm

The author of the article mentions this very briefly, where he writes "For JSX-style references you would need to use binding syntax like <${MyComponent}>". The Preact author's htm tagged template library uses this convention as well [2].

[1] https://github.com/ryansolid/dom-expressions/tree/7fd9f86f1b...

[2] https://github.com/developit/htm

Because AI-UI is a JavaScript module, you specify the layout as a series of function calls. However, it also fully supports JSX and htm, so you can use a more familiar markup at the cost of the loss of some type safety. There's more about these choices in the AI-UI guide here.

I know what "MVC" _stands_ for, but I'm asking what _context_ you mean that in. Are you talking about how to define your server-side data models and endpoints? How you're organizing client-side fetching and caching?

Normally "MVC" as a concept doesn't get used in the React ecosystem (the way it did with Backbone.js).

FWIW it's certainly _possible_ to use React as a script tag, but it's extremely rare. It's normally expected that the frontend _is_ actually bundled and compiled, whether it be using a pure-SPA build tool like Vite, or one of the full server-side frameworks like Next or Remix.

Note that the SPA build output is just a set of static HTML/JS/CSS files, which do not require a separate Node server process for hosting - they can be served by any HTTP server.

My own advice would be to use Vite and build as an SPA.

_If_ you absolutely want to use React as _just_ a `` tag with no build step, I'd recommend also using <a href="https://github.com/developit/htm">https://github.com/developit/htm</a> to at least give you JSX-like syntax for writing your components.

The preact team also dislikes transpiling jsx so they've developed an alternative using tagged template literals: https://github.com/developit/htm

So getting this to work without bundler magic is very hard. It's not surprising why NextJS is investing in a bundler. Though one thing that really sticks out is how much complexity we add for just miniscule dev ergonomics. Not using JSX and using something like htm would make all this easier (removing the bundler entirely), it's a lot of overhead to avoid a couple of quotes. React should really have a tagged-template mode. Also all of this is indirection is actually bad for dev ergonomics too! One of the reasons I did this is because I'm absolutely sick of magic caches and sorting through code that's been crushed by a bundler into something I don't recognize and can't easily debug. While we can't get rid of this completely (ts/jsx) this preserves the module import graph completely on the client-side making it easy to find things as you are working and preserving line numbers. This obviously is not useful for a production build and there's a lot of work that would need to go in to support both modes over the same code, but it's depressing no tools really work like this for local development.

You can also do JSX and skip the build step with preact + htm : https://github.com/developit/htm#example

While I was able to achieve this fairly easily, the developer experience of manually stitching strings together wasnt great. Being myself a fan of buildless libraries, such as htm and lit-html, I figured I'd try to take a stab at implementing a DSL for component-like templating in Service Workers myself, called Service Worker Templating Language (SWTL), here's what it looks like:

I would however highly recommend https://github.com/developit/htm