Fork me on GitHub
#shadow-cljs
<
2019-12-22
>
royalaid08:12:04

Hey @thheller, I am trying to include lottie via http://airbnb.io/lottie/#/web?id=html-player-installation but when I try to load a namespace requireing with lottie:

(ns animation
  (:require ["lottie-web" :refer [lottie]]))

(defn load-animation
  [props]
  (.loadAnimation lottie props))
I get back:
Duplicate let / const / class / function declaration in the same scope is not allowed.
Googling around led me to https://github.com/google/closure-compiler/issues/3098, so I tried adding {:output-wrapper true} to the build and it didn't change anything. I am guessing that i will just have to require the js directly in the HTML instead of via npm .

thheller10:12:30

@royalaid looks like the closure-compiler doesn't like

function EffectsManager(){}
function EffectsManager(data,element){
    var effects = data.ef || [];
    this.effectElements = [];
    var i,len = effects.length;
    var effectItem;
    for(i=0;i<len;i++) {
        effectItem = new GroupEffect(effects[i],element);
        this.effectElements.push(effectItem);
    }
}

thheller10:12:47

works fine if I delete the empty duplicate. maybe open an issue for the lottie-web repo. that duplicate declaration definitely doesn't need to be there

šŸ‘ 4
grav19:12:02

Hey! I've created an AWS Lambda handler with Shadow-cljs using the :node-library target. I compile with release and everything works as expected, except that instead of using (set! ... I needed to use (aset ... to mutate a specific property in the context object that the handler received. How come this is necessary? I googled the difference between the two, but I still fail to understand why aset is needed in my case. The specific property is "callbackWaitsForEmptyEventLoop". Printing out (.-callbackWaitsForEmptyEventLoop context) yields nil, whereas (aget context "callbackWaitsForEmptyEventLoop") yields true which is supposed to be the default value, which is what lead me on the right path.

royalaid22:12:26

In advance weird things can happen with .- style access

royalaid22:12:00

The reason the aget works is because the string "callbackWaitsForEmptyEventLoop" isn't renamed but .-callbackWaitsForEmptyEventLoop almost definetly is during an :advanced compile which is what release does.

royalaid22:12:12

I am not sure why set! and aset act differently but my hope is that it is really just the way you are trying to access the result that is causing the issue

royalaid22:12:58

also also you shouldn't be using aget and aset on object, see https://clojurescript.org/news/2017-07-14-checked-array-access

ā¤ļø 4
royalaid22:12:21

https://github.com/appliedsciencestudio/js-interop is a great library for doing this kind of work FWIW

šŸ‘ 4
grav11:12:28

Thanks for the pointers! Using a library isn't optimal for Lambdas, since I want to keep the code size down. Seems js-interop is using cljs.core/unchecked-set, which according to KLIPSE is compiled to foo["bar"] = 42. @thheller had another solution, involving sticking to .- notation, adding additional externs checking, and type-hinting with ^js, when the compiler is clueless. This seems to be the better option.

Bravi23:12:15

hi everyone. has anyone ever used framer-motion with shadow-cljs?

Bravi23:12:11

I cannot make <motion.div animate={{ scale: 0.5 }} /> this work anyhow.. šŸ˜• this is how I import it:

["framer-motion" :refer [motion]]
this is how Iā€™m using it
[:motion/div {:animate (clj->js {:scale 0.5})} "Hello"]