CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-mjml-head

MJML head component for managing email template head elements

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/mjml-head@4.15.x
Publish Source
CLI
Badge
tessl/npm-mjml-head badge