Discourse не отображается в Gecko до версии 74

Коммит 08883cbdd1c39a0c15b97af44ddaefe14acdc21a нарушил рендеринг в Discourse на старых выпусках Gecko. В версиях Gecko ранее 74 оператор optional chaining не поддерживается.

Дополнительную информацию см. по ссылке https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining#browser_compatibility.

2 лайка

О, мы же должны транспилировать это, @pmusaraj / @eviltrout / @j.jaffeux?

3 лайка

Возможно, я ошибаюсь, но первоначальное предположение состоит в том, что мы не определяем список браузеров, и используется значение по умолчанию (скорее всего, @babel/preset-env · Babel), которое не считает эту версию поддерживаемой, поэтому код не транспилируется.

Это странно, ведь Firefox 74 — всего лишь годичной давности, но посмотрим на текущий список браузеров:

$ npx browserslist
...
firefox 89
firefox 88
firefox 78
...

Теперь вопрос: @sam, хотим ли мы это поддерживать? Хотя версии всего год, текущая версия Firefox — 89, то есть эта версия отстает на 15 релизов. Не уверен, решение за вами. Важно учитывать, что поддержка этой версии увеличит размер полезной нагрузки для всех, поскольку транспиляция работает примерно как полифилл (добавление некоторых функций для поддержки этой версии и замена синтаксиса на вызовы функций).

2 лайка

(В стабильной версии это UX: Add auto focus to hamburger and user menu dropdowns (#13165) · discourse/discourse@45dca79 · GitHub)

Из любопытства: старый стиль кода работает хорошо, почему бы пока не придерживаться его? :thinking: FIX: We can't use `?.` yet (#13168) · discourse/discourse@96fd202 · GitHub

2 лайка

Причин много, но в основном это упрощает работу разработчикам: не нужно слишком много думать о том, что можно использовать, а что нет, и при этом мы получаем довольно современную основу.

4 лайка

Я не против отказаться от поддержки, при условии, что у нас есть HTML-резервный вариант.

Одно мы точно не можем сделать: показывать работающую статическую страницу в IE9, но сломанную — в Firefox одного года выпуска.

Я предпочитаю просто транспилировать код под Firefox/Chrome возрастом 2–3 года, но готов оставить это решение за @eviltrout и вами. Мы можем быть более агрессивными, но не можем показывать сломанные страницы.

Редакция: см. обратную ссылку. Это может стать довольно серьёзной проблемой на Android, где обновление браузеров часто происходит с большим запозданием.

5 лайков

Я полностью согласен, и меня действительно беспокоит, что в последнее время совместимость браузеров несколько пострадала.

Также на iOS была такая проблема: Safari (iOS) shows blank pages on Discourse instances after beta 8 due to manually disable IntersectionObserver

1 лайк

Да, согласен, как минимум нам стоит внедрить поддержку browserlist, чтобы неподдерживаемые функции не стали для нас сюрпризом

3 лайка

Может ли эта проблема ограничивать индексацию в Google?

Хочу понять, нужно ли мне искать причину блокировки индексации в другом месте.

Спасибо.

Я не могу воспроизвести проблему OP на meta. Я пробовал через Browserstack с использованием Firefox 73 на macOS и Firefox 68 на Windows. @vige, ты можешь воспроизвести проблему на meta?

4 лайка

Я думаю, вы правы, это действительно должно работать. Я просто посмотрел код в браузере:

    toggleHamburger: function toggleHamburger() {
      this.state.hamburgerVisible = !this.state.hamburgerVisible;
      this.toggleBodyScrolling(this.state.hamburgerVisible); // автофокус на первой ссылке в выпадающем меню

      (0, _runloop.schedule)("afterRender", function () {
        var _document$querySelect2;

        (_document$querySelect2 = document.querySelector(".hamburger-panel .menu-links a")) === null || _document$querySelect2 === void 0 ? void 0 : _document$querySelect2.focus();
      });
    },

Обратите внимание, что нам всё же стоит попытаться точно определить, что именно транспилируется, а что нет, даже если проблема может быть не в этом.

4 лайка

Поправьте меня, если я ошибаюсь, @pmusaraj, но, поскольку мы не задаём preset-env и, как следствие, не определяем цели, применяются все включённые плагины. В результате proposal-optional-chaining точно будет применён.

Меня это устраивает, возможно, нам просто нужно ежегодно проверять каждый плагин и решать, всё ещё ли он нужен?

2 лайка

Нашёл. Сломана только ветка stable. Там proposal-optional-chaining не применяется.

В tests-passed изменение с ?. включает в себя изменение proposal-optional-chaining: DEV: Enable optional chaining in all contexts (#13180) · discourse/discourse@855e854 · GitHub

а в stable было сделано только изменение кода с ?., но настройки транспилятора не были скорректированы: UX: Add auto focus to hamburger and user menu dropdowns (#13165) · discourse/discourse@45dca79 · GitHub

3 лайка

Да, верно подмечено:

  • мы добавили код с опциональной цепочкой вызовов
  • затем отменили это изменение
  • после чего добавили его обратно с правильным плагином Babel

Однако 5 дней назад мы перенесли только исходный коммит, без плагина:

@pmusaraj, думаю, что перенос плагина в стабильную ветку тоже будет безопасным, не так ли?

8 лайков

Да, согласен, мы должны сделать бэкпорт. Я займусь этим позже сегодня.

10 лайков

Это уже исправлено в стабильной версии (v2.7.4): плагин proposal-optional-chaining для Babel теперь включён, что решает проблему.

Спасибо @RGJ @j.jaffeux@vige за первоначальный отчёт)!

12 лайков

Ага, теперь всё встало на свои места! Код уже в стабильной версии, а вот транспайлер ещё нет. Спасибо, что проделали работу детектива.

7 лайков

Огромное спасибо всем разработчикам за то, что так быстро исправили это!

К сведению, по моим тестам, эта ошибка в некоторых случаях также затрагивала последнюю версию Microsoft Edge для Android (которая, насколько мне известно, не использует движок Gecko).

6 лайков

Не могли бы вы добавить тег v2.7.4 к этому релизу?
Я потратил полчаса, пытаясь выполнить git checkout v2.7.4, но оказалось, что такого тега не существует :sweat_smile:

3 лайка

Извините за это. Теперь он помечен.

7 лайков