A value passed in the constructor of a module isn't remembered when invoked via a shortcode. Any idea what I'm doing wrong?

[mendhak]

I don't know if I'm missing something fundamental or this is a quirk specific to shortcodes. When I call a module function for a shortcode, the value I had initially passed into the constructor seems to be undefined. This happens with normal shortcodes and Nunjucks async shortcodes.

I've got a contrived example to illustrate.

In a separate module I created this class

test.shortcode.js:

module.exports = class Square {
  constructor(initialValue) {
    this.initialValue = initialValue;  // <-- area of interest
  }
  async doWork(anotherValue) {
    return `${this.initialValue}:${anotherValue}`;
  }
}

Then in eleventy.js I am making a shortcode call.

  let TestShortCode = require('./_configs/test.shortcode.js');
  let tsc = new TestShortCode('aaa');  //<--- initialValue 
  eleventyConfig.addNunjucksAsyncShortcode('mytest', tsc.doWork);

Now when I use this shortcode in a post,

{% mytest 'second' %}

I get the output: undefined:second

So the value passed in the constructor isn't available when the call gets made.
Is that making sense? I couldn't understand why that happened.
Of course in a standalone non-Eleventy call, it works fine.

[pdehaan]

Interesting, this seems to work:

-eleventyConfig.addNunjucksAsyncShortcode('mytest', tsc.doWork);
+eleventyConfig.addNunjucksAsyncShortcode('mytest', async (value) => tsc.doWork(value));

[pdehaan]

Or even this [although I probably prefer the above version]:

eleventyConfig.addNunjucksAsyncShortcode('mytest', tsc.doWork.bind(tsc));

[mendhak]

Yeah that is interesting isn't it. I'm not a JS expert so I'm not sure what's happening here. Yeah the above way does look good, I'll play around with it. Still, can't help but wonder why the original tsc.doWork isn't working, that would be perfect!

[pdehaan]

Yeah, looks like it's losing scope. Not sure if something internally would be wrapping the async shortcode or not.
This looked semi-relevant and interesting: https://www.freecodecamp.org/news/what-to-do-when-this-loses-context-f09664af076f/

[mendhak]

Ah that's it, describes it pretty well. Looks like arrow is the way to go. Thanks!