Example of ES6 Class extending for Framer.js

FooLayer.framer

# Download this file at https://www.dropbox.com/s/6et3x14akt9koqo/FooLayer.framer.zip?dl=0
# FooLayer.js is located in FooLayer.framer/modules/FooLayer.js
FooLayer = require 'FooLayer'

# 'Foo1' is defined for text, but 'Foo2' is displayed
foo1 = new FooLayer
	bazProperty: 'Foo1'
	barProperties:
		backgroundColor: 'rgba(255, 0, 255, 0.2)'
		x: 100	

# 'barProperties' is not defined, so there shouldn't be a 'barLayer'
# yet there is and it's offset 50px (which is defined in foo3) and
# is also red (40% opaque) color
# 'Foo2' is defined for text, but 'Foo3' is displayed
foo2 = new FooLayer
	backgroundColor: '#0ff'
	bazProperty: 'Foo2'
	y: 200

# this is the only one that's 100% true to the code, but is that
# because it's last?
foo3 = new FooLayer
	barProperties:
		backgroundColor: 'rgba(255, 0, 0, 0.4)'
		x: 50
	backgroundColor: '#ff0'
	y: 400
	bazProperty: 'Foo3'

FooLayer.js

class FooLayer extends Layer {
  constructor(properties={}) {
    _.defaults(properties, {
      // Set defaults
      backgroundColor: '#fff',
      clip: true,
      // Set defaults for custom properties
      barProperties: {},
      bazProperty: null,
    });

    super(properties);

    this.defineProperty(Layer, 'enabled', {
      set: function(val) {
        if (val) {
          return this.enable();
        } else {
          return this.disable();
        }
      }
    });
    this.defineSimpleProperty(Layer, 'isDisabled_', false);
    // An example of how I'm looking to create a child layer based on whether
    // a 'barProperties' object is passed into constructor of FooLayer
    this.defineProperty(Layer, 'barProperties', {
      get: () => {
        return this._barProperties;
      },
      set: val => {
        if (_.isObject(val)) {
          val = _.extend({
            color: this._properties.color,
            parent: this,
            name: 'barLayer',
            y: Align.center,
          }, val);

          if (!this._barLayer) {
            this._barLayer = new Layer(val);
          } else {
            _.extend(this._barLayer, val);
          }

          let offset = 0;
          if (this._bazLayer) {
            offset += this._barLayer.x + (this._barLayer.width / 2);
            this._bazLayer.x = offset;
            this.width += offset;
          }

          this._barProperties = val;
        }
      }
    });
    this.defineProperty(Layer, 'bazProperty', {
      get: () => {
        if (this._bazLayer) {
          return this._bazProperty.text;
        } else {
          return null;
        }
      },
      set: val => {
        if (_.isString(val) && val.length > 0) {
          if (!this._bazLayer) {
            this._bazLayer = new TextLayer({
              color: '#000',
              parent: this,
              name: 'bazLayer',
              text: val,
              x: Align.center,
              y: Align.center,
            });
          } else {
            this._bazLayer.text = val;
          }
        }
      }
    });


    // Apply user defined properties
    _.extend(this, properties);

    // Add Event to listen for size change
    this.on('change:size', this.changeHandler_.bind(this));

    // Add 'resize' listener to window
    window.addEventListener('resize', this.resizeHandler_.bind(this));
  }

  /**
   * Define (or extend) properties of the constructor
   * Wrapper of Framer's BassClass.coffee @define methods
   * https://github.com/koenbok/Framer/blob/master/framer/BaseClass.coffee#L22
   * @param  {Object} cls
   * @param  {string} property     the property to define (or extend)
   * @param  {Object} [methods={}] an object of methods (i.e. getter and setter)
   */
  defineProperty(cls, property, methods={}, val) {
    if (val) {
      methods.default = val;
    }

    cls.define(property, _.extend(methods, {
      configurable: true,
      enumerable: true,
    }));
  }

  /**
   * Define (or extend) properties of the constructor with a clear fallback
   * @param  {Object} cls
   * @param  {string} property                the property to define (or extend)
   * @param  {Object|string|number|null} val  fallback/default value for property
   */
  defineSimpleProperty(cls, property, val) {
    this.defineProperty(cls, property, cls.simpleProperty(property, val, {
      configurable: true,
      enumerable: true,
    }));
  }

  /** @private */
  changeHandler_(event) {
    console.log('Size Event triggered', event);
  }

  /** @private */
  resizeHandler_(event) {
    console.log('Resize Event triggered', event);
  }
}



module.exports = FooLayer;