Como instalar pacotes npm em temas/plugins personalizados

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

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!