Extending Ractive component when using a loader

Question

I've been trying to get around using component loaders as described in component spec. I am unsure how can I do something like this via a component file:

var bookmarkableBaseClass = Ractive.extend({
    oninit : function(){
        this.on(commonBookmarkEvents);
    },
    data : {
        badgeDefinitions: globalCommonBadgeDefinitions
    }
});

Ractive.components.singlecard = bookmarkableBaseClass.extend({
    template: "#smallcarditem"
});

Ractive.components.singleline = bookmarkableBaseClass.extend({
    template: "#cardlineitem"
});

In other words - have a component which extends another base component with common properties - ie common data as well as common proxy event handlers. Currently the component spec only allows me to include other components but not have inheritance as above.

Answer 1

It's not something that's currently supported, though it has been discussed. I think the best option looks like this:

<div class='singlecard'>
  <!-- template goes here -->
</div>

<script>
  var bookmarkableBaseClass = require('./bookmarkableBaseClass');

  component.exports = {
    base: bookmarkableBaseClass,

    someSubclassMethod: function () { /*...*/ }
  };
</script>

Any existing component loader could be modified easily enough to facilitate this – which are you using?