or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-mjml-head

MJML head component for managing email template head elements

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/mjml-head@4.15.x

To install, run

npx @tessl/cli install tessl/npm-mjml-head@4.15.0

index.mddocs/

MJML Head

MJML Head is a core component of the MJML email framework that provides the container functionality for managing head elements in email templates. As a HeadComponent, it serves as the parent container for various head-specific components like styles, fonts, attributes, and metadata configurations that are essential for responsive email rendering.

Package Information

  • Package Name: mjml-head
  • Package Type: npm
  • Language: JavaScript (ES6)
  • Installation: npm install mjml-head

Core Imports

import MjHead from "mjml-head";
// or commonly imported as:
import Head from "mjml-head";

For CommonJS:

const MjHead = require("mjml-head");
// or commonly required as:
const Head = require("mjml-head");

Basic Usage

import MjHead from "mjml-head";

// Typical usage within MJML component registration
// This component is usually registered automatically when using the full MJML package
// and used declaratively in MJML markup as <mj-head>

In MJML markup:

<mjml>
  <mj-head>
    <!-- Head components like mj-style, mj-font, etc. -->
    <mj-style>
      .custom-class { color: blue; }
    </mj-style>
  </mj-head>
  <mj-body>
    <!-- Body content -->
  </mj-body>
</mjml>

Architecture

The MjHead component is built on MJML's component architecture:

  • HeadComponent Base: Inherits from HeadComponent which provides head-specific processing capabilities
  • Component Registration: Automatically registered with MJML core using the componentName 'mj-head'
  • Child Processing: Delegates child component handling to the inherited handlerChildren() method
  • MJML Integration: Seamlessly integrates with MJML's parsing and rendering pipeline

Capabilities

MjHead Class

The main component class that extends HeadComponent to provide head container functionality.

/**
 * Main head component class for MJML email templates
 * Extends HeadComponent to provide container functionality for head elements
 */
export default class MjHead extends HeadComponent {
  /** MJML component tag name identifier */
  static componentName = 'mj-head';
  
  /** 
   * Processes child components by delegating to inherited handlerChildren() method
   * @returns {Array} Array of processed child components
   */
  handler() {
    return this.handlerChildren();
  }
}

Static Properties

Component identifier used by MJML's registration system.

/**
 * MJML component tag name identifier
 * Used by MJML core for component registration and recognition
 */
static componentName = 'mj-head';

Instance Methods

Core processing method that handles child component initialization and processing.

/**
 * Main processing method that handles child components
 * Delegates to the inherited handlerChildren() method for actual processing
 * @returns {Array} Array of processed child components from handlerChildren()
 */
handler() {
  return this.handlerChildren();
}

Inherited API (from HeadComponent)

Base functionality inherited from the HeadComponent class.

/**
 * Processes all child components in the head section
 * Maps over children props and initializes each child component
 * @returns {Array} Array of rendered child components
 */
handlerChildren() {
  // Implementation inherited from HeadComponent
}

/**
 * Returns the component's tag name
 * Uses componentName or falls back to kebab-cased class name
 * @returns {string} Component tag name as string
 */
static getTagName() {
  return this.componentName || kebabCase(this.name);
}

Component Properties

Core properties available on component instances.

/**
 * Component properties and attributes passed from MJML parsing
 * @type {Object}
 * @property {Array} children - Array of child components
 */
props = {
  children: [],
  // Additional properties from MJML parsing
};

/**
 * MJML rendering context containing component registry and processing state
 * @type {Object}
 * @property {Object} components - Registry of available MJML components
 * @property {Function} addHeadStyle - Function to add head styles
 * @property {Function} addComponentHeadSyle - Function to add component-specific head styles
 */
context = {
  components: {},
  addHeadStyle: function(name, style) {},
  addComponentHeadSyle: function(style) {},
  // Additional context properties
};

Types

Core type definitions for the MjHead component.

/**
 * Child component structure as processed by MJML parser
 * @typedef {Object} ChildComponent
 * @property {string} tagName - The MJML tag name
 * @property {Object} [attributes] - Component attributes
 * @property {Array} [children] - Child components
 * @property {string} [content] - Text content
 */

/**
 * MJML component initialization data structure
 * @typedef {Object} ComponentInitialData  
 * @property {string} tagName - The component tag name
 * @property {Object} [attributes] - Component attributes
 * @property {Array<ChildComponent>} [children] - Array of child components
 * @property {Object} context - MJML rendering context
 */

Usage Context

The MjHead component is typically used as a container in MJML email templates and can contain various head-specific child components:

  • mj-attributes: Global attribute definitions
  • mj-style: CSS styles for email
  • mj-font: Font definitions
  • mj-breakpoint: Responsive breakpoint settings
  • mj-title: Email title metadata
  • mj-preview: Email preview text
  • mj-html-attributes: HTML attribute settings

Error Handling

The component inherits error handling from the HeadComponent base class:

  • Logs errors for unmatched child component tags to console
  • Returns null for invalid child components to prevent rendering errors
  • Continues processing remaining valid child components when errors occur