Ассеты JavaScript в компоненте темы

Hubbe · 04.Май.2021 08:19:44

Я пытаюсь создать компонент темы для предварительного просмотра STL-файлов. Для этого есть отличная библиотека JavaScript, но я не уверен, как заставить её работать внутри компонента темы.

Это обычный JavaScript, не ES6, и, как я полагаю, это означает, что я не могу просто поместить его в директорию «javascripts» и импортировать, верно? Кроме того, библиотека, похоже, полагается на импорт через тег .

Таким образом, я могу создать тег и добавить его в заголовок документа, но как мне найти имя файла JS библиотеки? Также библиотека состоит из нескольких JS-файлов, и она предполагает, что эти файлы будут доступны в одной и той же директории. Далее она создаёт дополнительные теги для загрузки остальной части библиотеки.

Так, должны ли эти файлы находиться в директории «javascripts»? Или их следует рассматривать как ассеты? Ближайшее, что я могу найти для выполнения подобной задачи, — это плагин discourse-math, но, если возможно, я бы предпочел оставить это в виде компонента темы.

Hubbe · 04.Май.2021 23:14:34

Похоже, здесь показано, как это сделать для плагина: How to ship javascript library with plugin?
Пока ничего не нашёл для компонента темы.

pfaffman · 05.Май.2021 02:25:19

Не знаю, но у тебя нет хороших ответов!

Следующее, на что стоит обратить внимание, — это… эээ… включение других файлов в компонент темы.

Думаю, стоит посмотреть на крупные компоненты тем. В общем, я считаю, что структура файлов в компоненте темы такая же, и Ember просто загрузит эти файлы темы так же, как и плагины.

Hubbe · 05.Май.2021 02:29:56

Я так не думаю, каждый компонент получает свою собственную виртуальную директорию, насколько я знаю. Что-то вроде discourse/theme-10/… Поэтому, чтобы загрузить оттуда что-то, я должен хотя бы каким-то образом знать, как называется эта директория.

Hubbe · 05.Май.2021 02:52:10

Похоже, имена ассетов доступны только как переменные, а реальные имена представляют собой длинные и сложные числа, так что этот вариант тоже не подойдёт.
Кажется, что сейчас нет способа реализовать это в виде компонента, поэтому я пока буду загружать JS-файлы через nginx и получать к ним доступ таким образом. Вероятно, это означает, что этот компонент, к сожалению, будет работать только у меня.

Falco · 05.Май.2021 03:49:55

Вы можете добавить обычный тег скрипта в файл header.html внутри компонента вашей темы.

Hubbe · 05.Май.2021 03:53:38

Сайдлоадинг работает!
Только один раз.

Если я перейду к другой теме и вернусь к теме со STL-файлом, он перестает работать. Я не знаю почему, потому что в консоли JavaScript нет ошибок. Ранее я видел где-то обсуждение, где говорилось о странностях с onload, и учитывая, что эти скрипты используют onload, возможно, это связано?

Hubbe · 05.Май.2021 03:58:08

Верно, но код viewstl не предназначен для встраивания.
При подгрузке с боковой панели я добавил тег script в common/head_tag.html следующим образом:

<script src="/xi/viewstl/stl_viewer.min.js"></script>

(путь /xi/ обслуживается через nginx)

Falco · 05.Май.2021 03:59:35

Discourse — это SPA. Просто добавить скрипт с обработчиком onLoad не получится, это не сработает. Вам нужно подключиться к нашим API-эндпоинтам. Ознакомьтесь с Руководством разработчика по темам Discourse

Hubbe · 05.Май.2021 04:58:24

Ладно, тогда я попробую заменить устаревшую загрузку через теги script на что-то другое.

Hubbe · 06.Май.2021 03:07:59

Я уже несколько раз прочитал эту страницу, но всё ещё не могу заставить это работать.
Я пытаюсь загрузить three.js с помощью операторов import, но, кажется, что бы я ни делал, система жалуется, что не может найти импорт. Странно то, что другие файлы импортируются без проблем, а сообщение об ошибке совершенно не помогает.

В любом случае, вот что я получаю, возможно, кто-то сможет помочь:

Вот импорт, который не работает:

github.com/profezzorn/discourse-stl-previews

javascripts/discourse/stlviewer/StlViewer.js

20239810b


      
          * portions of the Software.
          *
          * THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
          * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
          * PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
          * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
          * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
          * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
          */
          
          import * as THREE from '../three/build/three.module';
          import { STLLoader } from '../three/examples/jsm/loaders/STLLoader';
          import { OrbitControls } from '../three/examples/jsm/controls/OrbitControls';
          
          export default class StlViewer {
           constructor(stl, element) {
             this.camera = new THREE.PerspectiveCamera(70, element.clientWidth / element.clientHeight, 1, 1000);
          
             this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
             this.renderer.setSize(element.clientWidth, element.clientHeight);
             element.appendChild(this.renderer.domElement);

А вот ошибка, которую я получаю:

_application-547e0be66174ffd22a4d74fd8b568f6a3892a266cff18cb078c08d6357227acb.js:74333 Произошла ошибка в теме/компоненте "STL previews": Error: Could not find module `discourse/theme-17/three/build/three.module` imported from `discourse/theme-17/stlviewer/StlViewer`
    at h (_ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74612)
    at _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74581
    at _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74665
    at _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74490
    at require (_ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74663)
    at h (_ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74616)
    at _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74581
    at _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74665
    at _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74490
    at require (_ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74663)
(anonymous) @ _application-547e0be66174ffd22a4d74fd8b568f6a3892a266cff18cb078c08d6357227acb.js:74333
u @ _application-547e0be66174ffd22a4d74fd8b568f6a3892a266cff18cb078c08d6357227acb.js:74325
initialize @ _application-547e0be66174ffd22a4d74fd8b568f6a3892a266cff18cb078c08d6357227acb.js:74304
i.initialize @ _application-547e0be66174ffd22a4d74fd8b568f6a3892a266cff18cb078c08d6357227acb.js:7723
(anonymous) @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:49335
e.each @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:67724
e.walk @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:67638
e.each @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:67568
e.topsort @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:67576
_runInitializer @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:49361
runInitializers @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:49333
_bootSync @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:47768
domReady @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:47668
n._run @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:67275
n._join @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:67251
n.join @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:66968
f @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:53760
(anonymous) @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:53864
l @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:3776
c @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:3844
setTimeout (async)
(anonymous) @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:3882
u @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:3510
fireWith @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:3640
fire @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:3648
u @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:3510
fireWith @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:3640
ready @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:4120
z @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:4130

Является ли «.» магическим разделителем модулей или чем-то подобным?

Hubbe · 06.Май.2021 03:40:08

Кажется, точка ‘.’ играет особую роль, потому что при переименовании three.module.js в three_module.js возникает совершенно другая проблема: тема больше не загружается (ошибка 500).

Hubbe · 06.Май.2021 03:46:24

Я также пробовал импортировать three.js напрямую с CDN по полному URL, но это тоже, похоже, не работает…

merefield · 06.Май.2021 07:19:28

Если вам просто нужна отложенная загрузка (Just In Time) JavaScript-ресурса, как в моём случае, где требуется библиотека D3, вы можете использовать этот паттерн с Loadscript:

github.com/merefield/discourse-tc-tag-cloud

javascripts/discourse/components/tagcloudvis.js.es6

91943c7fd


      
          this.words.sort(compare);
          
          this.words.map((word) => {
            word.size = Math.log(word.count + 1.75) * 30;
            word.href = `/tag/${word.text}`;
            return word;
          });
          
          var _this = this;
          
          this.ensureD3().then(() => {
            var layout = d3.layout
              .cloud()
              .size([settings.tag_cloud_width, settings.tag_cloud_height])
              .words(_this.words)
              .padding(5)
              .rotate(function () {
                return 0;
              })
              .font("Impact")
              .fontSize(function (d) {

и выше по коду:

github.com/merefield/discourse-tc-tag-cloud

javascripts/discourse/components/tagcloudvis.js.es6

91943c7fd


      
          import loadScript from "discourse/lib/load-script";
          import DiscourseURL from "discourse/lib/url";
          
          export default Ember.Component.extend({
            classNames: "tag-cloud-vis",
            words: Ember.computed.alias("model.content"),
          
            ensureD3() {
              return loadScript(settings.theme_uploads.d3Lib).then(() => {
                return loadScript(settings.theme_uploads.d3Cloud);
              });
            },
          
            didInsertElement() {
              if (!this.site.mobileView) {
                this.setup();
              }
            },

Loadscript возвращает Promise, поэтому к результату необходимо применить .then. (Я не уверен, но предполагаю, что результат кэшируется неявно, поэтому при повторном запуске он будет выполняться быстрее и т. д.)

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

Обратите внимание, что код выполняется внутри компонента Ember и вызывается в хуке didInsertElement. Подробнее о компонентах Ember читайте здесь: Templates are HTML - Components - Ember Guides

Также обратите внимание, что сами скрипты находятся в директории javascripts/assets.

Я основал это на коде от @j.jaffeux, который использовался для загрузки совершенно другого скрипта (спасибо Жоффре! )

Вот пример для Discourse:

github.com/discourse/discourse-math

assets/javascripts/initializers/discourse-math-katex.js.es6

6801b3a48


      
          }
          
          function katex($elem) {
            if (!$elem || !$elem.find) {
              return;
            }
          
            const mathElems = $elem.find(".math");
          
            if (mathElems.length > 0) {
              ensureKaTeX().then(() => {
                mathElems.each((idx, elem) => decorate(elem));
              });
            }
          }
          
          function initializeMath(api) {
            api.decorateCooked(
              function (elem) {
                katex(elem);
              },

Совет: всегда заглядывайте в официальные и Pavilion TC, а также в плагины, которые делают что-то подобное, чтобы увидеть, как они реализуют подобные вещи :).

Hubbe · 06.Май.2021 16:55:19

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

Hubbe · 07.Май.2021 03:22:49

Я решил попробовать более простой подход.
Я просто создаю iframe, который загружает HTML-страницу, способную выполнять все необходимые скриптовые операции для работы предпросмотра. В данный момент это не оформлено в виде переиспользуемого компонента, но создать для этого плагин было бы относительно просто.

Тема		Ответов	Просм.
Issues on loading a js asset from a Theme Component Development	19	914	28.09.2023
Defer loading JavaScript in Themes and Components Development dev-news	4	1993	07.04.2022
Question about web app loading Support	2	97	25.04.2025
Need help with theme component Github Development	7	190	17.09.2024
When to switch themes/plugins to `.gjs`? Development	27	640	05.01.2026

Ассеты JavaScript в компоненте темы

Связанные темы