Carregando bibliotecas js via register_asset

Dev
1

Percebi que os arquivos JS adicionados usando register_asset por meio de plugins são passados como string para a função eval.

O problema com o eval é que ele não adiciona o objeto ao escopo global, conforme discutido aqui: https://stackoverflow.com/questions/4670805/javascript-eval-on-global-scope, o que é essencial para usar uma biblioteca JS.

Especificamente, eu estava tentando usar https://github.com/muaz-khan/RecordRTC/blob/master/RecordRTC.js em um plugin, mas as funções não estavam acessíveis nos arquivos do Ember.

A solução alternativa é processar o arquivo com o webpack, usando libraryTarget como umd.

Muitas bibliotecas são processadas dessa forma, o que parece funcionar sem necessidade de configuração adicional.

Agora, não sou especialista nessas coisas, mas estou apenas me perguntando se faria sentido que o Discourse adicionasse os ativos registrados ao escopo global.

Nota: Peço desculpas se algo disso parecer bobo. Eu não esperava ter que mexer com o webpack para fazer bibliotecas JS funcionarem com o Discourse, o que me motivou a publicar este relato. :wink:

2

Algo parece estranho aqui — eu olhei nosso plugin lazyYT que inclui um ativo usando register_asset e ele não estava dentro de um bloco eval.

Você poderia fornecer um pequeno exemplo de plugin que reproduza o problema?

3

Eu me pergunto se isso é um efeito colateral não intencional de

(ou seja, isso só acontece em desenvolvimento)

4

Eu também me perguntei isso - se for esse o caso, existem alternativas, mas eu gostaria de um exemplo reproduzível.

5

Claro.

Interessante. Posso executar o plugin em produção para verificar se esse é o caso.

6

@eviltrout
Um pequeno plugin usando a mesma biblioteca mencionada no OP GitHub - fzngagan/js-test · GitHub

Eu simplesmente tentei chamar a função adicionada pela biblioteca no inicializador e no console do JS recebo ReferenceError: RecordRTC is not defined

Usei a versão não minificada da biblioteca, o que pode ser útil para depuração.

Além disso, uma captura de tela da aba sources para mostrar que tudo foi passado para a função eval.

Screenshot 2020-07-01 at 7.45.49 PM
Screenshot 2020-07-01 at 7.45.49 PM944×423 66.4 KB

7

Outra constatação minha é que os arquivos JS incluídos tanto no discourse-spoiler-alert quanto no lazy-yt injetam funções no objeto jQuery global, mas não declaram nenhuma função de nível superior.

8

Olhei para o seu plugin e posso confirmar que o eval está presente apenas no modo de desenvolvimento. Em produção, ele será inserido no escopo global. Entendo que isso não seja ideal, mas também não acho que bibliotecas devam normalmente ser distribuídas sem algum tipo de suporte a módulos (por exemplo, UMD).

Minha sugestão seria reempacotar o JS com algum tipo de suporte a UMD e depois importá-lo, mas isso é um pouco complicado de configurar se você não tem muita experiência com JS e módulos.

Em vez disso, uma maneira fácil de fazer isso funcionar é editar o RecordRTC.js e adicionar a seguinte linha:

window.RecordRTC = RecordRTC;

Seria ainda melhor envolver todo o conteúdo em um IIFE:

(function(exports) {
  // o conteúdo original do arquivo vai aqui
  exports.RecordRTC = RecordRTC;
})(window);
9

Sim, concordo. Muitas delas são distribuídas dessa forma e funcionam perfeitamente. Obrigado por investigar isso e pela confirmação :+1: Optei por empacotar a biblioteca via webpack e funciona sem nem mesmo precisar importar. Deveria ter testado no modo de produção, no entanto.