or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

application-engine.mdcomponents.mdcontrollers.mddata-structures.mddebugging-development.mddestroyables-cleanup.mdindex.mdmodifiers.mdobject-model.mdreactivity-tracking.mdrouting.mdservices.mdtemplates-rendering.mdtesting.mdutilities.md
tile.json

index.mddocs/

Ember.js

Ember.js is a comprehensive JavaScript framework designed to accelerate web application development through powerful conventions and built-in features. It provides a complete solution including routing with URL-aware navigation, HTML-first component architecture, autotracking reactivity system for automatic UI updates, data management through Ember Data, and extensive CLI tooling for scaffolding and build processes.

Package Information

  • Package Name: ember-source
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install ember-source

Core Imports

import { Application, Component, Route, Router, Service } from "ember";

For specific modules:

import Application from "@ember/application";
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";

CommonJS:

const { Application, Component, Route } = require("ember");

Basic Usage

import Application from "@ember/application";
import Router from "@ember/routing/router";
import Route from "@ember/routing/route";
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";

// Create application
const App = Application.create();

// Define router
const AppRouter = Router.extend();
AppRouter.map(function() {
  this.route('users');
});

// Define route
const UsersRoute = Route.extend({
  model() {
    return [
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' }
    ];
  }
});

// Define component
class UserCard extends Component {
  @tracked isExpanded = false;

  @action
  toggleExpanded() {
    this.isExpanded = !this.isExpanded;
  }
}

Architecture

Ember.js is built around several key architectural patterns:

  • Convention over Configuration: Strong conventions reduce boilerplate and decision fatigue
  • Component-Based Architecture: Reusable UI components with template isolation
  • Auto-tracking Reactivity: Automatic UI updates when tracked properties change
  • Dependency Injection: Service container for managing application-wide state and functionality
  • Router-Driven Architecture: URL-centric navigation with nested routing support
  • Template Compilation: Handlebars templates compiled to efficient render functions

Capabilities

Application & Engine System

Core application lifecycle management and mountable engine architecture for building large-scale applications with multiple teams.

class Application {
  static create(options?: ApplicationOptions): Application;
  buildInstance(): Promise<ApplicationInstance>;
  boot(): Promise<Application>;
  visit(url: string): Promise<ApplicationInstance>;
  deferReadiness(): void;
  advanceReadiness(): void;
}

function getOwner(object: any): Owner;
function setOwner(object: any, owner: Owner): void;

Application & Engine System

Object Model & Classes

Enhanced JavaScript object model with computed properties, observers, and mixins for building reactive applications.

class EmberObject {
  static create(properties?: object): EmberObject;
  get(key: string): any;
  set(key: string, value: any): any;
  getProperties(...keys: string[]): object;
  setProperties(properties: object): object;
}

function computed(...dependentKeys: string[], fn: Function): ComputedProperty;
function observer(...dependentKeys: string[], fn: Function): Function;

Object Model & Classes

Reactivity & Tracking

Modern auto-tracking system that automatically updates UI when tracked properties change, eliminating manual observer management.

function tracked(target: any, key: string): void;
function cached(target: any, key: string, descriptor: PropertyDescriptor): PropertyDescriptor;

function createCache<T>(fn: () => T): Cache<T>;
function getValue<T>(cache: Cache<T>): T;

Reactivity & Tracking

Components

Component system supporting both modern Glimmer components and classic Ember components with lifecycle management and template integration.

import Component from "@glimmer/component";
import { setComponentTemplate, setComponentManager } from "@ember/component";
class Component {
  constructor(owner: Owner, args: ComponentArgs);
  willDestroy(): void;
  args: ComponentArgs;
  isDestroying: boolean;
  isDestroyed: boolean;
}

function setComponentTemplate(template: Template, component: ComponentClass): void;
function setComponentManager(manager: ComponentManager, component: ComponentClass): ComponentClass;

Components

Templates & Rendering

Template compilation system with Handlebars syntax and helper functions for dynamic content rendering.

function precompile(template: string, options?: CompileOptions): string;
function compile(template: string, options?: CompileOptions): Template;

class Helper {
  static create(properties?: object): Helper;
  compute(params: any[], hash: object): any;
}

function helper(fn: (params: any[], hash: object) => any): HelperDefinition;

Templates & Rendering

Routing System

Comprehensive routing solution with nested routes, URL generation, and programmatic navigation for building single-page applications.

class Router {
  static map(callback: (this: RouterDSL) => void): void;
  static extend(properties?: object): typeof Router;
}

class Route {
  static extend(properties?: object): typeof Route;
  model(params: object): any;
  setupController(controller: Controller, model: any): void;
  beforeModel(transition: Transition): any;
  afterModel(model: any, transition: Transition): any;
}

class RouterService extends Service {
  transitionTo(routeName: string, ...models: any[]): Transition;
  replaceWith(routeName: string, ...models: any[]): Transition;
  urlFor(routeName: string, ...models: any[]): string;
}

Routing System

Controllers

Controller layer for handling user interactions and managing component state in classic Ember applications.

class Controller {
  static extend(properties?: object): typeof Controller;
  model: any;
  target: any;
}

Controllers

Services

Singleton service system for managing application-wide state and functionality with dependency injection.

class Service {
  static extend(properties?: object): typeof Service;
  isDestroying: boolean;
  isDestroyed: boolean;
}

function service(name?: string): PropertyDecorator;

Services

Data Structures

Enhanced array and enumerable interfaces with change tracking and computed properties for reactive data management.

interface EmberArray extends Array<any> {
  get(key: string): any;
  set(key: string, value: any): any;
  pushObject(item: any): any;
  removeObject(item: any): any;
  findBy(key: string, value: any): any;
}

function A(array?: any[]): EmberArray;
function isArray(obj: any): boolean;
function makeArray(obj: any): any[];

Data Structures

Utilities

Core utility functions for type checking, object comparison, and presence testing used throughout Ember applications.

function compare(a: any, b: any): number;
function isEqual(a: any, b: any): boolean;
function isNone(value: any): boolean;
function isBlank(value: any): boolean;
function isEmpty(value: any): boolean;
function isPresent(value: any): boolean;
function typeOf(obj: any): string;

Utilities

Debugging & Development

Development tools and debugging utilities for inspecting application state and troubleshooting issues.

function assert(message: string, condition: boolean): void;
function warn(message: string, condition?: boolean, options?: WarnOptions): void;
function debug(message: string): void;
function deprecate(message: string, condition?: boolean, options?: DeprecateOptions): void;
function inspect(obj: any): string;

Debugging & Development

Testing

Testing framework integration and utilities for writing unit and integration tests for Ember applications.

function setupForTesting(): void;

interface TestAdapter {
  asyncStart(): void;
  asyncEnd(): void;
  exception(error: Error): void;
}

class QUnitAdapter extends TestAdapter {
  static create(): QUnitAdapter;
}

Testing

Destroyables & Cleanup

Resource management system for automatic cleanup of objects and prevention of memory leaks.

function destroy(destroyable: object): void;
function isDestroying(destroyable: object): boolean;
function isDestroyed(destroyable: object): boolean;
function registerDestructor(destroyable: object, destructor: Function): void;
function unregisterDestructor(destroyable: object, destructor: Function): void;

Destroyables & Cleanup

Modifiers

Template modifier system for handling DOM events and element behavior in templates.

interface OnModifier {
  (element: Element, [eventName, handler]: [string, Function]): void;
}

function setModifierManager(manager: ModifierManager, modifier: ModifierDefinition): ModifierDefinition;

Modifiers

Types

interface Owner {
  lookup(fullName: string): any;
  register(fullName: string, factory: any): void;
  factoryFor(fullName: string): Factory;
}

interface ApplicationOptions {
  rootElement?: string | Element;
  autoboot?: boolean;
}

interface ComponentArgs {
  [key: string]: any;
}

interface Template {
  (context: object): string;
}

interface Transition {
  to: RouteInfo;
  from: RouteInfo;
  abort(): void;
  retry(): void;
}

interface ComputedProperty {
  (): any;
  property(...keys: string[]): ComputedProperty;
  volatile(): ComputedProperty;
  readOnly(): ComputedProperty;
}

interface TemplateOnlyComponent<S = unknown> {
  // Template-only component with no instance properties
}

interface ComponentClass {
  new (...args: any[]): object;
}