Re: [ClojureScript] Upgrading to 1.9.456 challenges with foreign-libs and synchronous XMLHttpRequest in Chrome

[Hitesh]

Cool, thanks for all the hard work you and others put into Clojurescript!


On Monday, February 6, 2017 at 12:41:10 PM UTC-5, David Nolen wrote:
> There was a bug reported and since fixed in master. There will be a release 
> this Friday just to address this regression.
> 
> 
> David
> 
> 
> On Sat, Feb 4, 2017 at 11:43 PM, Hitesh  wrote:
> I'm trying to upgrade a project from 1.8.51.  It has some foreign libs and 
> manually defined externs in it which were working fine.
> 
> 
> 
>       :foreign-libs [{:file 
> "https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js;
> 
>                       :provides ["TweenMax"]}]
> 
>       :externs ["react/externs/react.js"
> 
>                 "externs/greensock.js"]
> 
> 
> 
> 
> 
> After upgrading the version of clojurescript, running lein figwheel dumps 
> this exception.
> 
> 
> 
> 
> 
> java.lang.IllegalArgumentException: /ajax/libs/gsap/1.18.5/TweenMax.min.js is 
> no
> 
> t a relative path
> 
>  at clojure.java.io$as_relative_path.invokeStatic (io.clj:414)
> 
>     clojure.java.io$file.invokeStatic (io.clj:426)
> 
>     clojure.java.io$file.invoke (io.clj:418)
> 
>     cljs.closure$write_javascript.invokeStatic (closure.clj:1594)
> 
>     cljs.closure$write_javascript.invoke (closure.clj:1587)
> 
>     cljs.closure$source_on_disk.invokeStatic (closure.clj:1633)
> 
>     cljs.closure$source_on_disk.invoke (closure.clj:1628)
> 
>     cljs.closure$output_unoptimized$fn__6325.invoke (closure.clj:1671)
> 
>     clojure.core$map$fn__4785.invoke (core.clj:2646)
> 
>     clojure.lang.LazySeq.sval (LazySeq.java:40)
> 
>     clojure.lang.LazySeq.seq (LazySeq.java:49)
> 
>     clojure.lang.RT.seq (RT.java:521)
> 
>     clojure.core$seq__4357.invokeStatic (core.clj:137)
> 
>     clojure.core$filter$fn__4812.invoke (core.clj:2700)
> 
>     clojure.lang.LazySeq.sval (LazySeq.java:40)
> 
>     clojure.lang.LazySeq.seq (LazySeq.java:49)
> 
>     clojure.lang.RT.seq (RT.java:521)
> 
>     clojure.core$seq__4357.invokeStatic (core.clj:137)
> 
>     clojure.core$map$fn__4785.invoke (core.clj:2637)
> 
>     clojure.lang.LazySeq.sval (LazySeq.java:40)
> 
>     clojure.lang.LazySeq.seq (LazySeq.java:49)
> 
>     clojure.lang.Cons.next (Cons.java:39)
> 
>     clojure.lang.RT.next (RT.java:688)
> 
>     clojure.core$next__4341.invokeStatic (core.clj:64)
> 
>     clojure.core$str$fn__4419.invoke (core.clj:546)
> 
>     clojure.core$str.invokeStatic (core.clj:544)
> 
>     clojure.core$str.doInvoke (core.clj:533)
> 
>     clojure.lang.RestFn.applyTo (RestFn.java:139)
> 
>     clojure.core$apply.invokeStatic (core.clj:646)
> 
>     clojure.core$apply.invoke (core.clj:641)
> 
> 
> 
> 
> 
> So although 
> https://github.com/clojure/clojurescript/wiki/Compiler-Options#foreign-libs 
> still says that URLs are valid for :file, I downloaded the libs and specified 
> them as relative paths.
> 
> 
> 
> 
> 
>       :foreign-libs [{:file "gsap/1.18.5/TweenMax.min.js"
> 
>                       :file-min "gsap/1.18.5/TweenMax.min.js"
> 
>                       :provides ["TweenMax"]}]
> 
>       :externs ["react/externs/react.js"
> 
>                 "externs/greensock.js"]
> 
> 
> 
> 
> 
> Lein figwheel now happily starts up.  But when I try to access the site in 
> Chrome, it doesn't load and has the following new error in the console:
> 
> 
> 
> 
> 
> Synchronous XMLHttpRequest on the main thread is deprecated because of its 
> detrimental effects to the end user's experience. For more help, check 
> https://xhr.spec.whatwg.org/.
> 
> 
> 
> goog.loadFileSync_      @       base.js:1396
> 
> goog.retrieveAndExecModule_     @       base.js:1419
> 
> (anonymous)     @       VM113:1
> 
> goog.writeScriptTag_    @       base.js:1223
> 
> goog.importScript_      @       base.js:879
> 
> goog.importModule_      @       base.js:900
> 
> goog.writeScripts_      @       base.js:1323
> 
> goog.require    @       base.js:663
> 
> (anonymous)     @       (index):75
> 
> 
> 
> 
> 
> The site works as normal in Safari, figwheel reloads changes.  It's just 
> Chrome that's not working.  I'm at a bit of a loss here now.  Any ideas?
> 
> 
> 
> --
> 
> Note that posts from new members are moderated - please be patient with your 
> first post.
> 
> ---
> 
> You received this message because you are subscribed to the Google Groups 
> "ClojureScript" group.
> 
> To unsubscribe from this group and stop receiving emails from it, send an 
> email to clojurescrip...@googlegroups.com.
> 
> To post to this group, send email to clojur...@googlegroups.com.
> 
> Visit this group at https://groups.google.com/group/clojurescript.

-- 
Note that posts from new members are moderated - please be patient with your 
first post.
--- 
You received this message because you are subscribed to the Google Groups 
"ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to clojurescript+unsubscr...@googlegroups.com.
To post to this group, send email to 

[ClojureScript] Re: CSS in CLJS

[Thomas Heller]

On Monday, February 6, 2017 at 7:15:49 PM UTC+1, mynomoto wrote:
> Hello,
> 
> After seeing this message, we extracted a library from work that uses garden 
> and adds the style when the component is rendered (when using React). Code 
> currently lives at https://github.com/guilherme-teodoro/stylish
> 


Cool, looks very much like

https://github.com/cssinjs/jss
https://github.com/css-modules/css-modules

Great to see some more work on this topic, feels like JS world has been on this 
for much longer. CLJS definitely needs to catch up here.

-- 
Note that posts from new members are moderated - please be patient with your 
first post.
--- 
You received this message because you are subscribed to the Google Groups 
"ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to clojurescript+unsubscr...@googlegroups.com.
To post to this group, send email to clojurescript@googlegroups.com.
Visit this group at https://groups.google.com/group/clojurescript.

[ClojureScript] Re: CSS in CLJS

[Thomas Heller]

> 
> Thanks got it. My mistake was mixing reagent's markup with yours. Would you 
> say this is an alternative, similar to how shadow.markup relates to om.dom?

Yes. While I like the hiccup-ish reagent syntax it does present some 
performance issues.

In reagent you first allocate a bunch of vectors, these are then interpreted by 
reagent and turned into ReactElements allocating even more objects. The vectors 
are now "garbage" and have to be collected. The reagent approach produces about 
twice as much garbage and is slower overall (keyword parsing) as you have way 
more work being done each render, since browsers are pretty fast these days you 
don't notice this much but the price is there.

om.dom or shadow.markup directly go through React.createElement and the result 
will then be interpreted by React effectively skipping the "vector-phase". I 
even go a little further than om.dom if you look at the shadow.markup.react ns 
(direct drop-in replacement btw). I do some macro magic to further reduce cost. 
This is probably overkill though, but you get the usual dom/h1, dom/div, etc 
functions.

I think the reason why the hiccup syntax is so popular is because of the 
shorthand form of :div.class-a.class-b, but since you do not need this with 
defstyled the argument for the hiccup syntax is weaker.

So yes, the hiccup-ish syntax is an alternative but I stick to exclusively 
using the fn-style syntax. Using Cursive indent-only mode it indents just like 
vectors and after doing this for a while now it looks better than the hiccup 
syntax to me. The price of reagent is that you cannot mix both syntaxes, on the 
clojure version I currently support the mixed style but that is probably going 
away at some point.

Sorry, didn't want to turn this into a rant on reagent.

-- 
Note that posts from new members are moderated - please be patient with your 
first post.
--- 
You received this message because you are subscribed to the Google Groups 
"ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to clojurescript+unsubscr...@googlegroups.com.
To post to this group, send email to clojurescript@googlegroups.com.
Visit this group at https://groups.google.com/group/clojurescript.

[ClojureScript] Re: CSS in CLJS

[mynomoto]

Hello,

After seeing this message, we extracted a library from work that uses garden 
and adds the style when the component is rendered (when using React). Code 
currently lives at https://github.com/guilherme-teodoro/stylish

Usage is like:

(ns stylish.example
  (:require [stylish.core :as stylish]
[garden.units :as units]))

(defn style
  [color]
  [{:font-size (units/px 40)
:background color}])

(def button-style
  [{:color :yellow}
   [:&:hover {:color :blue}]])

(defn show
  []
  [:div {:class (stylish/render (style color))} ;; return: 
stylish_example-style-1
   [:button {:class (stylish/render button-style)}]]) ;; return: 
stylish_example-button-style-1


We have being using it in prod from months now and it works fine.

HTH,
mynomoto

On Thursday, February 2, 2017 at 8:36:43 PM UTC-2, Thomas Heller wrote:
> Hello,
> 
> I'm not sure how many of you are in this horrible situation where you have to 
> write CSS for your React Components. I typically have to write way more than 
> I'd like and always hated the way I wrote it. Until a few weeks ago.
> 
> I wrote this thing and so far I really like it. Too early to tell whether 
> this is actually a good idea but I already prefer it over pretty much 
> everything else I have used in the past (CSS, SCSS, OOCSS, BEM, ...).
> 
> Anyways here it goes:
> 
> (ns my.fancy.component
>   (:require [shadow.markup.css :as css :refer (defstyled)]))
> 
> (defstyled title :h1
>  [env]
>  {:color "red"})
> 
> (h1 {} "hello world")
> 
> In Clojure this produces hello 
> world. There are also ways to generate the appropriate CSS so the 
> element is actually styled in your page. Not totally settled on the final API 
> but it works well enough for now.
> 
> In ClojureScript this produces a ReactElement and should work with React 
> natively and most CLJS React Wrappers like OM (although I tried no other than 
> my own). No extra CSS generation is required here, just include it in your 
> page and it will be styled.
> 
> More here: https://github.com/thheller/shadow/wiki/shadow.markup
> 
> This is basically my take on the whole css-in-js thing that is happening in 
> the JS world if anyone follows this. I wasn't happy with any of their 
> implementations so I wrote this.
> 
> If you'd like to use this try it with this:
> 
> [thheller/shadow-client "1.0.180"]
> 
> The Clojure part also requires hiccup, the CLJS parts require React via 
> cljsjs.react.
> 
> If anyone is actually interested in this I'd be happy to go over some more 
> details. I just open-sourced this as I wanted to use it in another project 
> and needed a place to put it. Consider this very ALPHA though, you have been 
> warned. ;)
> 
> Cheers,
> /thomas

-- 
Note that posts from new members are moderated - please be patient with your 
first post.
--- 
You received this message because you are subscribed to the Google Groups 
"ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to clojurescript+unsubscr...@googlegroups.com.
To post to this group, send email to clojurescript@googlegroups.com.
Visit this group at https://groups.google.com/group/clojurescript.

Re: [ClojureScript] Upgrading to 1.9.456 challenges with foreign-libs and synchronous XMLHttpRequest in Chrome

[David Nolen]

There was a bug reported and since fixed in master. There will be a release
this Friday just to address this regression.

David

On Sat, Feb 4, 2017 at 11:43 PM, Hitesh  wrote:

> I'm trying to upgrade a project from 1.8.51.  It has some foreign libs and
> manually defined externs in it which were working fine.
>
>   :foreign-libs [{:file "https://cdnjs.cloudflare.com/
> ajax/libs/gsap/1.18.5/TweenMax.min.js"
>   :provides ["TweenMax"]}]
>   :externs ["react/externs/react.js"
> "externs/greensock.js"]
>
>
> After upgrading the version of clojurescript, running lein figwheel dumps
> this exception.
>
>
> java.lang.IllegalArgumentException: /ajax/libs/gsap/1.18.5/TweenMax.min.js
> is no
> t a relative path
>  at clojure.java.io$as_relative_path.invokeStatic (io.clj:414)
> clojure.java.io$file.invokeStatic (io.clj:426)
> clojure.java.io$file.invoke (io.clj:418)
> cljs.closure$write_javascript.invokeStatic (closure.clj:1594)
> cljs.closure$write_javascript.invoke (closure.clj:1587)
> cljs.closure$source_on_disk.invokeStatic (closure.clj:1633)
> cljs.closure$source_on_disk.invoke (closure.clj:1628)
> cljs.closure$output_unoptimized$fn__6325.invoke (closure.clj:1671)
> clojure.core$map$fn__4785.invoke (core.clj:2646)
> clojure.lang.LazySeq.sval (LazySeq.java:40)
> clojure.lang.LazySeq.seq (LazySeq.java:49)
> clojure.lang.RT.seq (RT.java:521)
> clojure.core$seq__4357.invokeStatic (core.clj:137)
> clojure.core$filter$fn__4812.invoke (core.clj:2700)
> clojure.lang.LazySeq.sval (LazySeq.java:40)
> clojure.lang.LazySeq.seq (LazySeq.java:49)
> clojure.lang.RT.seq (RT.java:521)
> clojure.core$seq__4357.invokeStatic (core.clj:137)
> clojure.core$map$fn__4785.invoke (core.clj:2637)
> clojure.lang.LazySeq.sval (LazySeq.java:40)
> clojure.lang.LazySeq.seq (LazySeq.java:49)
> clojure.lang.Cons.next (Cons.java:39)
> clojure.lang.RT.next (RT.java:688)
> clojure.core$next__4341.invokeStatic (core.clj:64)
> clojure.core$str$fn__4419.invoke (core.clj:546)
> clojure.core$str.invokeStatic (core.clj:544)
> clojure.core$str.doInvoke (core.clj:533)
> clojure.lang.RestFn.applyTo (RestFn.java:139)
> clojure.core$apply.invokeStatic (core.clj:646)
> clojure.core$apply.invoke (core.clj:641)
>
>
> So although https://github.com/clojure/clojurescript/wiki/Compiler-
> Options#foreign-libs still says that URLs are valid for :file, I
> downloaded the libs and specified them as relative paths.
>
>
>   :foreign-libs [{:file "gsap/1.18.5/TweenMax.min.js"
>   :file-min "gsap/1.18.5/TweenMax.min.js"
>   :provides ["TweenMax"]}]
>   :externs ["react/externs/react.js"
> "externs/greensock.js"]
>
>
> Lein figwheel now happily starts up.  But when I try to access the site in
> Chrome, it doesn't load and has the following new error in the console:
>
>
> Synchronous XMLHttpRequest on the main thread is deprecated because of its
> detrimental effects to the end user's experience. For more help, check
> https://xhr.spec.whatwg.org/.
>
> goog.loadFileSync_  @   base.js:1396
> goog.retrieveAndExecModule_ @   base.js:1419
> (anonymous) @   VM113:1
> goog.writeScriptTag_@   base.js:1223
> goog.importScript_  @   base.js:879
> goog.importModule_  @   base.js:900
> goog.writeScripts_  @   base.js:1323
> goog.require@   base.js:663
> (anonymous) @   (index):75
>
>
> The site works as normal in Safari, figwheel reloads changes.  It's just
> Chrome that's not working.  I'm at a bit of a loss here now.  Any ideas?
>
> --
> Note that posts from new members are moderated - please be patient with
> your first post.
> ---
> You received this message because you are subscribed to the Google Groups
> "ClojureScript" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to clojurescript+unsubscr...@googlegroups.com.
> To post to this group, send email to clojurescript@googlegroups.com.
> Visit this group at https://groups.google.com/group/clojurescript.
>

-- 
Note that posts from new members are moderated - please be patient with your 
first post.
--- 
You received this message because you are subscribed to the Google Groups 
"ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to clojurescript+unsubscr...@googlegroups.com.
To post to this group, send email to clojurescript@googlegroups.com.
Visit this group at https://groups.google.com/group/clojurescript.

[ClojureScript] Re: CSS in CLJS

[Eoin]

On Sunday, February 5, 2017 at 5:48:06 PM UTC, Thomas Heller wrote:
> > Cheers Thomas. When you have the likes of a containing element. How do you 
> > handle the wrap when defstyled returns a ReactElement?
> > 
> > (defstyled container :div
> >  [_]
> >   {:display "flex"})
> 
> Not sure I understand the question? ReactElements can have children, which 
> this fully supports.
> 
> (defstyled things :div
>   [_]
>   {:display "flex"})
> 
> (defstyled thing :div
>   [_]
>   {:flex 1
>"&.wide"
>{:flex 2}})
> 
> (things {}
>   (thing {} "one")
>   (thing {:classes ["wide"]} "two")
>   (thing {} "three"))
> 
> 
> If you are talking about styles that should only apply when B is contained in 
> A you can do this
> 
> (defstyled A :div
>   [_]
>   {})
> 
> (defstyled B :div
>   [_]
>   {:normal "styles"
>A
>{:inside-a "styles"}})
> 
> I just relaxed the requirements for nesting a bit, previously you had to wrap 
> it in a vector and supply a suffix.
> 
> (defstyled B :div
>   [_]
>   {:normal "styles"
>[A ""]
>{:inside-a "styles"}})
> 
> But with [thheller/shadow-client "1.0.183"] you can do the above version 
> without the vector.  The suffix is so you can refer to parent selectors as 
> well.
> 
> I have used this once in my project
> 
> (defstyled control-group :div
>   [_]
>   {:margin-bottom 20
>"&.inline"
>{:display "flex"}
> 
>"&:last-child"
>{:margin-bottom 0}
>})
> 
> (defstyled control-label :div
>   [_]
>   (css/root
> {}
> (css/rule "&.select"
>   {:line-height 37})
> (css/rule "&.bold"
>   {:font-weight "bold"})
> (css/nested-rule [control-group ".inline"]
>   {:flex 1})))
> 
> (css/...) is the little more verbose syntax, which the maps desugar too. 
> Could have used a map, wrote that before I had the map syntax.
> 
> The result of this is (assuming "test" ns):
> 
> div.test--control-group {...}
> div.test--control-group.inline {...}
> div.test--control-label {...}
> 
> ;; and the nested rule:
> div.test--control-group.inline div.test--control-label {..}
> 
> Hope that answers your question.
> 
> /thomas

Thanks got it. My mistake was mixing reagent's markup with yours. Would you say 
this is an alternative, similar to how shadow.markup relates to om.dom?

-- 
Note that posts from new members are moderated - please be patient with your 
first post.
--- 
You received this message because you are subscribed to the Google Groups 
"ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to clojurescript+unsubscr...@googlegroups.com.
To post to this group, send email to clojurescript@googlegroups.com.
Visit this group at https://groups.google.com/group/clojurescript.

[ClojureScript] [ANN] serverless-cljs-plugin

[Moe Aboulkheir]

The initial release of serverless-cljs-plugin
 works w/ cljs-lambda
 to allow Clojurescript
functions to be deployed via Serverless  - making it
extremely simple to expose plain functions as HTTP endpoints, schedule
their invocation, or distribute them alongside configuration files which
declare their runtime dependencies (queues, Dynamo tables, execution roles,
etc.)

$ lein new serverless-cljs example

Generates a tiny example endpoint/project.  A short walkthrough of its
output:

https://nervous.io/clojurescript/lambda/2017/02/06/serverless-cljs/

Take care,
Moe

-- 
Note that posts from new members are moderated - please be patient with your 
first post.
--- 
You received this message because you are subscribed to the Google Groups 
"ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to clojurescript+unsubscr...@googlegroups.com.
To post to this group, send email to clojurescript@googlegroups.com.
Visit this group at https://groups.google.com/group/clojurescript.