Cómo instalar paquetes de npm en temas/plugins personalizados

Desarrollador
1

Hello!

Is it possible to install npm packages (via package.json or similar) in Discourse Themes/Plugins? We are looking to reuse some components across apps and this can be a blocker if it’s not possible.

Thanks!

2

You could sorta do what we do in core, which is, add npm packages via package.json and then copy JS files to a theme folder (like javascripts/discourse/lib/ for example) but you can’t import the packages from node_modules directly, I don’t think that would work.

2 Me gusta
4

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:

image
image937×275 133 KB

5

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:

image
image932×126 44.6 KB

Pero el script se ha cargado :man_shrugging:

6

Finalmente, para alguien dentro de la misma búsqueda. Lo hago funcionar así:

  1. Desactivando la configuración content_security_policy
  2. Agregando el script explícitamente de forma programática (no usando $.getScript ni 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);
}
1 me gusta
7

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

6 Me gusta
8

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!