Support dynamic :webc:is value

[m4rrc0]

Hey! Doesn't seem like an urgent fix but...
This does not work properly (or at least not as I expected):

<div :webc:is="'my-component'" @test="Dynamic comp name does not pass props"></div>

The component renders but the test prop is not passed.

The workaround is probably to use a script.

<script webc:type="js">
  `<${"my-component"} @test="Template string comp name works"></${"my-component"}>`
  + // OR
  `<div webc:is="${"my-component"}" @test="Template string comp name works"></div>`;
</script>

Both work as expected.

My use case was the following:
I wanted to loop over an array of data with each entry containing the name of the component to be used and the props to be passed to said component.
I was trying something like this:

<div
  webc:for="block of blocks"
  :webc:is="block.tag"
  @attributes="block"
></div>

It looks super neat and compact! (but it does not work 😭😄)

[m4rrc0]

Update: I currently landed on this syntax.

<script webc:type="js" webc:for="block of blocks">
  const { tag = "div", text, html, raw, ...attributes } = block;
  const a = JSON.stringify(attributes).replaceAll('"', "'");

  const t = text ? `@text="'${text}'"` : "";
  const h = html ? `@html="'${html}'"` : "";
  const r = raw ? `@raw="'${raw}'"` : "";

  `<${tag || "div"} @attributes="(${a})" ${t || h || r}></${tag || "div"}>`;
</script>

Which I must say is still cool and compact!
I am not sure how well it will hold for real world data but it is a start.

Note: As you can see, there is still some messing around to be done with the @ attributes but I guess it is another topic.

[zachleat]

Related #148

[zachleat]

Note that the only current dynamic webc: attribute currently supported is webc:bucket #120. More to come!

[m4rrc0]

Just to make sure I was clear... Note that it seems to work when we don't need props.

<div :webc:is="'my-component'"></div>

[mirisuzanne]

Ran into this today, and it took me way too long to find my way through with a workaround:

<span 
  webc:if="this.logo" 
  webc:type="11ty" 
  11ty:type="liquid" 
  webc:nokeep 
  webc:raw
>{% render "logos/{{ logo }}.svg" %}</span>

• If I use a <template> instead of <span>, I get a random-seeming fragment of page-layout code. I even tried passing in an empty layout variable, but that didn't help. Changing to a span fixed it. Not sure why?
• If I leave off webc:raw, I get escaped svg code rather than a rendered svg. Again, I'm not sure I know why?

Hope that's helpful for someone. This would be an extremely useful feature in WebC.