Mjml: Add <mjml-chart> to MJML 4?

[jsjoeio]

Hi there 👋🏼!

I am wondering if you would be interested in a PR that adds <mjml-chart> directly to MJML 4 instead of as a third-party plugin?🤔

I reached out to @FGRibreau on Twitter yesterday who suggested I submit a PR to update it to use MJML 4. After looking at the repo fro MJML, it seems it shouldn't be that difficult to add it as a component to v4.

However, I wanted to double check that this is an enhancement you'd be interested in. 😁

[ngarnier]

Hey @jjprevite, as it's using a third-party service, we prefer it to be available as a community component as well.

[jsjoeio]

@ngarnier Ah, if I understand you correctly, you'd rather me update <mj-chart> directly rather than import it into mjml?

[ngarnier]

Yes, that would be the best approach 🙂

[jsjoeio]

Got it! I'll see what I can do. Thanks @ngarnier ! Closing this issue

[FGRibreau]

Hello @ngarnier,

I'm working on porting mjml-chart to mjml4, here is what I've got so far.

• I limited my test to the first one and it silently does not render my mj-chart, could you explain what is going on?
• I can't find tests on mjml anymore, where are they? (so I can copy how you test in mjml4) :)
• could you validate that component.js.tmpl follows the right new conventions?

https://github.com/image-charts/mjml-chart/pull/3

[iRyusa]

Renaming MjChart class to Chart should fix the issue
On Thu, May 3, 2018 at 11:46 PM Francois-Guillaume Ribreau <
[email protected]> wrote:

Hello @ngarnier https://github.com/ngarnier,

I'm working on porting mjml-chart to mjml4, here is what I've got so far
https://github.com/image-charts/mjml-chart/pull/3/files.

• I limited my test to the first one and it silently does not render
  my mj-chart, could you explain what is going on?
• I can't find tests on mjml anymore, where are they? (so I can copy
  how you test in mjml4) :)
• could you validate that component.js.tmpl follows the right new
  conventions?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/mjmlio/mjml/issues/1180#issuecomment-386447349, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAizzX4s6ZHxINv3zAW3lOR2i0Z8idcoks5tu3q9gaJpZM4TxZVF
.

--
Cordialement,
Maxime BRAZEILLES

[FGRibreau]

Hum I don't understand why it would work but I did it nonetheless and I got this:

Element mj-chart doesn't exist or is not registered

I tried different variation (changing template and/or class name) but everytime it did not work (either this error or a silent fail that resulted in mjml2html not displaying my chart), could you take a look at the code? :)

[iRyusa]

Code seems fine, you need to rename it to Chart instead of MjChart because it now guess the name based on class name so Chart -> <mj-chart> & MjChart -> <mj-mj-chart>.

Try to check what's inside components object to see if your constructor is well listed. If not I don't really know try to use the boilerplate with the compiled component to see if it works on this repo

[FGRibreau]

Yes it's listed in

import {components } from 'mjml-core';

//
{ chart:
   { [Function: Chart]
     tagOmission: true,
     endingTag: true,
     allowedAttributes:
      { cht: 'string',
        chd: 'string',
       ...
}

but I can't call it with:

mjml2html(`
        <mjml>
          <mj-body>
            <mj-chart
            chs="300x200"
            chd="t:10,20,30|15,25,35"
            cht="bvs"
            chxt="x,y"
            chxl="0:|A|B|C" />
          </mj-body>
        </mjml>`)

I got:

{ line: 4,
       message: 'Element mj-chart doesn\'t exist or is not registered',
       tagName: 'mj-chart',
       formattedMessage: 'Line 4 of /www/image-charts/mjml-chart (mj-chart) — Element mj-chart doesn\'t exist or is not registered' }

if I change mjml2html to:

<mjml>
          <mj-body>
            <chart
            chs="300x200"
            chd="t:10,20,30|15,25,35"
            cht="bvs"
            chxt="x,y"
            chxl="0:|A|B|C" />
          </mj-body>
        </mjml>

then I got no more errors, but the .html body is still empty:

 <body>\n        \n        \n      </body>

[iRyusa]

My bad we did refactor this part someday, and now it's just the class name in kebab case so name was good https://github.com/mjmlio/mjml/blob/master/packages/mjml-core/src/components.js#L6
And your component is returning a non valid HTML element for now.

As I said try with the boilerplate, might need to check if you do something different https://github.com/mjmlio/mjml-component-boilerplate/blob/master/components/MjBasicComponent.js

[FGRibreau]

Done, it works, I think I was missing this part initially, the HTML code was valid however. Now I use <mj-image/> it's way better that way!