Javascript assets in a theme component

Hubbe · May 4, 2021, 8:19am

I’m trying to build an STL preview theme component. There is an excellent javascript library for this, but I’m not sure how to make it work in a theme component.

It’s regular javascript, not es6, which I think means I can’t just stick it in the “javascripts” directory and import it, right? Besides, the library seem to rely on being imported from a script tag.

So I can create a script tag and add it to the document head, but how do I find the name of the library js file? Also, the library is made up of several JS files, and it assumes that those files will be available in the same directory. It goes on to create additional script tags to load the rest of the library.

So, should these files go in the javascripts directory? Or should they be treated as assets? The closest thing I can find to doing something similar is the discourse-math plugin, but if possible I would prefer to keep this as a theme component…

Hubbe · May 4, 2021, 11:14pm

This seems to show how to do it for a plugin: How to ship javascript library with plugin?
Still haven’t found anything for a theme component.

pfaffman · May 5, 2021, 2:25am

I don’t know, but you don’t have any good answers!

The next thing to look at is the…thing…about including other files in the theme component.

I think some of the big theme components are where to look. Basically, I think, the file structure is the theme component is the same and ember will just load those theme files same as a plugin.

Hubbe · May 5, 2021, 2:29am

I don’t think so, each component gets it’s own virtual directory I think. Something like discourse/theme-10/… So to load stuff from there I have to at least know what the directory is somehow.

Hubbe · May 5, 2021, 2:52am

Assets names seem to only be accessible as variables, and the real names are long and complicated numbers, so that won’t work either.
It kind of seems like there is no way to do this as a component right now, so I’m going to sideload the JS files through nginx and access them that way for now. Probably means this component will only work for me unfortunately.

Falco · May 5, 2021, 3:49am

You can add the normal script tag to the header.html file inside your theme component.

Hubbe · May 5, 2021, 3:53am

sideloading works!
Once.

If I navigate to another topic and back to the topic with the STL in it, then it doesn’t work. I’m not sure why because there is no error in the javascript console. I saw a thread somewhere earlier that talked about onload weirdness, and given that these scripts use onload, maybe it’s related?

Hubbe · May 5, 2021, 3:58am

True, but viewstl code isn’t meant to be inlined.
With the sideloading I put a script tag like this in common/head_tag.html:

<script src="/xi/viewstl/stl_viewer.min.js"></script>

(/xi/ is served from nginx)

Falco · May 5, 2021, 3:59am

Discourse is a SPA. You can’t just slap a script that now on the onLoad as that won’t work. You will need to hook into our API endpoints. Check Developer’s guide to Discourse Themes

Hubbe · May 5, 2021, 4:58am

Alrighty then, I’m going to have a go at replacing the crufty script-tag-based loading with something else then.

Hubbe · May 6, 2021, 3:07am

I have now read this page several times, but I still can’t make it work.
I’m trying to load three.js with import statements, but it seems regardless of what I do, it complains that it can’t find the import. The weird part is that I can import other files just fine, and the error message is entirely unhelpful.

Anyways, here is what I get, maybe someone can help:

Here is the import that doesn’t work:

github.com

profezzorn/discourse-stl-previews/blob/20239810b7e02d5a2a1552011d924743f7f26aad/javascripts/discourse/stlviewer/StlViewer.js#L27


* portions of the Software.
*
* THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
* WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/


import * as THREE from '../three/build/three.module';
import { STLLoader } from '../three/examples/jsm/loaders/STLLoader';
import { OrbitControls } from '../three/examples/jsm/controls/OrbitControls';


export default class StlViewer {
 constructor(stl, element) {
   this.camera = new THREE.PerspectiveCamera(70, element.clientWidth / element.clientHeight, 1, 1000);


   this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
   this.renderer.setSize(element.clientWidth, element.clientHeight);
   element.appendChild(this.renderer.domElement);

And here is the error I get:

_application-547e0be66174ffd22a4d74fd8b568f6a3892a266cff18cb078c08d6357227acb.js:74333 An error occurred in the "STL previews" theme/component: Error: Could not find module `discourse/theme-17/three/build/three.module` imported from `discourse/theme-17/stlviewer/StlViewer`
    at h (_ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74612)
    at _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74581
    at _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74665
    at _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74490
    at require (_ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74663)
    at h (_ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74616)
    at _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74581
    at _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74665
    at _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74490
    at require (_ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74663)
(anonymous) @ _application-547e0be66174ffd22a4d74fd8b568f6a3892a266cff18cb078c08d6357227acb.js:74333
u @ _application-547e0be66174ffd22a4d74fd8b568f6a3892a266cff18cb078c08d6357227acb.js:74325
initialize @ _application-547e0be66174ffd22a4d74fd8b568f6a3892a266cff18cb078c08d6357227acb.js:74304
i.initialize @ _application-547e0be66174ffd22a4d74fd8b568f6a3892a266cff18cb078c08d6357227acb.js:7723
(anonymous) @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:49335
e.each @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:67724
e.walk @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:67638
e.each @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:67568
e.topsort @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:67576
_runInitializer @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:49361
runInitializers @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:49333
_bootSync @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:47768
domReady @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:47668
n._run @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:67275
n._join @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:67251
n.join @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:66968
f @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:53760
(anonymous) @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:53864
l @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:3776
c @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:3844
setTimeout (async)
(anonymous) @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:3882
u @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:3510
fireWith @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:3640
fire @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:3648
u @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:3510
fireWith @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:3640
ready @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:4120
z @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:4130

Is ‘.’ a magical module separator or something?

Hubbe · May 6, 2021, 3:40am

I guess ‘.’ is magical, because when I rename three.module.js to three_module.js, I get a completely different problem: I can’t load the theme anymore. (500 error)

Hubbe · May 6, 2021, 3:46am

I’ve also tried importing three.js directly from a CDN with a full url, and that doesn’t seem to work either…

merefield · May 6, 2021, 7:19am

If you just need Just In Time loading of a javascript asset, like I do here where I require a D3 library, you can use this pattern with Loadscript:

github.com

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


this.words.sort(compare);


this.words.map((word) => {
  word.size = Math.log(word.count + 1.75) * 30;
  word.href = `/tag/${word.text}`;
  return word;
});


var _this = this;


this.ensureD3().then(() => {
  var layout = d3.layout
    .cloud()
    .size([settings.tag_cloud_width, settings.tag_cloud_height])
    .words(_this.words)
    .padding(5)
    .rotate(function () {
      return 0;
    })
    .font("Impact")
    .fontSize(function (d) {

and further up:

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();
    }
  },

Loadscript returns a Promise, so you have to perform a .then on the result. (I’m not certain, but assume the result is implicitly cached, so will run faster second time etc.)

As you can see, you can string them together to load several scripts one after the other.

Note that it’s running inside an Ember Component and is fired off the didInsertElement hook. Learn more about Ember Components here: Templates are HTML - Components - Ember Guides

Note also the script themselves are housed in javacsripts/assets directory.

I based this on @joffreyjaffeux’s code somewhere used to load in a completely different script (thanks Joffrey! )

Here’s a Discourse example:

github.com

discourse/discourse-math/blob/6801b3a481f5749a56944eaa4bf76366eae5a5d7/assets/javascripts/initializers/discourse-math-katex.js.es6#L40


}


function katex($elem) {
  if (!$elem || !$elem.find) {
    return;
  }


  const mathElems = $elem.find(".math");


  if (mathElems.length > 0) {
    ensureKaTeX().then(() => {
      mathElems.each((idx, elem) => decorate(elem));
    });
  }
}


function initializeMath(api) {
  api.decorateCooked(
    function (elem) {
      katex(elem);
    },

Tip: always dig through the Official and Pavilion TCs and Plugins that are doing something similar to see how they achieve things :).

Hubbe · May 6, 2021, 4:55pm

Interesting, thanks for the pointers.
I will try using loadScript and see if that can solve my problem.

Hubbe · May 7, 2021, 3:22am

I decided to try a simpler approach.
I just create an iframe which loads an HTML page which can do all the ugly script things to make the preview work. Right now it’s not in a re-usable format, but it would be relatively simple to create a plugin for it.

Topic		Replies	Views
Issues on loading a js asset from a Theme Component dev	19	573	September 28, 2023
Code reading help. ES6, plugin-outlet `_connectorCache`, custom-html `_customizations`, appEvents dev	4	1276	March 22, 2019
How to inject a service in discourse? dev	8	616	February 8, 2022
Defer loading JavaScript in Themes and Components dev	4	1774	April 7, 2022
Developing Discourse Plugins - Part 1 - Create a basic plugin developers plugin-guides , tutorial	30	73920	December 8, 2023

Javascript assets in a theme component

Related Topics