Open giuseppeg opened 8 years ago
@giuseppeg
That's interesting. This is definitely not by design, so we'll look into it.
@giuseppeg
Can you confirm that every instance of the partial in question is being invoked using the block syntax ({{#>
)? In my testing, I got this same error, but realized that it was because I had used the partial multiple times (for different pattern variations), some with {{embed}}
.
If you need to use either the block syntax or {{embed}}
on a component partial, you can also try adding logic to check for @partial-block
:
<div class="MyComponent">
{{#if @partial-block}} {{! <-------- for using the block syntax }}
{{> @partial-block}}
{{else}}
{{#block "content"}} {{! <-------- for using embed or extend }}
Default content
{{/block}}
{{/if}}
</div>
Sorry @erikjung I was out for the weekend.
Yes I've used the block syntax.
If you need to use either the block syntax or {{embed}} on a component partial, you can also try adding logic to check for @partial-block
Do you mean if I want to use a template as embed AND partial? If so, no it is not my case.
It seems that drizzle is just not looking at the patterns/
folder for partials.
@giuseppeg
I looked into this a bit further, and it appears you can use {{>@partial-block}}
as long as some care is taken for base patterns.
Here is an example that builds with no error: https://github.com/cloudfour/drizzle/compare/debug-issue_87
This is not intuitive, but it kind of makes sense. All patterns are registered as partials, and they are also rendered as patterns unless you put hidden: true
in the front matter. It is in this initial rendering that we encounter the error: @partial-block
won't exist until that pattern is used as a partial with the block syntax.
So if you intend to make a "base" pattern to be extended, there are two options for using the partial block syntax:
Make the base pattern hidden:
---
hidden: true
---
<div>{{>@partial-block}}</div>
Use a condition to only output @partial-block
if it exists:
<div>
{{#if @partial-block}}
{{>@partial-block}}
{{/if}}
</div>
It's probably worth mentioning this in the docs :)
@erikjung awesome man! Thank you so much for debugging this for me :) I will try your suggestions tomorrow.
@erikjung the approach seems to be working, however it explodes when I use it as simple partial without the block syntax:
---
hidden: true
---
<div>
{{#if @partial-block}}
{{>@partial-block}}
{{else}}
Default Content
{{/if}}
</div>
Works
{{#>partial-name}}
{{/partial-name}}
Doesn't work: RangeError: Maximum call stack size exceeded
{{>partial-name}}
This should display the default content right?
@giuseppeg
That should work fine. I added another example to this test branch to verify the plain partial usage, and I wasn't able to reproduce that error: https://github.com/cloudfour/drizzle/compare/debug-issue_87
Can you pull that branch and verify?
Here is a diff of the part that cause the Maximum call stack size exceeded
If I remove
{{>"patterns.components.nav.item-link" href="#foo"}}
the build doesn't break
diff --git a/src/patterns/components/nav/example.hbs b/src/patterns/components/nav/example.hbs
new file mode 100644
index 0000000..7289bad
--- /dev/null
+++ b/src/patterns/components/nav/example.hbs
@@ -0,0 +1,14 @@
+{{#>patterns.components.nav.index}}
+
+ {{>"patterns.components.nav.item-link" href="#foo"}}
+
+ {{#>patterns.components.nav.item}}
+ {{#>patterns.components.nav.link href="#baz"}}
+ Link
+ <span class="SiteNav-wrapIcon">
+ <span class="Icon">🕶</span>
+ </span>
+ {{/patterns.components.nav.link}}
+ {{/patterns.components.nav.item}}
+
+{{/patterns.components.nav.index}}
diff --git a/src/patterns/components/nav/index.hbs b/src/patterns/components/nav/index.hbs
new file mode 100644
index 0000000..ed50b2c
--- /dev/null
+++ b/src/patterns/components/nav/index.hbs
@@ -0,0 +1,10 @@
+---
+hidden: true
+---
+<nav class="SiteNav" role="navigation">
+ {{#if @partial-block}}
+ {{>@partial-block}}
+ {{else}}
+ Nav List
+ {{/if}}
+</nav>
diff --git a/src/patterns/components/nav/item-link.hbs b/src/patterns/components/nav/item-link.hbs
new file mode 100644
index 0000000..a3ec35d
--- /dev/null
+++ b/src/patterns/components/nav/item-link.hbs
@@ -0,0 +1,12 @@
+---
+hidden: true
+---
+<span class="SiteNav-item">
+ <a class="SiteNav-link" href="{{href}}">
+ {{#if @partial-block}}
+ {{>@partial-block}}
+ {{else}}
+ Link
+ {{/if}}
+ </a>
+</span>
diff --git a/src/patterns/components/nav/item.hbs b/src/patterns/components/nav/item.hbs
new file mode 100644
index 0000000..ba6dc63
--- /dev/null
+++ b/src/patterns/components/nav/item.hbs
@@ -0,0 +1,10 @@
+---
+hidden: true
+---
+<span class="SiteNav-item">
+ {{#if @partial-block}}
+ {{>@partial-block}}
+ {{else}}
+ Item
+ {{/if}}
+</span>
diff --git a/src/patterns/components/nav/link.hbs b/src/patterns/components/nav/link.hbs
new file mode 100644
index 0000000..bbf8d23
--- /dev/null
+++ b/src/patterns/components/nav/link.hbs
@@ -0,0 +1,10 @@
+---
+hidden: true
+---
+<a class="SiteNav-link" href="{{href}}">
+ {{#if @partial-block}}
+ {{>@partial-block}}
+ {{else}}
+ Link
+ {{/if}}
+</a>
@giuseppeg
Thanks for the additional info. It looks like this is an issue that affects Handlebars itself: https://tonicdev.com/erikjung/57c72b19ad12611300cb9f58
^ Same error conditions (no error when removing the patterns.components.nav.item-link
partial)
@erikjung I see, thanks for taking the time to dig into this issue! I am using handlebars for the first time so I thought I was doing something wrong.
[unrelated] I am working (hacking) on a fork of drizzle that integrates suitcss and what I think is a great (better) folders structure, I am also considering to make a template-engine agnostic builder pkg that uses consolidate.js or metalsmith-layouts behind the scenes – basically I may end up writing my own styleguide generator tool from scratch 😂 let me know if you folks are interested in a collaboration or want to discuss about this in details.
@giuseppeg We use SUIT on most of our projects, so that's great 👍
The template handling is also something we plan on improving for 1.0. We've received some good feedback on it, and using Consolidate seems to make a lot of sense.
basically I may end up writing my own styleguide generator tool from scratch
That's how we ended up making Drizzle (forked Fabricator)!
Our team welcomes contributions and collaborations. If you have ideas, proposals or wish to discuss some aspect of the hack/fork/project you're working on to see if your ideas would be a good fit for Drizzle proper, please don't hesitate to create issues or ping any of us!
Hi there, do handlebars partial blocks work only for the styleguide templates or can I use them in Pattern templates as well?
I could use
embed
butpartial-blocks
are neat.Here's what I am trying to do:
In
patterns/components/MyComponent/index.hbs
:Somewhere else:
Expected result:
Instead I get an error