Core Instances

This guide explains the core instances available in LamaPress and their APIs.

Table of Contents

• Overview
• Accessing Core Instances
• EventManager
  • Methods
  • Events
  • Usage
• Scroller
  • Properties
  • Methods
  • Usage
• Device
  • Properties
  • Usage
• Router
  • Methods
  • Usage
• Resizer
  • Methods
  • Usage
• Ticker
  • Properties
  • Usage
• Page
  • Properties
  • Methods
  • Usage
• Best Practices
  • 1. Access via app.instances
  • 2. Check for Existence
  • 3. Use Event System
• Related Documentation

---

Overview

Core instances provide shared functionality across components. They're initialized when the app starts and are accessible via app.instances.

Accessing Core Instances

Access instances via app.instances:

import { app } from '@src/js/core/app'

const scroller = app.instances.get('scroller')
const device = app.instances.get('device')

EventManager

Manages global events and event subscriptions.

Methods

handleEvent(eventName, props)

• Triggers event for all subscribed instances
• eventName - Event name (string)
• props - Event properties (object)

addScopeToEvent(eventName, scope)

• Adds scope to event system
• eventName - Event name (string)
• scope - Scope identifier (string, usually 'page' or 'app')

Events

Available events:

• scroll - Scroll events
• resize - Window resize events
• tick - Animation frame tick
• handleRouteChange - Route change events
• destroy - Component destruction

Usage

import { app } from '@src/js/core/app'

export default class MyComponent {
  init = () => {
    const eventManager = app.instances.get('eventManager')
    eventManager.addScopeToEvent('scroll', 'page')
  }

  scroll = (props) => {
    // Handle scroll event
    const { direction, velocity } = props
  }
}

Scroller

Manages smooth scrolling using Lenis (desktop) or native scrolling (mobile).

Properties

• top - Current scroll position
• velocity - Scroll velocity
• direction - Scroll direction (1 = down, -1 = up)

Methods

scrollTo(value, duration, callback)

• Scroll to position
• value - Scroll position (number)
• duration - Animation duration (number, 0 = immediate)
• callback - Completion callback (function)

Usage

import { app } from '@src/js/core/app'

export default class MyComponent {
  scrollToTop = () => {
    const scroller = app.instances.get('scroller')
    scroller.scrollTo(0, 0.5, () => {
      console.log('Scrolled to top')
    })
  }

  getScrollPosition = () => {
    const scroller = app.instances.get('scroller')
    return scroller.top
  }
}

Device

Provides device detection and input method information.

Properties

• isMobile - Mobile device detection (boolean)
• hasTouch - Touch support (boolean)
• hasPointer - Pointer events support (boolean)
• primaryInput - Primary input method ('touch' | 'mouse')
• events - Event names for drag interactions

Usage

import { app } from '@src/js/core/app'

export default class MyComponent {
  init = () => {
    const device = app.instances.get('device')
    
    if (device.primaryInput === 'touch') {
      // Touch device
      this.element.addEventListener(device.events.dragStart, this.handleDrag)
    } else {
      // Mouse device
      this.element.addEventListener('mouseenter', this.handleHover)
    }
  }
}

Router

Manages page routing and Swup integration.

Methods

leavePreviousPage()

• Leaves previous page (returns Promise)

destroyPreviousPage()

• Destroys previous page

createNextPage(nextPage)

• Creates next page instance

enterNextPage()

• Enters next page (returns Promise)

getPages()

• Returns { nextPage, previousPage }

Usage

import { app } from '@src/js/core/app'
import { getRouterMethods } from '@src/js/core/router'

export default class MyComponent {
  navigate = async () => {
    const { leavePreviousPage, createNextPage, enterNextPage } = getRouterMethods()
    
    await leavePreviousPage()
    await createNextPage()
    await enterNextPage()
  }
}

Resizer

Manages window resize events and viewport variables.

Methods

setViewHeightVariable()

• Sets CSS custom properties for viewport height/width

Usage

import { app } from '@src/js/core/app'

export default class MyComponent {
  init = () => {
    const resizer = app.instances.get('resizer')
    // Viewport variables are set automatically
    // Use CSS: height: calc(var(--vh) * 100)
  }
}

Ticker

Manages animation frame ticker for GSAP and custom animations.

Properties

• start - Start time (timestamp)
• currentTime - Current time (timestamp)
• elapsedTime - Elapsed time since start (number)
• deltaTime - Time since last tick (number)

Usage

import { app } from '@src/js/core/app'

export default class MyComponent {
  tick = (props) => {
    const { time } = props
    // Handle animation frame tick
  }
}

Note: Subscribe to tick event via EventManager.

Page

Represents the current page instance.

Properties

• container - Page container element
• instances - Map of component instances on page

Methods

init()

• Initializes page

enter()

• Enters page (triggers component enter() methods)

leave()

• Leaves page (triggers component leave() methods if available)

destroyPage()

• Destroys page and all components

Usage

import { app } from '@src/js/core/app'

export default class MyComponent {
  accessOtherComponent = () => {
    const page = app.instances.get('page')
    const otherComponent = page.instances.get(otherElement)
  }
}

Best Practices

1. Access via app.instances

Always access instances via app.instances:

const scroller = app.instances.get('scroller')

2. Check for Existence

Check if instance exists before using:

const scroller = app.instances.get('scroller')
if (scroller) {
  scroller.scrollTo(0)
}

3. Use Event System

Subscribe to events via EventManager:

const eventManager = app.instances.get('eventManager')
eventManager.addScopeToEvent('scroll', 'page')

Related Documentation

• JavaScript Architecture - JavaScript system
• Component JavaScript - Component structure
• Event System - Event management
• Page Transitions - Page transition system

---

Next Steps:

• Review JavaScript Architecture for system overview
• Check Component JavaScript for component usage
• See Event System for event management