Magicmirror: Midori on Pi Zero doesnt support ES6 Arrow Functions (line 51)

[Mar-85]

Please only submit reproducible issues.

Platform: Pi Zero - latest Midori

Node Version: 7.4.0

MagicMirror Version: Latest MM2

Description: Midori is the only browser that reliably and without issues/slowdown can run on the pi zero with MM2. It unfortunately doesnt support ES6 Arrow Functions and causes errors in the pm2 logs and wont load the module. I had this issue with a 3rd party module Profile Switcher and @tosti007 had kindly reverted back to the regular way of using functions and it works perfectly.

Steps to Reproduce: Use Midori to try run the latest compliments, there will be an error in the log and compliments will not start.

Additional Notes: Wondering if there is a way to not use these functions at least until Midori is updated as there are quite a few users of the Pi Zero now.

[Mar-85]

Changed the line to the following at all is back to working now.

>
if (this.config.remoteFile != null) {
this.complimentFile(
function(response){
this.config.compliments = JSON.parse(response);
});
}

[fewieden]

thats not working correctly because in the function this has a new context, you have to save the var this first like it is in line 57

[Mar-85]

oooh sorry! I had that in mine, forgot to add it in there above in the copy and paste. Thanks for noticing!

[MichMich]

Interesting. I thinks it's a good point to discuss if we fully switch to ES6 or complete remove all ES6 functions to support older versions.

[nhubbard]

@MichMich We could use a middle ground. Convert the project to all ES6, add Webpack with Uglify, Concat and Babel, and then run it through there.

[MichMich]

@nhubbard I thought about this a while back, but it would make the project MUCH more complex. Since you end up with compiled files and source files. And while this might be solvable, it is a HUGE issue for issue for people starting with development.

[Mar-85]

@MichMich @nhubbard that does sound as though it would make it quite a bit more complex. I was thinking more along the lines of removing ES6 functions or just labelling the modules to say whether they are compatible with older browsers or not. At least that way those in the know would easily be able to update them before installing...though I suppose this second way doesnt make it very end user friendly.

Suppose the answer would revolve around what users you are catering for.

[MichMich]

Well, the "support focus" is on Electron. So in that case, ES6 should be supported. But I do understand the issue with Midori.

[fewieden]

a research for es6 compatible pi zero browser could solve the problematic

[Mar-85]

@fewieden I don't think the issue is that the browsers arent compatible because they are, the issue is using some of the other browsers slows the pi down to the point its not very usable. Midori seems to be the only one (that I've found...not saying there arent others) works.

I suppose reaching out to Midori to see if they will support ES6 is another option.

[nhubbard]

@MichMich I agree, it would make the project more complicated.

[fewieden]

lets see the response on this https://answers.launchpad.net/midori/+question/452559

[Mar-85]

@fewieden yeah I just opened that after my previous message hoping it would get a response. Maybe should have called it a bug citing the errors from the code run from a module here?

[nhubbard]

@MichMich Could we use a custom polyfill like this?

try {
  // arrow function test, or
  // attempt to load our scripts using the "create new script and add it to the DOM" method
} catch (e if e instanceof SyntaxError) {
  // use "text/babel" as type with babel-standalone and load it by making a new element
}

[MichMich]

@nhubbard It's all so over complicated. Maybe we should make an overview of the ES6 things we use to see if it's nessecery at all.

[fewieden]

Node can handle es6, it's just about the default module frontend stuff. Most of the time just the use of arrow functions which can be replaced by var self = this; and then use function(){}

[nhubbard]

@MichMich I'll try and come up with a Webpack-based solution that may or may not be less complicated... it may be the same.

[MichMich]

@nhubbard Don't put to much effort in it. I'd rather use vanilla JS without any script generation.

[fewieden]

Doesn't look like Midori will support this in the future and based on this comment https://github.com/MichMich/MagicMirror/issues/813#issuecomment-291950505

Do we bother on supporting midori or not?

[Mar-85]

Unless there's a more lightweight browser than MM nothing else runs well on the pi zero. Would be cutting out a lot of people, especially now that the new pi zero w/ wifi is out also. If all you wanted to run was MM a Pi3 is a bit over the top.

[HawkingJan]

Given the fact that the tutorial "How I got my Magic Mirror working on a Raspberry Pi 0 (zero)" alone has 24.5 k views in the MM forum, I think there are a lot of people using the Pi Zero. I would understand to use the arrow syntax if it would make a huge performance or code readability benefit or if the change would be complicated. However, this seems not to be the case here.
So I'm in favour of replacing

this.complimentFile((response) => {
this.config.compliments = JSON.parse(response);

by

this.complimentFile(
    function(response) {
    var self = this;
    self.config.compliments = JSON.parse(response);

(I don't know JS, but it seems to work) and allow them to see the compliments. Of course this does not solve all issues (there might be other unsupported features in other modules...) but at least I don't see any drawbacks for making this change.

[metalshreds]

@HawkingJan Is there anything else you changed besides this? I made the replacement you suggested but can't get a remote file from loading, if I revert back to the code using arrow notation everything works as expected.

[HawkingJan]

I don't remember making more changes to the code, this is also confirmed by the following difference by git (I don't expect the end of line change to have an effect).

 $ cd ~/MagicMirror/ && git diff
diff --git a/modules/default/compliments/compliments.js b/modules/default/compliments/compliments.js
index a0af458..1880d0d 100644
--- a/modules/default/compliments/compliments.js
+++ b/modules/default/compliments/compliments.js
@@ -50,8 +50,11 @@ Module.register("compliments", {
                this.lastComplimentIndex = -1;

                if (this.config.remoteFile != null) {
-                       this.complimentFile((response) => {
-                               this.config.compliments = JSON.parse(response);
+                        // Changes by me
+                       this.complimentFile(
+                            function(response) {
+                                var self = this;
+                               self.config.compliments = JSON.parse(response);
                        });
                }

@@ -192,4 +195,4 @@ Module.register("compliments", {
                }
        },

-});
\ No newline at end of file
+});

I can see the compliments on the mirror and if I access the page "remote" from my regular PC.

[fewieden]

the code of @HawkingJan is incorrect, but still works without using a remoteFile, because the critical code doesn't get reached. It should be something like this (untested), as I already mentioned here https://github.com/MichMich/MagicMirror/issues/694#issuecomment-278124676.

if (this.config.remoteFile != null) {
  var self = this;
  this.complimentFile(function(response) {
    self.config.compliments = JSON.parse(response);
  });
}

[metalshreds]

@fewieden thanks so much! I can confirm that the code above does indeed load the compliments from the remote file. I commented out all compliments on the compliments.js file, magic mirror starts up as "undefined" and then compliments from the remote file load.

[HawkingJan]

As I'm not using a remote file, I didn't notice that it creates problems (and it only worked because I got rid of the arrow function). So thanks for pointing this out. The code proposed by fewieden also works for me. Can somebody check this into the repository?
I don't know if this thread can be closed or if a more general agreement about weather Midori should be supported should be achieved.

[MichMich]

Closed due to inactivity. Feel free to reopen.