reagent

A minimalistic ClojureScript interface to React.js http://reagent-project.github.io/
unbalanced 2020-04-28T00:33:07.294300Z

Wow! Which version of reagent/MUI? Did you use webpack for bundle? You didn't get warnings about ReactDOM incompatibilties?

unbalanced 2020-04-28T00:38:05.294700Z

Ah I see. Thank you @vishal.gautam for the explanation on the hooks. I can see how they would be quite valuable in daily React land.

unbalanced 2020-04-28T00:40:09.295Z

does this method

(ns app.navigation
  (:require
   [reagent.core :as r]
   ["@material-ui/core" :refer [List ListItem Button]]
   ["@material-ui/styles" :refer [makeStyles]]
   ["@material-ui/icons" :refer [ExpandMore ExpandLess BarChart] :rename {ExpandMore ExpandMoreIcon
                                                                          ExpandLess ExpandLessIcon}]))
do automatic tree shaking on advanced compilation? If so it might be worth learning the technique. Is this shadow-cljs?

yenda 2020-04-28T07:46:34.295200Z

You don't need hooks at all if you just use cljs with reagent/re-frame, but when you start doing interop and use js libraries, sometimes hooks are unavoidable. For example graphql lib apollo relies on hooks for the queries, and in react-native world you are missing a lot in react-navigation without effects, such as useIsFocused, useSafeArea, useHeaderHeight, useScrollToTop, and all the hooks related to animations

yenda 2020-04-28T07:49:04.295400Z

Also maybe I was doing something wrong but in previous versions of reagent I found it pretty hard to use hooks in components without losing some params in the clj->js->clj conversions (not losing completely but losing namespaces in keywords and sets in vectors)

2020-04-28T08:25:34.295600Z

FWIW, I'm using reagent 0.10 and material-ui 4.9.5 (via the cljsjs packages), works just fine. Not using any hooks, though.

Lucy Wang 2020-04-28T10:14:55.296300Z

FWIW I made some benchmarking between reagent, helix https://clojurians.slack.com/archives/CRRJBCX7S/p1588066976025300

1πŸ‘
Lucy Wang 2020-04-28T10:16:24.297Z

(using latest stable version of reagent 0.10.0, not 1.0.0), config is here https://github.com/krausest/js-framework-benchmark/pull/726/files)

unbalanced 2020-04-28T12:49:49.297100Z

@schaueho gotcha. I'm including material-ui v4 in with npm via webpack/figwheel and I'm getting an error with reactDOM stuff. Let me see if I can replicate real quick...

unbalanced 2020-04-28T13:12:03.297300Z

Here's the issue. I get this error: https://reactjs.org/docs/error-decoder.html/?invariant=321 The minimal code that causes this is:

(def text-area (reagent/adapt-react-class js/window.MaterialUI.TextareaAutosize))

(def main-panel []
  [text-area])
The build was:
yarn add material-ui
yarn webpack
with an index.js (if you're familiar with this build style)
import * as MaterialUI from "@material-ui/core";
window.MaterialUI = MaterialUI;
and a dev.cljs.edn that looks like
^{:watch-dirs ["src"]
  :css-dirs   ["resources/public/css"]
  :npm        {:bundles {"dist/index.bundle.js" "src/js/index.js"}}}
{:main            project.core
 :closure-defines {DEBUG true}
 :output-to       "resources/public/js/compiled/app.js" }

Spaceman 2020-04-28T13:14:13.298700Z

how do you fire an event as soon as the component has loaded, i.e., onComponentMount?

Spaceman 2020-04-28T13:16:31.300Z

that's slightly verbose though. Is that the recommended way?

2020-04-28T13:17:48.300700Z

Yeah, as far as I know that’s the only way to do it, short of rolling your own interop with React and JS.

unbalanced 2020-04-28T13:19:22.301600Z

it's not that bad @pshar10 there are just some pitfalls to be aware of. Use them all the time (for better/worse), ping if you run into trouble

unbalanced 2020-04-28T13:19:41.302Z

if for some reason you use them inline just remember they need to be wrapped in a vector

Spaceman 2020-04-28T13:19:59.302500Z

what pitfalls do I need to be aware of?

unbalanced 2020-04-28T13:22:23.304800Z

I use them with inputs frequently to focus/select on mount, i.e.

(reagent/create-react-class
 {:componentDidMount 
  (fn [this]
    (let [node (reagent.dom/dom-node this]
      (.select node)
      (.focus node)))
  :reagent-render 
  (fn [] [:input])})

unbalanced 2020-04-28T13:23:14.305700Z

if you were to drop that inline, for instance, you would need to do something like

[:form 
 [:label "blah"]
 [(reagent/create-react-class
  {:componentDidMount 
   (fn [this]
     (let [node (reagent.dom/dom-node this]
       (.select node)
       (.focus node)))
   :reagent-render 
   (fn [] [:input])})]]

unbalanced 2020-04-28T13:23:27.306100Z

(note that it is wrapped in a vector)

unbalanced 2020-04-28T13:23:30.306300Z

as opposed to

unbalanced 2020-04-28T13:23:50.306800Z

[:form 
 [:label "blah"]
 ;; this won't work
 (reagent/create-react-class
  {:componentDidMount 
   (fn [this]
     (let [node (reagent.dom/dom-node this]
       (.select node)
       (.focus node)))
   :reagent-render 
   (fn [] [:input])})]

unbalanced 2020-04-28T13:25:20.308Z

the other two pitfalls, I suppose, are to access the actual dom node from the lifecycle methods use reagent.dom/dom-node as indicated in the example and to make sure that your your render method is actually :reagent-render. If you use :render it will have intermittent bugs

Spaceman 2020-04-28T13:29:17.310Z

@goomba This is better I think: (def foo-bar (with-meta identity {:component-did-mount #((foo-bar))})) (defn my-component [] [foo-bar [:div "Foo"] ] )

1πŸ‘
unbalanced 2020-04-28T13:31:00.310400Z

Cool! I've never seen that before πŸ™‚

unbalanced 2020-04-28T13:34:06.310500Z

So based on the docs here: https://material-ui.com/getting-started/installation/ you need react >= 16.8 and the version in my /target/public/cljs-out/dev/cljsjs/react-dom/development/react-dom.inc.js is var

ReactVersion = '16.13.0';

unbalanced 2020-04-28T13:58:58.310900Z

wait... I still don't see why that's an issue

unbalanced 2020-04-28T13:59:08.311100Z

anyway I fixed it with the following workaround

unbalanced 2020-04-28T13:59:41.311300Z

import * as MaterialUI from "@material-ui/core";
import * as React from "react";
import * as ReactDOM from "react-dom";

window.MaterialUI = MaterialUI;
window.React = React;
window.ReactDOM = ReactDOM;

unbalanced 2020-04-28T13:59:48.311500Z

and it works now Β―\(ツ)/Β―

Jp Soares 2020-04-28T14:00:41.311700Z

What figwheel version are you using? I get an error when passing from figwheel-main 0.2.0 to 0.2.1

Lucy Wang 2020-04-28T14:19:49.312200Z

@pshar10 With reagent 1.0.0 you can use functional components and react useState hooks.

unbalanced 2020-04-28T14:24:28.312400Z

squint that's a good question. I'm using cider-jack-in-cljs so I'm not sure what it's using

2020-04-28T14:49:47.312900Z

I'm using the Material-UI packages from cljsjs and classical figwheel-main via leiningen. So not via yarn, so that might be why I've never run into a problem there.

Spaceman 2020-04-28T23:02:45.314600Z

Has anyone tried #respo and #reagent both? What are the pros and cons of both?

Spaceman 2020-04-28T23:02:55.314900Z

Which do you like better and why?