This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-09-13
Channels
- # 100-days-of-code (5)
- # adventofcode (1)
- # announcements (8)
- # beginners (148)
- # boot (17)
- # calva (26)
- # cider (17)
- # cljdoc (2)
- # cljs-dev (55)
- # cljsjs (2)
- # clojure (198)
- # clojure-dev (11)
- # clojure-finland (1)
- # clojure-italy (23)
- # clojure-nl (6)
- # clojure-spec (44)
- # clojure-uk (148)
- # clojurescript (27)
- # clojutre (20)
- # core-logic (21)
- # cursive (12)
- # datascript (10)
- # datomic (33)
- # emacs (11)
- # figwheel-main (49)
- # fulcro (19)
- # graphql (2)
- # off-topic (48)
- # onyx (2)
- # other-languages (53)
- # pedestal (3)
- # reagent (75)
- # reitit (17)
- # rum (1)
- # slack-help (2)
- # specter (2)
- # sql (3)
- # tools-deps (24)
- # unrepl (4)
- # yada (1)
Here I am again with a react interop question. Following code: <MuiPickersUtilsProvider utils={DateFnsUtils}>
from https://github.com/dmtrKovalenko/material-ui-pickers needs to be translated to cljs code, but I cannot get it work again.
I tried: [:> MuiPickersUtilsProvider {:utils DateFnsUtils}
which does not load the page and:
[:> MuiPickersUtilsProvider {:utils (reagent/reactify-component DateFnsUtils)}
which loads the page, but when I try to show the date picker it throws this error:
TypeError: utils.date is not a function
DateFnsUtils is declared like this: declare class DateFnsUtils extends Utils<Date> { }
if that is of any help.
I don’t understand this: declare class DateFnsUtils extends Utils<Date> { }
. what’s that declare
doing there?
also, if that’s supposed to be js, then DateFnsUtils
is neither a reagent component nor a react component
no you don’t need that. reagent already does clj->js on the prop map for you when you use :>
okay @sveri my guess is that you are just not getting DateFnsUtils
imported properly in the page. are you using shadow-cljs? try printing it out to see what it is
@valtteri @lee.justin.m Thanks for your suggestions. It was imported properly and yes the declaration was in typescript, I should have added that.
Anyway {:utils (reagent/as-element DateFnsUtils)}
indeed works, thank you 🙂
@lee.justin.m I am also not sure about what is what, but this is the source I guess: https://github.com/dmtrKovalenko/material-ui-pickers/blob/master/lib/src/utils/date-fns-utils.js
I'm trying to use the same components code (cljc) from both Reagent and Hiccup, but it seems you have to use some kind of wrapper because Hiccup doesn't accept [my-component-fn ...]
, it needs (my-component-fn ...)
(defn child-component []
[:div "hello"])
(defn parent-component []
[:div
[child-component]])
@lee.justin.m I want to use parent-compoent
in Reagent -> [parent-component]
and also from Hiccup (parent-component)
oh sorry. so people tend to use hiccup as a generic description (i.e., “reagent uses hiccup”)
i mean, if you have two libraries that accept different data formats, I think you are going to have to do some data conversion
you don't have Reagent on server-side, so when generating the page, it's nice to use the same code as on the client
have you looked at https://github.com/reagent-project/reagent-cookbook/tree/master/recipes/reagent-server-rendering
JSX markup isn’t really markup. it is a DSL that gets translated into a bunch of normal javascript
so you can’t render to some kind of jsx lookalike on the server and then handle that on the client. you need to actually compile to javascript
react will take this html (generated server-side) and will overwrite it with it's own HTML
that's how we do it for our current project... it works pretty well, but you need to wrap those common components
somehow the server side needs to understand react. this is only even conceptually possible in your example because it has a 1-to-1 relationship with plain html. what happen when you have a big react object with state and refs and so forth?
here comes re-frame to the rescue... it's also written in cljc, so you can use same subscriptions both client-side and server-side
well for the very reason you are asking, i don’t see how that’s going to work unless you emulate react semantics in clojure
react is just a client-side dom abstraction, you don't have to take it into consideration
something needs to understand what you mean when you write [my-component prop1 prop2]
, and that thing is usually the react-dom/server
javascript package
no but reagent just gets you from cljs to a bunch of react javascript calls. it doesn’t take you all the way to html
When using hiccup, [my-compoent prop1 prop2]
needs to be (my-component prop1 prop2)
(a function call)
because now I use a macro to change the form depending if its clojurescript or clojure
i don’t see how. but worse, i don’t see how that conversion will work with form-2 and form-3 components but maybe i’m missing something. it’ll only work when your render function just returns plain hiccup and is a pure function of its arguments
yeah, it has to be a pure function. You can have both form-1 and form-2 components both on client and server.
well anyway it sounds like your solution is fine. i doubt there’s any standard or easier way to doing what you are doing
there is also a nice collection of libraries http://thi.ng that provide visualizations, also written in cljc, so you can generate same charts both client side and server-side