Pass arguments to a WebC component?

[VAggrippino]

Is it possible to pass something like an argument to a WebC component?

I'm building a site with a blog and several pages that aren't blog posts. On the home page (/index.html) I want to show the latest couple of blog posts and on /blog/index.html I want to show the latest 5 posts. I created a single component that I thought I could use on either page. I used webc:setup to define a function that returns just the desired posts from collections.post and webc:for to render the posts.

It works, but it renders all of the posts instead of just the ones I wanted. It should generate an error of some kind since it depends on a variable that is apparently undefined.

I thought Properties was my solution, but it's not working for me.

/_components/collections-post.webc:

<h2>Test numposts prop: </h2>

<p @text="numposts"></p>

<script webc:setup>
    const recent_posts = (numposts) => {
        const posts = collections.post
        const sorted = posts.sort((a, b) => a.page.date < b.page.date ? -1 : 1)
        const top = sorted.slice(0 - numposts)
        return top.reverse()
    }
</script>


<article webc:for="post of recent_posts(numposts)">
    <h3 class="post__title"><a :href="post.data.page.url" @text="post.data.title"></a></h3>
    <div class="post__date" @text="formatted_date(post.data.page.date)"></div>
    <div class="post__content" @html="post.content"></div>
</article>

/index.webc:

<collections-post @numposts="2"></collections-post>

If I use the example found in the documentation ("@prop="hello""), it works perfectly, but that numposts paragraph in my example above just renders as an empty paragraph.

[rdela]

Hi @VAggrippino! It seems the main problem in the code you shared is where you are trying to access numposts, it is not available in the webc:setup script, but is available outside of it.

I created a repo from my new minimal WebC starter for this discussion at https://github.com/rdela/webcbed-eleventy-3396

That is deployed to Netlify at https://webcbed-3396.netlify.app/

This is the component code https://github.com/rdela/webcbed-eleventy-3396/blob/trunk/_components/collections-post.webc

[VAggrippino]

Hi @VAggrippino! It seems the main problem in the code you shared is where you are trying to access numposts, it is not available in the webc:setup script, but is available outside of it.

I created a repo from my new minimal WebC starter for this discussion at https://github.com/rdela/webcbed-eleventy-3396

That is deployed to Netlify at https://webcbed-3396.netlify.app/

This is the component code https://github.com/rdela/webcbed-eleventy-3396/blob/trunk/_components/collections-post.webc

numposts wasn't directly available inside of the webc:setup block, but I expected calling the function from the webc:for block to make it available... as the argument, not the variable from the containing scope. This is how I understood it, but I guess using the same name for both the tag property and the function's argument definition could be a little confusing.

numposts didn't seem to be available outside of the webc:setup block, though. I tested that with <p @text="numposts"></p> where it rendered an empty paragraph. I'm sure I did something else wrong here, though, because that's really almost identical to the @prop="Hello" example from the documentation.

I figured out a solution, but I'm definitely open to criticism. I don't understand the usage of "Props" as defined by the documentation I linked in the first post. If I use that at-sign, the value (numposts in this case) doesn't appear in the rendered HTML, but it's not available to the code in the component, either. If I don't use the at-sign, the component code works fine, but the property is set on the <collections-post> tag in the rendered HTML. That's not a problem in this case, but I can definitely see where that would be undesirable.

My understanding (which must be mistaken) is that numposts="2" and @numposts="2" should be exactly the same except that the one with the at-sign won't show the property value in the rendered HTML because ...

Props are server-only “private” attributes that don’t end up in the output HTML (they are private to WebC). They are identical to attributes except that they are filtered from the output HTML.

[VAggrippino]

This was much simpler than I was making it out to be. The value I wanted to pass worked just fine when passed like a regular HTML attribute. The code below works fine

... with one caveat. At one point I was working on this code using an old computer (2014 model HP laptop) and I ran into a Tried to use templateContent too early error message. The problem and solution (eleventyImport.collections) are discussed at 11ty/eleventy-plugin-webc#92 The detail that makes it interesting for me is that this never happened on a more powerful computer (2019 custom-built gaming rig).

---

/index.webc:

<collections-post numposts="2">

/_components/collections-post.webc:

<script webc:setup>
    const recent_posts = (n) => {
        const posts = collections.post
        const sorted = posts.sort((a, b) => a.page.date < b.page.date ? -1 : 1)
        const top = sorted.slice(0 - n)
        return top.reverse()
    }
</script>

<article class="collections-post" webc:for="post of recent_posts(numposts)">
    <h3 class="collections-post__title"><a :href="post.data.page.url" @text="post.data.title"></a></h3>
    <div class="collections-post__date" @text="formatted_date(post.data.page.date)"></div>
    <div class="collections-post__content" @html="post.content"></div>
</article>

[VAggrippino]

😖 Oh brother! ... In my actual code, the component has a <style webc:scoped> block at the top. I didn't expect that to matter or be related in any way, but if I remove the whole block then passing the prop with the at-sign works fine and matches my original understanding of properties.

I think this is a new question... Why does scoped CSS break props?

Update: WebC scoped styles breaks Props?