How to ship javascript library with plugin?

Dev
1

Hi,
I’d like to ask what is recommended way to ship javascript library with some plugin? I can load it asynchronously from external url using e.g.

Em.$.getScript('https://cdnjs.cloudflare.com/ajax/libs/......min.js').done(function() {
...
}

But I’d prefer storing library locally. Normally I’d use vendor.js to include it and have it loaded before the plugin code, but this approach needs hacking with the Discourse core… So what is recommended way and where to add external js library to plugin? Is there some convention? Thx.

2

Just add the js lib at the assets folder in your plugin, or if available, as a gem dependency.

2 « J'aime »
3

Thanks… In the assets folder will it be loaded automatically or do I need to take care of asynchronous load as quoted in previous post? I need to load library before running plugin code.

4

It’s loaded in the plugin-third-party file, inside the HEAD. You can use ES6 modules to require stuff.

1 « J'aime »
5

I asked a similar question a few days ago (Existing JS module import into ES6 plugin). The problem I have is, that I want it included server side and I have no idea on which path I should require it in ES6 modules.

6

Got back to you there, so we don’t pollute here.

7

Thanks… placing js lib in asset folder and register_asset in plugin.rb did the trick.

2 « J'aime »
8

Désolé de raviver ce fil, mais c’est là que Google m’a conduit. Je tente depuis quelques heures de charger une bibliothèque JS dans mon plugin.

  • Dans le dossier assets/javascripts de mon application, j’ai un fichier nommé argdown-core.js.
  • Dans mon fichier plugin.rb, j’utilise register_asset 'javascripts/argdown-core.js'.
  • Dans assets/javascripts/discourse-markdown/argdown.js.es6, j’utilise import { argdown } from "argdown-core.js".

J’ai essayé de nombreuses variantes de ce qui précède et je continue d’obtenir Uncaught Error: Could not find module argdown-core.js imported from discourse/plugins/Argdown/discourse-markdown/argdown.

Voici certaines des choses que j’ai essayées :

  • Déplacer le fichier dans divers dossiers
  • De nombreuses permutations sur la ligne import
  • Ajouter l’extension .es6 au nom du fichier - d’autres fichiers JS semblent en avoir besoin pour s’exécuter
  • Ajouter :server_side à la fin de ma ligne register_asset dans plugin.rb, car c’est là que cela devrait s’exécuter
  • Rechercher d’autres plugins qui nécessitent des bibliothèques tierces - je n’en trouve aucun qui utilise des stratégies que je n’emploie pas
  • Fouiller dans le code de Discourse pour essayer de comprendre le système de bundling

C’est probablement simple et il y a quelque chose d’évident que j’oublie. Quelqu’un peut-il m’aider ?

1 « J'aime »
9

GitHub - discourse/discourse-algolia: A plugin for indexing and searching your Discourse with Algolia · GitHub fait exactement cela, par exemple. Je vous recommande de jeter un coup d’œil au code, en particulier au début du fichier plugin.rb.

Voici aussi un petit conseil : en programmation, les choses semblent toujours difficiles lorsque vous avez l’impression de ne pas connaître les effets de vos actions. Il est important de savoir ce qui se passe. Je vous recommande d’exécuter cette commande dans votre console : window.requirejs.entries. Cela pourrait vous aider à comprendre certaines choses.

5 « J'aime »
10

Merci, c’est très utile ! Le fait de placer ma bibliothèque dans le dossier assets/lib m’aide beaucoup.

Maintenant que j’ai le bon chemin vers elle, la bibliothèque se comporte mal. :man_facepalming: C’est une grosse bibliothèque avec de nombreux sous-modules : argdown.js nécessite ArgdownApplication.js et plusieurs autres. Lorsqu’il tente de charger ArgdownApplication.js, il affiche : “Uncaught ReferenceError: exports is not defined”.

J’ai essayé de tout regrouper dans un seul fichier avec Webpack, mais pour une raison inconnue, le bundle manque d’une bibliothèque tierce appelée “punycode”. J’ai essayé d’ajouter punycode dans le module compilé, j’ai essayé de le télécharger dans le dossier lib et d’ajouter register_asset 'lib/punycode.js' dans plugin.rb, mais je n’arrive pas à y parvenir.

La bibliothèque fonctionne sur mon ordinateur et dans un autre plugin que j’ai écrit. Y a-t-il une méthode recommandée pour ajouter un module NPM à un plugin Discourse ? Ce fil de discussion indique de copier le dossier du module dans votre dossier /lib/ ; cela ne fonctionne pas pour moi.* Pourriez-vous me montrer un exemple de quelqu’un ayant réussi à intégrer un module NPM complexe avec un plugin Discourse afin que je puisse voir ce que je fais mal ?

*Dans ce fil, ils essaient de charger le module à distance depuis unpkg.com ; je préférerais le faire localement, bien que je devrais peut-être essayer cela.

1 « J'aime »
11

Je vous recommande de choisir la solution entièrement packagée.

1 « J'aime »