Что определяет порядок выполнения JS-скриптов компонентов темы?

В моей теме есть JavaScript (я уже печально известен? ;)), который изменяет DOM, добавляя элементы через api.decorateCooked(…. Он вставляет различные элементы заголовка HTML.

Также у меня установлен компонент темы DiscoTOC.

Однако добавление обычного <div data-theme-toc="true"></div>, который DiscoTOC распознаёт и разворачивает, не создаёт оглавление, включающее мои динамически добавленные элементы.

Полагаю, это может быть так просто, как порядок выполнения: если DiscoTOC сработает до того, как мой JavaScript добавит больше элементов…

Что определяет порядок выполнения, если несколько фрагментов кода темы на JavaScript вызывают api.cooked(?

поднять? :slight_smile:

плюс глупости, чтобы набрать 20 символов

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

Пока, кажется, нам не приходилось определять порядок выполнения JS.

Да, я вставляю это внутри поста. Именно поэтому я подозреваю порядок выполнения.

Некоторый фрагмент кода определяет порядок выполнения… это точка, где я могу повлиять на ситуацию, чтобы мой компонент появился до оглавления. Например, если сортировка идет по алфавиту по имени компонента (то есть так, как он отображается в списке компонентов в админ-панели), то я могу попробовать назвать свой компонент соответствующим образом и т. д.

Я почти уверен, что порядок выполнения компонентов не зависит от их имени. По умолчанию он определяется по ID.

Тем не менее, вы можете задавать порядок инициализаторов для продвинутых сценариев использования. Я могу разместить DiscoTOC в именованном инициализаторе, чтобы вы могли выполнить свой код до DiscoTOC, но сначала мне нужно понять, что именно вы пытаетесь сделать, чтобы дать вам чёткий ответ.

Ваши изменения здесь основаны на HTTP/AJAX-запросе, верно?

Да, AJAX, но с использованием синхронного вызова. (Я всегда любил оксюморон «синхронный AJAX» :^)

Мне кажется, следующим шагом будет создание правильного компонента — на данный момент это просто немного JS, вставленного в заголовок моей темы. Тогда я смогу поэкспериментировать с тщательно подобранным ID. Возможно, мне понадобится только «_foo» или «0-foo».

Разве не все мы :wink:

Верно. Если вы хотите использовать именованные инициализаторы и порядок инициализации, ваш компонент должен иметь инициализатор в папке /javascript.

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

Некоторое время назад я превратил свой хак на JavaScript в полноценный компонент темы.

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

Насколько я помню, компоненты темы оцениваются после плагинов.

И я могу ошибаться, но они загружаются в порядке имени, поэтому добавление x- в начало имени в прошлом помогало мне гарантировать, что конкретный компонент темы будет оценен последним.

Это нормально. Я пытаюсь упорядочить работу компонента DiscoTOC ( https://github.com/discourse/DiscoTOC.git ) и одного из своих собственных компонентов.

Ответы других участников выше предполагают, что имя компонента не влияет на порядок выполнения. Я просто переименовал их в aa-mycomponent и x-last-DiscoTOC, но это не сработало. [DiscoTOC не включает заголовки, добавленные в DOM динамически — да, в теле поста]

https://forum.moversmindset.com/t/list-of-movers-mindset-podcast-episodes/1160

@Johani, есть ли у вас какие-либо дополнительные идеи из ваших размышлений в мае?

Хмммммм… возможно, проблема не только в порядке. Я только что нажал «Инспектировать»… и элементы в DOM, которые я считал заголовками HTML, на самом деле оказались тегами DIV с class="d-toc-ignore".

Пора копать глубже. Куда исчезли мои заголовки? :slight_smile:

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

Создайте два простых компонента, переопределяющих или подключающих одно и то же, возможно, простой шаблон с незначительными отличиями. Назовите один из них так, чтобы имя начиналось с буквы, идущей позже в алфавите, и обратите внимание, какой из них в итоге переопределяет тему.

В коде здесь, в модели, это явно упорядочено по имени:

Имя не влияет на порядок выполнения. @merefield строка, на которую вы ссылаетесь, влияет на то, как они отображаются в административном интерфейсе, но не используется для фактического выполнения.

Вот соответствующая строка для порядка выполнения:

Таким образом, они выполняются в порядке возрастания «id» в базе данных.

Единственное гарантированное правило, которое работает во всех экземплярах Discourse, заключается в том, что код темы всегда выполняется перед кодом компонента темы.

Как уже упоминал @Johani, если вам нужно выполнить код после загрузки другого компонента, лучшим решением, вероятно, будет использование инициализатора Ember, который поддерживает порядок. К сожалению, в данном случае это сразу невозможно, поскольку, похоже, DiscoTOC не использует инициализаторы Ember. Обновление DiscoTOC с использованием JavaScript из нескольких файлов (и, следовательно, инициализаторов Ember) определенно будет приветствоваться как pull-запрос.

Это жаль, так как это могло бы быть полезным. В любом случае, спасибо за уточнение!

(…и это связано с Theme component order of precedence)

Возвращаюсь к теме, чтобы сказать, что порядок приоритета по DB ID работает; решает мою задачу. Всем спасибо!