Application Bootstrapping

/**
 * The framework core that provides the main Aurelia object
 */
class Aurelia {
  /** The DOM Element that Aurelia will attach to */
  host: Element;
  /** The loader used by the application */
  loader: Loader;
  /** The root DI container used by the application */
  container: Container;
  /** The global view resources used by the application */
  resources: ViewResources;
  /** The configuration used during application startup */
  use: FrameworkConfiguration;

  /**
   * Creates an instance of Aurelia
   * @param loader - The loader for this Aurelia instance to use. If not specified, uses PLATFORM.Loader
   * @param container - The dependency injection container. If not specified, creates empty global container
   * @param resources - The resource registry. If not specified, creates empty registry
   */
  constructor(loader?: Loader, container?: Container, resources?: ViewResources);

  /**
   * Loads plugins, then resources, and then starts the Aurelia instance
   * @returns Promise with the started Aurelia instance
   */
  start(): Promise<Aurelia>;

  /**
   * Enhances the host's existing elements with behaviors and bindings
   * @param bindingContext - A binding context for the enhanced elements
   * @param applicationHost - The DOM object that Aurelia will enhance
   * @returns Promise for the current Aurelia instance
   */
  enhance(bindingContext?: object, applicationHost?: string | Element): Promise<Aurelia>;

  /**
   * Instantiates the root component and adds it to the DOM
   * @param root - The root component to load upon bootstrap
   * @param applicationHost - The DOM object that Aurelia will attach to
   * @returns Promise of the current Aurelia instance
   */
  setRoot(root?: string | Function, applicationHost?: string | Element): Promise<Aurelia>;
}

import { Aurelia } from "aurelia-framework";

// Basic application setup
const aurelia = new Aurelia();
aurelia.use.standardConfiguration();

aurelia.start().then(() => {
  aurelia.setRoot('app', document.body);
});

// Custom loader and container
import { Loader } from "aurelia-loader";
import { Container } from "aurelia-dependency-injection";

const customLoader = new Loader();
const customContainer = new Container();
const aurelia = new Aurelia(customLoader, customContainer);

// Enhancement of existing DOM
aurelia.start().then(() => {
  return aurelia.enhance({ name: 'World' }, document.getElementById('existing-app'));
});

// Custom root component
aurelia.start().then(() => {
  aurelia.setRoot('./custom-app', '#app-container');
});

/**
 * Creates an instance of Aurelia
 * @param loader - The loader for this Aurelia instance to use. If not specified, uses PLATFORM.Loader
 * @param container - The dependency injection container. If not specified, creates empty global container  
 * @param resources - The resource registry. If not specified, creates empty registry
 */
constructor(loader?: Loader, container?: Container, resources?: ViewResources);

/**
 * Loads plugins, then resources, and then starts the Aurelia instance
 * @returns Promise with the started Aurelia instance
 * @throws Error if BindingLanguage implementation is not configured
 */
start(): Promise<Aurelia>;

const aurelia = new Aurelia();
aurelia.use
  .standardConfiguration()
  .developmentLogging();

aurelia.start()
  .then(() => console.log('Aurelia started successfully'))
  .catch(error => console.error('Failed to start Aurelia:', error));

/**
 * Enhances the host's existing elements with behaviors and bindings
 * @param bindingContext - A binding context for the enhanced elements (default: {})
 * @param applicationHost - The DOM object that Aurelia will enhance (default: document.body)
 * @returns Promise for the current Aurelia instance
 */
enhance(bindingContext?: object, applicationHost?: string | Element): Promise<Aurelia>;

// Enhance existing markup with Aurelia functionality
const viewModel = {
  message: 'Hello from Aurelia!',
  items: ['Item 1', 'Item 2', 'Item 3']
};

aurelia.start().then(() => {
  return aurelia.enhance(viewModel, document.getElementById('existing-content'));
});

/**
 * Instantiates the root component and adds it to the DOM
 * @param root - The root component to load upon bootstrap (default: 'app')
 * @param applicationHost - The DOM object that Aurelia will attach to (default: document.body)
 * @returns Promise of the current Aurelia instance
 * @throws Error if no applicationHost is specified and none can be found
 */
setRoot(root?: string | Function, applicationHost?: string | Element): Promise<Aurelia>;

// Default root component and host
aurelia.setRoot(); // Loads 'app' component into document.body

// Custom component name
aurelia.setRoot('my-app');

// Custom component and host
aurelia.setRoot('dashboard', '#app-container');

// Component constructor function
import { MyAppComponent } from './my-app';
aurelia.setRoot(MyAppComponent, document.getElementById('root'));

aurelia.start()
  .then(() => aurelia.setRoot())
  .catch(error => {
    if (error.message.includes('BindingLanguage')) {
      console.error('Configure a binding language: aurelia.use.defaultBindingLanguage()');
    } else if (error.message.includes('applicationHost')) {
      console.error('Provide a valid DOM element for the application');
    }
  });