Items not animating after code was minified by Closure Compiler

[thheller]

I'm investigating an issue where SortableJS doesn't animate when sorting after the code was optimized by the Closure Compiler. This seems to be an issue in the Closure Compiler itself but maybe you have some insight into what might be happening.

The list remains fully sortable it just doesn't animate anymore.

I created a simple repro here:
https://github.com/thheller/sortablejs-closure-issue

Working:
https://thheller.github.io/sortablejs-closure-issue/demo.html
Working but not animating:
https://thheller.github.io/sortablejs-closure-issue/demo-closure.html

[owen-m1]

@thheller Not sure. Seems like an issue with Closure. Maybe also try with this PR: #1340

[thheller]

@owen-m1 Yes, that's exactly it.

I think Angular also uses the Closure Compiler. I can expand a bit on what is happening. If Closure sees an assignment that is never used anywhere it will decide to optimize it away. Unfortunately it doesn't identify that accessing .offsetWidth is actually a CSS trigger that shouldn't be removed.

In the Closure Library there is the concept of goog.reflect.sinkValue(target.offsetWidth) [1] which will be optimized to just target.offsetWidth after compilation. The goog.reflect.sinkValue just tells the compiler to not remove the inner expression.

The _repaint trick seems to achieve the same thing.

[1] https://github.com/google/closure-library/blob/master/closure/goog/reflect/reflect.js#L60-L81

[owen-m1]

@thheller Try master branch

[thheller]

The issue is fixed in master.

[p-himik]

Unfortunately, this is still an issue in 1.10.1. The whole call to repaint is removed completely.
Perhaps something similar to what goog.reflect.sinkValue does could be used to prevent that?