VoidVolker

В консоли так же пишется результат выполнения функции:

>> console.log()

<- undefined

>> (()=> 123)()
<- 123

Документацию внимательнее читать следует:

document.querySelectorAll(selectors)

selectors

Строка DOMString, содержащая один или более CSS селектор (en-US). Эта строка должна быть валидным CSS селектором. Если это не так, то генерируется SyntaxError. Смотрите Поиск элементов DOM с использованием селекторов для получения информации о том, распознавать элементы. Несколько селекторов нужно разделить запятыми.

https://developer.mozilla.org/ru/docs/Web/API/Docu...

В данном случае надо получить сначала список элементов с нужным классом, а потом отфильтровать в нем те, у которых отсутствует не нужный класс. Можно ручками, можно селектором.

Как именно не работает? Читайте доку: https://developer.mozilla.org/ru/docs/Web/API/Elem...
Потому что innerHTML - это строка и у неё нет еще одного свойства innerHTML.

404 Cannot find "/cjs/esm/getDate.js" in tictic@0.1.0

Ну так как бы вот тут вполне четкое указание на ошибку: wc_cart_fragments_params is not defined.

Подключить jQuery на странице и далее просто использовать его:
$(html).animate(...)

Вполне можно. Если хочется более структурировано, то лучше вот так:
app.js:

class App {
    constructor() {
        this.history = []
    }
    getData() {
    }
}

bundle.js:
window.app = new App()

Откройте для себя requestAnimationFrame и другие туториалы по анимации.

Так просто взять и вынести же:

function run() {
    ...
    let distKm = parseInt(dist / 1000)
    ...
}

Превращается в:

let distKm;
function run() {       
    ...
    distKm = parseInt(dist / 1000)
    ...
}

Изучайте основы языка.

Вот так: Array.prototype.slice()

Обычно так не делается, но если очень хочется, то можно, например так:

Object.defineProperty(window, 'arr',
    { 
        get: function() {
            if (!Array.isArray(window.__arr))
            {
                window.__arr = []
            }
            return window.__arr
        },
        set: function(arr) {
            window.__arr = arr
        } 
    }
)

Прочитать документацию по Document.querySelector() и Document.querySelectorAll(), осознать разницу между двумя методами и использовать подходящий.

Вот так: JavaScript -> Reference -> Classes

Либо просто добавить нужную функцию к объекту:

let o = {
    foo: function() { console.log('foo called') }
}

>> o.foo()
<- foo called

Array.prototype.slice()

Во-первых, у let блочная область видимости:

>> let a = 0;
<- undefined
>> window.a
<- undefined

Во-вторых:

function foo(x) {
  this.x++
}

Вот в этой функции, локальная переменная x и свойство x объекта this - это разные вещи.

Если хочется иметь функцию, которая будет менять определенное или произвольное свойство объекта window или произвольного объекта - то делать надо это явно и прямо. Например:

window.x = 0
window.x++

Или же:

let propName = 'a'
window[propName] = 0
window[propName]++

Первая же ссылка в гугле ведет на мануал:
https://developer.mozilla.org/ru/docs/Web/API/Wind...

Событие unhandledrejection происходит, когда Promise завершён с ошибкой, но на данную ошибку не установлен обработчик.

Т.е., надо сначала поймать ошибку:
checkError().catch(console.error)
И уже потом смотреть, что это за ошибка и исправлять уже её.

Незачем накручивать градусы до огромных цифр - достаточно по достижению 360 возвращать в 0. А в остальном - никаких проблем не должно быть. На производительности практически никак не отразится.

Разместить дочерние элементы в SVG по порядку и использовать MutationObserver для получения события изменения нужного аттрибута.

Очевидно, что надо сделать ровно то же самое и для нового добавленного элемента. Либо сразу после его загрузки либо после его присоединения к дереву. Т.е., создали/присоединили элемент к дереву - и сразу же подключить к нему imask.