How to use the can.DefineMap.extend function in can

import { DefineMap, DefineList, superModel } from 'can';
import loader from '@loader';

const Message = DefineMap.extend('Message', {
  seal: false
}, {
  'id': {
    type: 'any',
    identity: true
  },
  name: 'string',
  body: 'string'
});

Message.List = DefineList.extend('MessageList', {
  '#': Message
});

Message.connection = superModel({
  url: loader.serviceBaseURL + '/api/messages',

import { DefineMap, DefineList, superModel } from 'can';
import loader from '@loader';

const City = DefineMap.extend({
  seal: false
}, {
  'name': {
    type: 'any',
    identity: true
  }
});

City.List = DefineList.extend({
  '#': City
});

City.connection = superModel({
  url: loader.serviceBaseURL + '/api/cities',
  Map: City,
  List: City.List,

{ title: "Dr.", first: "Cosmo", last: "Kramer", licensePlate: "543210" },
	{ title: "Ms.", first: "Elaine", last: "Benes", licensePlate: "621433" }
]);

Component.extend({
	tag: "my-drivers",
	view: `
		<ul>
			{{#each(drivers)}}
				<li>
					{{title}} {{first}} {{last}} - {{licensePlate}}
				</li>
			{{/each}}
		</ul>
	`,
	ViewModel: DefineMap.extend({
		drivers: {
			default: function() {
				return drivers;
			}
		},
		selected: "any",
		select: function(driver){
			this.selected = driver;
		}
	})
});


Component.extend({
	tag: "edit-plate",
	view: `<input value="{{plateName}}">`,

import { DefineMap, route, value } from 'can';
import RoutePushstate from 'can-route-pushstate';
import debug from 'can-debug#?./is-dev';

//!steal-remove-start
if(debug) {
	debug();
}
//!steal-remove-end

const AppViewModel = DefineMap.extend({
	page: 'string',
	slug: 'string',
	action: 'string',
  env: {
    default: () => ({NODE_ENV:'development'})
  },
  title: {
    default: 'place-my-order'
  },
  routeData: {
    default: () => route.data
	},
	get pageComponent() {
		switch(this.routeData.page) {
			case 'home': {
				return steal.import('~/pages/home.component').then(({default: Home}) => {

});
		return sum;
	}
});

Component.extend({
	tag: "player-scores",
	view: `
		{{#each(scores)}} {{points}} {{/each}} = {{scores.sum()}}
	`,
	ViewModel: {
		scores: { Type: Score.List }
	}
});

const Game = DefineMap.extend({
	scores: {
		Type: Score.List
	},
	scoresForPlayer: function(name){
		return this.scores.filter(function(score){
			return score.player === name;
		});
	}
});

Component.extend({
	tag: "demo-html",
	view: `
		<p>Alison: </p>
		<p>Jeff: </p>
	`,