Fork me on GitHub
#clojurescript
<
2020-06-18
>
kimim01:06:20

hello, is there any good way to use material ui with reagent? Thanks!

p-himik03:06:39

I found the plain JS interop to be the best way.

Aron05:06:32

I am using materia ui like that (but with a different lib), and it's mostly fine. Very verbose, but I am sure a clojure pro can abstract this away.

kimim06:06:12

@U2FRKM4TW could you share a template? thanks

p-himik08:06:06

Not sure what you mean by "template". It's a regular Reagent/React interop: https://github.com/reagent-project/reagent/blob/master/doc/InteropWithReact.md To avoid using :> everywhere, I have a single material-ui namespace where I import and define components that I use.

kimim09:06:38

Thanks @U2FRKM4TW I follow the guide, but cannot produce material-table, is the wrong mapping? Thanks.

[:> mui-table/MaterialTable {:title "Basic Export Preview"
                                :data [{:name 'Mehmet' :surname 'Baran' :birthYear 1987 :birthCity 63 }]
                                :columns [{:title "Adı" :field "name" }
                                          {:title "Soyadı" :field "surname"}
                                          {:title "Doğum Yılı" :field "birthYear" :type "numeric"}
                                          {:title "Doğum Yeri" :field "birthCity"}]}]

p-himik09:06:48

What is mui-table/MaterialTable?

p-himik09:06:29

Ah, found it.

kimim09:06:31

This is the from :require [material-table :as mui-table]

p-himik09:06:54

Huh? And how did you install it then?

kimim09:06:18

I add this to project.clj : [cljsjs/material-table "1.57.2-0"]

p-himik09:06:46

OK, I can't help here - I don't use CLJSJS at all, and advise anyone against using it.

kimim09:06:48

Fine, thanks anyway.

David Pham12:06:23

There is a ClojureScript wrapper around mui

p-himik13:06:17

There are multiple wrappers for it. Among all that I've found, all are bad, including this one.

p-himik13:06:04

They all bring in the full Material UI, completely negating DCE. And Material UI is huge.

p-himik13:06:40

Actually, I take it back - the one above is the first one that I see that does it correctly. It has a huge amount of files that you can require separately, which doesn't result in a bloated bundle. Just as Material UI itself, it has a central namespace which should only be used for quick prototyping because using even the smallest component from there will bring in the whole Material UI.

Spaceman03:06:07

#re-frame is empty so re-posting here. I have a subscription :show-payme that is set to true. When it is set to true, a div is mounted:

(if @(subscribe [:show-payme]
   [:div {:id "#card-element"}]
)
I have an fx event that returns the following:
{:db {:show-payme true}
  :dispatch [:load-stripe]}
the load-stripe fx event contains the following:
(.mount card-element "#card-element")
The problem is that the .mount is being called before the #card-element div ever mounts on the page, which is causing the #card-element Element Not Found error. How do I get around this?

p-himik04:06:46

Please don't cross-post. #re-frame is not "empty". Different people have different timezones.

👍 1
Chris McCormick07:06:37

does anyone have any experience with using next.js from clojurescript?

flyboarder15:06:18

Ok, so I finished my ES6 Class compiler extension, would love some feedback!

flyboarder19:06:50

@U050B88UR how can I correctly, handle and analyze the method arguments to my custom class?

thheller15:06:04

@flyboarder would help to have an example of how thats actually used?

flyboarder15:06:40

(es6/defclass ExtendedClass BaseClass
  (constructor []
    (prn "ExtendedClass")
    (super)))

flyboarder15:06:24

(es6/defclass MyClass
  (constructor []
    (prn "MyClass")))

flyboarder15:06:31

internally it expends to (es6/class MyClass {:constructor ([] ...)}) or (es6/class ExtendedClass BaseClass {:constructor ([] ...)})

flyboarder15:06:47

for usage as an anonymous instance

flyboarder15:06:32

I styled the syntax for defclass in a way that was similar to protocol

dpsutton15:06:58

Do you have a simple motivating example? Why I might benefit from using a class?

flyboarder15:06:31

@dpsutton yes, specifically when using the shadow-cljs compiler and npm packages which are es6+ and the target is nodejs, we needed to extend a class to enable custom authentication within our underlying js framework

flyboarder15:06:03

we did get a work around initially going, something like (set! (.. oauth/OAuthStrategy -prototype -getEntityQuery) (fn [& args] ...))

lilactown15:06:17

or defining a react component that is an error boundary

👍 1
flyboarder15:06:51

This will spit out native es6 classes, so code that is not compiled when targeting nodejs will still work

flyboarder15:06:18

additionally, someone else wrote a similar extension for async, which was my inspiration for this hack

lilactown16:06:07

I really like it @flyboarder. the syntax is pretty simple

👍 1
lilactown16:06:30

one thing I'm curious about: the prevention of using in < es6 context

lilactown16:06:44

isn't that something that GCC should handle compiling to your target?

flyboarder17:06:46

@lilactown possibly, but I wasnt sure if the compiler was smart enough to know what a class is when you have the language set to es5

flyboarder17:06:05

thats the input language not the output language

flyboarder17:06:26

Actually the above snippet is having issues handling parameters for the methods, im looking into this but if anyone else has any ideas plz halp

lilactown17:06:09

I haven’t run the code. what’re the issues?

flyboarder18:06:19

seems I am not correctly setting the analyzer locals

Spaceman18:06:29

Something strange is happening with my Ajax request:

Spaceman18:06:44

I'm passing in a parameter that's this vector:

Spaceman18:06:11

[{:description "Regent Thai, Church Street, San Francisco, CA, USA", :id "254f506a2fddd4fecbbbd750e0e91d7871218065", :matched_substrings [{:length 3, :offset 0}], :place_id "ChIJi3wlq2l-j4ARq5Rg0kuektg", :reference "ChIJi3wlq2l-j4ARq5Rg0kuektg", :structured_formatting {:main_text "Regent Thai", :main_text_matched_substrings [{:length 3, :offset 0}], :secondary_text "Church Street, San Francisco, CA, USA"}, :terms [{:offset 0, :value "Regent Thai"} {:offset 13, :value "Church Street"} {:offset 28, :value "San Francisco"} {:offset 43, :value "CA"} {:offset 47, :value "USA"}], :types ["restaurant" "food" "point_of_interest" "establishment"]} {:description "Ebisu Restaurant, 9th Avenue, San Francisco, CA, USA", :id "55ed22b098f6b1b2f1b1d3d1d03d36bc3505d6b3", :matched_substrings [{:length 2, :offset 0}], :place_id "ChIJ93MU4FyHhYARNsN1cMElpgo", :reference "ChIJ93MU4FyHhYARNsN1cMElpgo", :structured_formatting {:main_text "Ebisu Restaurant", :main_text_matched_substrings [{:length 2, :offset 0}], :secondary_text "9th Avenue, San Francisco, CA, USA"}, :terms [{:offset 0, :value "Ebisu Restaurant"} {:offset 18, :value "9th Avenue"} {:offset 30, :value "San Francisco"} {:offset 45, :value "CA"} {:offset 49, :value "USA"}], :types ["restaurant" "food" "point_of_interest" "establishment"]}]

Spaceman18:06:02

yet when I retrieve the same param in the server, the vector has now become this:

{:terms {:offset ["0" "13" "28" "43" "47" "0" "18" "30" "45" "49"], :value ["Regent Thai" "Church Street" "San Francisco" "CA" "USA" "Ebisu Restaurant" "9th Avenue" "San Francisco" "CA" "USA"]}, :types ["restaurant" "food" "point_of_interest" "establishment" "restaurant" "food" "point_of_interest" "establishment"], :matched_substrings {:length ["3" "2"], :offset ["0" "0"]}, :structured_formatting {:main_text ["Regent Thai" "Ebisu Restaurant"], :main_text_matched_substrings {:offset ["0" "0"], :length ["3" "2"]}, :secondary_text ["Church Street, San Francisco, CA, USA" "9th Avenue, San Francisco, CA, USA"]}, :place_id ["ChIJi3wlq2l-j4ARq5Rg0kuektg" "ChIJ93MU4FyHhYARNsN1cMElpgo"], :id ["254f506a2fddd4fecbbbd750e0e91d7871218065" "55ed22b098f6b1b2f1b1d3d1d03d36bc3505d6b3"], :description ["Regent Thai, Church Street, San Francisco, CA, USA" "Ebisu Restaurant, 9th Avenue, San Francisco, CA, USA"], :reference ["ChIJi3wlq2l-j4ARq5Rg0kuektg" "ChIJ93MU4FyHhYARNsN1cMElpgo"]}

Spaceman18:06:18

Why would that be, and what am I doing wrong?

Spaceman18:06:26

They should be the same, right?

Spaceman19:06:30

I'm using re-frame's http-xhrio for the Ajax request:

{:method :post
   :uri "/foobar"
   :params {:my-vec that-vector}
   :on-success [:foo]
   :on-failure [:bar]
   :response-format (edn/edn-response-format)}

Spaceman19:06:07

and in the server, retrieving like so: (:my-vec (:params req))

Spaceman19:06:39

printing this ^ gives the map starting with :terms ..., whereas it should give the vector starting with [{:description ...

Spaceman19:06:41

rather than having two maps with the same keys in the vector, what I have is a single map, and all the values of the two maps are concatenated in a single map in vectors.

noisesmith20:06:33

this merging behavior might be something that wrap-params does - I'm not sure if there's a way to turn it off

noisesmith20:06:09

you could try using a map instead of a vector(?) - using some unique key for each

Spaceman22:06:42

I pr-str and read-string'd it