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

import Map from 'can/map/';
import 'can/map/define/';

// recognition.continuous = true;
// recognition.interimResults = true;

export default Map.extend({
  define: {
    transcript: {
      value: ''
    },

    restart: {
      value: true
    }
  },

  init() {
    this.recognition = new webkitSpeechRecognition();
    this.recognition.onresult = this.result.bind(this);
  },

  result(event) {

/* global moment */
import $ from 'jquery';
// import moment from 'moment'; // added globally
import Component from 'can/component/';
import Map from 'can/map/';
import 'can/map/define/';
import template from './upcoming-event.stache!';
import 'dotdotdot';

export const ViewModel = Map.extend({
  define: {
    eventBody: {
      get: function() {
        return (this.attr('model.description') || '').trim();
      }
    },
    eventDate: {
      get: function() {
        var start = this.attr('model.start');
        var startDate = start.attr('date');
        var startDateTime = start.attr('dateTime');
        if (startDateTime) {
          var datetime = moment.tz(startDateTime, 'America/Chicago').tz(start.attr('timeZone'));
          return datetime.format('MMM Do, YYYY — h:mma');
        } else if (startDate) {
          var date = moment(startDate, moment.ISO_8601);

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 Map from 'can/map/';
import 'can/map/define/';

import Recognizer from './recognizer';
const recognition = new Recognizer();

export default Map.extend({
  define: {
    recognition: {
      value: recognition
    },

    threshold: {
      value: 0.1
    },

    name: {
      value: 'sam'
    },

    timeout: {
      value: 30000
    },

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 './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 './data.less!';
import template from './data.stache!';

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

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

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

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',

import Map from "can/map/";
import route from "can/route/";
import 'can/map/define/';
import 'can/route/pushstate/';

const AppViewModel = Map.extend({
  define: {
    message: {
      value: 'Hello World!',
      serialize: false
    },
    title: {
      value: '<%= name %>',
      serialize: false
    }
  }
});

export default AppViewModel;

import Component from 'can/component/component';
import Map from 'can/map/';
import 'can/map/define/';

import template from './details.stache!';
import Restaurant from 'pmo/models/restaurant';

export const ViewModel = Map.extend({
  define: {
    restaurant: {
      get(old) {
        let _id = this.attr('slug');
        if(!old && _id) {
          let params = { _id };
          let restaurant = Restaurant.findOne(params);
          return this.attr('@root').pageData("restaurant", params, restaurant);
        }

        return old;
      }
    }
  }
});