¡Hola!
¿Es posible instalar paquetes de npm (mediante package.json o similar) en temas y complementos de Discourse? Estamos buscando reutilizar algunos componentes entre aplicaciones, y esto podría ser un obstáculo si no es posible.
¡Gracias!
Podrías hacer algo similar a lo que hacemos en el núcleo: agregar paquetes de npm mediante package.json y luego copiar los archivos JS a una carpeta del tema (por ejemplo, javascripts/discourse/lib/), pero no creo que puedas importar los paquetes directamente desde node_modules; eso probablemente no funcione.
Suponiendo que tenemos un código JavaScript puro (como algo que podemos incluir y ejecutar para soportar un componente web personalizado) como este, ¿cómo puedo ejecutarlo con tu enfoque? Cuando lo copio y pego en discourse/lib dentro de mi tema, no funciona.
Supongo que no funciona porque el código “no se está llamando en el momento adecuado”, es decir, no se ejecuta cuando la página se carga y dentro del entorno del navegador.
Además, para dar contexto a todos, si intento usar https://unpkg.com/ e incluirlo en el encabezado, obtengo un error como este:
Después de responder al comentario y transmitir la información en una sola idea, me libré del error siguiendo DISCOURSE_CDN_URL causes content security policy violations?
Desactivando la configuración
content_security_policy
Aún estoy averiguando por qué el script no funciona, ya que tengo otro error, pero quizás hasta ahora pueda ser útil para alguien más.
Por si acaso, el error que tengo es este:
Pero el script se ha cargado 
Finalmente, para alguien dentro de la misma búsqueda. Lo hago funcionar así:
- Desactivando la configuración
content_security_policy - Agregando el script explícitamente de forma programática (no usando
$.getScriptni ningún otro enfoque).
Un ejemplo resumido de lo que funciona para mí es (reemplaza web-component por lo que tenga sentido en tu caso):
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"
},
`Hola mundo`
);
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 mejor manera de hacer esto es permitir esa URL específica en la configuración del sitio content security policy script src o en el componente de tu tema. Consulta Mitigar ataques XSS con Content Security Policy para más detalles.
Además, puedes import loadScript from "discourse/lib/load-script"; y luego usarlo para cargar un script externo (en lugar de definir tu propio inyector addScript).
Lamento revivir este hilo, pero es el más relevante que pude encontrar.
Estoy intentando agregar este paquete en un plugin. Me gustaría importarlo usando import { RadixDappToolkit, RadixNetwork } from '@radixdlt/radix-dapp-toolkit'
También está disponible en Yarn, que creo que es lo que usa Discourse, pero no creo que pueda simplemente agregarlo como una dependencia… ¿o sí?
No estoy seguro de poder cargarlo simplemente usando unpkg tampoco, ya que tiene muchas dependencias. ¿Qué opciones tengo? Cualquier indicación es apreciada.
Disculpen la pregunta general, pero estoy muy confundido. ¡Gracias!