Problem/Motivation

There is a fair amount of ES6 code within this module -- namely ES6 arrow funcitons and other ES6-only methods. This newer JS syntax is more declarative and works great in modern browsers; however, older browsers like IE11 do not like most of these newer and fancier features. Due to this, smart content blocks completely fail to render when JS syntax errors are present.

Proposed resolution

We either need to remove the ES6 code for now and replace with older syntax equivalents, or figure out a way to include polyfills and/or a build step.

It does seem like core now supports ES6 for JS evelopment (see https://www.drupal.org/node/2815083), and there is an open issue for building/transpiling contrib code (see https://www.drupal.org/project/drupal/issues/2957390); however, this could entail quite a bit of setup and still appears to be in active development.

CommentFileSizeAuthor
#9 interdiff_7_9.txt862.92 KBmichaellander
#9 3174982-9.patch799.78 KBmichaellander
#7 interdiff_5-7.txt1.06 KBgantal
#7 polyfill--3174982-7.patch333.47 KBgantal
#5 polyfill--3174982-5.patch324.63 KBgantal
#4 polyfill--3174982-4.patch159.79 KBgantal

Comments

afireintheattic created an issue. See original summary.

afireintheattic’s picture

afireintheattic commented
Issue summary: View changes
afireintheattic’s picture

afireintheattic commented
Issue summary: View changes
gantal’s picture

gantal commented
StatusFileSize
new polyfill--3174982-4.patch159.79 KB

I followed core's pattern and used yarn to transpile all the ES6 code into ES5. All of the existing JS files have their extensions updated to .es6.js. The transpiled files are located in the same directory as the source file with a .js extension, so the libraries.yml file did not need to be updated.

I did a quick test on IE11 and I still saw a console error related to Promises but I'll still put the patch up here so someone else can test and see what issues remain.

gantal’s picture

gantal commented
Status: Active » Needs review
StatusFileSize
new polyfill--3174982-5.patch324.63 KB

The patch in #4 did not polyfill objects or methods so Promise was still undefined in IE. I switched all of the ES6 code to run through webpack, with polyfills from core-js. Should be ready to test now!

gantal’s picture

gantal commented
Assigned: Unassigned » gantal
Status: Needs review » Needs work
gantal’s picture

gantal commented
StatusFileSize
new polyfill--3174982-7.patch333.47 KB
new interdiff_5-7.txt1.06 KB

It seems like the patch in #5 doesn't apply anymore, which might make it hard to test. Re-rolling a new one! There's still an issue with the promise not returning the expected result, not ready to test yet.

afireintheattic’s picture

afireintheattic commented

Awesome, thanks for the patch @gantal! This updated patch applies cleanly and looks to be working as expected. I think we should get a few more reviews in there, so I'm leaving this as needs review for now B-)

michaellander’s picture

michaellander commented
StatusFileSize
new 3174982-9.patch799.78 KB
new interdiff_7_9.txt862.92 KB
michaellander’s picture

michaellander commented
Status: Needs work » Needs review

  • michaellander committed 116b29a on 3.x 
    Issue #3174982 by gantal, michaellander, afireintheattic: Polyfill or...
michaellander’s picture

michaellander commented
Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.