Fork me on GitHub
#reagent
<
2018-02-05
>
eoliphant04:02:44

Hi i have a quick question. Is the preferred/best way to handle a component that takes optional props and children this from the reagent 0.4.0 update docs?

(defn my-div []
  (let [this (r/current-component)]
    (into [:div.custom (r/props this)]
          (r/children this))))

justinlee04:02:26

I think that should work if I understand what you’re trying to do.

eoliphant05:02:51

I’m writing some wrappers for a css lib (bulma) so for say the following, I’m going to create a columns and column reagent components. so need columns to handle it’s children, as well as say any extra options (classes) it may take

<div class="columns">
  <div class="column">
    First column
  </div>
  <div class="column">
    Second column
  </div>
  <div class="column">
    Third column
  </div>
  <div class="column">
    Fourth column
  </div>
</div>

kurt-o-sys08:02:51

I can understand how this is like translating the client = new ApolloClient() to cljs. But that doesn't import it, does it? (At least I get an error when I run the app: Uncaught ReferenceError: ApolloClient is not defined at ...)

kurt-o-sys08:02:32

(this is about how to use existing react modules in reagent)

kurt-o-sys08:02:19

Another trial, close, but not there yet: there this react module: https://github.com/apollographql/react-apollo I'd like to add to my reagent (re-frame) project. I basically need a way to import the react-apollo module and have it imported properly into my ns. Step 1: add it to project.clj:

....
  :cljsbuild  {:builds  {:app {...
                               :compiler  {...
                                           :npm-deps  {:react-apollo  "2.0.4"
                                                       :apollo-client "2.2.2"}
                                           :install-deps  true
  ....

kurt-o-sys08:02:03

Step 2: add it to your namespace:

(ns ...
  (:require [....
             [apollo-client]
             ...]))

kurt-o-sys08:02:06

Step 3: define the client as a reagent component:

(def apollo-client (reagent/adapt-react-class (appolo-client/ApolloClient.)))

kurt-o-sys08:02:36

I get stuck at step 3 (I think): while compiling:

WARNING: No such namespace: appolo-client, could not locate appolo_client.cljs, appolo_client.cljc, or JavaScript source providing "appolo-client" at line 29 src/cljs/ui_app/core.cljs
WARNING: Use of undeclared Var appolo-client/ApolloClient at line 29 src/cljs/ui_app/core.cljs
WARNING: No such namespace: appolo-client, could not locate appolo_client.cljs, appolo_client.cljc, or JavaScript source providing "appolo-client" at line 29 src/cljs/ui_app/core.cljs
WARNING: Use of undeclared Var appolo-client/ApolloClient at line 29 src/cljs/ui_app/core.cljs
According to: https://anmonteiro.com/2017/03/requiring-node-js-modules-from-clojurescript-namespaces/ : > It’s interesting to note how left-pad is both a namespace and a function.

kurt-o-sys08:02:42

but it's not in this case.

kurt-o-sys08:02:05

or at least, the ns is not found... so, where am I missing something?

kurt-o-sys08:02:54

checking https://github.com/apollographql/apollo-client/blob/master/packages/apollo-client/src/index.ts it exports ApolloClient:

// export the client as both default and named
export { ApolloClient };
export default ApolloClient;
but requiring the ApolloClient doesn't work either

kurt-o-sys08:02:16

> (require '[ApolloClient])
----  Could not Analyze  <cljs form>   line:1  column:1  ----

  No such namespace: ApolloClient, could not locate ApolloClient.cljs, ApolloClient.cljc, or JavaScript source providing "ApolloClient" at line 1 <cljs repl>

  1  (require '[ApolloClient])
     ^--- 

----  Analysis Error  ----

kurt-o-sys08:02:52

which brings me to the question: how to require and use existing react-modules (npm) in reagent?

kurt-o-sys09:02:05

(the left-pad example works, btw, so it must be something with the namespaces/js exports?)

mikethompson09:02:57

I haven't read through everything you have written, in a hurry, but to answer this last question you either: 1. Check cljsjs is see if someone has done Applo already http://cljsjs.github.io/ OR 2. you'll have to (1) <script> in the necessary minified js while also being sure to (2) create and use the necessary externs. Not nearly enough detail ... but gotta go

kurt-o-sys09:02:14

1. cljsjs - no, checked it. Also, packages seem to be outdated pretty often (no offense to anyone). I'd prefer a straight forward direct import, but I do use cljsjs (since there doesn't seem to be a good way :p) 2. hmmm, tried that before, never got it working properly. Apparently, there should be an easy way (like the example with the left-pad, that one works). I just don't get why some npm packages seem to work the way it's described in https://anmonteiro.com/2017/03/requiring-node-js-modules-from-clojurescript-namespaces/ and some, apparently, don't.

mikethompson09:02:05

Have an ask in the #clojurescript channel. This is now more a general problem, than a reagent specific problem

kurt-o-sys09:02:06

like in the apollo-client repo, there's this structure:

-- packages
   |
   -- ...
   -- apollo-client

kurt-o-sys09:02:19

agreed, sorry.

mikethompson09:02:57

There's likely to be npm-knowledgeable people in that channel (that's the skill you now need access to)

eoliphant16:02:13

hi, i have a general question, i’m writing a reagent wrapper lib, for a css framework. usually i just write my components as ‘normal’ reagent functions. But in this case, i of course end up needing to flexibly pass args that vary (modifier classes, etc). In this case, does it make sense to just follow the more generic [props & children] approach?