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

makeActive: function(panel){
			this.active = panel;
			this.panels.forEach(function(panel){
				panel.active = false;
			});
			panel.active = true;
		},
		// this is viewModel, not mustache
		// consider removing viewModel as arg
		isActive: function( panel ) {
			return this.active === panel;
		}
	})
});

Component.extend({
	view: `{{#if(active)}}<content></content>{{/if}}`,
	tag:"my-panel",
	ViewModel: DefineMap.extend({
		active: { default: false },
		addPanel: "any",
		init: function(){
			this.addPanel(this);
		}
	})
});

Component.extend({
	tag: 'my-demo',
	view: `
		
			CanJS Content

import { Component } from 'can';
import './new.less';
import view from './new.stache';
import Restaurant from '~/models/restaurant';
import Order from '~/models/order';

export const PmoOrderNew = Component.extend({
  tag: 'pmo-order-new',
  view,
  ViewModel: {
    // EXTERNAL STATEFUL PROPERTIES
    // These properties are passed from another component. Example:
    // value: {type: "number"}
    slug: 'string',

    // INTERNAL STATEFUL PROPERTIES
    // These properties are owned by this component.
    saveStatus: '*',
    order: {
      Default: Order
    },
    get restaurantPromise() {
      return Restaurant.get({ _id: this.slug });

import { Component, DefineMap, stache } from "can";
import "can/demos/technology-overview/component-slider";

Component.extend({
    tag: "task-editor",
    view: stache(`

        {{#if logout}}
            <h1><code>&lt;task-editor&gt;</code></h1>
            <p>
                This content is provided by the <code>&lt;task-editor&gt;</code> component.
                Click <a href="{{routeUrl(page='home')}}">Home</a> to return to the homepage, or
                <button>Logout</button> to log out. Edit the task below:

            </p>
        {{/else}}
            <h2>Task Editor</h2>
        {{/if}}
        <form>
            Name: {{name}}</form>

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>
	`,
	ViewModel: {
		game: {
			default: () =&gt; new Game({
				scores: [
					{player: "Alison", points: 2},
					{player: "Alison", points: 3},
					{player: "Jeff", points: 5},
					{player: "Jeff", points: 1},
					{player: "Alison", points: 6},
					{player: "Jeff", points: 1},
				]

selected: {
		Default: DefineList
	},
	toggle: function(item){
		const selected = this.selected,
			index = selected.indexOf(item);

		if( index >= 0 ) {
			selected.splice(index, 1);
		} else {
			selected.push(item);
		}
	}
});

Component.extend({
	tag: "my-items",
	ViewModel: SelectViewModel,
	view: stache(demoHtml),
	helpers: {
		isSelected: function(options){
			if( this.selected.indexOf(options.context) >= 0 ) {
				return options.fn();
			} else {
				return options.inverse();
			}
		}
	}
});

const fragment = stache("")({
	titleItems: new DefineList([

<select>
                    <option>C</option>
                    <option>C++</option>
                    <option>Java</option>
                    <option>JavaScript</option>
                </select>
            <p></p>
            <p><button>Next</button></p>
        
    `,
	ViewModel: {
		programmingLanguage: "string"
	}
});

const IncomeQuestions = Component.extend({
	tag: "income-questions",
	view: `
        <h3>Income</h3>
        <div class="content">
			<p>What do you get paid in?</p>
            <p>
                <select>
                    <option value="undefined">Select a type</option>
                    <option>Peanuts</option>
                    <option>Bread</option>
                    <option>Tamales</option>
                    <option>Cheddar</option>
                    <option>Dough</option>
                </select>
            </p>
            <p><button>Finish</button></p></div>

<p>Check all expenses that apply:</p>
            <p><input type="checkbox"> Swagger
            </p>
            <p><input type="checkbox"> Fame
            </p>
            <p><button>Next</button></p>
        
    `,
    ViewModel: {
        divaExpenses: "any"
    }
});

const ProgrammerQuestions = Component.extend({
	tag: "programmer-questions",
	view: `
        <h3>Programmer Questions</h3>
        <div class="content">
            <p>What is your favorite language?</p>
            <p>
                <select>
                    <option>C</option>
                    <option>C++</option>
                    <option>Java</option>
                    <option>JavaScript</option>
                </select>
            </p>
            <p><button>Next</button></p>
        </div>
    `,