[FEAT] Expose default slot as prop

[cossssmin]

Would be useful to be able to get the content passed to a component as a prop, i.e.:

// button.html
<script props>
  module.exports = {
    yield: $slots.default // or props.yield maybe?
  }
</script>

<!--[if mso]>
  <a href="...">{{ yield }}</a>
<![endif]-->
<a href="..." style="mso-hide: all">
  <yield />
</a>

This way we could render the <yield /> tag in HTML comments where it doesn't render normally, through a prop.

Yes it can be passed like a prop but tbh this looks stupid to me, plus it's cumbersome to pass HTML as the label:

<x-button href="..." label="Hello World">
  Hello World
</x-button>

[sean-dickinson]

I'm also running into a very similar issue. I just want to check if there is anything in the default slot to conditionally render a wrapper around it. However it does not seem this is possible? It's not very clear if there's a work around. I want to be able to render a component with an optional default slot and be able to programatically check if it is filled.

Worse if you define a <yield /> and don't pass content, the whole component blows up with an unhelpful error.

[cossssmin]

So we could have it as a 'default' slot or as a prop, or both. No matter which way we go, the content would need to be rendered I think, and this would be in addition to any rendering of individual slots - @thewebartisan7 this should be fine, right?

We could do something like this in src/index.js:

// ...
+ const { render } = require('posthtml-render');

// ...

+ const yieldRendered = render(currentNode.content);

// Reset options.expressions.locals and keep aware locals
- options.expressions.locals = {...options.props, ...aware};
+ options.expressions.locals = { ...options.props, ...aware, yield: yieldRendered };

// ...

- options.expressions.locals.$slots = filledSlots;
+ options.expressions.locals.$slots = {
+   default: yieldRendered,
+   ...filledSlots,
+ };

This would allow using both props.yield in <script props> and $slots.default in the component body:

<script props>
  module.exports = {
    yield: props.yield
  }
</script>

<!-- {{{ yield }}} -->

<!-- {{{ $slots.default }}} -->

<yield />

What do you think?

[cossssmin]

One problem with this is that it wouldn't render nested components.

parent.html

<script props>
  module.exports = {
    yield: props.yield
  }
</script>

 {{{ $slots.default }}}

 {{{ yield }}}

<yield />

child.html

<yield />

Usage:

<component src="parent.html">
  <component src="child.html">test</component>
</component>

Would wrongfully render this:

<component src="child.html">test</component>

<component src="child.html">test</component>

test

... instead of:

test

test

test

Not sure how to go about this... @thewebartisan7 any ideas?