search

CloudCannon / bookshop

📚 A component development workflow for static websites.
MIT License
249 stars 21 forks source link

Support Bookshop tags in Eleventy with no arguments, or multiple lines #78

Closed silveltman closed 2 years ago

silveltman commented 2 years ago

I've set up bookshop and made some components, all without problems. However, when I try to use a component on a page I get a "object null is not iterable" error. In the component browser it all works fine

index.liquid:

---
page_title: 'Hello World'
page_description:
---

<main>

  {% bookshop "cta" %}

  <section class="index-sloepen">
    {% for sloep in collections.sloepen %}
      {{sloep.title}}

      {%- comment -%}
        {% bookshop "card" 
        subtitle: sloep.data.subtitle
        title: sloep.data.title
        description: sloep.data.description

        afbeelding.image: sloep.data.galerij[1].image
        afbeelding.omschrijving: sloep.data.galerij[1].omschrijving
        title: sloep.data.title 

        button.primary.text: Huren
        button.primary.url: "/huren"
        button.secondary.text: Meer info
        button.secondary.url: sloep.url
        %}

      {%- endcomment -%}
    {% endfor %}
  </section>
</main>

The commented "button" component is what I eventually try to achieve, but I decided to test it with different (more simple) components too. Alays the same error... I also tried it without the commented section, so that's not the problem.

DEBUG output:

Having trouble compiling template ./index.liquid: '\r\n' +
  Eleventy:TemplateContent   '<main>\r\n' +
  Eleventy:TemplateContent   '\r\n' +
  Eleventy:TemplateContent   '  {% bookshop "cta" %}\r\n' +
  Eleventy:TemplateContent   '\r\n' +
  Eleventy:TemplateContent   '  <section class="index-sloepen">\r\n' +
  Eleventy:TemplateContent   '    {% for sloep in collections.sloepen %}\r\n' +
  Eleventy:TemplateContent   '      {{sloep.title}}\r\n' +
  Eleventy:TemplateContent   '\r\n' +
  Eleventy:TemplateContent   '      {%- comment -%}\r\n' +
  Eleventy:TemplateContent   '        {% bookshop "card" \r\n' +
  Eleventy:TemplateContent   '        subtitle: sloep.data.subtitle\r\n' +
  Eleventy:TemplateContent   '        title: sloep.data.title\r\n' +
  Eleventy:TemplateContent   '        description: sloep.data.description\r\n' +
  Eleventy:TemplateContent   '\r\n' +
  Eleventy:TemplateContent   '        afbeelding.image: sloep.data.galerij[1].image\r\n' +
  Eleventy:TemplateContent   '        afbeelding.omschrijving: sloep.data.galerij[1].omschrijving\r\n' +
  Eleventy:TemplateContent   '        title: sloep.data.title \r\n' +
  Eleventy:TemplateContent   '\r\n' +
  Eleventy:TemplateContent   '        button.primary.text: Huren\r\n' +
  Eleventy:TemplateContent   '        button.primary.url: "/huren"\r\n' +
  Eleventy:TemplateContent   '        button.secondary.text: Meer info\r\n' +
  Eleventy:TemplateContent   '        button.secondary.url: sloep.url\r\n' +
  Eleventy:TemplateContent   '        %}\r\n' +
  Eleventy:TemplateContent   '      \r\n' +
  Eleventy:TemplateContent   '      {%- endcomment -%}\r\n' +
  Eleventy:TemplateContent   '    {% endfor %}\r\n' +
  Eleventy:TemplateContent   '  </section>\r\n' +
  Eleventy:TemplateContent   '</main>\r\n' +0ms
  Eleventy:TemplateContent Having trouble rendering liquid template ./index.liquid: '\r\n' +
  Eleventy:TemplateContent   '<main>\r\n' +
  Eleventy:TemplateContent   '\r\n' +
  Eleventy:TemplateContent   '  {% bookshop "cta" %}\r\n' +
  Eleventy:TemplateContent   '\r\n' +
  Eleventy:TemplateContent   '  <section class="index-sloepen">\r\n' +
  Eleventy:TemplateContent   '    {% for sloep in collections.sloepen %}\r\n' +
  Eleventy:TemplateContent   '      {{sloep.title}}\r\n' +
  Eleventy:TemplateContent   '\r\n' +
  Eleventy:TemplateContent   '      {%- comment -%}\r\n' +
  Eleventy:TemplateContent   '        {% bookshop "card" \r\n' +
  Eleventy:TemplateContent   '        subtitle: sloep.data.subtitle\r\n' +
  Eleventy:TemplateContent   '        title: sloep.data.title\r\n' +
  Eleventy:TemplateContent   '        description: sloep.data.description\r\n' +
  Eleventy:TemplateContent   '\r\n' +
  Eleventy:TemplateContent   '        afbeelding.image: sloep.data.galerij[1].image\r\n' +
  Eleventy:TemplateContent   '        afbeelding.omschrijving: sloep.data.galerij[1].omschrijving\r\n' +
  Eleventy:TemplateContent   '        title: sloep.data.title \r\n' +
  Eleventy:TemplateContent   '\r\n' +
  Eleventy:TemplateContent   '        button.primary.text: Huren\r\n' +
  Eleventy:TemplateContent   '        button.primary.url: "/huren"\r\n' +
  Eleventy:TemplateContent   '        button.secondary.text: Meer info\r\n' +
  Eleventy:TemplateContent   '        button.secondary.url: sloep.url\r\n' +
  Eleventy:TemplateContent   '        %}\r\n' +
  Eleventy:TemplateContent   '      \r\n' +
  Eleventy:TemplateContent   '      {%- endcomment -%}\r\n' +
  Eleventy:TemplateContent   '    {% endfor %}\r\n' +
  Eleventy:TemplateContent   '  </section>\r\n' +
  Eleventy:TemplateContent   '</main>\r\n' +10ms
  Eleventy:EleventyErrorHandler Problem writing Eleventy templates: +0ms
  Eleventy:EleventyErrorHandler Having trouble rendering liquid template ./index.liquid
  Eleventy:EleventyErrorHandler 
  Eleventy:EleventyErrorHandler `TemplateContentRenderError` was thrown +1ms
  Eleventy:EleventyErrorHandler (error stack): TemplateContentRenderError: Having trouble rendering liquid template ./index.liquid
  Eleventy:EleventyErrorHandler     at Template.render (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateContent.js:215:15)
  Eleventy:EleventyErrorHandler     at async Template._getContent (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\Template.js:547:12)
  Eleventy:EleventyErrorHandler     at async Template.getTemplateMapContent (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\Template.js:732:19)
  Eleventy:EleventyErrorHandler     at async TemplateMap.populateContentDataInMap (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateMap.js:359:39)
  Eleventy:EleventyErrorHandler     at async TemplateMap.cache (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateMap.js:303:5)
  Eleventy:EleventyErrorHandler     at async TemplateWriter._createTemplateMap (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateWriter.js:170:5)
  Eleventy:EleventyErrorHandler     at async TemplateWriter.writeTemplates (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateWriter.js:203:5)
  Eleventy:EleventyErrorHandler     at async TemplateWriter.write (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateWriter.js:254:25)
  Eleventy:EleventyErrorHandler     at async Eleventy.write (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\Eleventy.js:743:13) +2ms
  Eleventy:EleventyErrorHandler Having trouble compiling template ./index.liquid
  Eleventy:EleventyErrorHandler 
  Eleventy:EleventyErrorHandler `TemplateContentCompileError` was thrown +5ms
  Eleventy:EleventyErrorHandler (error stack): TemplateContentCompileError: Having trouble compiling template ./index.liquid
  Eleventy:EleventyErrorHandler     at Template.compile (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateContent.js:187:13)
  Eleventy:EleventyErrorHandler     at async Template.render (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateContent.js:196:16)
  Eleventy:EleventyErrorHandler     at async Template._getContent (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\Template.js:547:12)
  Eleventy:EleventyErrorHandler     at async Template.getTemplateMapContent (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\Template.js:732:19)
  Eleventy:EleventyErrorHandler     at async TemplateMap.populateContentDataInMap (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateMap.js:359:39)
  Eleventy:EleventyErrorHandler     at async TemplateMap.cache (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateMap.js:303:5)
  Eleventy:EleventyErrorHandler     at async TemplateWriter._createTemplateMap (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateWriter.js:170:5)
  Eleventy:EleventyErrorHandler     at async TemplateWriter.writeTemplates (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateWriter.js:203:5)
  Eleventy:EleventyErrorHandler     at async TemplateWriter.write (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateWriter.js:254:25)
  Eleventy:EleventyErrorHandler     at async Eleventy.write (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\Eleventy.js:743:13) +1ms
  Eleventy:EleventyErrorHandler object null is not iterable (cannot read property Symbol(Symbol.iterator)), file:./index.liquid, line:4
  Eleventy:EleventyErrorHandler 
  Eleventy:EleventyErrorHandler `ParseError` was thrown +8ms
  Eleventy:EleventyErrorHandler (error stack):    2| <main>
  Eleventy:EleventyErrorHandler    3|
  Eleventy:EleventyErrorHandler >> 4|   {% bookshop "cta" %}
  Eleventy:EleventyErrorHandler    5|
  Eleventy:EleventyErrorHandler    6|   <section class="index-sloepen">
  Eleventy:EleventyErrorHandler    7|     {% for sloep in collections.sloepen %}
  Eleventy:EleventyErrorHandler ParseError: object null is not iterable (cannot read property Symbol(Symbol.iterator)), file:./index.liquid, line:4        
  Eleventy:EleventyErrorHandler     at parseToken (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:2031:13)       
  Eleventy:EleventyErrorHandler     at Object.parse (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:2012:22)     
  Eleventy:EleventyErrorHandler     at Object.parse$$1 [as parse] (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:3420:24)
  Eleventy:EleventyErrorHandler     at Liquid.compile (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\Engines\Liquid.js:199:29)
  Eleventy:EleventyErrorHandler     at TemplateRender.getCompiledTemplate (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateRender.js:212:26)
  Eleventy:EleventyErrorHandler     at Template.compile (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateContent.js:181:42)
  Eleventy:EleventyErrorHandler     at async Template.render (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateContent.js:196:16)
  Eleventy:EleventyErrorHandler     at async Template._getContent (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\Template.js:547:12)
  Eleventy:EleventyErrorHandler     at async Template.getTemplateMapContent (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\Template.js:732:19)
  Eleventy:EleventyErrorHandler     at async TemplateMap.populateContentDataInMap (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateMap.js:359:39)
  Eleventy:EleventyErrorHandler From TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))
  Eleventy:EleventyErrorHandler     at Object.parse (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@bookshop\eleventy-bookshop\lib\eleventy-zero-bookshop.js:29:41)
  Eleventy:EleventyErrorHandler     at Object.parse (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:1876:22)     
  Eleventy:EleventyErrorHandler     at Object.construct (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:1887:14) 
  Eleventy:EleventyErrorHandler     at parseTag (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:2037:16)
  Eleventy:EleventyErrorHandler     at parseToken (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:2021:15)       
  Eleventy:EleventyErrorHandler     at Object.parse (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:2012:22)     
  Eleventy:EleventyErrorHandler     at Object.parse$$1 [as parse] (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:3420:24)
  Eleventy:EleventyErrorHandler     at Liquid.compile (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\Engines\Liquid.js:199:29)
  Eleventy:EleventyErrorHandler     at TemplateRender.getCompiledTemplate (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateRender.js:212:26)
  Eleventy:EleventyErrorHandler     at Template.compile (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateContent.js:181:42) +1ms
  Eleventy:EleventyErrorHandler object null is not iterable (cannot read property Symbol(Symbol.iterator))
  Eleventy:EleventyErrorHandler 
  Eleventy:EleventyErrorHandler `TypeError` was thrown: +12ms
  Eleventy:EleventyErrorHandler (error stack): TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))
  Eleventy:EleventyErrorHandler     at Object.parse (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@bookshop\eleventy-bookshop\lib\eleventy-zero-bookshop.js:29:41)
  Eleventy:EleventyErrorHandler     at Object.parse (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:1876:22)     
  Eleventy:EleventyErrorHandler     at Object.construct (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:1887:14) 
  Eleventy:EleventyErrorHandler     at parseTag (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:2037:16)
  Eleventy:EleventyErrorHandler     at parseToken (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:2021:15)       
  Eleventy:EleventyErrorHandler     at Object.parse (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:2012:22)     
  Eleventy:EleventyErrorHandler     at Object.parse$$1 [as parse] (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\liquidjs\dist\liquid.common.js:3420:24)
  Eleventy:EleventyErrorHandler     at Liquid.compile (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\Engines\Liquid.js:199:29)
  Eleventy:EleventyErrorHandler     at TemplateRender.getCompiledTemplate (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateRender.js:212:26)
  Eleventy:EleventyErrorHandler     at Template.compile (C:\Users\silve\11ty\sloepverhuur-bolsward-V2\node_modules\@11ty\eleventy\src\TemplateContent.js:181:42) +2ms

cta.liquid:

<div class="cta">
  <img src="{{ afbeelding.image }}" alt="{{ afbeelding.omschrijving }}" class="cta__img">
  <div class="cta__content">
    <h1 class="cta__h">{{ title }}</h1>
    <a href="{{ button.url }}" class="cta__btn btn btn--primary">{{ button.text }}</a>
  </div>
</div>

cta.toml:

[component]
structures = []
label = "cta"
description = ""
icon = ""
tags = []

[props]
title = "Mijn titel"

[props.afbeelding]
image = "https://picsum.photos/1200/800?random=1"
omschrijving = "Omschrijving van mijn afbeelding"

[props.button]
text = "Button"
url = "#"
silveltman commented 2 years ago

Turned out you have to pass at least 1 argument.

Also, the tag where you call bookshop should be on 1 line.

bglw commented 2 years ago

Interesting — This as a bug, the tag would ideally support no arguments, as well as splitting onto multiple lines. I'll reopen this and look at fixing it in the coming weeks 🙂

silveltman commented 2 years ago

Your answer got me thinking, when not passing in an argument, shouldn't the value in the .toml file be used as a default? Or is that just the case when adding a component via the CMS

Right now the arguments that are not passed are just blanc

bglw commented 2 years ago

Currently, the .toml files are only relevant for the CMS. Since Bookshop tries to not be less involved in rendering the includes, there's nothing in the production flow that loads those config files.

It's something that could be considered, but it would need to have another syntax to explicitly opt-in to.

silveltman commented 2 years ago

Once I got a bit more used to Bookshop it actually makes sense to me that the .toml is only used in the CMS. I think adding something like this would add less value than I initally though. When wanting a default value it's probably better to hardcode that value in the component itself in most cases

bglw commented 2 years ago

Hi @silveltman, the 2.6.0 release includes fixes for Bookshop components that take no arguments, and tags that span multiple lines 👍

Both of your initial examples should work correctly now.