CLJS and the React Compiler

thheller · June 14, 2024, 5:14pm

I finished writing the defc doc I mentioned for the curious among you.

thheller/shadow-grove/blob/master/doc/arch/defc-deep-dive.md

# defc Deep Dive

Components in shadow-grove are defined using the `defc` macro. It is a somewhat complex macro, and I'll try to cover why it looks the way it does in this doc. This is not about explaining how to use `defc`, but rather explaining how it works internally.

Components are meant to provide an abstraction to manage state. Either application state or their own local state. They can receive data from the parent via arguments, or introduce new data into the tree via Slots.

Coming up with reasonable examples is quite hard, so I'll start with a very basic example and then go from there.

```clojure
(defc product-info [product-id]
  (bind {:keys [title] :as data}
    (sg/kv-lookup :products product-id))
  
  (render
    ;; imagine actual HTML here
    (<< [:div title])))
```

The first line is pretty much just like `defn`, defining a component with the name `product-info` taking one argument `product-id`. The component can be used by calling it like any function, e.g. `(product-info 1)`. `bind` is the first Slot. `render` is what will turn the data into actual DOM structures.

This file has been truncated. show original