Clojurescript: How to destructure a js-object in an idiomatic way - clojurescript

Question

Trying to use antd from clojurescript I'm looking for an idiomatic way to destructure js-objects. So assume we want to do e.g.
import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
How can I do that from clojurescript without having to write the verbose
(let [Sider (.-Sider antd/Layout)
Header (.-Header antd/Layout)
Content (.-Content antd/Layout)
Footer (.-Footer antd/Layout)]
;; and here goes the hiccup using Sider etc.
)
thanks in advance
fricke

Answer 1

The useful forms of destructuring (:keys, :strs) won't work because a regular JS object is not a CLJS map. Maybe you can create an util function around aget and use regular positional destructuring?
(defn obj-props [obj props]
(map #(aget obj (name %)) props))
(let [[Sider Header Content Footer] (obj-props antd/Layout '[Sider Header Content Footer])]
;; Sider, Header, etc. are bound here
)
I found a recommendation on the Cljs Cheat Sheet of the cljs-oops library, which in turn mentioned aget, and the aget docs mentioned goog.object/get 😉

Answer 2

Here's how i currently prefer to do it:
(let [[Sider Header Content Footer]
(as-> antd/Layout $ [(.-Sider $) (.-Header $) (.-Content $) (.-Footer $)])]
;; and here goes the hiccup using Sider etc.
)
Or else:
(let [[Sider Header Content Footer]
((juxt #(.-Sider %) #(.-Header %) #(.-Content %) #(.-Footer %)) antd/Layout)]
;; and here goes the hiccup using Sider etc.
)