Molecule.dev

@molecule/app-timeline-default

Provider bond · timeline · App (browser) · v1.0.2 · Apache-2.0

Default provider for @molecule/app-timeline

npm install @molecule/app-timeline-default

npm · Source on GitHub · Implements @molecule/app-timeline

How it works

@molecule/app-timeline-default is a provider bond on the app (browser) side: it implements the timeline core interface (@molecule/app-timeline) with a concrete vendor or library behind it.

Your code calls the core; you wire this provider once at startup. Swapping vendors later is one line in that wiring, not a rewrite.

import { provider } from '@molecule/app-timeline-default'
import { setProvider } from '@molecule/app-timeline'

setProvider(provider)

Works with: @molecule/app-timeline

Reference

Default provider for @molecule/app-timeline.

Provides an in-memory timeline implementation with sorting and item management.

Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit src/index.ts JSDoc, not this file.

Quick Start

import { provider } from '@molecule/app-timeline-default'
import { setProvider } from '@molecule/app-timeline'

setProvider(provider)

Type

provider

Installation

npm install @molecule/app-timeline-default @molecule/app-timeline

API

Interfaces

DefaultTimelineConfig

Provider-specific configuration options.

interface DefaultTimelineConfig {
  /** Whether to sort items by date. Defaults to `true`. */
  sortByDate?: boolean
}

Functions

createProvider(config)

Creates a default timeline provider.

function createProvider(config?: DefaultTimelineConfig): TimelineProvider
  • config — Optional provider configuration.

Returns: A configured TimelineProvider.

Constants

provider

Default timeline provider instance.

const provider: TimelineProvider

Core Interface

Implements @molecule/app-timeline interface.

Bond Wiring

Setup function to register this provider with the core interface:

import { setProvider } from '@molecule/app-timeline'
import { provider } from '@molecule/app-timeline-default'

export function setupTimelineDefault(): void {
  setProvider(provider)
}

Injection Notes

Requirements

Peer dependencies:

  • @molecule/app-timeline ^1.0.1

Runtime Dependencies

  • @molecule/app-timeline

E2E Tests

Integration checklist — drive the real timeline UI (live preview, no mocks), adapt each item to this app's actual timeline/activity screens, and check every box off one by one. A box you can't check is an integration bug to fix — not a skip:

  • The timeline renders its entries in the correct chronological order per the app's config (newest-first or oldest-first) — the on-screen order matches the item date timestamps, NOT insertion order (getItems() preserves insertion order; the app sorts by date for display).
  • Each rendered entry shows its real data: the locale-formatted date (never a raw Date string), the title, and — when set — the description, icon, and dot/marker color.
  • With alternate on, consecutive entries sit on opposite sides of the rail; with it off, every entry sits on the same side.
  • Clicking an entry fires onItemClick with THAT item — the wired action (navigate/expand/select) happens for the clicked entry, not a neighbour.
  • If the app groups entries (by day or type), each entry sits under the correct group header, and an entry dated in a different bucket renders under the right header.
  • addItem() makes the new event appear in its correct position by date timestamp (not merely appended last), and removeItem(id) removes exactly that one entry.
  • If the app loads older entries (load-more/pagination), they append via setItems with no duplication — every rendered id stays unique.
  • An empty timeline (no items) renders a defined empty state, not a blank/broken layout; adding the first item replaces the empty state with the entry.