Logger Extension

The Logger extension is a development tool that logs all lifecycle events to the browser console. It’s useful for debugging and understanding the extension system.

Installation

ESM (Module Bundlers)

import { vistaView } from 'vistaview';
import { logger } from 'vistaview/extensions/logger';
import 'vistaview/style.css';

vistaView({
  elements: '#gallery > a',
  extensions: [logger()],
});

UMD (CDN)

<script src="https://unpkg.com/vistaview/main/dist/vistaview.umd.js"></script>
<script src="https://unpkg.com/vistaview/extensions/logger/dist/main.umd.cjs"></script>

<script>
  VistaView.vistaView({
    elements: '#gallery > a',
    extensions: [VistaView.logger()],
  });
</script>

Features

• Lifecycle logging - Logs all extension lifecycle events
• Image initialization - Logs when images are initialized
• Navigation tracking - Logs image view events
• Open/close tracking - Logs lightbox open and close events
• Console output - All logs use console.debug() for easy filtering

What Gets Logged

The logger uses console.debug() for all output. Each hook logs a label string followed by the raw data object on a second line.

onInitializeImage

Logged once per image during setup:

Logger: VistaView initialized with params:
VistaImageParams { elm: {...}, pos: 0, index: 0, ... }

onOpen

Logged when the lightbox opens:

Logger: VistaView opened
VistaView { state: {...}, options: {...}, ... }

onImageView

Logged when navigating to an image:

Logger: Image viewed
VistaData { index: { from: 0, to: 1 }, via: { next: true, prev: false }, ... }

onContentChange

Logged when image content changes (pan, zoom, etc.):

Logger: Content changed
VistaImageClone { config: {...}, state: { transform: {...} }, ... }

onClose

Logged when the lightbox closes:

Logger: VistaView closed
VistaView { state: {...}, options: {...}, ... }

Usage Example

import { vistaView } from 'vistaview';
import { logger } from 'vistaview/extensions/logger';
import 'vistaview/style.css';

vistaView({
  elements: '#gallery > a',
  extensions: [logger()],
  onOpen: () => {
    console.log('App: Gallery opened');
  },
});

Open your browser’s developer console and interact with the lightbox to see the logs.

Filtering Logs

The logger uses console.debug(), so you can filter logs in your browser’s developer console:

Chrome/Edge

1. Open DevTools (F12)
2. Go to Console tab
3. Select log levels and choose “Verbose” or “Debug”

Firefox

1. Open Developer Tools (F12)
2. Go to Console tab
3. Click the filter icon and enable “Debug”

Safari

1. Open Web Inspector (Cmd+Option+I)
2. Go to Console tab
3. Click the filter icon and enable “Debug”

Bundle Size

• ESM: 0.61 KB (0.23 KB gzip)
• UMD: 0.76 KB (0.37 KB gzip)

Use Cases

Debugging Custom Extensions

import { logger } from 'vistaview/extensions/logger';
import { myCustomExtension } from './my-extension';

vistaView({
  elements: '#gallery > a',
  extensions: [
    logger(), // Log all events
    myCustomExtension(), // Your extension
  ],
});

Understanding Event Order

Use the logger to understand the order of lifecycle events:

vistaView({
  elements: '#gallery > a',
  extensions: [logger()],
});

Then interact with the lightbox and observe the console:

Logger: VistaView opened
Logger: VistaView initialized with params:
Logger: Image viewed
Logger: Image viewed
Logger: VistaView closed

Development vs Production

Only include the logger in development:

const extensions = [];

if (process.env.NODE_ENV === 'development') {
  const { logger } = await import('vistaview/extensions/logger');
  extensions.push(logger());
}

vistaView({
  elements: '#gallery > a',
  extensions,
});

Next Steps

• Learn about creating custom extensions
• Explore other extensions
• See events and lifecycle