Add HTML comments to twig output to attempt to allow in-place editing

I was able to do the easy bits here - prop wrappers for when we're not inside an element or attribute, and wrappers for the component.

For the props-no-slots component in the xb_test_sdc module we get this

<!-- xb-start-9fff3623-d783-44c7-bb94-896d322f0d66 -->
  <div  data-component-id="xb_test_sdc:props-no-slots" style="font-family: Helvetica, Arial, sans-serif; width: 100%; height: 100vh; background-color: #f5f5f5; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; padding: 20px; box-sizing: border-box;">
    <h1 style="font-size: 3em; margin: 0.5em 0; color: #333;">
      <!-- xb-prop-start-heading -->
        se3hqtu5
      <!-- xb-prop-end-heading -->
    </h1>
  </div>
<!-- xb-end-9fff3623-d783-44c7-bb94-896d322f0d66 -->

Getting HTML attribute support will require a full syntax tree that mixes twig nodes with HTML - which is what I'm working on in a separate PHP library. But I think this is a good step forward.

Just adding a comment for extra visibility in case my comment on the MR was missed.

Would you be able to change the HTML comments so that there is a difference between a comment wrapping a slot and a comment wrapping a prop?

TIL this was happening!

VERY cool! 🤩

A bunch of question/requests for clarification, but I think this is close to ready already 😄

Once the bits I do not fully grok yet are clarified by @larowlan, I will approve + merge because the #1 requirement is met:

but the output is what I need and the tests look good!

— @jessebaker stating that this unblocks him on next steps!

The #2 requirement is that I and others understand this sufficiently to maintain/improve this in case @larowlan is unavailable — and that's essentially what my review focuses on 😊

This will enable ✨ Leverage HTML comment annotations, remove wrapping div elements Active ! 🚀

larowlan → credited longwave → .

Addressed feedback

While I definitely don't grok every detail of XbTwigExtension, the docs @larowlan added make it 100x more clear what it does. I'm confident now that somebody can step through it with a debugger and combined with @larowlan's comments understand what is going on, and iterate on his work 👍

The things least clear to me at this point:

• Reliance on $node->hasAttribute('data') and its meaning?!
• Reliance on $node->hasAttribute('name') and its meaning?!

… but turns out that this is just (AFAICT undocumented, and hard to search for) Twig's architecture, because \Twig\Node\TextNode::compile() uses it too! 🤷

This unblocked Assigned to: jessebaker ✨ Leverage HTML comment annotations, remove wrapping div elements Active ! 🚀

Automatically closed - issue fixed for 2 weeks with no activity.