tessl/npm-lumino--application

Pluggable application framework for building extensible desktop-like web applications with plugin architecture support

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Application Core

Name: tessl/npm-lumino--application
Author: tessl

The main Application class that orchestrates the entire pluggable application framework. It provides plugin management, service resolution, and application lifecycle control.

Capabilities

Application Constructor

Creates a new Application instance with the specified shell widget and configuration options.

/**
 * Construct a new application.
 * @param options - The options for creating the application
 */
constructor(options: Application.IOptions<T>);

interface Application.IOptions<T extends Widget> extends PluginRegistry.IOptions {
  /** The shell widget to use for the application */
  shell: T;
  /** A custom renderer for the context menu */
  contextMenuRenderer?: Menu.IRenderer;
  /** Application plugin registry (if not provided, a new one will be created) */
  pluginRegistry?: PluginRegistry;
}

Usage Example:

import { Application } from "@lumino/application";
import { Widget } from "@lumino/widgets";

// Basic application with default plugin registry
const shell = new Widget();
const app = new Application({ shell });

// Application with custom plugin registry
const customRegistry = new PluginRegistry();
const appWithCustomRegistry = new Application({
  shell,
  pluginRegistry: customRegistry
});

Core Properties

The Application class provides several readonly properties that give access to key application components.

/** The application command registry */
readonly commands: CommandRegistry;

/** The application context menu */
readonly contextMenu: ContextMenu;

/** The application shell widget */
readonly shell: T;

/** The list of all the deferred plugins */
readonly deferredPlugins: string[];

/** A promise which resolves after the application has started */
readonly started: Promise<void>;

/** Application plugin registry (protected - for subclasses) */
protected pluginRegistry: PluginRegistry;

Usage Examples:

// Access the command registry to register commands
app.commands.addCommand('my-command', {
  label: 'My Command',
  execute: () => console.log('Command executed!')
});

// Access the context menu to add items
app.contextMenu.addItem({
  command: 'my-command',
  selector: '.my-element'
});

// Wait for application startup
await app.started;
console.log('Application has started');

// Check deferred plugins
console.log('Deferred plugins:', app.deferredPlugins);

Event Handling

The Application class implements the DOM EventListener interface to handle application-wide events.

/**
 * Handle the DOM events for the application.
 * @param event - The DOM event sent to the application
 */
handleEvent(event: Event): void;

Supported Events:

resize: Updates the shell widget when the window is resized
keydown: Processes keyboard shortcuts through the command registry
keyup: Processes key release events through the command registry
contextmenu: Opens the application context menu

Usage Notes:

The handleEvent method is called automatically by the browser's event system
You should not call this method directly - it's part of the EventListener interface
Event listeners are automatically registered when the application starts

Protected Methods

The Application class provides several protected methods that can be overridden in subclasses for custom behavior.

/**
 * Attach the application shell to the DOM.
 * @param id - The ID of the host node for the shell, or empty string
 */
protected attachShell(id: string): void;

/**
 * Add the application event listeners.
 */
protected addEventListeners(): void;

/**
 * A method invoked on a document 'keydown' event.
 * @param event - The keyboard event
 */
protected evtKeydown(event: KeyboardEvent): void;

/**
 * A method invoked on a document 'keyup' event.  
 * @param event - The keyboard event
 */
protected evtKeyup(event: KeyboardEvent): void;

/**
 * A method invoked on a document 'contextmenu' event.
 * @param event - The pointer event
 */
protected evtContextMenu(event: PointerEvent): void;

/**
 * A method invoked on a window 'resize' event.
 * @param event - The resize event
 */
protected evtResize(event: Event): void;

Customization Example:

class CustomApplication extends Application {
  protected attachShell(id: string): void {
    // Custom shell attachment logic
    console.log(`Attaching shell to ${id || 'document.body'}`);
    super.attachShell(id);
  }
  
  protected evtKeydown(event: KeyboardEvent): void {
    // Custom keydown handling
    if (event.key === 'F1') {
      console.log('Help requested');
      return;
    }
    super.evtKeydown(event);
  }
}