squirrellyjs / squirrelly

Semi-embedded JS template engine that supports helpers, filters, partials, and template inheritance. 4KB minzipped, written in TypeScript ⛺
https://squirrelly.js.org
MIT License
599 stars 82 forks source link

Add layouts support #108

Closed koteisaev closed 4 years ago

koteisaev commented 5 years ago

The Squrelly is great template engine. I just found a single limitation in this engine. There is no layouts support. I expected that would be able to use syntax like this: in layout.html

<div class="page-wrapper">
   <div class="page-header">
{{$block header}}
  <h1>{{=pageTitle}}</h1>
{{/$block}}
</div>
<div class="page-content">
{{$block content}}
  <span>Page in under construction</span>
{{/$block}}
</div>
</div>

in page.html

{{$extend "layout.html"/}}
{{$block header}}
  <h1>Nice page {{=pageTitle}}</h1>
{{/$block}}
{{$block content}}
  <p>Here page content goes</p>
{{/$block}}

Idea is to introduce some syntax to allow inheritance for templates, when a template can override blocks inherited from "parent" layout.

nebrelbug commented 5 years ago

Hi @konstardiy, thanks for the feedback! This is a feature I'll implement in version 2, which will hopefully be released within a month.

P.S. I just edited your issue to so it's formatted as code, which makes it a little easier to read 😄

koteisaev commented 5 years ago

Thanks for re-formatting. I did not used to that formatting for a while.

nebrelbug commented 4 years ago

Hi @konstardiy! The next version of Squirrelly isn't out yet, but I just wrote a helper that allows you to use layouts!

You can check it out here: https://stackblitz.com/edit/squirrelly-layouts. You only need to look at index.js, because storage.js just has some of my future ideas :)

Hope this helps! :smiley:

nebrelbug commented 4 years ago

Hi @konstardiy, layouts are implemented in Squirrelly v8!