webc icon indicating copy to clipboard operation
webc copied to clipboard

Nested slots not possible? causes compilation to hang

Open cssandstuff opened this issue 2 years ago • 6 comments

Hi - I have come across an error (possible bug?) trying to pass through content using nested slots. (but perhaps this is also just usage that is not really indended)

my-paragraph.webc:

<p>
  <slot></slot>
</p>

paragraph-with-wrapper.webc:

<div class="with-wrapper">
  <my-paragraph>
     <slot></slot>
  </my-paragraph>`
</div>

within my index.webc

  <my-paragraph>hello I am a mere paragraph</my-paragraph>
  <paragraph-with-wrapper>
     I am a paragraph wrapped in some other stuff
  </paragraph-with-wrapper>

expected output:

<p>hello I am a mere paragraph</p>
<div class="with-wrapper">
  <p>I am a paragraph wrapped in some other stuff</p>
</div>

build/compilation fails with a JavaScript heap out of memory error. am using the 2.x beta with webc 0.8.1

    "@11ty/eleventy": "^2.0.0-beta.3",
    "@11ty/eleventy-plugin-webc": "^0.8.1"

cssandstuff avatar Feb 20 '23 01:02 cssandstuff

At the moment the workaround for this is to just do this instead

<div class="with-wrapper">
     <slot></slot>
</div>

and then when you're consuming it

<paragraph-with-wrapper>
     <my-paragraph>I am a paragraph wrapped in some other stuff</my-paragraph>
</paragraph-with-wrapper>

but it would be nice to be able to wrap things in other things (as you can do in svelte)

cssandstuff avatar Feb 23 '23 21:02 cssandstuff

in v0.90 you can do the following to pass dynamic props down levels which is awesome! But I still can't figure out how to do the same for slot content. (maybe also I'm just not that smart 😅)

page.webc

<component-with-wrapper @heading="glorious!">
    Hello there!
</component-with-wrapper>

component-with-wrapper.webc

<div class="wrapper-that-adds-some-specialness">
  <component :@heading="heading">
    I am a paragraph wrapped in some other stuff
    <!-- BUT: dont know how to make
    this part dynamic this.slots.text.default or `<slot></slot>` references itself
    and runs into a loop -->
  </component>
</div>

component.webc

<h2 @text="heading"></h2>
<slot></slot>

cssandstuff avatar Feb 24 '23 03:02 cssandstuff

referencing this here as it may help others try and understand what I'm on about https://github.com/sveltejs/svelte/issues/790

also having a crack at this myself to see how far I can get.

cssandstuff avatar Mar 31 '23 09:03 cssandstuff

Can confirm -- this seems to be a bug

sc0ttes avatar Jun 19 '23 19:06 sc0ttes

I'm pretty new to WebC but can confirm this is still an issue. Took me quite a while to figure out what I had done which had caused the issue giving the non-descriptive errors ("JavaScript heap out of memory"). Even if this bug could be aknowledged by a maintiner that would help.

Is this something that will never be supported?

connelhooley avatar Jun 05 '24 21:06 connelhooley

I've been messing around with this for a little bit off and on. And I have something that will stop the heap error from occurring, which I guess fixes the bug. Can possibly put up a PR for that with a more coherent error message. I do feel like Zach might have a few tricks up his sleeve though so not sure how much effort to put in at this stage as all of this will be migrated to ESM to support the new version of Eleventy.

cssandstuff avatar Jun 06 '24 06:06 cssandstuff