Fork me on GitHub
#clojurescript
<
2022-06-18
>
pinkfrog10:06:53

Hi. How to convert https://github.com/mantinedev/mantine/blob/b0ac2efb6c04ab34da7b679e825d57acaa9ce735/src/mantine-demos/src/demos/core/AppShell/AppShell.demo.usage.tsx#L34 jsx to reagent code?

<AppShell
      padding="md"
      navbar={
        <Navbar width={{ base: 300 }} height={500} p="xs">
          <Navbar.Section grow mt="xs">
            <MainLinks />
Navbar is passed as property instead of a child

rolt10:06:59

does reagent.core/as-element works ?

thanks3 1
geraldodev16:06:09

Hi. What do you use to merge javascript objects ?

p-himik16:06:32

Exactly same things you'd use in the JS world. I don't recall anything special for in in CLJS. For a manual way to do in CLJS, you can look up implementation of a private function clojurescript.core/extend-object!.

geraldodev16:06:39

In js world I see ppl pulling lodash-merge. Thank you for pointing me to https://github.com/clojure/clojurescript/blob/40358fc4c53090676da82e3f4c52920003678902/src/main/cljs/cljs/core.cljs#L3063 I didn't new I could use a doseq over a jsobj map and it would get pair of key/val. Last time I did a doseq over a js object, I've used js/Object.keys to loop over keys and a separate get to grab the value.

p-himik16:06:09

But you can also do it all via raw JS interop, there's no need in anything CLJS-specific at all. E.g., assuming all the properties that you want to handle are enumerable (as they are for plain JS objects), you can get what you want with a single call to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

geraldodev16:06:41

You're right. I saw assign but didn't use because of internet explorer. Let's use assign.

p-himik16:06:22

Yeah, IE has left some deep scars in many developers. :D

Muhammad Hamza Chippa20:06:25

Hi guys. I am trying to use tailwind css with clojurescript but unfortunately still unable to integrate it. I tried using this boilerplate https://github.com/jacekschae/shadow-cljs-tailwindcss but it is not detecting the dynamic classes such as w-[10px] or text-[red].

geraldodev20:06:42

@mhamzachippa have you run the tailwind processor ? something like npm run postcss:watch