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

object-model.mddocs/

Object Model & Classes

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

Capabilities

EmberObject Class

Enhanced base class with observables, computed properties, and event system.

/**
 * Enhanced base class with observables, computed properties, and event system
 */
class EmberObject {
  /**
   * Create new instance with properties
   * @param properties - Initial properties to set
   * @returns New EmberObject instance
   */
  static create(properties?: object): EmberObject;
  
  /**
   * Extend class with additional properties and methods
   * @param properties - Properties and methods to add
   * @returns New EmberObject subclass
   */
  static extend(properties?: object): typeof EmberObject;
  
  /**
   * Get property value with support for computed properties
   * @param key - Property key to get
   * @returns Property value
   */
  get(key: string): any;
  
  /**
   * Set property value and notify observers
   * @param key - Property key to set
   * @param value - Value to set
   * @returns The value that was set
   */
  set(key: string, value: any): any;
  
  /**
   * Get multiple properties at once
   * @param keys - Property keys to get
   * @returns Object with requested properties
   */
  getProperties(...keys: string[]): object;
  
  /**
   * Set multiple properties at once
   * @param properties - Object with properties to set
   * @returns The properties object
   */
  setProperties(properties: object): object;
  
  /**
   * Initialize object after creation
   */
  init(): void;
  
  /**
   * Destroy object and clean up resources
   */
  destroy(): void;
  
  /** Whether object is being destroyed */
  isDestroying: boolean;
  
  /** Whether object has been destroyed */
  isDestroyed: boolean;
}

CoreObject Class

Minimal base class without observables for performance-critical scenarios.

/**
 * Minimal base class without observables for performance-critical scenarios
 */
class CoreObject {
  /**
   * Create new instance with properties
   * @param properties - Initial properties to set
   * @returns New CoreObject instance
   */
  static create(properties?: object): CoreObject;
  
  /**
   * Extend class with additional properties and methods
   * @param properties - Properties and methods to add
   * @returns New CoreObject subclass
   */
  static extend(properties?: object): typeof CoreObject;
  
  /**
   * Initialize object after creation
   */
  init(): void;
  
  /**
   * Destroy object and clean up resources
   */
  destroy(): void;
  
  /** Whether object is being destroyed */
  isDestroying: boolean;
  
  /** Whether object has been destroyed */
  isDestroyed: boolean;
}

Property Management Functions

Global functions for property access and manipulation.

/**
 * Get property value from any object
 * @param object - Target object
 * @param key - Property key
 * @returns Property value
 */
function get(object: any, key: string): any;

/**
 * Set property value on any object
 * @param object - Target object  
 * @param key - Property key
 * @param value - Value to set
 * @returns The value that was set
 */
function set(object: any, key: string, value: any): any;

/**
 * Get multiple properties from an object
 * @param object - Target object
 * @param keys - Property keys to get
 * @returns Object with requested properties
 */
function getProperties(object: any, keys: string[]): object;

/**
 * Set multiple properties on an object
 * @param object - Target object
 * @param properties - Properties to set
 * @returns The properties object
 */
function setProperties(object: any, properties: object): object;

/**
 * Safely set property, ignoring if object doesn't support it
 * @param object - Target object
 * @param key - Property key
 * @param value - Value to set
 * @returns The value that was set or undefined
 */
function trySet(object: any, key: string, value: any): any;

/**
 * Define property with descriptor
 * @param object - Target object
 * @param key - Property key
 * @param descriptor - Property descriptor
 */
function defineProperty(object: any, key: string, descriptor: PropertyDescriptor): void;

/**
 * Notify observers that a property changed
 * @param object - Target object
 * @param key - Property key that changed
 */
function notifyPropertyChange(object: any, key: string): void;

Computed Properties

System for creating computed properties that automatically update when dependencies change.

/**
 * Create computed property that depends on other properties
 * @param dependentKeys - Properties this computed depends on
 * @param fn - Function to compute the value
 * @returns ComputedProperty instance
 */
function computed(...dependentKeys: string[], fn: Function): ComputedProperty;

/**
 * ComputedProperty class for advanced computed property features
 */
class ComputedProperty {
  /**
   * Mark property as dependent on other keys
   * @param keys - Dependent property keys
   * @returns This ComputedProperty for chaining
   */
  property(...keys: string[]): ComputedProperty;
  
  /**
   * Mark computed property as volatile (always recompute)
   * @returns This ComputedProperty for chaining
   */
  volatile(): ComputedProperty;
  
  /**
   * Mark computed property as read-only
   * @returns This ComputedProperty for chaining
   */
  readOnly(): ComputedProperty;
  
  /**
   * Get computed property metadata
   * @returns Property metadata
   */
  meta(): ComputedPropertyMeta;
}

/**
 * Expand property patterns like 'user.{name,email}' into individual keys
 * @param pattern - Property pattern to expand
 * @param callback - Function called for each expanded key
 */
function expandProperties(pattern: string, callback: (key: string) => void): void;

Action Decorator

Decorator for binding methods as actions with proper context.

/**
 * Decorator for binding methods as actions with proper context
 * @param target - Target object (class prototype)
 * @param key - Method name
 * @param descriptor - Method descriptor
 * @returns Modified descriptor with bound action
 */
function action(target: any, key: string, descriptor: PropertyDescriptor): PropertyDescriptor;

/**
 * Action decorator factory with options
 * @param options - Action options
 * @returns Decorator function
 */
function action(options?: ActionOptions): PropertyDecorator;

Observers

System for watching property changes and reacting to them.

/**
 * Create observer function that watches for property changes
 * @param dependentKeys - Properties to observe
 * @param fn - Function to call when properties change
 * @returns Observer function
 */
function observer(...dependentKeys: string[], fn: Function): Function;

/**
 * Add observer to an object for property changes
 * @param object - Object to observe
 * @param key - Property key to watch
 * @param target - Object containing observer method
 * @param method - Method to call or method name
 */
function addObserver(object: any, key: string, target: any, method: string | Function): void;

/**
 * Remove observer from an object
 * @param object - Object being observed
 * @param key - Property key being watched
 * @param target - Object containing observer method
 * @param method - Method being called or method name
 */
function removeObserver(object: any, key: string, target: any, method: string | Function): void;

Event System

Event system for objects to emit and listen for custom events.

/**
 * Add event listener to an object
 * @param object - Object to listen on
 * @param eventName - Event name to listen for
 * @param target - Object containing listener method
 * @param method - Method to call or method name
 */
function addListener(object: any, eventName: string, target: any, method: string | Function): void;

/**
 * Remove event listener from an object
 * @param object - Object being listened to
 * @param eventName - Event name
 * @param target - Object containing listener method
 * @param method - Method being called or method name
 */
function removeListener(object: any, eventName: string, target: any, method: string | Function): void;

/**
 * Send event to an object, calling all listeners
 * @param object - Object to send event to
 * @param eventName - Event name to send
 * @param params - Parameters to pass to listeners
 * @returns Whether event was handled
 */
function sendEvent(object: any, eventName: string, params?: any[]): boolean;

Mixins

System for composing objects with multiple behaviors.

/**
 * Mixin class for creating reusable behavior
 */
class Mixin {
  /**
   * Create new mixin with properties
   * @param properties - Properties and methods to include
   * @returns New Mixin instance
   */
  static create(properties?: object): Mixin;
  
  /**
   * Apply mixins to an object
   * @param mixins - Mixins to apply
   * @returns Combined mixin
   */
  static mixins(...mixins: Mixin[]): Mixin;
}

/**
 * Apply mixins to an object
 * @param object - Target object
 * @param mixins - Mixins to apply
 * @returns Modified object
 */
function mixin(object: any, ...mixins: Mixin[]): any;

Usage Examples:

import EmberObject, { computed, observer, action } from "@ember/object";
import { tracked } from "@glimmer/tracking";

// Classic EmberObject with computed properties and observers
const Person = EmberObject.extend({
  firstName: null,
  lastName: null,
  
  fullName: computed('firstName', 'lastName', function() {
    return `${this.firstName} ${this.lastName}`;
  }),
  
  fullNameChanged: observer('fullName', function() {
    console.log('Full name changed to:', this.fullName);
  }),
  
  @action
  updateName(first, last) {
    this.setProperties({
      firstName: first,
      lastName: last
    });
  }
});

// Modern class with tracking
class ModernPerson extends EmberObject {
  @tracked firstName = null;
  @tracked lastName = null;
  
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
  
  @action
  updateName(first, last) {
    this.firstName = first;
    this.lastName = last;
  }
}

// Usage
const person = Person.create({
  firstName: 'John',
  lastName: 'Doe'
});

console.log(person.get('fullName')); // "John Doe"
person.set('firstName', 'Jane'); // Triggers observer

Types

interface ComputedPropertyMeta {
  /** Dependent property keys */
  dependentKeys: string[];
  
  /** Whether property is volatile */
  volatile: boolean;
  
  /** Whether property is read-only */
  readOnly: boolean;
}

interface ActionOptions {
  /** Whether to bind action context */
  bind?: boolean;
}

interface PropertyDescriptor {
  /** Property value */
  value?: any;
  
  /** Property getter */
  get?: () => any;
  
  /** Property setter */
  set?: (value: any) => void;
  
  /** Whether property is enumerable */
  enumerable?: boolean;
  
  /** Whether property is configurable */
  configurable?: boolean;
  
  /** Whether property is writable */
  writable?: boolean;
}