Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nested slots not possible? causes compilation to hang #111

Open
cssandstuff opened this issue Feb 20, 2023 · 6 comments
Open

Nested slots not possible? causes compilation to hang #111

cssandstuff opened this issue Feb 20, 2023 · 6 comments

Comments

@cssandstuff
Copy link

cssandstuff commented Feb 20, 2023

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 cssandstuff changed the title Nested slots not possible? cause compilation to hang Nested slots not possible? causes compilation to hang Feb 20, 2023
@cssandstuff
Copy link
Author

cssandstuff commented Feb 23, 2023

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
Copy link
Author

cssandstuff commented Feb 24, 2023

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
Copy link
Author

referencing this here as it may help others try and understand what I'm on about
sveltejs/svelte#790

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

@sc0ttes
Copy link

sc0ttes commented Jun 19, 2023

Can confirm -- this seems to be a bug

@connelhooley
Copy link

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?

@cssandstuff
Copy link
Author

cssandstuff commented Jun 6, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants