Activos Javascript en un componente de tema

Hubbe · 4 Mayo, 2021 08:19

Estoy intentando crear un componente de tema para la vista previa de STL. Existe una excelente biblioteca de JavaScript para esto, pero no estoy seguro de cómo hacer que funcione en un componente de tema.

Es JavaScript regular, no ES6, lo que creo que significa que no puedo simplemente colocarlo en el directorio “javascripts” e importarlo, ¿verdad? Además, parece que la biblioteca depende de ser importada desde una etiqueta <script>.

Así que puedo crear una etiqueta <script> y añadirla al encabezado del documento, pero ¿cómo encuentro el nombre del archivo JS de la biblioteca? También, la biblioteca está compuesta por varios archivos JS y asume que esos archivos estarán disponibles en el mismo directorio. Luego crea etiquetas <script> adicionales para cargar el resto de la biblioteca.

Entonces, ¿deberían ir estos archivos en el directorio “javascripts”? ¿O deberían tratarse como activos? Lo más cercano que encuentro para hacer algo similar es el plugin discourse-math, pero si es posible, preferiría mantener esto como un componente de tema.

Hubbe · 4 Mayo, 2021 23:14

Esto parece mostrar cómo hacerlo para un plugin: How to ship javascript library with plugin?
Aún no he encontrado nada para un componente de tema.

pfaffman · 5 Mayo, 2021 02:25

No lo sé, ¡pero tú tampoco tienes buenas respuestas!

Lo siguiente que debemos revisar es lo… cosa… sobre incluir otros archivos en el componente del tema.

Creo que hay que mirar algunos de los componentes de tema más grandes. Básicamente, creo que la estructura de archivos del componente del tema es la misma y Ember simplemente cargará esos archivos del tema igual que lo haría con un plugin.

Hubbe · 5 Mayo, 2021 02:29

No lo creo, cada componente tiene su propio directorio virtual, creo. Algo como discourse/theme-10/… Así que para cargar cosas desde allí, al menos tengo que saber de alguna manera cuál es el directorio.

Hubbe · 5 Mayo, 2021 02:52

Los nombres de los activos parecen ser accesibles solo como variables, y los nombres reales son números largos y complicados, así que eso tampoco funcionará.
Parece que por ahora no hay forma de hacer esto como un componente, así que voy a cargar los archivos JS de forma lateral a través de nginx y acceder a ellos de esa manera por ahora. Probablemente signifique que, lamentablemente, este componente solo funcionará para mí.

Falco · 5 Mayo, 2021 03:49

Puedes agregar la etiqueta script normal al archivo header.html dentro de tu componente de tema.

Hubbe · 5 Mayo, 2021 03:53

¡El sideloading funciona!
Una vez.

Si navego a otro tema y luego regreso al tema que contiene el STL, ya no funciona. No estoy seguro de por qué, ya que no hay ningún error en la consola de JavaScript. Vi un hilo en algún lugar anteriormente que hablaba de rarezas con onload, y dado que estos scripts utilizan onload, ¿quizás tenga algo que ver?

Hubbe · 5 Mayo, 2021 03:58

Es cierto, pero el código de viewstl no está pensado para ser incrustado.
Con la carga lateral, coloqué una etiqueta script como esta en common/head_tag.html:

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

(/xi/ se sirve desde nginx)

Falco · 5 Mayo, 2021 03:59

Discourse es una SPA. No puedes simplemente añadir un script en onLoad, ya que no funcionará. Deberás conectarte a nuestros puntos finales de la API. Consulta la Guía para desarrolladores de temas de Discourse.

Hubbe · 5 Mayo, 2021 04:58

De acuerdo, voy a intentar sustituir la carga basada en etiquetas script anticuada por otra cosa.

Hubbe · 6 Mayo, 2021 03:07

He leído esta página varias veces, pero aún no logro que funcione.
Estoy intentando cargar three.js con instrucciones de importación, pero parece que, sin importar lo que haga, se queja de que no puede encontrar la importación. Lo extraño es que puedo importar otros archivos sin problemas, y el mensaje de error es totalmente inútil.

En cualquier caso, esto es lo que obtengo; quizás alguien pueda ayudar:

Aquí está la importación que no funciona:

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

Y aquí está el error que obtengo:

_application-547e0be66174ffd22a4d74fd8b568f6a3892a266cff18cb078c08d6357227acb.js:74333 Se produjo un error en el tema/componente "Vistas previas STL": Error: No se pudo encontrar el módulo `discourse/theme-17/three/build/three.module` importado desde `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

¿Es ‘.’ un separador de módulos mágico o algo así?

Hubbe · 6 Mayo, 2021 03:40

Supongo que ‘.’ es mágico, porque cuando cambio el nombre de three.module.js a three_module.js, obtengo un problema completamente diferente: ya no puedo cargar el tema (error 500).

Hubbe · 6 Mayo, 2021 03:46

También he intentado importar three.js directamente desde un CDN con una URL completa, pero eso tampoco parece funcionar…

merefield · 6 Mayo, 2021 07:19

Si solo necesitas la carga Just In Time de un activo de JavaScript, como en mi caso donde requiero la biblioteca D3, puedes usar este patrón con 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) {

y un poco más arriba:

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 devuelve una Promise, por lo que debes ejecutar un .then sobre el resultado. (No estoy seguro, pero asumo que el resultado se almacena en caché de forma implícita, por lo que la segunda vez se ejecutará más rápido, etc.)

Como puedes ver, puedes encadenarlos para cargar varios scripts uno tras otro.

Ten en cuenta que se ejecuta dentro de un Componente de Ember y se activa desde el hook didInsertElement. Aprende más sobre los Componentes de Ember aquí: Templates are HTML - Components - Ember Guides

También ten en cuenta que los propios scripts están alojados en el directorio javascripts/assets.

Basé esto en el código de @j.jaffeux utilizado en algún lugar para cargar un script completamente diferente (¡gracias, Joffrey! )

Aquí tienes un ejemplo de 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);
              },

Consejo: siempre revisa los TCs Oficiales y de Pabellón, así como los plugins que hacen algo similar, para ver cómo logran estas cosas :).

Hubbe · 6 Mayo, 2021 16:55

Interesante, gracias por las indicaciones.
Probaré usar loadScript y veré si eso puede resolver mi problema.

Hubbe · 7 Mayo, 2021 03:22

Decidí probar un enfoque más sencillo.
Simplemente creo un iframe que carga una página HTML, la cual puede ejecutar todas las tareas complejas de script necesarias para que la vista previa funcione. Por ahora no está en un formato reutilizable, pero sería relativamente sencillo crear un plugin para ello.

Tema		Respuestas	Vistas
Issues on loading a js asset from a Theme Component Development	19	872	28 Septiembre 2023
Defer loading JavaScript in Themes and Components Development dev-news	4	1971	7 Abril 2022
Question about web app loading Support	2	89	25 Abril 2025
Need help with theme component Github Development	7	169	17 Septiembre 2024
When to switch themes/plugins to `.gjs`? Development	27	518	5 Enero 2026

Activos Javascript en un componente de tema

Temas relacionados