Fork me on GitHub
#clojurescript
<
2018-03-17
>
qqq00:03:41

outside of react/vue based solutions (i.e. reagent, om) what other librarise are used for cljs dom manipulation? [I'm not looking for anything in particular, just a list to look into]

lwhorton02:03:41

@qqq sablano, reagent, jayq, dommy, domina

edvorg04:03:33

Hi guys, repeating my message from matrix. I’m trying to tame :npm-deps beast from clojurescript. So far I managed to make my om based project work on npm dependencies (react and react dom). I made following changes to project:

+                                            :pretty-print         true
+                                            :npm-deps             {:react     "15.4.2"
+                                                                   :react-dom "15.4.2"}
+                                            :install-deps         true
+                                            :infer-externs        true
+                                            :closure-defines      {process.env/NODE_ENV "development"}
And stubbed cljsjs.* packages in foreign libs because om depends on it.
+                                                                   {:file     "node_modules/react/dist/react.js"
+                                                                    :file-min "node_modules/react/dist/react.min.js"
+                                                                    :provides ["cljsjs.react"]}
+                                                                   {:file     "node_modules/react-dom/dist/react-dom.js"
+                                                                    :file-min "node_modules/react-dom/dist/react-dom.min.js"
+                                                                    :provides ["cljsjs.react.dom" "cljsjs.react-dom"]}]
and a change for prod build
+                                     :builds {:app {:compiler {:optimizations   :advanced
+                                                               :pretty-print    false
+                                                               :main            "raven.entry"
+                                                               :closure-defines {process.env/NODE_ENV "production"}}}}}}
It appears to be working, until I compiled this with advanced compilation of course.. My clojurescript version is 1.9.854, I also tried newer versions. I’m sure there is problem with dead code ellimination in closure compiler, but I don’t get any warnings from externs inferrer. Anyone managed to make similar scheme working?

edvorg04:03:05

What I want to avoid with all my heart is dealing with externs in any way. I want to make inferring work for me

dnolen08:03:22

@edvorg inference does work but a bug prevents the warnings, fixed in master

juhoteperi09:03:03

@edvorg I think React node module is going to require externs (until they change React), and inference doesn't help, because the code that breaks in optimization is inside React, e.g. defining properties dynamically (name won't be manged́) and then accessing them staticall (name will be mangled)y

dnolen10:03:44

For those you who have some time for pre-release testing, 1.10.191 should be available soon from Maven Central

edvorg10:03:58

In case anyone interested https://github.com/jmmk/javascript-externs-generator I found this awesome tool, it seems correctly generating externs for all the libraries I got from npm

generate-extern -f node_modules/react/dist/react.js -n React -o resources/public/vendor/ext/react-ext/react-ext.js
generate-extern -f node_modules/react/dist/react.js,node_modules/react-dom/dist/react-dom.js -n ReactDOM -o resources/public/vendor/ext/react-dom-ext/react-dom-ext.js
and then added it to externs
:externs ["resources/public/vendor/ext/react-ext/react-ext.js"
                "resources/public/vendor/ext/react-dom-ext/react-dom-ext.js"]
while I’m not using externs infering, neither I have to write externs myself. Now my project successfully runs with npm dependencies and advanced optimization from closure compiler

edvorg10:03:47

@dnolen thanks, I’ll give it another try when next release arrives

eremec11:03:01

Hello, how to do server side prerender for single page app? I use reagent.

edvorg11:03:43

Usually people spin up js engine and call reagent render from there

edvorg11:03:13

As an alternative there is pure clojure solution to generate hiccup from reagent views and render it

edvorg11:03:51

You may check my (not yet ready) attempt to do it here https://github.com/edvorg/reagent-handler/blob/master/src/rocks/clj/reagent_handler/core.clj based on blog post from @yogthos

edvorg11:03:58

The usage is simply

(defn first-view []
   [:div "something"])

(defn second-view []
   [first-view])

(render [second-view]) ;; will generate hiccup from component

joelsanchez11:03:20

imo you either "server side render" or you "prerender", server-side rendering involves running your frontend code in the server, prerendering involves spinning up a js engine or headless browser

sh4z16:03:46

I'm a bit confused by the regex differences between cljs and clj. How can I make the following work in cljs? (clojure.string/replace "http://www.google.com/&amp;test" #"&.*" "")

dnolen16:03:39

Java vs. JavaScript

sh4z16:03:53

That makes sense. My problem was unrelated to regexes

souenzzo16:03:28

There is some macro on cljs to use template strings? some like (js-template js/graphql "My string ${js/js_vars}")

athomasoriginal17:03:41

@mfikes I tried adding .wav "audio/wav" to here https://github.com/clojure/clojurescript/blob/master/src/main/clojure/cljs/repl/browser.clj#L31 as you suggested. This got rid of the "cannot find *.wav" files errors, but now, when I trigger events I get an error like Uncaught (in promise) DOMException: The element has no supported sources..

athomasoriginal17:03:33

I dug deeper into send-static and a few other functions, but for me, understanding how the REPL works is a little confusing.

athomasoriginal17:03:26

Are there any resources for onboarding developers in CLJS development?

clyce18:03:39

Hi , I'm working with using vx.shape inside cljs, the code in js should have been import ... from @vx/shape, in project.clj I wrote :npm-deps {"@vx-shape" "0.0.158"} :install-deps true and in cljs file I wrote in the ns scope: (:require ["@vx/shape" :as VXShape :refer [...]])

clyce18:03:12

but then I got

Exception in thread "main" java.lang.AssertionError: Assert failed: cljs.analyzer/foreign-dep? expected symbol got "@vx/shape"
(symbol? dep), compiling:(C:\Users\epicl\AppData\Local\Temp\form-init3158851959428830190.clj:1:108)

clyce18:03:07

It seems that I can't require scoped packages? Or we need some syntax other than @?

dnolen18:03:48

@clyce scoped imports don’t work w/o a fix to Google Closure

dnolen18:03:58

I’ve submitted a PR but it’s not finished yet

dnolen18:03:16

also won’t be available until a Closure release exists that has that merged

clyce18:03:03

Hmm....OK I see

clyce18:03:12

Thank you 😄

clyce18:03:58

So we need to mannually package them using https://clojurescript.org/guides/javascript-modules

mfikes19:03:35

If you are interested in the latest in the ClojureScript 1.10.x world, 1.10.191 is available to beta test