Allow to define multiple slots with the same name to render a single fill in multiple places #419

JuroOravec · 2024-03-30T13:14:16Z

JuroOravec
Mar 30, 2024
Collaborator

As part of #416, I came across this snippet:

https://github.com/EmilStenstrom/django-components/blob/master/src/django_components/component.py#L332

if slot_name in slot_name2fill_content:
    raise TemplateSyntaxError(
        f"Slot name '{slot_name}' re-used within the same template. "
        f"Slot names must be unique."
        f"To fix, check template '{template.name}' "
        f"of component '{self.registered_name}'."
    )

Basically it prevents multiple slots with the same name to be defined in a template, e.g.:

1
{% slot "myslot" %}{% endslot %}
2
{% slot "myslot" %}{% endslot %}
3

At my work, we've hit this error when we wanted to render a single slot fill in different places based on some conditions, e.g.:

{% if myvar %}
  ...
  {% slot "myslot" %}{% endslot %}
  ...
{% else %}
  ...
  {% slot "myslot" %}{% endslot %}
  ...
{% endif %}

Intuition tells me that this should not be an error. Basically, if I define a slot in multiple places, the fill should simply populate all the slots, so the first example would render:

1
hello from myslot
2
hello from myslot
3

Was there a specific reason why a slot multiple times leads to errors?

I haven't looked into it, but my guess is that it throws an error because it's simply not implemented. Because when I consider the example above, then the way slots are managed behind the scenes probably needs to be refactored if the slots are to allow supporting re-use.

Simply consider this example, where we use a single slot twice, but in each case it has a different default content:

{% slot "myslot" %}
  default slot 1
{% endslot %}

{% slot "myslot" %}
  default slot 2
{% endslot %}

EmilStenstrom · 2024-03-30T19:17:02Z

EmilStenstrom
Mar 30, 2024
Maintainer

I'm a little hazy on the details here, but I think this has to do with nested components needing to have unique slot names amongst themselves?

{% component "card" %}
  {% fill "header" %}  <!-- Error? -->
    {% component "profile" %}
      {% fill "header" %}  <!-- Error? -->
        Title
      {% endfill %}
    {% endcomponent %}  
  {% endfill %}
{% endcomponent %}

I'm a little worried that components with dynamic slots (slots that might not exist depending on some if statements) like the conditional one you describe above will be hard to understand and reason about.

Could your example be rewritten as:

{% slot "myslot" %}
  {% if myvar %}
    ...
  {% else %}
   ...
  {% endif %}
{% endslot %}

1 reply

JuroOravec Apr 24, 2024
Collaborator Author

Heya, I'm just getting to this again.

I think this is a different issue, because for what I have in mind, you could have only 1 slot fill. To give a better idea, imagine following example - I have a page and I want to include website logo both in the header and in the footer. So I define the {% slot %} with the same name twice.

{% load component_tags %}
<body>
    <header>
		{% slot "logo" %}{% endslot %}
		Bla bla
	</header>
    <main>
		{% slot "main" %} Default main {% endslot %}
	</main>
    <footer>
		{% slot "logo" %}{% endslot %}
		Footer footer
	</footer>
</body>

And then render it by defining the slot fill once:

{% component "page" %}
	{% fill "logo" %}
		<img src="....">
	{% endfill %}
	{% fill "main" %}
		<article>
			Bla bla....
		</article>
	{% endfill %}
{% endcomponent %}

I played around, and enabling slot reuse is as simple as removing the error here https://github.com/JuroOravec/django-components/blob/d9e7e2890d97c850555cd11286081ee0519f5bf2/src/django_components/slots.py#L421.

As for an error with nested slot fills, this should be now resolved thanks to feat: slot context resolution + slot fill mgmt refactor #437. Previously slot fills were cached per template, which could cause the error you've shown. Now the slot fills are scoped per their respective component nodes (the {% component %} block they are in).

So while this should now be fine:

{% component "card" %}
  {% fill "header" %}
    {% component "profile" %}
      {% fill "header" %}
        Title
      {% endfill %}
    {% endcomponent %}  
  {% endfill %}
{% endcomponent %}

This should still be an error/undefined behavior:

{% component "card" %}
  {% fill "header" %}  <!-- Error? -->
	123
  {% endfill %}
  {% fill "header" %}  <!-- Error? -->
	456
  {% endfill %}
{% endcomponent %}

Update: Ok, I did write a test with nested slot fills with the same name, and found there's a bug there. Altho slightly different than what we've shown here - Slot fills of inner component override the OTHER slots of the outer component.

Using the template from slotted_template.html:

{% load component_tags %}
{% component "test" name='Igor' %}
    {% fill "header" %}  <!-- This fill is rendered correctly -->
        {% component "test" name='Joe2' %}
            {% fill "header" %} <!-- This fill is rendered correctly -->
                Name2: {{ name }}
            {% endfill %}
            {% fill "main" %}  <!-- This fill is applied also to the outer component -->
                Day2: {{ day }}
            {% endfill %}
            {% fill "footer" %}  <!-- This fill is applied also to the outer component -->
                XYZ
            {% endfill %}
        {% endcomponent %}
    {% endfill %}

	<!-- ERROR HERE: explicit "footer" slot fill is ignored because of the inner slot fill -->
    {% fill "footer" %}
        WWW
    {% endfill %}

    <!-- ERROR HERE: the default "main" slot fill is ignored because of the inner slot fill -->
{% endcomponent %}

I wrote a ticket for this issue here #453

Note that this issue is NOT related to nor blocker for the slot reuse (the original topic of this thread).

JuroOravec · 2024-04-29T16:40:26Z

JuroOravec
Apr 29, 2024
Collaborator Author

Implemented in #453

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow to define multiple slots with the same name to render a single fill in multiple places #419

{{title}}

Replies: 2 comments 1 reply

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Allow to define multiple slots with the same name to render a single fill in multiple places #419

JuroOravec Mar 30, 2024 Collaborator

Replies: 2 comments · 1 reply

EmilStenstrom Mar 30, 2024 Maintainer

JuroOravec Apr 24, 2024 Collaborator Author

JuroOravec Apr 29, 2024 Collaborator Author

JuroOravec
Mar 30, 2024
Collaborator

Replies: 2 comments 1 reply

EmilStenstrom
Mar 30, 2024
Maintainer

JuroOravec Apr 24, 2024
Collaborator Author

JuroOravec
Apr 29, 2024
Collaborator Author