Skip to main content
[StoryblokStoryID:465601586]

Live article: https://www.storyblok.com/faq/how-to-migrate-from-squirrelly-7-to-squirrelly-8

  • FAQ
  • How to migrate from Squirrelly 7 to Squirrelly 8

TLDR;

We currently updated our Squirrely dependency from Version 7 to Version 8 and with this it's needed to update your blok preview templates as well as your advanced path configurations to keep them maintainable over time.

  1. Object Reference:
    • Old: Use options as the object reference.
    • New: Use it as the object reference.
  2. Loop Syntax:
    • Old: Use {{each(array)}} and {{foreach(object)}}.
    • New: Use {{@each(array) => val, index}} and {{@foreach(object) => key, val}}.
  3. Conditional Statements:
    • Old: Use {{if(condition)}} and {{#else}}.
    • New: Use {{@if(condition)}} and {{#else}}.
  4. Image Tag:
    • Old: Use {{image(options.image.filename)/}}.
    • New: Use {{@image(it.image.filename)/}}.
  5. Comparison:
    • Old: Use {{if(options.number >= "1")}}.
    • New: Use {{@if(it.number >= "1")}}.
  6. Accessing Properties:
    • Old: Access properties directly, e.g., {{story.slug}}.
    • New: Access properties using the object reference, e.g., {{it.story.slug}}.
  7. Arrow Functions in Loops:
    • New: Use arrow functions to destructure values and indices in loops like {{@each(array) => val, index}}

How to migrate the Blok Preview Template

Migrating block previews Copy to clipboard 
        
      <!-- simple text -->
<!-- old-->
<div class="text-red">{{ title }}</div>
<!-- new-->
<div class="text-red">{{ it.title }}</div>

<!-- each multi options -->
<!-- old-->
{{each(options.stories)}} The current index is {{@index}} {{/each}}
<!-- new-->
{{@each(it.stories) => val, index}} The current index is {{index}} {{/each}}

<!-- foreach -->
<!-- old-->
{{foreach(options.stories)}} Value: {{@this}} Key: {{@key}} {{/foreach}}
<!-- new-->
{{@foreach(it.stories) => key, val}} Val: {{val}} Key: {{key}} {{/foreach}}

<!-- if else -->
<!-- old-->
{{if(options.number === "1")}} True {{#else}} False {{/if}}
<!-- new-->
{{@if(it.number === "1")}} True {{#else}} False {{/if}}

<!-- image -->
<!-- old-->
{{image(options.image.filename)/}}
<!-- new-->
{{@image(it.image.filename)/}}

<!-- comparison -->
<!-- old-->
{{if(options.number >= "1")}} True {{#else}} False {{/if}}
<!-- new-->
{{@if(it.number >= "1")}} True {{#else}} False {{/if}}

How to migrate Advanced Path Configurations

Migrating block previews Copy to clipboard 
        
      <!-- simple text -->
<!-- old-->
custom-{{ story.slug }}
<!-- new-->
custom-{{ it.story.slug }}

<!-- story -->
<!-- old-->
{{story.slug}}{{if(options.lang != '')}}?lang={{lang}}{{/if}}
<!-- new-->
{{it.story.slug}}{{@if(it.lang != '')}}?lang={{it.lang}}{{/if}}

<!-- lang -->
<!-- old-->
{{if(options.lang=='')}}{{story.slug}}{{#else}}
{{each(options.story.translated_slugs)}}{{if(options.lang==@this.lang)}}{{@this.slug}}{{/if}}{{/each}}{{/if}}
<!-- new-->
{{@if(it.lang=='')}}{{it.story.slug}}{{#else}}{{@each(it.story.translated_slugs) => value}}{{@if(it.lang==value.lang)}}{{value.slug}}{{/if}}{{/each}}{{/if}}

<!-- folder -->
<!-- old-->
{{folder.slug}}/{{if(options.lang != 'de-at' && options.lang != '')}}{{lang}}/{{/if}}{{if(options.lang == '')}}en/{{/if}}
<!-- new-->
{{it.folder.slug}}/{{@if(it.lang != 'de-at' && it.lang != '')}}{{it.lang}}/{{/if}}{{@if(it.lang == '')}}en/{{/if}}

How to migrate configurations with "translatable slugs"

With the update to Squirrelly 8 we provide a helper called @activeTranslatedSlug , you can find out more here.