Server side functions intead of polyfills


#1

Hi,

Would be most appreciated if someone could explain how to do polyfills nicely in Meteor. So for example say Array.prototype.includes().

I want to use the includes() function on client side stuff. But it will probably not work. What if i simply call a Server side method which does this and returns whatever array filtering etc i needed. Then i ensure that I run the latest version of Chrome on the server which I am deploying from (or assume this is the case on Galaxy?)

This way i do not have to put a polyfill in random places on the client side.

Is this a terrible idea? Thanks so much.

Tat


#2

If you’re leveraging Meteor’s ES2015 module support, you can keep all of your client side polyfill’s in one centralized location, and have them all loaded at startup. This helps keep things nice and clean; you always know where your custom polyfill’s are, and can enabled/disable them in one central location. For example:

  1. /client/main.js
import '/imports/startup/client';
  1. /imports/startup/client/index.js
import './polyfills';
  1. /imports/startup/client/polyfills.js
// Define all custom polyfill's in this file
if (!Array.prototype.includes) {
  Array.prototype.includes = function(searchElement /*, fromIndex*/ ) {
    ...
  };
}

#3

Hi @hwillson,

Very cool. I am leveraging the module support, so this will work nicely. Follow up question though - if i now have a let someBool = someArray.includes(someElement) somewhere else in the code (client side), what happens?

Does it automatically know that the browser (say ie) does not know what includes means, and then know to go to the polyfill? That is, i understand the idea of a polyfill, and how you suggest to use this makes sense, but the mechanism of how the browser knows what too execute is confusing me…

Thanks so much.

Tat


#4

Yes it will. The polyfill is modifying the Array prototype, which means the includes function will be available on any Array you’re using in your app. You just have to make sure you call your polyfill before trying to use the includes function anywhere. By following the Guide’s recommended directory structure and making sure your polyfill is called during startup (under /imports/startup/client), you’re ensuring the necessary Array prototype changes are in place when you need them.


#5

mate your like a national treasure in these parts. Much appreciate assistance. Thanks so much.

Tat