How to require external libraries in a component helper file?

merefield · June 29, 2021, 6:44pm

You can use the approach I use in GitHub - merefield/discourse-tc-tag-cloud: A Discourse Theme Component that displays a tag cloud above the tag lists on the tags page

github.com

merefield/discourse-tc-tag-cloud/blob/91943c7fdc032f640a7a97aa007fd2a3f34ae5fd/javascripts/discourse/components/tagcloudvis.js.es6#L8

    
      
          import loadScript from "discourse/lib/load-script";
          import DiscourseURL from "discourse/lib/url";
          
          
export default Ember.Component.extend({
            classNames: "tag-cloud-vis",
            words: Ember.computed.alias("model.content"),
          
          
  ensureD3() {
              return loadScript(settings.theme_uploads.d3Lib).then(() => {
                return loadScript(settings.theme_uploads.d3Cloud);
              });
            },
          
          
  didInsertElement() {
              if (!this.site.mobileView) {
                this.setup();
              }
            },

Note the assets are registered here:

github.com

merefield/discourse-tc-tag-cloud/blob/91943c7fdc032f640a7a97aa007fd2a3f34ae5fd/about.json#L6

    
      
          {
            "name": "Tag Cloud",
            "about_url": "",
            "component": true,
            "authors": "Robert Barrow",
            "assets": {
              "d3Cloud": "assets/d3.layout.cloud.js",
              "d3Lib": "assets/d3.min.js"
            }
          }

And sit in the assets folder.

Topic		Replies	Views
How to load library in a theme component Dev	6	348	August 25, 2023
Javascript assets in a theme component Dev	15	1844	May 7, 2021
Defer loading JavaScript in Themes and Components Dev	4	1897	April 7, 2022
Plugin template helper Dev	2	1196	October 25, 2016
Include assets (e.g. images, fonts) in themes and components Developer Guides how-to , theme-guides	1	15010	August 23, 2024

How to require external libraries in a component helper file?

Related Topics