Javascript-Assets in einer Theme-Komponente

Hubbe · 4. Mai 2021 um 08:19

Ich versuche, eine STL-Vorschau-Komponente für ein Theme zu erstellen. Es gibt eine hervorragende JavaScript-Bibliothek dafür, aber ich bin mir nicht sicher, wie ich sie in einer Theme-Komponente zum Laufen bekomme.

Es ist reguläres JavaScript, nicht ES6. Das bedeutet meiner Meinung nach, dass ich es nicht einfach ins Verzeichnis „javascripts

Hubbe · 4. Mai 2021 um 23:14

Dies scheint zu zeigen, wie man es für ein Plugin macht: How to ship javascript library with plugin?
Immer noch nichts für eine Theme-Komponente gefunden.

pfaffman · 5. Mai 2021 um 02:25

Ich weiß es nicht, aber du hast keine guten Antworten!

Als Nächstes sollten wir das… Ding… zum Einbinden anderer Dateien in die Theme-Komponente ansehen.

Ich denke, man sollte sich zuerst die großen Theme-Komponenten ansehen. Grundsätzlich ist die Dateistruktur der Theme-Komponente identisch, und Ember lädt diese Theme-Dateien einfach genauso wie ein Plugin.

Hubbe · 5. Mai 2021 um 02:29

Ich glaube nicht, jeder Komponente wird ihr eigenes virtuelles Verzeichnis zugewiesen. Etwas wie discourse/theme-10/… Um also Inhalte von dort zu laden, muss ich zumindest irgendwie wissen, wie das Verzeichnis heißt.

Hubbe · 5. Mai 2021 um 02:52

Asset-Namen scheinen nur als Variablen zugänglich zu sein, und die eigentlichen Namen sind lange, komplizierte Zahlen, sodass das auch nicht funktioniert.
Es sieht so aus, als gäbe es derzeit keine Möglichkeit, dies als Komponente umzusetzen. Daher werde ich die JS-Dateien vorerst über Nginx sideloaden und darauf zugreifen. Das bedeutet leider wahrscheinlich, dass diese Komponente nur für mich funktionieren wird.

Falco · 5. Mai 2021 um 03:49

Sie können das normale Skript-Tag in die Datei header.html innerhalb Ihrer Theme-Komponente einfügen.

Hubbe · 5. Mai 2021 um 03:53

Das Side-Loading funktioniert!
Einmal.

Wenn ich zu einem anderen Thema navigiere und dann zurück zum Thema mit der STL, funktioniert es nicht. Ich weiß nicht genau warum, da in der JavaScript-Konsole kein Fehler angezeigt wird. Ich habe früher irgendwo einen Thread gesehen, der von seltsamen onload-Problemen handelte, und da diese Skripte onload verwenden, könnte es damit zusammenhängen?

Hubbe · 5. Mai 2021 um 03:58

Stimmt, aber Viewstl-Code sollte nicht inline eingebunden werden.
Beim Sideloading habe ich in common/head_tag.html ein Script-Tag wie folgt eingefügt:

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

(/xi/ wird von nginx bereitgestellt)

Falco · 5. Mai 2021 um 03:59

Discourse ist eine SPA. Du kannst nicht einfach ein Skript hinzufügen, das jetzt beim onLoad ausgeführt wird, da dies nicht funktioniert. Du musst unsere API-Endpunkte nutzen. Lies den Entwicklerleitfaden für Discourse-Themen.

Hubbe · 5. Mai 2021 um 04:58

In Ordnung, dann versuche ich mal, das veraltete Laden über Script-Tags durch etwas anderes zu ersetzen.

Hubbe · 6. Mai 2021 um 03:07

Ich habe diese Seite jetzt mehrmals gelesen, aber es klappt immer noch nicht.
Ich versuche, three.js mit import-Anweisungen zu laden, aber egal was ich tue, es beschwert sich, dass es das Import-Modul nicht finden kann. Das Seltsame ist, dass ich andere Dateien problemlos importieren kann und die Fehlermeldung überhaupt nicht hilfreich ist.

Wie auch immer, hier ist, was ich erhalte, vielleicht kann mir jemand helfen:

Hier ist der Import, der nicht funktioniert:

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);

Und hier ist der Fehler, den ich bekomme:

_application-547e0be66174ffd22a4d74fd8b568f6a3892a266cff18cb078c08d6357227acb.js:74333 Ein Fehler ist im Theme/Component "STL previews" aufgetreten: 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

Ist ‘.’ ein magisches Modul-Trennzeichen oder so etwas?

Hubbe · 6. Mai 2021 um 03:40

Ich vermute, dass ‘.’ magisch ist, denn wenn ich three.module.js in three_module.js umbenenne, bekomme ich ein völlig anderes Problem: Ich kann das Theme nicht mehr laden. (500-Fehler)

Hubbe · 6. Mai 2021 um 03:46

Ich habe auch versucht, three.js direkt über eine vollständige URL von einem CDN zu importieren, aber das scheint ebenfalls nicht zu funktionieren…

merefield · 6. Mai 2021 um 07:19

Wenn Sie nur ein JavaScript-Asset im Just-In-Time-Modus laden müssen – wie hier, wo ich die D3-Bibliothek benötige – können Sie dieses Muster mit Loadscript verwenden:

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) {

und etwas weiter oben:

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 gibt einen Promise zurück, sodass Sie auf das Ergebnis eine .then-Methode anwenden müssen. (Ich bin mir nicht sicher, gehe aber davon aus, dass das Ergebnis implizit zwischengespeichert wird, sodass es beim zweiten Aufruf usw. schneller ausgeführt wird.)

Wie Sie sehen können, können Sie mehrere Skripte hintereinander laden, indem Sie sie verkettet verwenden.

Beachten Sie, dass dies innerhalb einer Ember-Komponente ausgeführt wird und vom didInsertElement-Hook ausgelöst wird. Erfahren Sie hier mehr über Ember-Komponenten: Templates are HTML - Components - Ember Guides

Beachten Sie auch, dass die Skripte selbst im Verzeichnis javacsripts/assets gespeichert sind.

Ich habe dies auf Grundlage von @j.jaffeuxs Code erstellt, der irgendwo verwendet wurde, um ein völlig anderes Skript zu laden (danke, Joffrey! )

Hier ist ein Discourse-Beispiel:

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);
              },

Tipp: Durchsuchen Sie immer die offiziellen und Pavilion-TCs sowie Plugins, die Ähnliches tun, um zu sehen, wie sie dies umsetzen :).

Hubbe · 6. Mai 2021 um 16:55

Interessant, danke für die Hinweise.
Ich werde versuchen, loadScript zu verwenden und zu sehen, ob das mein Problem lösen kann.

Hubbe · 7. Mai 2021 um 03:22

Ich habe mich dafür entschieden, einen einfacheren Ansatz zu verfolgen.
Ich erstelle einfach ein iframe, das eine HTML-Seite lädt, die alle unangenehmen Skript-Aufgaben übernimmt, um die Vorschau zu ermöglichen. Momentan liegt es noch nicht in einem wiederverwendbaren Format vor, aber es wäre relativ einfach, ein Plugin dafür zu erstellen.

Thema		Antworten	Aufrufe
Issues on loading a js asset from a Theme Component Development	19	897	28. September 2023
Defer loading JavaScript in Themes and Components Development dev-news	4	1982	7. April 2022
Question about web app loading Support	2	95	25. April 2025
Need help with theme component Github Development	7	174	17. September 2024
When to switch themes/plugins to `.gjs`? Development	27	547	5. Januar 2026

Javascript-Assets in einer Theme-Komponente

Verwandte Themen