Como instalar pacotes npm em temas/plugins personalizados

Dev
1

Olá!

É possível instalar pacotes npm (via package.json ou similar) em Temas/Plugins do Discourse? Estamos buscando reutilizar alguns componentes entre aplicativos, e isso pode ser um bloqueio se não for possível.

Obrigado!

2

Você poderia meio que fazer o que fazemos no núcleo, que é adicionar pacotes npm via package.json e depois copiar os arquivos JS para uma pasta do tema (como javascripts/discourse/lib/, por exemplo), mas você não consegue importar os pacotes diretamente de node_modules. Acredito que isso não funcionaria.

4

Supondo que tenhamos um código JavaScript puro (como algo que podemos incluir e executar para suportar um componente web personalizado) como este, como posso executá-lo com sua abordagem? Quando copio e colo ele em discourse/lib dentro do meu tema, não funciona.

Acho que não funciona porque o código “não está sendo chamado no momento certo?” como se não estivesse sendo chamado quando a página é carregada e dentro do ambiente do navegador.

Além disso, para dar contexto a todos, se eu tentar usar o https://unpkg.com/ e incluí-lo no cabeçalho, recebo um erro como:

image
image937×275 133 KB

5

Após responder ao comentário e transmitir a informação em uma única ideia, eliminei o erro seguindo DISCOURSE_CDN_URL causes content security policy violations?

Desativar a configuração content_security_policy

Ainda estou tentando entender por que o script não funciona, pois tenho outro erro, mas talvez isso já seja útil para alguém.

FYI, o erro que estou tendo é este:

image
image932×126 44.6 KB

Mas o script foi carregado :man_shrugging:

6

Finalmente, para alguém dentro da mesma tarefa. Fiz funcionar da seguinte forma:

  1. Desativar a configuração content_security_policy
  2. Adicionar explicitamente o script programaticamente (não usando $.getScript nem outra abordagem).

Um exemplo resumido do que funcionou para mim é (substitua web-component pelo que fizer sentido no seu 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"
          },
          `Olá 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);
}
7

A melhor maneira de fazer isso é adicionar a URL específica à lista de permissões, seja na configuração do site content security policy script src ou no componente do seu tema. Consulte Mitigar ataques XSS com Content Security Policy para mais detalhes.

Além disso, você pode import loadScript from "discourse/lib/load-script"; e, em seguida, usá-la para carregar um script externo (em vez de definir seu próprio injetor addScript).

8

Desculpe por ressuscitar este tópico, mas é o mais relevante que consegui encontrar.
Estou tentando adicionar este pacote em um plugin. Gostaria de importá-lo usando import { RadixDappToolkit, RadixNetwork } from '@radixdlt/radix-dapp-toolkit'

Ele também está disponível no Yarn, que acho que é o que o Discourse usa, mas não acho que posso simplesmente adicioná-lo como dependência… posso?

Não tenho certeza se posso carregá-lo usando unpkg também, já que ele tem muitas dependências. Que opções eu tenho? Qualquer dica é apreciada.

Desculpe pela pergunta ampla, mas estou muito confuso. Obrigado!