Javascript - Extend an ES6 Class in ES5

Question

I am using the following code for a slider with Siema :

https://codepen.io/pawelgrzybek/pen/boQQWy

Which uses extending classes to add dots to the slide. All works well except that our site is now having issues with Googles Mobile Friendly Test with it using ES6 as it gives the error:

Uncaught SyntaxError: Unexpected reserved word

on this line:

class SiemaWithDots extends Siema {

Is there a way I can make this compatible with ES5?

The code can be seen below:

// instantiate new extended Siema
const mySiemaWithDots = new SiemaWithDots({
  // on init trigger method created above
  onInit: function(){
    this.addDots();
    this.updateDots();
  },

  // on change trigger method created above
  onChange: function(){
    this.updateDots()
  },
});

// extend a Siema class by two methods
// addDots - to create a markup for dots
// updateDots - to update classes on dots on change callback
class SiemaWithDots extends Siema {

  addDots() {
    // create a contnier for all dots
    // add a class 'dots' for styling reason
    this.dots = document.createElement('div');
    this.dots.classList.add('dots');

    // loop through slides to create a number of dots
    for(let i = 0; i < this.innerElements.length; i++) {
      // create a dot
      const dot = document.createElement('button');

      // add a class to dot
      dot.classList.add('dots__item');

      // add an event handler to each of them
      dot.addEventListener('click', () => {
        this.goTo(i);
      })

      // append dot to a container for all of them
      this.dots.appendChild(dot);
    }

    // add the container full of dots after selector
    this.selector.parentNode.insertBefore(this.dots, this.selector.nextSibling);
  }

  updateDots() {
    // loop through all dots
    for(let i = 0; i < this.dots.querySelectorAll('button').length; i++) {
      // if current dot matches currentSlide prop, add a class to it, remove otherwise
      const addOrRemove = this.currentSlide === i ? 'add' : 'remove';
      this.dots.querySelectorAll('button')[i].classList[addOrRemove]('dots__item--active');
    }
  }
}

Answer 1

You would then replace the class with an old-style constructor function, and then manipulate the prototype to set up the prototype hierarchy:

function SiemaWithDots() {
    Siema.apply(this, arguments);
}

SiemaWithDots.prototype = Object.create(Siema.prototype);
SiemaWithDots.prototype.constructor = SiemaWithDots;
SiemaWithDots.prototype.addDots = function () {
    // ... your code ...
};
SiemaWithDots.prototype.updateDots = function () {
    // ... your code ...
};

Answer 2

Currently, your code contains a lot of ES6 features - const , class , arrow functions. You should use an online transpiler like Babel.JS to make your code ES5-compatible.

Also, in your code, you're using a class before you define it. It's good practice to move all class definitions and arrow functions to the top of your code (normal ES5 functions are located before any code is evaluated). So your code should look like:

class SiemaWithDots extends Siema {...}

const mySiemaWithDots = new SiemaWithDots({...});