Issue with `webc:for` via Eleventy computed data

[d3v1an7]

[copy/paste from a comment in 11ty/webc#28]

Just doing a quick test (grabbed 11ty webc repo and dropped it into my project, overriding the existing folder at node_modules/@11ty/webc -- let me know if there is a better way to do this before tags exist!)

✅ This works as expected src/index.webc

<card-story webc:for="item of arrayOfPosts" :title="item.title" :excerpt="item.excerpt"></card-story>

src/_components/card-story.webc

<article>
  <h3 @text="title"></h3>
  <p @text="excerpt"></p>
</article>

✅ As does this! src/index.webc

<card-story-alt webc:for="itemAlt of arrayOfPosts" :@data="itemAlt"></card-story-alt>

src/_components/card-story-alt.webc

<article>
  <h3 @text="data.title"></h3>
  <p @text="data.excerpt"></p>
</article>

⚠️ I've noticed some weirdness on follow up builds using npx @11ty/eleventy --serve, where the data object seems to get 'lost', which errors the build like:

[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] 1. Having trouble rendering webc template ./src/index.webc (via TemplateContentRenderError)
[11ty] 2. Evaluating a dynamic attribute failed: `:title="item.title"`.
[11ty] Original error message: Cannot read properties of undefined (reading 'title') (via Error)

Stopping the server and starting it again sorts it out, but only for the first build. I'm doing tests in an existing project, so will set up a cleaner env to see if I can pin it down.

arrayOfPosts is being populated via a index.11tydata.js, and looks something like

module.exports = {
  eleventyComputed: {
    arrayOfPosts: async data => {
      return await {api call}

Edit 1: Here is a quick test repo , inspired by @mdarrik in 11ty/webc#115

Edit 2: Fetching of dynamic data doesn't seem to be related. I've got a branch here with a hardcoded file in _data which also demonstrates the same behaviour.

[sombriks]

Hello i can confirm it still happens even with "@11ty/webc": "^0.10.0"

on my blog i have this snippet:

<h2>Contacts</h2>
<fieldset class="contato">
    <legend>All relevant presence on internet</legend>
    <!-- this one pops undefined on :href="c.link" -->
    <div webc:for="c of curriculum.contacts">
      <a target="_blank" :href="c.link" :alt="c.label" :title="c.label">
        <span :class="c.icon"></span><span @html="c.link"></span>
      </a>
    </div>
    <!-- this one i want to replace -->
    <script webc:type="js" webc:raw>
        curriculum.contacts.filter(c => c.visible).map(c => `
            <div>
                <a target="_blank" href="${c.link}" alt="${c.label}" title="${c.label}">
                    <span class="${c.icon}"></span> ${c.link}
                </a>
            </div>
        `).join("\n")
    </script>
</fieldset>

It must be something with the plugin, because webc:for itself is working fine

[zachleat]

@sombriks where is curriculum.contacts generated? does this use computed data too?

[sombriks]

@sombriks where is curriculum.contacts generated? does this use computed data too?

it comes from a json file: src/_data/curriculum.json

[zachleat]

if it isn’t computed data (and it looks like it isn’t)—can you file a separate issue @sombriks? Thank you!

[d3v1an7]

Have been using @11ty/eleventy: ^2.0.2-alpha.2 and @11ty/eleventy-plugin-webc: ^0.11.1-alpha.1 for a while now and haven't bumped into this issue since :)