Create custom components in MJML

[seanlail]

First of all, let me say I love MJML.
I'm currently setting up some templates though and am finding that creating components is a bit cumbersome.

My project is setup with:

• components written in JS
• includes written in MJML
• templates written in MJML

I'm using the VS Code extension for MJML, so when editing an include or template I get feedback in the editor.
I'm finding that the components are the one place where I am kind of coding in the dark though (markup is inside a template literal).

I know I can run a build and it will tell me what is wrong, but that loop is really slow, even with a watch task.

I'd love to be able to create a component in MJML.
If you've used Svelte, you know where I'm going with this...

Creating a component could be this easy:

MyComponent.mjml

<script>
  export const tag = "my-component";
  export const allowedAttributes = { align: "enum(left,center,right)", href: "string" };
  export const defaultAttributes = { align: "left", href: "" };
</script>

<mj-section>
  <mj-column>
    <mj-button {align} {href}>
      <slot />
    </mj-button>
  </mj-column>
</mj-section>

Usage:

<mjml>
  <mj-body>
    <my-component align="center" href="/">Click me</my-component>
  </mj-body>
</mjml>

[seanlail]

Actually, even simpler:

<script>
  export const tag = "my-component";

  /** @type {"left" | "center" | "right"} */
  export let align = "left";

  /** @type {string} */
  export let href: string = "";
</script>

<mj-section>
  <mj-column>
    <mj-button {align} {href}>
      <slot />
    </mj-button>
  </mj-column>
</mj-section>

[iRyusa]

I don't think we'll ever go that way because it requires much more resources that we could ever have. Templating won't be handled in MJML as mentioned here #1630

Syntax seems easy to you because you're familiar with it but it's not something that speak to everyone.

[caseyjhol]

Agreed - creating custom components is very cumbersome, to the point where I've decided it's not even worth it. So much overhead is needed to create a new component - this is an area that could definitely use some overhaul.