3-level inheritance not working

marc-medley commented 5 years ago

Issue

Grandchild blocks do not replace the Parent/Grandparent blocks. Appears that inheritance is not working as expected.

Given

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=utf-8/>
    {% block baseHeadBlock %}{% endblock %}
    <!-- Custom styles overriding CSS -->
    <link rel="stylesheet" href="/styles/app.css"/>    
    <title>{% block baseTitleBlock %}{{ baseTitleKey|default:"Base Title" }}{% endblock %}</title>
</head>
<body>
    {% block baseBodyBlock %}
    <p><em>Stencil "base.html"</em></p>
    {% endblock %}
</body>
</html>

_latexmathbase.html

{% extends "base.html" %}

{% block baseHeadBlock %}
    <!-- MathJax: https://www.mathjax.org/#gettingstarted -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async></script>
{% endblock %}

{% block baseTitleBlock %}-{{titleKey}}-{% endblock %}

{% block baseBodyBlock %}
{{bodyKey}}
<p><em>Stencil "latexmath_base.html"</em></p>
{% endblock %}

_latexmathinline.html

{% extends "latexmath_base.html" %}

{% block baseTitleBlock %}Stencil Math Inline{% endblock %}

{% block baseBodyBlock %}
<p>Two equations: \(A^T_S = B\) and \(\sqrt{ab}\).</p>
<p>\[A^T_S = B\]  </p>
<p>\[\sqrt{ab}\]  </p>

<p><em>Stencil "latexmath_inline.html"</em></p>
{% endblock %}

Expected

Expected the rendered page to contain Stencil "latexmath_inline.html"

Actual Result

The rendered page instead contained Stencil "latexmath_base.html"

Setup

The test harness that i'm working with is posted at VaporExamplesLab/eval-vapor-leaf-stencil

dillan commented 5 years ago

I'm running into this as well. @kylef @ilyapuchka @djbe Is this expected behavior?

kevinrenskers commented 3 years ago

Same problem here, but this issue seems dead. Is this project still alive?

kylef commented 3 years ago

Is this expected behaviour?

I don't think this is expected.

As far as I can tell from the test suite, this would appear to be working: https://github.com/stencilproject/Stencil/blob/22440c5/Tests/StencilTests/InheritanceSpec.swift#L21-L25 which expects Super_Header Child_Header Child_Child_Header\nChild_Body by rendering child-child.html which extends child.html which extends base.html:

https://github.com/stencilproject/Stencil/blob/22440c5/Tests/StencilTests/fixtures/base.html https://github.com/stencilproject/Stencil/blob/22440c5/Tests/StencilTests/fixtures/child.html https://github.com/stencilproject/Stencil/blob/22440c5/Tests/StencilTests/fixtures/child-child.html

@kevinrenskers If you compare what you have to this test, is there anything in particular that stands out as a difference use-case?

kevinrenskers commented 3 years ago

base.html:

<html>
  <head>
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="/static/style.css" />
  </head>
  <body>
    {% block content %}{% endblock %}
  </body>
</html>

articles.html:

{% extends "base.html" %}

{% block title %}Articles{% endblock %}

{% block content %}
<h1>Articles</h1>
{% for page in pages %}
<a href="{{ page | url }}">{{ page.title }}</a><br/>
{{ page.summar }}
{% endfor %}
{% endblock %}

year.html:

{% extends "articles.html" %}

{% block title %}Articles in {{ year }}{% endblock %}

When I render the year.html template I would expect that the title would be "Articles in 2021" for example, but it's always just "Articles".

marc-medley commented 3 years ago

@kylef The outer contructs in base.html of both my and @kevinrenskers examples are not Stencil {% … %} patterns. The failing examples have HTML tags <!DOCTYPE html><html lang="en"><head> and <html><head> at the outermost starting point.

There may be other differentiating aspects. The above is just the first difference I noticed in the base.html files.

kevinrenskers commented 3 years ago

It seems to me that the big difference is that our examples don't use super within a block. We want to completely replace the contents of the grandparent block.

kevinrenskers commented 3 years ago

I find a workaround but it's a bit annoying 😅

base.html:

<html>
  <head>
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="/static/style.css" />
  </head>
  <body>
    {% block content %}{% endblock %}
  </body>
</html>

articles.html:

{% extends "base.html" %}
{% block title %}{% block childtitle %}Articles{% endblock %}{% endblock %}

year.html:

{% extends "articles.html" %}
{% block childtitle %}Articles in {{ year }}{% endblock %}

stencilproject / Stencil

3-level inheritance not working #275