Half of the time, front matter is not fully processed with live reload

[jido]

I am not sure why that happens. Look for the slug "an-article-n-1" in these two updates:

% npm start

> [email protected] start
> npm-run-all build:sass --parallel watch:*


> [email protected] build:sass
> sass src/sass:src/css


> [email protected] watch:eleventy
> eleventy --serve


> [email protected] watch:sass
> sass --watch src/sass:src/css

Sass is watching for changes. Press Ctrl-C to stop.

[11ty] Writing ./public/articles/{{ article.slug }}/index.html from ./src/articles.mi (mi)
[11ty] Writing ./public/index.html from ./src/index.md (mi)
[11ty] Writing ./public/blog/first-post/index.html from ./src/blog/first-post.md (liquid)
[11ty] Writing ./public/blog/second-post/index.html from ./src/blog/second-post.md (liquid)
[11ty] Writing ./public/articles/an-article-n-2/index.html from ./src/articles.mi (mi)
[11ty] Writing ./public/articles/an-article-n-3/index.html from ./src/articles.mi (mi)
[11ty] Copied 2 Wrote 6 files in 0.60 seconds (v3.0.0)
[11ty] Watching…
[11ty] Server at http://localhost:8080/
[11ty] File changed: src/blog/blog.json
[11ty] Writing ./public/articles/an-article-n-1/index.html from ./src/articles.mi (mi)
[11ty] Writing ./public/index.html from ./src/index.md (mi)
[11ty] Writing ./public/blog/first-post/index.html from ./src/blog/first-post.md (liquid)
[11ty] Writing ./public/blog/second-post/index.html from ./src/blog/second-post.md (liquid)
[11ty] Writing ./public/articles/an-article-n-2/index.html from ./src/articles.mi (mi)
[11ty] Writing ./public/articles/an-article-n-3/index.html from ./src/articles.mi (mi)
[11ty] Copied 2 Wrote 6 files in 0.58 seconds (v3.0.0)
[11ty] Watching…

My config:

var mistigri = require("mistigri")

module.exports = function(eleventyConfig) {
  
  eleventyConfig.addWatchTarget("./src/sass")
  eleventyConfig.addPassthroughCopy("./src/css")
  
  eleventyConfig.addTemplateFormats("mi")
  
  let mistigriEngine = {
    compile: (inputContent) => {
      return async (data) => mistigri.prrcess(inputContent, {
        ...data, 
        makeurl: ({from}) => eleventyConfig.getFilter("url")(from),
        makeslug: ({from}) => eleventyConfig.getFilter("slugify")(from)
      })
    }
  }
  
  eleventyConfig.addExtension("mi", mistigriEngine)
  
  return {
    dir: {
      input: "src",
      output: "public",
    }
  }
}

And articles.mi:

---
pagination:
  data: "cms"
  size: 1
  alias: "article"
  addAllPagesToCollections: true
layout: "base.mi"
tags: "articles"
permalink: "/articles/{{ article.slug }}/"
templateEngineOverride: "mi, md"
eleventyComputed:
  title: "{{ article.title }}"
---

{{ article.body }}

And _data/cms.js:

module.exports = () => {
  return [
  {
    id: 1,
    title: "An article n°1",
    slug: "an-article-n-1",
    body: "Writing an interesting article is hard."
  },
  {
    id: 2,
    title: "An article n°2",
    slug: "an-article-n-2",
    body: "Dogs, spiders and pythons are some examples of living beings."
  },
  {
    id: 3,
    title: "An article n°3",
    slug: "an-article-n-3",
    body: "Yesterday was Sunday. I believe today is a new Tuesday."
  },
  ]
}

Update

I tried replacing "article.slug" with a function call that logs, and I can see it is called four times for each article -- once without article data.

slug An article n°1
slug An article n°2
slug An article n°3
slug null
slug An article n°1
slug An article n°1
slug Writing an interesting article is hard.
slug null
slug An article n°2
slug An article n°2
slug Dogs, spiders and pythons are some examples of living beings.
slug null
slug An article n°3
slug An article n°3
slug Yesterday was Sunday. I believe today is a new Tuesday.

In the front matter:

permalink: "/articles/{{ makeslug from = article.title }}/"
eleventyComputed:
  title: "{{ article.title }}"
  foo: "{{ makeslug from = article.body }}"

But when the slug is not rendered correctly there are less calls:

slug null
slug Writing an interesting article is hard.
slug null
slug An article n°2
slug An article n°2
slug Dogs, spiders and pythons are some examples of living beings.
slug null
slug An article n°3
slug An article n°3
slug Yesterday was Sunday. I believe today is a new Tuesday.
[11ty] Writing ./public/index.html from ./src/index.md (mi)
[11ty] Writing ./public/articles/{{ makeslug from = article.title }}/index.html from ./src/articles.mi (mi)
[11ty] Writing ./public/articles/an-article-n-2/index.html from ./src/articles.mi (mi)
[11ty] Writing ./public/articles/an-article-n-3/index.html from ./src/articles.mi (mi)

You can see the function was never called with the article title. I even replaced the template engine with a compile function that just logs, and again I can see times when the first article permalink is never rendered.

    compile: (inputContent) => {
      return async (data) => {console.log(inputContent); console.log("Data = " + data); console.log(data.article); return inputContent;}
    }

The data in eleventyComputed doesn't seem to exhibit the same behaviour.