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:

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

babel-plugin-macros

This seems like a case of caring way too much about something that's hardly very different. JSX versus tagged template strings can be incredibly similar to one another.

The examples in this article are using vanilla template strings to author raw html, but that only misses a couple of nicities JSX has. There are tagged template string libraries like htm[1] that do include some of the few nicities JSX has, but which are actually compatible with the official language.

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

There is however a library that is closer to JSX (HTML-like feel) but yet does not require a build step. htm. HTM uses tagged templates to leverage template literal as native Javascript template strings. If you have not played with tagged templates, I encourage you to check this out, it's a quite powerful feature, that has recently become a part of Javascript.

You can also use preact without a build step via htm

https://github.com/developit/htm#installation

Minifying only makes sense for large dependencies, and when you download those prebundled from unpkg.com they are minified. Few are the web projects whose own code benefits enough from minifying to need it. And for those not using TS the transformations boil down to browser compatibility and JSX. Browser compatibility is someone everyone needs to check for themselves, but I would argue still supporting IE in 2022 is actively harmful. JSX is replaced by the htm library. Granted, htm is not a full replacement for JSX, but performance-wise it is fine, because modern browsers are ridiculously fast executing javascript, even on slow machines.

Our sweet little React wannabe actively publicizes itself as an alternative to React, no wonder it has perfect support for JSX as well. But if you want, you can also go the lit way.

For your own side project, try rigging something together with pure ESM, I tried it and it was a pretty fun exercise. HTM/Lit for building components. Skypack for bundling modules using a CDN. You can even bundle multiple dependencies on a CDN using ReverseHTTP. Native imports maps are also great, but not fully supported yet.

Frameworks definitely help solve this problem in part. But you don't need to go that far just for something simple like this. For example you could use htm plus vhtml to get a no-build tools way to write declarative HTML markup that is translated into a plain HTML string. Or for just a few more kb, you can use htm + preact to get all of the power of React for about 13kb, again with no build tools or setup.