slinkity / slinkity

To eleventy and beyond! The all-in-one tool for templates where you want them, component frameworks where you need them 🚀

Home Page:https://slinkity.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Support component slots / children with new shortcode naming

opened this issue · comments

Is your feature request related to a problem? Please describe.

We currently register a new shortcode for every component renderer: react, vue, svelte, etc. This can introduce:

  1. Potential naming conflicts with other shortcodes used in your project
  2. Cause a cambrian explosion of variants once we add slots / children. We can't add a paired shortcode of the same name as a non-paired version. To avoid conflicts, we'll need to introduce new variants: slottedReact, slottedVue, slottedSvelte, slottedPotato, etc.

Describe the solution you'd like

We already choose the correct renderer for component pages based on file extension. So let's do the same for shortcodes!

For components without children, use component. We'll infer which renderer to use based on the file extension:

{% component 'Slinky.vue', hydrate='eager', data=coolData %}

For components with children, use slottedComponent:

{% slottedComponent 'Navigation.svelte', hydrate='lazy' %}
<a href="/">Home</a>
<a href="/about">About</a>
{% endslottedComponent %}

...and those children are accessible either via children in JSX, or an unnamed slot in Svelte or Vue. Support for named slots are out of scope.

Describe alternatives you've considered

  1. Variant names for every individual renderer. This isn't preferred because of all the reasons from the first section
  2. A more verbose name for slottedComponent, like componentWithChildren. This is a) more to type and b) locks us into only supporting unnamed children / slots. Ideally, slottedComponent will offer a named slot solution in the future

Additional context

Children will be passed as a string of unprocessed HTML. This could cause some unexpected behavior, like not supporting markdown syntax from a markdown file. This is a well-documented gotcha in 11ty that's now solved with renderTemplate:

# I'm in markdown!

{% slottedComponent 'Dropdown.jsx'  %}
{% renderTemplate 'md' %}

Switching back to markdown for these children.
- Love the freedom to use markdown on a whim
- Can't get enough of these component wrappers

{% endrenderTemplate %}
{% endslottedComponent %}