or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdpage-title-service.mdtemplate-helper.mdtest-support.mdtypescript-integration.md
tile.json

index.mddocs/

ember-page-title

ember-page-title provides comprehensive page title management for Ember.js applications, enabling dynamic title updates through template helpers and programmatic APIs. It offers declarative template syntax with configurable separators, prepend/append behavior, and token replacement, along with a service for advanced integration scenarios.

Package Information

  • Package Name: ember-page-title
  • Package Type: npm
  • Language: TypeScript
  • Installation: ember install ember-page-title

Core Imports

// Template helper import (for gts/gjs templates)
import { pageTitle } from 'ember-page-title';

// Service import
import PageTitleService from 'ember-page-title/services/page-title';

// Test support
import { getPageTitle } from 'ember-page-title/test-support';

For traditional Ember app imports:

// Service injection
@service('page-title') pageTitle;

// Test helper import
import { getPageTitle } from 'ember-page-title/test-support';

Basic Usage

// In gts/gjs templates
import { pageTitle } from 'ember-page-title';

<template>
  {{pageTitle "My Page Title"}}
  {{pageTitle @model.title separator=" - "}}
  {{pageTitle "Settings" prepend=false}}
</template>

Traditional Handlebars templates:

{{page-title "My Page Title"}}
{{page-title @model.title separator=" - "}}
{{page-title "Settings" prepend=false}}

Architecture

ember-page-title is built around several key components:

  • Template Helper: Declarative {{page-title}} helper for setting titles in templates with automatic lifecycle management
  • Service Layer: Central page-title service managing title tokens, inheritance, and DOM updates
  • Token System: Linked-list based token management enabling complex title hierarchies and ordering
  • FastBoot Integration: Server-side rendering support with automatic environment detection
  • TypeScript Support: Full type definitions with Glint template registry integration

Capabilities

Template Helper

Declarative helper for setting page titles in templates with automatic registration and cleanup. Supports configurable separators, positioning, and replacement behavior.

interface PageTitleHelperOptions {
  prepend?: boolean;
  front?: unknown;
  replace?: boolean;
  separator?: string;
}

interface PageTitleHelperSignature {
  Args: {
    Positional: string[];
    Named: PageTitleHelperOptions;
  };
  Return: void;
}

Template Helper

Page Title Service

Programmatic API for managing page titles with token-based system, inheritance, and lifecycle hooks. Provides fine-grained control over title composition and update callbacks.

class PageTitleService {
  tokens: PageTitleToken[];
  
  push(token: PageTitleToken): void;
  remove(id: string): void;
  scheduleTitleUpdate(): void;
  toString(): string;
  titleDidUpdate(title: string): void;
  willDestroy(): void;
  
  get visibleTokens(): PageTitleToken[];
  get sortedTokens(): PageTitleToken[];
}

Page Title Service

Test Support

Testing utilities for asserting page titles in integration and acceptance tests, with automatic handling of test environment quirks.

function getPageTitle(doc?: Document): string;

Test Support

TypeScript Integration

Complete TypeScript definitions with Glint template registry and service registry integration for type-safe template and service usage.

interface LooseModeTemplateRegistry {
  'page-title': typeof pageTitle;
}

interface ServiceRegistry {
  'page-title': PageTitleService;
}

TypeScript Integration

Configuration

Configure defaults in config/environment.js:

module.exports = function(environment) {
  let ENV = {
    pageTitle: {
      separator: ' | ',    // Default separator between title tokens
      prepend: true,       // Default prepend behavior  
      replace: false       // Default replace behavior
    }
  };
  
  return ENV;
};

Types

interface PageTitleConfig {
  /** The default separator to use between tokens. */
  separator?: string;
  /** The default prepend value to use. */
  prepend?: boolean;
  /** The default replace value to use. */
  replace?: boolean | null;
}

interface PageTitleToken extends PageTitleConfig {
  id: string;
  title?: string;
  separator?: string;
  prepend?: boolean;
  replace?: boolean;
  front?: unknown;
  previous?: PageTitleToken | null;
  next?: PageTitleToken | null;
}