Fork me on GitHub
#om
<
2016-05-11
>
jimmy01:05:55

@dimiter: how about react-select, it's available on cljsjs as well

dimiter01:05:06

That one looks good as well. I just havent seen any good examples of how to use normal react components and tie them into local state.

mitchelkuijpers08:05:32

Are there any tricks to get om.next to compile with advanced compilation?

jimmy08:05:06

@mitchelkuijpers: what are the problems do you have ?

mitchelkuijpers08:05:29

I get a pretty cryptic error, not sure if om.next is the problem

mitchelkuijpers08:05:35

clojure.lang.ExceptionInfo: java.lang.NoSuchMethodError: com.google.common.base.CharMatcher.javaUpperCase()Lcom/google/common/base/CharMatcher;
    data: {:file
           "/var/folders/fw/q25l3njx6p55bywxj5x_c8gc0000gn/T/boot.user2640523315019357413.clj",
           :line 53}
java.util.concurrent.ExecutionException: java.lang.NoSuchMethodError: com.google.common.base.CharMatcher.javaUpperCase()Lcom/google/common/base/CharMatcher;
            java.lang.NoSuchMethodError: com.google.common.base.CharMatcher.javaUpperCase()Lcom/google/common/base/CharMatcher;
       com.google.javascript.jscomp.parsing.JsDocInfoParser.validTemplateTypeName   JsDocInfoParser.java: 1216
             com.google.javascript.jscomp.parsing.JsDocInfoParser.parseAnnotation   JsDocInfoParser.java:  946
             com.google.javascript.jscomp.parsing.JsDocInfoParser.parseHelperLoop   JsDocInfoParser.java:  283
                       com.google.javascript.jscomp.parsing.JsDocInfoParser.parse   JsDocInfoParser.java:  273
             com.google.javascript.jscomp.parsing.IRFactory.createJsDocInfoParser         IRFactory.java:  889
                       com.google.javascript.jscomp.parsing.IRFactory.handleJsDoc         IRFactory.java:  656
                       com.google.javascript.jscomp.parsing.IRFactory.handleJsDoc         IRFactory.java:  670
                         com.google.javascript.jscomp.parsing.IRFactory.transform         IRFactory.java:  733
                        com.google.javascript.jscomp.parsing.IRFactory.access$300         IRFactory.java:  163
com.google.javascript.jscomp.parsing.IRFactory$TransformDispatcher.processAstRoot         IRFactory.java: 1013
       com.google.javascript.jscomp.parsing.IRFactory$TransformDispatcher.process         IRFactory.java: 2591
                     com.google.javascript.jscomp.parsing.IRFactory.justTransform         IRFactory.java:  931
                     com.google.javascript.jscomp.parsing.IRFactory.transformTree         IRFactory.java:  339
                          com.google.javascript.jscomp.parsing.ParserRunner.parse      ParserRunner.java:  117
                                         com.google.javascript.jscomp.JsAst.parse             JsAst.java:   89
                                    com.google.javascript.jscomp.JsAst.getAstRoot             JsAst.java:   50
                            com.google.javascript.jscomp.CompilerInput.getAstRoot     CompilerInput.java:  121
                                com.google.javascript.jscomp.Compiler.parseInputs          Compiler.java: 1330
                                      com.google.javascript.jscomp.Compiler.parse          Compiler.java:  719
                            com.google.javascript.jscomp.Compiler.compileInternal          Compiler.java:  680
                                 com.google.javascript.jscomp.Compiler.access$000          Compiler.java:   83
                                     com.google.javascript.jscomp.Compiler$2.call          Compiler.java:  651
                                     com.google.javascript.jscomp.Compiler$2.call          Compiler.java:  648
                             com.google.javascript.jscomp.CompilerExecutor$2.call  CompilerExecutor.java:   93

jimmy08:05:40

in advanced mode, it would be a bit troublesome with externs, check the compiling output .

jimmy08:05:19

can you cat this file at line 53 /var/folders/fw/q25l3njx6p55bywxj5x_c8gc0000gn/T/boot.user2640523315019357413.clj

mitchelkuijpers08:05:42

41	(set-env!
    42	  :repositories
    43	  #(into
    44	    %
    45	    [["datomic"
    46	      {:url "",
    47	       :username (System/getenv "DATOMIC_REPO_USERNAME"),
    48	       :password (System/getenv "DATOMIC_REPO_PASSWORD")}]
    49	     ["avisi-releases"
    50	      {:url
    51	       "",
    52	       :username (System/getenv "AVISI_RELEASE_USERNAME"),
    53	       :password (System/getenv "AVISI_RELEASE_PASSWORD"),
    54	       :snapshots false}]])
    55	  :source-paths
    56	  #{"test/clj" "test/cljs" "src/cljs" "src/cljc" "src/devcards"
    57	    "src/clj" "src/public”}

mitchelkuijpers08:05:19

I am not sure this is related ill investigate some more but this should not be the problem, the error line number seems random

jimmy08:05:31

yeah sure.

mitchelkuijpers08:05:19

Hmm I think i get the wrong version of guava

mitchelkuijpers08:05:25

that would explain the error

jimmy08:05:14

I just did a quick search, it does show something regarding guava as well, so it might not have any problem with cljs yet

mitchelkuijpers08:05:26

Thank you for the help @nxqd it seems to be resolved I only get some warnings now but I think those are expected

ag16:05:04

hey guys. we decided to give Om-Next a try. I am trying to think about one idea that worked with angular in my past projects. Namely I need to have “runtime injectable” components. Imagine you grab component’s code from api, and render it on the fly. Is something like that achievable? Can someone point me in the right direction/give advice/links to examples, blogposts etc.

ag16:05:05

so in the project I mentioned it would get list of “modules” from DB and then the actual code of each “module” was in our private bower repo, it would just use the code and styles and other assets for every listed/enabled module from there and render them “on the fly"

kendall.buchanan16:05:45

@ag: Are we assuming your modules are also written in Clojurescript?

ag16:05:49

of course

ag16:05:22

I mean it’s probably possible to package them (jar or npm package)

kendall.buchanan16:05:40

Unfortunately, I can’t think of any pre-baked solutions, but I suspect CLJS code splitting is a beginning to the answer: https://rasterize.io/blog/cljs-dynamic-module-loading.html

kendall.buchanan16:05:43

Problem with that link is your full list of modules are required at compilation time. Not sure if there’s a workaround for that.

ag16:05:33

what if instead of thinking about this problem from Om/CLJS perspective, dig it from React side? Is it possible to have compiled JS code of a component to be “injected”?

kendall.buchanan16:05:50

Another great question simple_smile Not sure, personally, however it seems like something that could be experimented with. Om works with traditional React components quite nicely, as evidenced by the CLJSJS project (http://cljsjs.github.io/).

dimiter18:05:17

How can I use update-state! in om.core to merge results into an existing vector without losing what is already there.

dimiter18:05:28

So I have the following which sets local state of a component:

(defn test-ajax [state owner input]
  (go
    (let [access-token (get-in state state/user-access-token-path)
          api-result (<! (ajax/managed-ajax
                           :get
                           (api-url (str "/api/v3/users?per_page=50&search=" input))
                           :headers {"Authorization" (str "Bearer " access-token)}))]
      (om/set-state! owner :options (:resp api-result)))))

sbmitchell18:05:34

hey all, does anyone here have a ref implementation of using different markup libs like hiccup inside of om/om.next?

anmonteiro19:05:47

@sbmitchell: you can use sablono, which is pretty much just a drop-in

sbmitchell19:05:14

I guess I should clarify that Im coming from a heavy use of reagent and just wanted to see if others who came from the same background tried going the hiccup route first

sbmitchell19:05:43

if its just the case that most ppl with the same background just switch to sablono thats valid I'm just curious

anmonteiro19:05:39

@sbmitchell: well hiccup doesn’t work with ClojureScript so Sablono would be the way to go (with Om)

sbmitchell20:05:34

I see I guess the hiccup I am use too is an extension from reagent

anmonteiro20:05:07

@sbmitchell: you probably mean “hiccup-like syntax”

sbmitchell20:05:23

yes hiccup like

anmonteiro20:05:27

if so, that’s what sablono is all about

anmonteiro20:05:37

I don’t know any others in the same space

sbmitchell20:05:58

oh ok great thanks

sbmitchell20:05:15

looking at it now...looks to be what I was expecting

jasonjckn21:05:17

I need some help understanding om design pattern: If I have a defui TodoList, which has the query expressions [:todo/list], and there's 2 instances of TodoList, in the implementation of the read function for handling :todo/list, how do I figure know which instance the read is coming from?

jasonjckn21:05:47

presumably i'll have 2 different todo lists / 2 datasets

anmonteiro21:05:56

@jasonjckn: probably need more context regarding your app’s query shape

jasonjckn21:05:36

my app's query shape ?

anmonteiro21:05:45

typically you wouldn’t have repeated keys like that?

jasonjckn21:05:21

well, i'm thinking along the lines of building up an arsenal of reusable defuis in a library that I include

jasonjckn21:05:35

so let's say I wrote TodoList defui 5 years ago, and the query expression for that in this library is todo/list

jasonjckn21:05:43

but in this new app, i instance it twice, and I want 2 different datasets

anmonteiro21:05:49

well normally reusable components don’t quite have queries

jasonjckn21:05:51

is :todo/list*

jasonjckn21:05:22

Oh ok, so this hypothetical library wouldn't have query expressions defined, just the render function, but the render function would assume things about the query expression wouldn't it

jasonjckn21:05:40

in the render function you assume certain keys in om/props

anmonteiro21:05:07

which probably don’t need to be in queries if the components are to be made reusable

anmonteiro21:05:18

let me look up a few examples

anmonteiro21:05:02

this repo has 2 reusable components

anmonteiro21:05:19

they don’t have queries, but they assume certain things are in props

jasonjckn21:05:28

sweet, checking it out

jasonjckn21:05:44

@anmonteiro thanks, so let's say I have a reusable component which is 5-star rating widget, it shows the average rating, when the user clicks on one of the stars, it contributes to the overall average rating, so clearly I can easily encapsulate the rendering of this into a library as how om-mantras does this, but there's also state logic around when users click on a star, that it updates the local state, with 1 more rating to contribute to the overall average rating. So it's fair to say that there's no way to reuse this state logic in om-next really, because this would mean adding a query expression which specializes the component too much to a specific kind of application

jasonjckn21:05:39

it would also mean calling transact! for when the user clicks on one of the 5 stars in this hypothetical library which om-mantras doesn't do

anmonteiro21:05:38

@jasonjckn: the component can also accept a function as a prop

anmonteiro21:05:59

this function (which the component knows nothing about) is responsible for updating the overall thing

jasonjckn21:05:13

well the logic i'm trying to reuse is in the read function in this case

anmonteiro21:05:15

and the rating component calls it whenever a star is clicked

jasonjckn21:05:35

so I guess you could ship that in the library too shrug

jasonjckn21:05:09

i'm trying to reuse the code that aggregates a series of ratings from user interactions

dimiter23:05:38

How can I merge values into an existing local state map.