Monterey plugins

Creating a simple plugin

  1. Create a new folder in the plugins folder called "hello-world"

  2. 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'
       }];
     }
    }
    
  3. 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');
     }
    }
    
  4. register the plugin in the index.ts file of the plugins 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'); <-------
    }
    
  5. start monterey and observe the Hello world tile is visible




Image 2




results matching ""

    No results matching ""