JavaScript functions not applied to top level function 11ty.js templates using an arrow function

[zachleat]

Works:

module.exports = function({ name }) {
  return `<p>${this.upper(name)}</p>`;
};

Broken:

module.exports = ({ name }) => {
  return `<p>${this.upper(name)}</p>`;
};

Can’t find this.upper.

[zachleat]

Agree with myself from 30 minutes ago that this is pretty confusing but also it is correct JavaScript behavior, specifically with this and arrow functions. I’ll leave this open as we may have a nicer solution later. Definitely need to add docs around this.

[zachleat]

Relevant MDN sections:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Invoked_through_call_or_apply

[pdehaan]

Re: original comment... both snippets look the same to me.
Was one of them supposed to use the function syntax, or am I missing something?

[zachleat]

@pdehaan Ah, yep sorry—edited now!

[zachleat]

Warning added here https://www.11ty.dev/docs/languages/javascript/#warning-about-arrow-functions

[zachleat]

Closing this as a documentation/education issue. I don’t think there is a good way forward here to smooth this over. Sorry, past me.