for some reason animation option isn’t working. I was wondering if anyone else had this problem. I can see in web developer tools that transform and transition css props are being applied when dragging items, but they are not animated.

when I try the same exact (minimalistic code) in React, the animation works fine

what’s the equivalent JS

React:

<Sortable options={{animation: 150}}>
          {[1, 2, 3].map(item => (
            <li>{item}</li>
          ))}
        </Sortable>

[:> Sortable
   {:options {:animation 150}}
   [:li "hello"]
   [:li "world"]
   [:li "hello some other world"]]

I think you have to add #js in front of {:animation 150}

could be wrong. try it out

still the same

the weird thing is, as I said - the css props show up in web developer tools

transition and transform

but something is still missing

Some global css missing? Lots of libraries assume webpack and import their css.

I think it’s something to do with shadow-cljs

because if I load react-sortablejs using CDN and then if I use [:> js/Sortable], it works

@bravilogy if you make a minimal repro I'm happy to take a look at it

oh that would be amazing 🙂 thank you! I was actually just posting the issue in #shadow-cljs but I’ll create a repo first

@thheller here is it https://github.com/Bravilogy/shadow-cljs-issue

thank you for looking into this

basically it’s just the animation that doesn’t work

the sorting bit works

that is indeed very odd

it is yeah. and the css props do show up

so technically it should be working

@bravilogy it also works when using

(ns rubaxa.core
  (:require ["sortablejs/Sortable.min.js" :as sortable]
            [reagent.core :as reagent]))

I guess this has something to do with the minification. looking into it.

may just be a bug in sortablejs itself

oh wow that’s a nice discovery! 😄

I’m actually fine with using "sortablejs/Sortable.min.js"

yeah its closure. If I just take the Sortable.js and run it through closure (without shadow-cljs) it breaks the same way

interesting

thank you so much for your help

I’ll just use the minified version

if I wanted to use this react component https://github.com/SortableJS/react-sortablejs which is just a react component that uses that sortablejs library

how could I fetch that minified version in here?

I tried "react-sortablejs/react-sortablejs.min.js"

but that doesn’t work

https://shadow-cljs.github.io/docs/UsersGuide.html#js-resolve-npm

:resolve {"sortablejs" {:target :require :require "sortablejs/Sortable.min.js"}}

that will rewrite all requires to sortablejs to the minified version. so also the internal require that react-sortablejs has

oh I see. that’s really cool!

:js-options {:resolve {"sortablejs" {:target  :require
                                               :require "sortablejs/Sortable.min.js"}}}

is this correct?

should be yeah

it’s giving me unknown resolve target

oh sorry .. :target :npm not :target :require

yaaayyy!! 😄 it all works

thank you again. I appreciate your help

lets see if they maybe have a clue to whats happening before reporting to closure folks https://github.com/SortableJS/Sortable/issues/1492