luci-theme-*: use ES6 syntax

[eamonxg]

Updated to arrow functions for clearer this binding, replaced slice.call with Array.from for more readable array conversion, and adopted ES6 block-scoped declarations.

• This PR is not from my main or master branch 💩, but a separate branch ✅
• Each commit has a valid ✒️ Signed-off-by: <[email protected]> row (via git commit --signoff)
• Each commit and PR title has a valid 📝 <package name>: title first line subject for packages
• Incremented 🆙 any PKG_VERSION in the Makefile
• Tested on: (architecture, openwrt version, browser) ✅
• ( Preferred ) Mention: @ the original code author for feedback
• ( Preferred ) Screenshot or mp4 of changes:
• ( Optional ) Closes: e.g. openwrt/luci#issue-number
• ( Optional ) Depends on: e.g. openwrt/packages#pr-number in sister repo
• Description: (describe the changes proposed in this PR)

[eamonxg]

Hi @systemcrash , do you think this update is necessary?
I believe the ES6 syntax makes the code clearer and easier to read.

[feckert]

Please split this PR in several commits for each theme.

[eamonxg]

Please split this PR in several commits for each theme.

Done.

[feckert]

I am not so familiar with the newest javascript. But what does this mean new arrow function? Can you give me more context about that?

[eamonxg]

I am not so familiar with the newest javascript. But what does this mean new arrow function? Can you give me more context about that?

Sure. In ES6, arrow functions don’t create their own this.
Instead, they inherit the this value from the surrounding scope, which makes their behavior easier to understand in callback situations.

In this code:

return baseclass.extend({
    __init__() {
        ui.menu.load().then((tree) => this.render(tree));
    },
});

the arrow function inherits this from __init__(), so this.render(tree) works exactly the same as:

ui.menu.load().then(L.bind(this.render, this));

The change simply removes the need for the custom L.bind() helper.
For developers familiar with modern JavaScript, the arrow function form is more intuitive and readable than the Luci-specific binding syntax.

[feckert]

@eamonxg Thanks for your explanation. L.bind(this ...) has always annoyed me and makes the code really very confusing. The question now is, do we only want to support ES6 browsers? What about the other browsers that don't have a new JavaScript engine yet?
@systemcrash Is this even relevant, or do all current browsers already support ES6 from their JavaScript engine?

[jow-]

@feckert - you can safely rely on ES6 features now, other parts of LuCI, mainly luci-base, already require them anyway.

[systemcrash]

Yes @feckert ES6 is fine. Some places even use newer standards…

[feckert]

Thanks for the clarification.

[feckert]

@eamonxg Thanks merged