Comments (12)
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!
from drizzle.
That's interesting. This is definitely not by design, so we'll look into it.
from drizzle.
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
:
from drizzle.
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.
from drizzle.
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:
-
Use a condition to only output
@partial-block
if it exists:
It's probably worth mentioning this in the docs :)
from drizzle.
@erikjung awesome man! Thank you so much for debugging this for me :)
I will try your suggestions tomorrow.
from drizzle.
@erikjung the approach seems to be working, however it explodes when I use it as simple partial without the block syntax:
Works
Doesn't work: RangeError: Maximum call stack size exceeded
This should display the default content right?
from drizzle.
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?
from drizzle.
Here is a diff of the part that cause the Maximum call stack size exceeded
If I remove
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>
from drizzle.
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)
from drizzle.
@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
from drizzle.
@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.
from drizzle.
Related Issues (20)
- Standalone pages HOT 2
- Fresh build breaks due to outdated dependencies HOT 6
- The nav is broken HOT 2
- Use postcss-preset-env
- Make sure "e" isn't cut off on Drizzle logo
- Invalid name: "@cloudfour/hbs-helpers" HOT 5
- Unable to put new folders into pattern folder HOT 1
- Back-end Integrations HOT 18
- Notes property not working when defined via pattern collection HOT 1
- notice new/deleted files and update the browser HOT 1
- gracefully recover from errors in gulp chain HOT 1
- Could npm build errors get reported to the Drizzle UI somehow? HOT 1
- Adding arbitrary code samples to patterns HOT 2
- Using baseurl in patterns HOT 3
- Global variables not being complied in dist HOT 5
- Add .DS_Store to .gitignore HOT 1
- Discuss dev dependency gulp-gh-pages HOT 9
- Fix awkward size/positioning of drizzle logo in drizzle-Nav-header
- Frame-thumb max-width should be none
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from drizzle.