Markdown + Maizzle: Is it possible for Markdown Expressions to be evaluated for props before the props are passed into HTML components?

[xiaolongbytes]

Desired Behavior:

• I'd like the Markdown Expressions to be evaluated before the props are passed into the component.
  • This would enable dynamic creation of emails
• Currently the raw expression (e.g. {{firstName}}) is being passed into the html component instead of the evaluated expression.

Code Examples:

Markdown file:

---
firstName:
    value: beans
vehicles:
  value:
    - vehicle: 1965 Dodge Deora
    - vehicle: 1971 Ford De Tomaso Pantera
---
{{firstName}}
<moose-ayw-alert title="{{firstName}}" />

## Vehicle

{{#each vehicles}}
{{vehicle}}
<moose-ayw-alert title={{vehicle}} />
<br>
{{/each}}

ayw-alert html component:
(For demonstration purposes only)

<script props>
  const pings = {
    "beans":"props.title -> rightPing(title) -> rightPing worked as expected",
    "1965 Dodge Deora": "props.title -> rightPing(title) -> rightPing worked as expected",
    "1971 Ford De Tomaso Pantera": "props.title -> rightPing(title) -> rightPing worked as expected",
    "{{firstName}}":"ayw-alert received { {firstName} } raw expression instead of 'beans'",
    "{{vehicle}}": "ayw-alert received { {vehicle} } raw expression instead of '1965 Dodge Deora' or '1971 Ford De Tomaso Pantera'",
  }

  const rightPing = function (title) {
    for (const key in pings) {
      if (key === title) return pings[key];
    }
    return "title value is not in pings";
  }

  module.exports = {
    title: rightPing(props.title),
  }
</script>

<div>
  {%%title%%}
</div>

Current (but not desired) Result after maizzle serve
You can see that the {{firstName}} and {{vehicle}} expressions outside of the component render correctly, but that the ayw-alert component receives the values "{{firstName}}" and "{{vehicle}}" instead of the corresponding values in the Front Matter.

I didn't see the answer in https://maizzle.com/guides/markdown-emails#compile-markdown or https://maizzle.com/docs/events

[cossssmin]

Hi, you're not passing in the Front Matter variables correctly to the component (it's not related to Markdown).

This works fine:

emails/template.html

---
firstName:
    value: beans
vehicles:
  value:
    - vehicle: 1965 Dodge Deora
    - vehicle: 1971 Ford De Tomaso Pantera
---

<x-main>
  <x-example title="{{ page.firstName.value }}" />
</x-main>

components/example.html

<script props>
  module.exports = {
    title: props.title || 'Example Component',
  }
</script>

<p>
  {{ title }}
</p>

Result:

<p>
  beans
</p>

You have firstName.value but are just passing in the firstName which would be an object, so it won't work (also, make sure you access them from the page object as shown above (docs).

By the way, always use quotes for attributes, this isn't JSX and you can end up with unexpected results.

- <moose-ayw-alert aware:title={{someVar}} />
+ <moose-ayw-alert aware:title="{{someVar}}" />

Finally, if you want to loop over data like page.vehicles.value there, see the Loops docs.

[xiaolongbytes]

Thanks for the speedy and helpful reply! I've sent the feedback to my team so they can incorporate it. However there's still an outstanding issue for us:

Unfortunately, one key functionality we're looking for is the ability to, using the <script props>, take in the passed in prop and, using a map, render its corresponding desired result, which is not captured in you example. I've created an updated example below incorporating your feedback regarding passing front matter variables. Additionally, I've created a new html template (instead of a markdown file) and gotten rid of looping for simplicity.
This functionality is demonstrated in the ayw-alert component. See the module.exports = { title: rightPing(props.title), } and the rightPing function.
Based on the results below, the value of title prop when it enters the called component's script is a raw, unevaluated expression ( "{{firstName}}") and not its evaluated value passed in by page.firstName.value ("beans").

emails/template.html

---
firstName:
    value: beans
---

<moose-ayw-alert title="{{ page.firstName.value }}" />

ayw-alert.html

<script props>
  const pings = {
    "beans":"props.title -> rightPing(title) -> rightPing worked",
    "{{ page.firstName.value }}": "ayw-alert received { { page.firstName.value } } raw expression instead of 'beans'",
  }

  const rightPing = function (title) {
    for (const key in pings) {
      if (key === title) return pings[key];
    }
    return "title value is not in pings";
  }

  module.exports = {
    title: rightPing(props.title),
  }
</script>

<div>
  {%%title%%}
</div>

Result

<div>
  ayw-alert received { { page.firstName.value } } raw expression instead of 'beans'
</div>

[cossssmin]

You don't need {{ }} expressions in the script there, it's basic JavaScript just write them out like you would any object.

[xiaolongbytes]

Hi Cossssmin, thanks again for the speedy reply! I'm afraid my example was causing more confusion than clarity. Hopefully I can take another try at communicating where my team is stumbling.

emails/template.html

---
firstName:
    value: beans
---

<moose-ayw-alert title="{{ page.firstName.value }}" />

ayw-alert.html component

<script props>
  const pings = {
    "beans":"This works as expected",
  }

  const rightPing = function (title) {
    for (const key in pings) {
      if (key === title) return pings[key];
    }
    return "The value of props.title is not a key of the pings object";
  }

  module.exports = {
    title: rightPing(props.title),
  }
</script>

<div>
  {%%title%%}
</div>

Current Result:

<div>
  The value of props.title is not a key of the pings object
</div>

Desired Result:

<div>
  This works as expected
</div>