Global Configuration

Lego.config allows you to customize framework behavior, including error handling and metrics.

Properties

syntax

• Type: 'mustache' | 'brackets'
• Default: 'brackets'

Configures the template delimiter style.

• 'brackets': Uses [[ variable ]] (Default)
• 'mustache': Uses {{ variable }} (Legacy/Vue-style)

// Switch back to mustache syntax if preferred
Lego.config.syntax = 'mustache';

loader

• Type: (tagName: string) => string | Promise<string> | null
• Default: undefined

Use this hook to implement Server-Side Block Delivery.

Option 1: Simple Mode (Return URL) We fetch it for you.

loader: (tag) => `/blocks/${tag}.lego`

Option 2: Power Mode (Return Promise) You control the fetch. Useful for Authentication (Cookies, JWT) or Custom Headers.

Lego.init(document.body, {
  loader: async (tagName) => {
    // Custom Authenticated Fetch
    const res = await fetch(`/blocks/${tagName}.lego`, {
      credentials: 'include', // Send Cookies
      headers: { 'Authorization': getToken() }
    });
    return await res.text(); // Return SFC content directly
  }
});

Mechanism:

1. Browser sees unknown <admin-widget>.
2. Lego calls config.loader('admin-widget').
3. If URL returned, it fetches the file.
4. The server returns raw SFC content (<template>...).
5. Lego.defineLegoFile() parses and upgrades the element instantly.

onError

• Type: (error: Error, type: string, context: HTMLElement) => void
• Default: undefined

Global error handler hook. Called when an error occurs during:

• render: Template rendering (expression evaluation)
• event-handler: @event callbacks
• define: Block definition
• sync-update: b-sync updates

Lego.config.onError = (err, type, context) => {
  console.error(`Error in ${type}:`, err);
  // Send to Sentry/Datadog
  captureException(err, { tags: { type } });
};

metrics

• Type: Object

Performance monitoring hooks, primarily used by plugins.

• onRenderStart(el): Called before a block renders.
• onRenderEnd(el): Called after a block finishes rendering.

// Example monitoring implementation
Lego.config.metrics = {
  onRenderStart(el) {
    console.time(el.tagName);
  },
  onRenderEnd(el) {
    console.timeEnd(el.tagName);
  }
};