[core] IE polyfills guide

[BigBadaboom]

This documentation states that vue-material is compatible with IE11, but, it appears to use JS API methods that are not supported in IE11.

For instance, I found that Object.values() is used in four different places.

Is this intentional? I am attempting to use vue-material in a vanilla JS situation. If vue-material requires the use of polyfills or transpiling to work in some of the browsers in the compatibility list, then that should at least be stated clearly in the documentation. Or the compatibility list should be updated.

[Samuell1]

We doesnt have guide yet how to make it work in IE because we thinking about dropping IE support because of some unsupported features that we using.

[BigBadaboom]

Are you talking about JS features, or CSS/DOM features?

[marcosmoura]

We will release a IE guide, but our support is not going to be out of the box. You'll need to include some polyfills to make it work. So the main problem is not CSS (we do have some bugs here, but it can be fixed) but JS features.

[BigBadaboom]

The following polyfills got it running in IE11 for me (in my app at least).

// Polyfills required for vue-material.

// Object.values

const reduce = Function.bind.call(Function.call, Array.prototype.reduce);
const isEnumerable = Function.bind.call(Function.call, Object.prototype.propertyIsEnumerable);
const concat = Function.bind.call(Function.call, Array.prototype.concat);

if (!Object.values) {
  Object.values = function values(O) {
    return reduce(Object.getOwnPropertyNames(O), function(v, k) { return concat(v, typeof k === 'string' && isEnumerable(O, k) ? [O[k]] : [] ) }, []);
  };
}

// Array.includes()

if (!Array.prototype.includes) {
  Object.defineProperty(Array.prototype, 'includes', {
    value: function(searchElement, fromIndex) {

      if (this == null) {
        throw new TypeError('"this" is null or not defined');
      }

      var o = Object(this);
      var len = o.length >>> 0;
      if (len === 0) {
        return false;
      }
      var n = fromIndex | 0;
      var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

      function sameValueZero(x, y) {
        return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));
      }
      while (k < len) {
        if (sameValueZero(o[k], searchElement)) {
          return true;
        }
        k++;
      }
      return false;
    }
  });
}

Now I am trying to resolve a CSS issue where steppers collapse to 0 height. The "100%" value for flex-basis in this rule seems to be the culprit.

.md-stepper {
    width: 100%;
    -webkit-box-flex: 1;
    flex: 1 0 100%;
    padding: 16px 24px;
}```

[BigBadaboom]

I'm very disappointed you closed this.

You could replace these two ES7/8 functions with around 10 lines of code, and make the library compatible with older browsers.

Instead, a lot of people are now forced to:

• work out why the code doesn't run
• hunt for a solution
• add a polyfill.

I very much appreciate the work that went into vue-material, but I think it's a mistake.

[Samuell1]

@BigBadaboom Sorry, I closed it because its question issue (after 7+ days i close question issues). I renamed it now and reopened. Now we have on our roadmap to make it compatible with IE. And like @marcosmoura said there will be IE guide.

And Babel polyfills should help you without any additional code: https://babeljs.io/docs/usage/polyfill/

[BigBadaboom]

Thanks for the update.

[BigBadaboom]

Just a followup, in case it helps. A String.includes() polyfill is needed to get <md-progress-spinner> working.

[Samuell1]

@BigBadaboom includes is not in babel polyfills?

[BigBadaboom]

@Samuell1 I am not using the babel polyfill. I wanted a leaner file with just the functions needed for vue-material. I added that comment just to update my original list of needed polyfills.

[williamchong]

Common practice for library is to transpile to es5, instead of requiring user to polyfill it just saying

[Samuell1]

@williamchong007 library is transpiled to es5, if library have polyfills in code it can make library much bigger and somebody who doesnt need support for IE11 or older browsers will be still loading same not useful code

[williamchong]

@Samuell1 maybe put it in a seperate folder, say ’/dist/es5 in the build process?

[actorius]

With vue-cli v3 you can use transpileDependencies option in vue.config.js

module.exports = {
  transpileDependencies: ['vue-material']
}

[Samuell1]

With new vue cli 3 its more simple to add polyfills to your project: https://cli.vuejs.org/guide/browser-compatibility.html#polyfills

[eunleem]

@Samuell1 How do I actually add the polyfill for Object.values? XD thank you

[VdustR]

@eunleem You can add babel/polyfill into your repo.