Handlebars Partial blocks don't work for Patterns

[giuseppeg]

trafficstars

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 but partial-blocks are neat.

Here's what I am trying to do:

In patterns/components/MyComponent/index.hbs:

<div class="MyComponent">
   {{>@partial-block}}
</div>

Somewhere else:

{{#> patterns.components.MyComponent.index }}
   Lorem ipsum
{{/patterns.components.MyComponent.index }}

Expected result:

<div class="MyComponent">
   Lorem ipsum
</div>

Instead I get an error

Error: The partial @partial-block could not be found

[erikjung]

@giuseppeg

That's interesting. This is definitely not by design, so we'll look into it.

[erikjung]

@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>

[giuseppeg]

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.

[erikjung]

@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:

1. Make the base pattern hidden:

   ---
   hidden: true
   ---
   <div>{{>@partial-block}}</div>
   

2. 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 :)

[giuseppeg]

@erikjung awesome man! Thank you so much for debugging this for me :) I will try your suggestions tomorrow.

[giuseppeg]

@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?

[erikjung]

@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?

[giuseppeg]

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>

[erikjung]

@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)

[giuseppeg]

@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.

[erikjung]

@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.

[tylersticka]

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!