Bonjour !
Est-il possible d’installer des packages npm (via package.json ou similaire) dans les thèmes et plugins Discourse ? Nous cherchons à réutiliser certains composants entre différentes applications, et cela pourrait constituer un obstacle si ce n’est pas possible.
Merci !
Vous pourriez un peu faire comme nous le faisons dans le cœur, c’est-à-dire ajouter des packages npm via package.json, puis copier les fichiers JS dans un dossier de thème (comme javascripts/discourse/lib/ par exemple), mais vous ne pouvez pas importer les packages directement depuis node_modules, je ne pense pas que cela fonctionnerait.
En supposant que nous disposions d’un code JavaScript brut (comme celui que nous pouvons inclure et exécuter pour prendre en charge un composant web personnalisé) comme celui-ci, comment puis-je l’exécuter avec votre approche ? Lorsque je le copie et le colle dans discourse/lib au sein de mon thème, cela ne fonctionne pas.
Je suppose que cela ne fonctionne pas parce que le code « n’est pas appelé au bon moment », c’est-à-dire qu’il n’est pas exécuté lors du chargement de la page et dans l’environnement du navigateur.
De plus, pour donner du contexte à tous : si j’essaie d’utiliser https://unpkg.com/ et de l’inclure dans l’en-tête, j’obtiens une erreur comme celle-ci :
Après avoir répondu au commentaire et transmis l’information en une seule idée, j’ai éliminé l’erreur en suivant DISCOURSE_CDN_URL causes content security policy violations?
Désactiver le paramètre
content_security_policy
Je cherche toujours à comprendre pourquoi le script ne fonctionne pas, car j’ai une autre erreur, mais cela pourrait peut-être déjà être utile à quelqu’un d’autre.
Pour info, voici l’erreur que je rencontre :
Mais le script s’est bien chargé 
Enfin, pour quelqu’un dans la même quête. Je fais en sorte que cela fonctionne en :
content_security_policy$.getScript ni une autre approche).Un exemple de résumé de ce qui fonctionne pour moi est (remplacez web-component par ce qui a du sens dans votre cas) :
import { withPluginApi } from "discourse/lib/plugin-api";
let flag = false;
export default {
name: "web-component",
initialize() {
withPluginApi("0.8", api => {
api.onAppEvent("page:changed", () => {
if (flag) return;
addScript(
"https://unpkg.com/web-component@0.0.1/dist/web-component/web-component.js",
{ defer: "", crossorigin: "anonymous" }
);
addWebComponent(
"web-component",
{
id: "web-component"
},
`Bonjour le monde`
);
flag = true;
});
});
}
};
function addWebComponent(tag, attrs, content) {
var component = document.createElement(tag);
Object.keys(attrs).forEach(key => {
component.setAttribute(key, attrs[key]);
});
component.textContent = content;
document.body.appendChild(component);
}
function addScript(src, attrs) {
var script = document.createElement("script");
script.setAttribute("src", src);
Object.keys(attrs).forEach(key => {
script.setAttribute(key, attrs[key]);
});
document.body.appendChild(script);
}
La meilleure façon de procéder est d’autoriser spécifiquement cette URL, soit dans le paramètre de site content security policy script src, soit dans votre composant de thème. Consultez Atténuer les attaques XSS avec la politique de sécurité du contenu pour plus de détails.
Vous pouvez également import loadScript from "discourse/lib/load-script"; et l’utiliser ensuite pour charger un script externe (au lieu de définir votre propre injecteur addScript).
Désolé de déterrer ce fil, mais c’est le plus pertinent que j’ai pu trouver.
J’essaie d’ajouter ce package dans un plugin. Je voudrais l’importer en utilisant import { RadixDappToolkit, RadixNetwork } from '@radixdlt/radix-dapp-toolkit'
Il est également disponible sur Yarn, ce qui, je pense, est ce que Discourse utilise, mais je ne pense pas pouvoir simplement l’ajouter comme dépendance… si ?
Je ne suis pas sûr de pouvoir simplement le charger en utilisant unpkg non plus, car il a beaucoup de dépendances. Quelles options ai-je ? Tous les conseils sont appréciés.
Désolé pour la question générale, mais je suis très confus. Merci !