Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/peterhudec/cljsx

cljsx
https://github.com/peterhudec/cljsx

Last synced: 24 days ago
JSON representation

cljsx

Awesome Lists containing this project

README

        

# `cljsx` The Missing [JSX] Clojure Macro

[![Clojars Project](https://img.shields.io/clojars/v/cljsx.svg)](https://clojars.org/cljsx)
[![Build Status](https://travis-ci.org/peterhudec/cljsx.svg?branch=master)](https://travis-ci.org/peterhudec/cljsx)

`cljsx` tries to make it as easy as possible to use plain, unwrapped [React]
(or any other virtual dom) and all the related JavaScript libraries in
ClojureScript by mimicking the syntax of [JSX]. It's mainly meant to be used
with the amazing [shadow-cljs] with its effortless usage of plain NPM packages,
but it works just as well with [Figwheel] and Clojure.

## TL;DR

It's just a macro which transforms occurences of _JSX expressions_ like
`(

"Hello" "World!")` into
`(createElement "div" {:className "foo"} "Hello" "World!")`.
`cljsx` doesn't really care about what `createElement` points to. It only tries
to figure out whether it's a JavaScript or Clojure function so it can convert
the arguments with [clj->js] if needed.

### Features

* Not yet another [React] wrapper, just a macro.
* Works with all _vdom_ libraries which have the `createElement` signature.
* JSX expressions can appear anywhere and can be arbitrarily nested. That's why
it works so well with libraries like [React Router] or [Material-UI].
Whole namespaces can be wrapped in the macro.
* Has _props spread_ operator similar to `

`.
* Supports _truthy prop_ shorthand as in ``.
* Automatically converts from and to JS if needed.
* Built with [spec], so you'll know early when something goes wrong.

Let's say you want to write a SPA directly in [React], not using any wrapper.
Maybe you want to use [React Router] or some other JavaScript library
and you don't want to be dealing with incompatibility issues with wrappers like [reagent].
You would directly use the `react/createElement` function which you assign to `h` for brevity:

```clj
(ns shadow-cljs-example.main
(:require ["react" :as react]
["react-dom" :as react-dom]
["react-router-dom" :as rr]))

(def h react/createElement)

(react-dom/render
(h rr/BrowserRouter nil
(h rr/Route nil
(fn [route-props]
(h react/Fragment nil
(h "h1" nil (-> route-props .-location .-pathname (subs 1)))
(h "ul" nil
(map #(h "li" #js{:key %}
(h rr/Link #js{:to %} %))
["foo" "bar" "baz"]))))))
(js/document.querySelector "#mount-point"))
```

The `cljsx.core/jsx>` macro call in the following example just expands
to something very similar and equivalent to the example above,
except that the code is a bit more readable and looks more familiar
to someone with [React] background.

```clj
(ns shadow-cljs-example.main
(:require ["react" :refer [createElement Fragment]]
["react-dom" :as react-dom]
["react-router-dom" :as rr]
[cljsx.core :refer [jsx> fn-clj]]))

(jsx>
(react-dom/render
(
(
(fn-clj [{{path :pathname} :location}]
(<>
(

(subs path 1))
(