framework: Deeply(?) nested components only rendering intermittently

  • Maizzle Version: 2.6.0
  • Node.js Version: 12.18.3

I have a project I have just started working on which I decided to break down into components as quite a lot of features are repeated, such as multiple CTAs. I have a top-level component dealing with the base styles and outer tables etc, and I have repeated components that I use to define a row in the table (with locals set to pass options around padding, border etc). These both work fine.

However, my CTA component, nested within these two, seems to only render intermittently (mostly it seems to actually render one of the CTAs on a give page, but sometimes it will render 3 or, rarely, all of them).

I can’t post a full cut of the html, but here is a snippet of one of the rows in question:

<component
  src="src/components/row.html"
  locals='{ "divider": "grey", "padTop": 32, "padBottom": 32 }'
>
  <h2 class="text-center text-2xl">TITLE</h2>
  <h3 class="text-center text-2xl">Subtitle</h3>
  <img
    class="block w-full m-0"
    src="images/subfolder/image@1x.jpg"
    alt="image"
  />
  <p>
    -- snipped content --
  </p>
  <p>-- snipped content --</p>
  <ul class="font-bold">
    <li>-- snipped content --</li>
    <li>-- snipped content --</li>
  </ul>

  <component src="src/components/cta.html" locals='{"href": "#"}'>
    CTA TEXT
  </component>
</component>

The content of the CTA component is very close to the suggestion in the docs:

<table cellpadding="0" cellspacing="0" class="mx-auto mt-24">
  <tr>
    <td
      align="center"
      class="bg-orange hover:bg-orange-dark text-sm"
      style="mso-padding-alt: 14px 24px"
    >
      <a
        href="{{ href }}"
        class="block text-black font-bold py-14 px-24 no-underline"
      >
        <content></content>
      </a>
    </td>
  </tr>
</table>

It is worth noting that the row component is in use as many times in this page as the CTA, but works every time. There does not seem to be any rhyme or reason to the CTA component - The one that renders even changes many times when the maizzle watch session hot reloads the browser with new content.

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 3
  • Comments: 15 (6 by maintainers)

Most upvoted comments

Any chance that this was solved?

Any chance that this was solved?

It’s still an issue: https://github.com/posthtml/posthtml-modules/issues/51

Thanks for raising that… For now I’ve stopped using that nested CTA component, but it would be nice to be able to get it back in the future. The locals are pretty necessary in my use case, as there are a number of those “Row” components that have different options supplied to them, so removing that isn’t really an option for me.

Over all, the locals method doesn’t feel like the best way of passing data to child components. I understand that its a necessary part of using PostHTML, but it feels like a bit of a regression when comparing to the way one can pass data around in, say, a Nunjucks project.

I just sent https://github.com/posthtml/posthtml-modules/pull/84 which will fix this issue