Email Component Library System

Overview

Build a component library system that bundles custom email components together for reuse across different email templates. The system should allow loading different component libraries when compiling templates.

Requirements

Component Libraries

Create two component libraries:

1. Brand Library: Contains brand-specific components

   • mj-brand-button: A styled button component with brand colors
   • mj-brand-header: A header component with brand styling

2. Alert Library: Contains notification components

   • mj-alert-box: An alert/notification box component
   • mj-alert-button: A button styled for alerts

Each component should:

• Extend MJML base classes appropriately
• Accept standard styling attributes (like color, background-color, padding)
• Render valid HTML output

Component Dependencies

Define which standard MJML components can be used inside your custom components. For example, a button component might allow mj-text as a child, or a header might allow mj-image and mj-text.

Compilation Function

Create a function compileWithLibrary(mjmlTemplate, libraryName) that:

• Takes an MJML template string and a library name ("brand" or "alert")
• Loads the specified component library
• Compiles the template to HTML
• Returns the compiled HTML string

Test Cases { .test-cases }

Test 1: Compile with Brand Library { .test-case @test }

Input:

const template = `
<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-brand-header>Welcome to Our Service</mj-brand-header>
        <mj-brand-button href="https://example.com">Get Started</mj-brand-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
`
const result = compileWithLibrary(template, "brand")

Expected Output:

• Function returns an HTML string
• HTML contains rendered brand components
• Compilation succeeds without errors

Test 2: Compile with Alert Library { .test-case @test }

Input:

const template = `
<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-alert-box>Your password will expire soon</mj-alert-box>
        <mj-alert-button href="https://example.com/reset">Update Password</mj-alert-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
`
const result = compileWithLibrary(template, "alert")

Expected Output:

• Function returns an HTML string
• HTML contains rendered alert components
• Compilation succeeds without errors

Test 3: Library Isolation { .test-case @test }

Input:

// Compile with brand library
const brandTemplate = `
<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-brand-button>Brand Button</mj-brand-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
`
const brandResult = compileWithLibrary(brandTemplate, "brand")

// Then compile with alert library
const alertTemplate = `
<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-alert-button>Alert Button</mj-alert-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
`
const alertResult = compileWithLibrary(alertTemplate, "alert")

Expected Behavior:

• Both compilations succeed independently
• Each uses only components from its specified library
• No component cross-contamination between libraries

File Structure

src/
├── index.js                  # Main entry with compileWithLibrary function
├── libraries/
│   ├── brandLibrary.js       # Brand component library definition
│   └── alertLibrary.js       # Alert component library definition
└── components/
    ├── brand/
    │   ├── BrandButton.js    # mj-brand-button component
    │   └── BrandHeader.js    # mj-brand-header component
    └── alert/
        ├── AlertBox.js       # mj-alert-box component
        └── AlertButton.js    # mj-alert-button component

test/
└── index.test.js             # Test file with all test cases

Dependencies { .dependencies }

mjml { .dependency }

Email framework for creating responsive email templates. Use this to compile MJML templates to HTML and create custom components.