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
Multiple blocks in jade mixins? #1693
Comments
I want this feature too |
In my case I want mixins to behave like extends, so I will can declare mixin with named blocks inside, and then use it, without |
Currently, we don't support that, you can repeat the block keyword, but it will just repeat the same block multiple times. There is some work going in to adapting how mixins work though, so this may be something we support in the future. |
If I wil implement this by myself, will you merge this feature? |
How would you call the mixin? |
If we can agree on a nice design, then I will merge a pull request, I'm still not sure if we've quite got mixins right yet. We need to settle on both how they will be implemented (the current implementation isn't great) and how they will be defined/called. This needs to cover:
We could cover point 6 by instead supporting some other kind of "runtime filter". Perhaps |
meanwhile you could use something like this
@ForbesLindesay, is there a way to pass a jade syntax to javascript without using a mixin.block? |
So both issues are closed but one links to the other. Is there a solution for this? This could really make things easy for coding themes for static sites generators. One could make custom mixins for things like easy tabs, accordions, or any other reuseable, yet custom styleable UI elements. |
Could the syntax extend the original mixin name, to avoid clashes?
|
We'd use this lots of ways but an easy use case is a tab set with multiple content blocks. |
Or just name the block as in templates. It can't collide with template level blocks thanks to different context. Or filter-like notation would be an option. The syntax would feel natural. See example below. Mixin definition: mixin Foo()
.bar
if block bar
block bar
else
p You haven't defined block bar.
.baz
if block baz
block baz
else
p You haven't defined block baz. Usage: +Foo()
block bar //- or &bar as a filter like notation
p My awesome bar content
block baz //- or &baz
p Baz is also quite a catch. Not sure whether this feature is handy as it might seem. Templates should be understandable and usable without the need of documentation. Multiple blocks in mixins allows devs to increase templates complexity to whole new levels. |
@viktorbezdek check out the newest proposal for blocks at #2055. |
I think all these issue would be solved if it were possible to store blocks in variables and pass them as parameters. this would remove the weird exception of being able to declare a block under a mixin and allow multiple blocks in mixins.
if this were implemented mixins could also replace extends by calling a mixin and passing the blocks that have to fill up certain places |
@gvr37leo, using mixins as regular JavaScript functions is on the Agenda. That should make it a bit easier to do something like your example. |
@cheshrkat I am using this writing mode to create a tab mixin but the tab pane number is not static:
but this won't work,I want to define an Independent block in each tab content so I can write my own content when using this mixin.Is there a way to fix this question? |
@Miller547719886 the syntax in my comment is just suggested, not supported in Jade. In current production, to produce tabs we ended up making two templates - one for the wrapper and another for the tabs. Simplified:
It's not clever but it works. |
@cheshrkat what if the tab number is unknown?The expected result is creating differently named blocks with circular statement,so I can write multiple contents in each block. |
@Miller547719886 I'm not quite sure what you're asking about. If you are asking about the simplified code we use in production, we just put in however many instances of To put it another way, I don't think we have a solution that matches what you're trying to do. We are using Jade mostly for static sites where we know what the content will be. |
any updates? |
@anasanzari the answer to "any updates?" is always no. If there were updates, they'd be in this issue. |
I have wrote this workaround for multiple blocks in Jade/Pug |
There is one problem with the proposal to initialise the blocks. It doens't work well if you'd call the same mixin with only one instance of the block. For example: https://codepen.io/anon/pen/gzXRre?editors=1000 |
Knocked this together super quick, so it's not thoroughly tested, but this seems like it might solve the issue by unsetting the blocks at the end of the parent mixin https://codepen.io/anon/pen/RJBPmr |
@OrchidAugur Neat. Didn't know you could assign and invoke blocks like that. |
@viktorbezdek I realize this comment is from a few years ago, but I thought it could use some balance. If done right, this feature could significantly decrease complexity. Just look at the hacks that people are throwing together in this thread to solve real and common problems. Or take a media object mixin with unknown content for example:
If I want to inject two pieces of content, one option is to make
This is the closest we have to native named blocks, and it certainly isn't less complex. And that's for a simple object. Named mixin blocks feel like a missing feature when I am using Pug. |
This is a bit reminiscent of the |
any updates? |
+1 |
1 similar comment
+1 |
You can use my solution, it uses global javascript scope to store data Using this approach you don't need to make a lot of additional mixins to solve this common problem, just name your block how you want. Usage example
Mixin code
Core code required to work
|
I had trouble using the technique of @klarezz because of global variables. I found this pen. It looks like this when simplified: //- Declare
mixin SomeComp()
- const slots = {}
mixin Slot(key)
- slots[key] = block
- block() // Ignore block
.some-comp
if slots.foo
.foo
- slots.foo()
if slots.bar
.bar
- slots.bar()
//- Use
+SomeComp
+Slot('foo')
p foo
+Slot('bar')
p bar And the output is like this: <div class="some-comp">
<div class="foo">
<p>foo</p>
</div>
<div class="bar">
<p>bar</p>
</div>
</div> |
It doesn't look like multiple blocks in mixins are implemented yet. I've looked around and saw some workarounds and decided to try and improve their functionality. Here is what I came up with: https://codepen.io/Vectorjon/pen/GRmYWjN
Quick overview on usage:
Hope you find it useful. Comment on my CodePen if you find any bugs or have suggestions. |
@andraaspar, this is a small fix that makes it NOT mandatory to use a slot if it is declared in the mixin:
Otherwise, I get the error. |
I was just wondering is there a way to use multiple blocks with different content with a jade mixin, like this or are we just limited to one block with same content per mixin?
and get the following results:
The text was updated successfully, but these errors were encountered: