CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-ember-source

A JavaScript framework for creating ambitious web applications

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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;
}

docs

application-engine.md

components.md

controllers.md

data-structures.md

debugging-development.md

destroyables-cleanup.md

index.md

modifiers.md

object-model.md

reactivity-tracking.md

routing.md

services.md

templates-rendering.md

testing.md

utilities.md

tile.json