-
-
Notifications
You must be signed in to change notification settings - Fork 69
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
Allow users to customize component tags + reintroduce component "inline" block #527
Comments
I think this is a really nice addition to the library! |
Awesome! Turns out that there is more work required to get to this feature:
To slowly move towards #473, I am also documenting the registry and the autoimport files/features. So before we get to the "tag formatter" feature, there will be at least these 3 PRs:
|
@JuroOravec Sounds awesome. Very happy to review many smaller PRs instead of 1000 line ones :) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Another week, another feature! @EmilStenstrom Let me know what you think about this one.
Description
When I was considering libraries like django_components, I felt that the way how components are declared
in the template is too lengthy:
and the appeal of django-slippers or django-web-components was that they had a terser syntax, e.g.:
This has, I think, two important considerations:
are rendered, from one opinionated approach to another.
choose other libraries like django-slippers/django-web-components, but those libraries may not have many of
our features. So IMO it's not a great "offering" if one has to choose between e.g. longer syntax + autodiscovery (django_components) vs shorter syntax but with no autodiscovery (django-slippers).
In django-web-components, they did a really interesting solution to this, which is that they allow users to
decide what tags they want to use for the components. See Component tag formatter.
In their case, one can configure the used template tags as so:
Which then allows them to call components inside the template as so:
API
TagFormatter class
I gave this a try. For django_components, this had to be a bit modified, because we use the
component
tag,which is shared by all components. So in our case it's not sufficient to know only about the tag, but we need
to also get a second piece of information (the component name) to know how to render it. Conversely, if we used
tags like
#my_comp
, then we'd have the component name already in the tag.For this reason, I had to add also
parse_block_start_tag
andparse_inline_tag
, where the user would have the chance to parse tag inputs, and extract info that specifies what component it is.See TagFormatter API
Here's an example how we'd use the TagFormatter to use the components with the
{% component %}
(as it is now):See ComponentTagFormatter
tag_formatter
settingAs shown before, in django-web-components, they set this TagFormatter as app settings. I think it makes sense to define it there, so that ALL components are declared the same way throughout the app.
They define the tag formatter as an import path. Again, I think this makes sense, as this approach is used a lot in Django's settings.
So in our case it'd look like this:
However, to make things easier for when working in tests, and to get errors when the import path changes, I allowed to also pass the TagFormatter class directly:
Pre-defined TagFormatters for the original and "short" forms
To make it easy for users, I've created two TagFormatter.
ComponentTagFormatter
as seen above. This is the default tag formatter to keep the original behavior intactShorthandTagFormatter
- Tag formatter that behaves like in django-web-components, so instead of{% component "my_comp" %}
, you use{% my_comp %}
, and instead of{% endcomponent %}
, you use{% endmy_comp %}
."Inline" components
This means that this feature would again introduce the "inline" component tags, meaning
{% component %}
tags without{% endcomponent %}
, and so with no slots fill. E.g.:Instead of
The text was updated successfully, but these errors were encountered: