WebformBuilder hooks using arrow functions breaks custom templating

[Jeremy Boschen]

Why are hook assignments in WebformBuilder using arrow functions? This breaks things when nested calls are trying to reference 'this' as the component.

From MDN:
Arrow functions
In arrow functions this retains the value of the enclosing lexical context's this. In other words, when evaluating an arrow function's body, the language does not create a new this binding.

https://github.com/formio/formio.js/blob/v5.0.0-rc.27/src/WebformBuilder.js#L122

later...

Element.js

    hook() {
        const name = arguments[0];
        if (this.options &&
            this.options.hooks &&
            this.options.hooks[name]) {
            // this === component instance
            return this.options.hooks[name].apply(this, Array.prototype.slice.call(arguments, 1));

Component.js ...

renderTemplate(name, data = {}, modeOption) {
...
// this === WebformBuilder instance, not component instance
names = [
    "builderComponent-undefined-",
    "builderComponent-undefined",
    "builderComponent-",
    "builderComponent"
]

Thanks,
Jeremy

[Travis Tidwell]

I believe the link you provided is intentionally using an arrow function to preserve the "this" pointer to point to the Webform class. It should be at the discretion of who is making the call to the hook which "this" they wish to use. If they wish to use the "this" of the class that is making the call, they would use the arrow function which is what we see in WebformBuilder.js, and if you use classical function declarations, it would point to the component making the hook call. Regardless, even if you use the arrow function method, there is still "component" instance is passed as a parameter to the arguments.

I do not believe there is an issue to fix here. Thank you for reporting this though.