Managers API Reference

Now.js provides several core managers that handle different aspects of the application. Each manager is responsible for a specific functionality and can be accessed through the Now.js framework instance.

ComponentManager

Handles component registration, lifecycle, and rendering.

Methods

define(name: string, definition: Object): void

Register a new component

ComponentManager.define('user-card', { template: '<div class="user-card">{{name}}</div>', state: { name: '' }, methods: { updateName(newName) { this.state.name = newName; } } });
mount(element: HTMLElement, name: string, props?: Object): Promise<Object>
Mount component to DOM element
unmount(element: HTMLElement): void
Unmount component from DOM

Events

  • component:mounted - Fired when component is mounted
  • component:unmounted - Fired when component is unmounted
  • component:updated - Fired when component is updated

RouterManager

Handles client-side routing and navigation.

Methods

navigate(path: string, params?: Object): Promise<boolean>
Navigate to path with optional parameters
register(path: string, config: Object): void

Register route configuration

RouterManager.register('/user/:id', { template: '/templates/user.html', title: 'User Profile' });
getParams(): Object
Get current route parameters

Events

  • route:after - Fired when route changes
  • route:error - Fired on routing error

StateManager

Manages application state and state changes.

Methods

registerModule(name: string, module: Object): void

Register state module

StateManager.registerModule('user', { state: { name: '', email: '' }, mutations: { setUser(state, user) { state.name = user.name; state.email = user.email; } } });
commit(type: string, payload?: any): void
Commit state mutation
watch(path: string, callback: Function): Function
Watch state changes

Events

  • state:changed - Fired when state changes
  • state:error - Fired on state error

EventManager

Handles event emission and handling throughout the application.

Methods

on(event: string, callback: Function, options?: Object): Function

Register event listener

EventManager.on('user:login', (event) => { console.log('User logged in:', event.user); }, { once: true });
emit(event: string, data?: Object): Promise<boolean>
Emit event with optional data
off(event: string, callback: Function): boolean
Remove event listener

TemplateManager

Manages template loading, processing, and caching.

Methods

loadFromServer(path: string): Promise<string>
Load template from server
processTemplate(template: string, data: Object): string

Process template with data

const html = await TemplateManager.processTemplate( template, { user: { name: 'John' } } );

Events

  • template:loaded - Fired when template is loaded
  • template:error - Fired on template error

I18nManager

Handles internationalization and localization.

Methods

setLocale(locale: string): Promise<void>
Set active locale
translate(key: string, params?: Object): string

Get translation for key

const message = I18nManager.translate('welcome', { name: user.name });

Events

  • locale:changed - Fired when locale changes

ThemeManager

Manages application theming and dark mode.

Methods

setTheme(theme: string): Promise<void>
Set active theme
toggleDarkMode(): void
Toggle dark mode

Events

  • theme:changed - Fired when theme changes

NotificationManager

Handles system notifications and alerts.

Methods

show(options: Object): string
Show notification
success(message: string, options?: Object): string

Show success notification

NotificationManager.success('Profile updated!');
error(message: string, options?: Object): string
Show error notification

ServiceWorkerManager

Handles PWA functionality and offline support.

Methods

register(): Promise<void>
Register service worker
update(): Promise<void>
Check for and apply updates

Events

  • sw:installed - Fired when service worker is installed
  • sw:updated - Fired when update is available

Using Managers

Managers can be accessed through the Now.js framework instance

// Get manager instance const router = Now.getManager('router'); // Use manager methods router.navigate('/home'); // Listen to manager events Now.getManager('event').on('route:after', (event) => { console.log('Route changed:', event.path); });

Best Practices

  • Always check if manager exists before using
  • Use proper error handling with try/catch
  • Clean up event listeners when components unmount
  • Use type checking when available
  • Consider performance implications of manager operations

Error Handling

try { const router = Now.getManager('router'); await router.navigate('/profile'); } catch (error) { // Handle errors appropriately console.error('Navigation failed:', error); Now.getManager('notification').error('Failed to navigate'); }

Next Steps