Monterey plugins
Creating a simple plugin
Create a new folder in the
plugins
folder called "hello-world"Create an
index.ts
file in the "hello-world" folder:import {PluginManager} from '../../shared/plugin-manager'; import {BasePlugin} from '../base-plugin'; export function configure(aurelia) { let pluginManager = <PluginManager>aurelia.container.get(PluginManager); pluginManager.registerPlugin(aurelia.container.get(Plugin)); } class Plugin extends BasePlugin { getTiles(project, showIrrelevant) { return [{ name: 'gistrun', viewModel: 'plugins/hello-world/tile' }]; } }
Create a
tile.ts
file in the "hello-world" folder:import {useView} from 'aurelia-framework'; @useView('plugins/default-tile.html') export class Tile { title: string; img: string; constructor() { this.title = 'Hello world'; this.img = 'http://findicons.com/files/icons/88/mac/128/earth.png'; } async onClick() { alert('hello world'); } }
register the plugin in the
index.ts
file of theplugins
folder:export function configure(aurelia) { aurelia.feature('plugins/app-launcher'); aurelia.feature('plugins/npm'); aurelia.feature('plugins/jspm'); aurelia.feature('plugins/aurelia-cli'); aurelia.feature('plugins/gulp'); aurelia.feature('plugins/webpack'); aurelia.feature('plugins/project-info'); aurelia.feature('plugins/preferences'); aurelia.feature('plugins/gist-run'); aurelia.feature('plugins/errors'); aurelia.feature('plugins/support'); aurelia.feature('plugins/terminal'); aurelia.feature('plugins/task-manager'); aurelia.feature('plugins/about'); aurelia.feature('plugins/hello-world'); <------- }
- start monterey and observe the Hello world tile is visible
Image 2