How to use the can/component/.extend function in can

var description = (this.attr('model.description') || '').trim();
        var lines = description.split(/\r?\n/);
        var lastLine = (lines.length) ? lines[lines.length - 1] : '';
        return lastLine.split(': ', 2);
      }
    },
    url: {
      get: function() {
        var lastLineSplit = this.attr('lastDescriptionLineSplit');
        return (lastLineSplit[1] || '').trim();
      }
    }
  }
});

export default Component.extend({
  tag: 'upcoming-event',
  scope: ViewModel,
  events: {
    inserted: function(el, ev) {
      el.find('.event-description').dotdotdot();
    },
    removed: function(el, ev) {
      el.find('.event-description').dotdotdot('destroy');
    }
  },
  template
});

import Component from "can/component/";
import template from "./loading.stache!";
import "can/map/define/";

Component.extend({
  tag: "pmo-loading",
  template: template
});

import Component from 'can/component/';
import stache from 'can/view/stache/';
import indicator from './indicator.stache!';

export default Component.extend({
  tag: 'sam-indicator',
  template: indicator,
  scope: {
    toggle() {
      this.attr('listening', !this.attr('listening'));
    }
  }
});

import Component from 'can/component/';
import Map from 'can/map/';
import 'can/map/define/';
import './settings.less!';
import template from './settings.stache!';

export const ViewModel = Map.extend({
  define: {
    message: {
      value: 'This is the page-settings component'
    }
  }
});

export default Component.extend({
  tag: 'page-settings',
  viewModel: ViewModel,
  template
});

import Component from 'can/component/';
import Map from 'can/map/';
import 'can/map/define/';
import './data.less!';
import template from './data.stache!';

export const ViewModel = Map.extend({
  define: {
  }
});

export default Component.extend({
  tag: 'data-sidebar',
  viewModel: ViewModel,
  template
});

export const ViewModel = Map.extend({
  define: {
    dataSideScrollPanel: {
      value: 'servers'
    },
    serverName: {
      value: null
    }
  },
  setSideScrollPanel(panelName, serverName){
    this.attr('serverName', serverName);
    this.attr('dataSideScrollPanel', panelName);
  }
});

export default Component.extend({
  tag: 'left-sidebar',
  viewModel: ViewModel,
  template
});

import Component from 'can/component/';
import Map from 'can/map/';
import 'can/map/define/';
import './database.less!';
import template from './database.stache!';

export const ViewModel = Map.extend({
  define: {
    message: {
      value: 'This is the page-database component'
    }
  }
});

export default Component.extend({
  tag: 'page-database',
  viewModel: ViewModel,
  template
});

import Component from 'can/component/';
import Map from 'can/map/';
import 'can/map/define/';
import './collection.less!';
import template from './collection.stache!';

export const ViewModel = Map.extend({
  define: {
    message: {
      value: 'This is the page-collection component'
    }
  }
});

export default Component.extend({
  tag: 'page-collection',
  viewModel: ViewModel,
  template
});

import Component from 'can/component/';
import Map from 'can/map/';
import 'can/map/define/';
import './error.less!';
import template from './error.stache!';

export const ViewModel = Map.extend({
  define: {
    message: {
      value: 'This is the page-error component'
    }
  }
});

export default Component.extend({
  tag: 'page-error',
  viewModel: ViewModel,
  template
});

import Component from 'can/component/';
import Map from 'can/map/';
import 'can/map/define/';
import './document.less!';
import template from './document.stache!';

export const ViewModel = Map.extend({
  define: {
    message: {
      value: 'This is the page-document component'
    }
  }
});

export default Component.extend({
  tag: 'page-document',
  viewModel: ViewModel,
  template
});