vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.77k stars 6.95k forks source link

[Bug Report] TypeScript transpilation support for es5 target for IE 10/11 compatibility #8601

Closed shelakel closed 5 years ago

shelakel commented 5 years ago

Environment

Vuetify Version: 2.0.7 Last working version: 1.5.17 Vue Version: 2.6.10 Browsers: Chrome 76.0.3809.100 OS: Windows 10

Steps to reproduce

  1. Transpile with TypeScript target es5 for (A-la-carte) IE 10/11 support
  2. Use any VMenu or another component which makes use of the stackable mixin

Expected Behavior

The VMenu opens when clicked (via activator)

Actual Behavior

Nothing happens and a console error is logged:

Uncaught TypeError: document.getElementsByClassName(...).concat is not a function

Reproduction Link

http://www.typescriptlang.org/play/?target=1#code/PTAEDcFcFMBcEsBmBPYAbeAjYBbeAPeAOwGdgTYBDAYwGtLM1pyq6GnhiATafAOgBWJAFwBmAJwAoEKBxwAFgHsuI0AHM4AWUr4AWgEkiPfNLBdF1SHKKw+G2AFEm12CQBCyAMJpKJEgDlKOVAAJzhIENJQSlAmNRpkUAAJABVNABlPRTQmagRFIlAAd3l4anlQc2gSIgByWFASSAAHZsUQhr5qAupKWFNQACVIG3hg6BCQ9uFQAFUiXsg1eQaU5GboB0npyosraBs7OCdoF3cvHz9AuQAKPnuASi6evtB4ElAiRQaYxBG8+AFSTdUg-AHgTbOA6uUAAXlAAG17nxzJYXEdHFCbOdvL4AkFoDdauAALTWSAAfQpINg0JJJJoCAhtQeABpQMjUftDvYTmcPLirgSiaSuPBKGhFGoqTS6QzwdAWQBdADcoBkAHE4KAAF4k7i8UCIdrRHLRBWVcWStQkIA

Other comments

Target es5 transpiles:

const activeElements = [...document.getElementsByClassName('v-menu__content--active'), ...document.getElementsByClassName('v-dialog__content--active')]; // Get z-index for all active dialogs

to:

var activeElements = document.getElementsByClassName('v-menu__content--active').concat(document.getElementsByClassName('v-dialog__content--active')); // Get z-index for all active dialogs

Legacy HTMLCollection doesn't support concat. Can be replaced with (not optimal):

Array.prototype.concat.call(Array.prototype.slice.call(document.getElementsByClassName('v-menu__content--active')), Array.prototype.slice.call(document.getElementsByClassName('v-dialog__content--active')));

A similar issue may be present where other array-like collections are used.

KaelWD commented 5 years ago

Either combine it with babel (recommended) or enable downlevelIteration

shelakel commented 5 years ago

@KaelWD I've confirmed this issue has been resolved in TypeScript 3.6 without downlevelIteration - see https://github.com/microsoft/TypeScript/pull/31166