Problèmes lors du chargement d'un actif js à partir d'un composant de thème

Dev
1

Salut, c’est la première fois que je développe sur Discourse, donc désolé pour les questions stupides.
Je construis un composant de thème pour afficher des PGN (échiquier et parties).
Le composant n’est pas théoriquement difficile, il y a un composant js pour cela (PGNViewer.js) et j’ai réussi à traduire les balises [wrap] en blocs \u003cscript\u003evar x='pgn ici'; ...\u003c/script\u003e et \u003cdiv class='pgn-blahblah'\u003e\u003c/div\u003e appropriés.
Jusqu’ici tout va bien, mais maintenant j’ai besoin de charger le js.
J’ai découvert que je peux utiliser import loadScript from \"discourse/lib/load-script\"; et await loadScript(settings.theme_uploads_local.pgnviewer_js); pour le charger au moment de l’initialisation depuis le répertoire /assets/.
Mais j’ai quelques problèmes ici.
Bien que je puisse charger le composant sur l’installation de développement, je ne peux pas le faire sur mon serveur de production, car il indique que l’actif est trop volumineux. Y a-t-il un moyen de résoudre ce problème ?
Deuxièmement, sur l’installation de développement, je vois un avertissement indiquant qu’il n’a pas pu charger /theme-javascripts/dist.js.map. Je n’ai aucune idée d’où cela vient. Y a-t-il quelque chose que je devrais fournir ?
Dans l’ensemble, cette approche est-elle correcte, ou serait-il préférable d’implémenter un plugin à la place ?
Merci
Cordialement

FF

2 « J'aime »
2

Bienvenue sur Meta, @happycactus :wave:

Oui, probablement. La seule raison pour laquelle vous auriez besoin d’un plugin serait si vous essayiez de modifier l’API (c’est-à-dire le backend).

J’ai eu un problème similaire par le passé.

Oui, vous devez modifier app.yml pour autoriser les gros fichiers à être transmis par le proxy inverse (nginx).

Heureusement, c’est un paramètre simple, upload_size:, voici le contexte :

params:
  ## Quelle révision Git ce conteneur doit-il utiliser ? (défaut : tests-passed)
  version: tests-passed

  ## Taille maximale de téléversement (défaut : 10m)
  upload_size: 20m

Une fois que vous avez modifié cela, vous devrez reconstruire pour qu’il prenne effet :

./launcher rebuild app

Bien sûr, cela suppose que vous avez un accès approprié au serveur…

2 « J'aime »
3

Merci, Robert !

J’ai un doute, probablement parce que je n’ai aucune expérience avec de telles plateformes.
Mon doute est :

Mon approche consiste à “intégrer” le petit extrait de javascript nécessaire pour remplir le bloc div avec le contenu, mais je vois que je pourrais peut-être l’exécuter à partir d’une fonction “cookPgn”, comme c’est fait dans le composant marmaid :

async function applyMermaid(element, key = "composer") {
  const mermaids = element.querySelectorAll("pre[data-code-wrap=mermaid]");
  ...
  await loadScript(settings.theme_uploads_local.mermaid_js);
  ...
  mermaids.forEach((mermaid) => {
    if (mermaid.dataset.processed) {
      return;
    }

    const spinner = document.createElement("div");
    spinner.classList.add("spinner");
    ...
    mermaid.append(spinner);
  });

De cette façon, si je comprends bien, je n’ai pas besoin de charger le script depuis la page (en utilisant loadScript peut-être ??), mais je peux simplement l’importer dans le js du thème ? Ou il est probable que je sois totalement dans l’erreur !
Je veux dire, quelle est la différence entre loadScript et un simple import ?
Pouvez-vous m’indiquer une ressource web où je pourrais mieux comprendre cela ?
Désolé encore si les questions sont triviales ou stupides !

Autre chose, la limite est par défaut à 10M, mais mon asset fait environ 300 Ko, et le zip entier fait 337 Ko, pourtant lors du téléchargement, il indique qu’il est supérieur à 512 Ko.

Merci,

FF

4

Avez-vous essayé un import ? Je ne pense pas que vous puissiez importer un script externe.

Loadscript est la bonne approche et garantit que le script est entièrement chargé avant que votre code ne se poursuive et ne l’utilise (c’est pourquoi il renvoie une promesse).

pouvez-vous partager l’erreur exacte ? est-ce dans la console du navigateur ?

5

Votre véritable problème est d’essayer d’utiliser du JS en ligne, ce qui est interdit par CSP.

Mettez ce code dans une fonction d’aide dans le code de votre composant de thème, et ne l’injectez pas dans les publications.

Téléchargez votre thème actuel sur GitHub et nous pourrons également y jeter un œil.

5 « J'aime »
6

Jetez un coup d’œil au composant Discourse Mermaid, qui charge une bibliothèque et effectue des actions sur les publications.

2 « J'aime »
7

Merci, @Falco, c’était l’un de mes doutes.

Bien sûr, le voici : GitHub - studiofuga/discourse-pgn-component: A theme component for Discourse to display PGN blocks
Il existe également une version plugin, mais je pense que je ne suivrai pas cette approche et resterai sur le composant de thème.

Merci @pfaffman, en effet, je m’en suis inspiré, et j’ai remarqué qu’il fait exactement ce dont j’ai besoin et de la bonne manière, sans injecter le code comme suggéré ci-dessus.

Merci à tous, j’essaierai avec vos suggestions et je reviendrai avec les résultats. Bien sûr, mon code est open source, donc toute contribution ou critique est la bienvenue.

1 « J'aime »
8

C’est de ma faute, j’ai oublié que j’avais limité la taille de la pièce jointe à 512 Ko, je l’ai augmentée à la valeur par défaut (4096) et cela a bien fonctionné. Merci, et désolé pour la question stupide.

2 « J'aime »
9

Ok, j’ai tout corrigé et le composant fonctionne ! Mais nous avons un problème, une « évaluation non sécurisée » dans la bibliothèque que j’utilise. Je suppose que je devrais corriger la bibliothèque en amont, je n’ai aucune idée de comment l’empaqueter.
Pour ceux que cela intéresse, j’ai poussé toutes mes modifications dans mon dépôt ci-dessus, et voici les détails de l’erreur.

Schermata del 2023-09-23 16-12-11
Schermata del 2023-09-23 16-12-111076×662 118 KB

et la ligne est celle-ci (sur le module js d’origine)

let isBrowser=new Function("try {return this===window;}catch(e){ return false;}")

ici.

1 « J'aime »
10

Votre script échoue en raison de la politique de sécurité du contenu en production.

Vous devez ajouter 'unsafe-eval' comme élément dans le paramètre du site : content security policy script src

11

Merci, je parcours la documentation pour voir comment faire cela. :slight_smile: J’apprends beaucoup, merci

1 « J'aime »
12

Ok, je l’ai fait, j’ai juste eu besoin d’utiliser le ’ … lol… Quoi qu’il en soit, mon script a presque fonctionné, j’ai tout poussé sur main et cela a fonctionné d’une manière ou d’une autre, il semble que j’aie un problème de rendu mais au moins le composant principal est appelé (je soupçonne que c’est là que se situe le problème).
Merci à tous… Je reviendrai bientôt avec d’autres questions LOL. Merci !

1 « J'aime »
13

Garder à l’esprit que l’ajout de unsafe-eval à votre CSP supprime essentiellement tout l’intérêt de la CSP et rend votre site moins sécurisé en conséquence.

L’utilisation d’eval est une mauvaise pratique de codage, et elle devrait être corrigée en amont comme vous l’avez souligné ci-dessus.

4 « J'aime »
14

Oui, absolument. Je ne peux pas le corriger pour le moment, mais mon plan est d’abord de corriger mon composant, puis de corriger la bibliothèque en amont et de supprimer la substitution CSP.
Merci pour vos conseils !

15

J’ai presque terminé. J’ai réussi à afficher « quelque chose », mais cela fonctionne de manière aléatoire.
La bibliothèque JavaScript que j’utilise fonctionne ainsi :

Tout d’abord, nous devons définir un bloc <div id='board'> avec un identifiant unique. Ensuite, nous devons lancer une fonction pour remplir le div, quelque chose comme ceci : PGNV.pgnBoard('board', {});. Le script nécessite le même identifiant pour le remplir.

Si j’ai bien compris, je ne peux pas faire cela tout en décorant le bloc cuit, car le document n’est pas encore rempli et l’objet PGNV est incapable de trouver le bloc. J’ai donc d’abord utilisé un widget (cela ne fonctionne pas, car la fonction HTML doit retourner le bloc, et je ne l’ai pas), puis je suis passé à une fonction débrayée : debounceFunction(this, renderPgn, attrs, 200);.

Mais cela fonctionne « parfois ».

Qu’est-ce qui me manque ?

Merci

16

debounceFunction retarde l’appel de la méthode cible jusqu’à ce que la période de temporisation soit écoulée sans appels de temporisation supplémentaires. Il peut parfois ne pas fonctionner, peut-être parce que

debounce n’est peut-être pas la solution dans votre cas d’utilisation.

Essayez d’utiliser les options afterAdopt.

1 « J'aime »
17

Salut Hawn, merci pour ton indice !
Cela semble exactement ce que je cherchais. J’ai essayé deux approches différentes :

  • d’abord utiliser le « decorateCooked » normal pour analyser et attacher le bloc div, puis l’afterAdopt pour rendre en appelant PGNV.pgnviewer() ou
  • utiliser uniquement l’option afterAdopt pour attacher et rendre
    Aucune n’a fonctionné pour un autre problème que je n’arrive pas à saisir complètement, il semble que la bibliothèque interne plante avec une erreur, incapable de trouver l’attribut className apparemment dans un élément DOM. Je suis un peu perdu :slight_smile: . J’ai vu que quelqu’un utilisait loadScript, mais j’importe juste la bibliothèque et la fonction debounce a fonctionné. Quelle est la différence entre les deux méthodes ?

Merci !

18

Salut @hawm , j’ai trouvé pourquoi ça ne fonctionne pas et je suis bloqué.
Bien sûr, je suis totalement novice sur Ember et sur le JS récent en général. J’ai donc étudié un peu et trouvé la raison.
PgnViewerJs s’attend à fonctionner sur le DOM réel, pas sur le DOM virtuel. Donc, même après que l’élément préparé ait été adopté, il n’est pas présent dans le DOM réel, et PGNV recherche les ID en utilisant document.getElementById.
J’ai étudié tout ce que j’ai pu trouver : les composants Ember semblent répondre à mes besoins, mais je ne suis pas sûr de la façon de les gérer.
Ou peut-être API.onAppEvent ?

Merci.

19

J’ai utilisé later() d’Ember et bien que ce soit un hack sale, ça fonctionne.
Une meilleure solution ?

20

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.