During --serve, WebC components used in markdown files don't apply new content

[BulletProofPoet]

Operating system

Windows 10

Eleventy

2.0.2-alpha.2

Describe the bug

I'm trying to implement the whole site using only webc and markdown, so there are no other templating languages involved. As such, my "eleventy.config.js" file returns an object which includes the markdownTemplateEngine: 'webc' property, allowing webc to be used inside markdown files.

Unfortunately, when I have a markdown file that hosts a webc component, updates to the webc component aren't being applied to the dev server's preview until I restart the server. For example, my site's root "index.md" file looks like this:

<!-- index.md -->
---
layout: "base.webc"
---
## Welcome to the website

<ul>
  <li webc:for="page of collections.all">
    <page-summary :@page="page"></page-summary>
  </li>
</ul>

Changes to the page-summary component aren't applied until the server is restarted.

If I convert this simple example into a ".webc" file, changes to the webc component are applied correctly, so I think that this is an issue with using webc as the template engine for markdown files.

Using:

• @11ty/eleventy: 2.0.2-alpha.2
• @11ty/eleventy-plugin-webc: 0.11.1

Reproduction steps

Edit a webc component that's hosted in a markdown file.

Expected behavior

Changes to the webc component should be reflected in the dev server's preview.

[matthewpflueger]

I believe this is the same issue reported here: https://github.com/darthmall/11ty.webc.fun/issues/25

If you do the following:

1. git clone git@github.com:darthmall/11ty.webc.fun.git
2. cd 11ty.webc.fun && npm install && npm start
3. make a change to src/_includes/components/site-foot.webc

You will see that the changes do not get processed (they will not show at http://localhost:8080/

More detailed info is at the linked issue...

[darekkay]

This issue is not limited to WebC. Using renderFile with the Eleventy Render Plugin for other template languages shows the same behavior. After some debugging I think the problem is that Eleventy doesn't know that there is a dependency between the markdown file and the included file via renderFile. We have setWatchJavaScriptDependencies to fix this behavior for JavaScript templates.

As a workaround, I've created an Eleventy hook to touch the respective file. I've got the idea from this comment. The difference is that I use utimes(Sync), which works on all operating systems:

const { utimesSync } = require("fs");

 eleventyConfig.on("eleventy.beforeWatch", function (value) {
    const markdownFilesToUpdate = /* some project-specific logic to derive the corresponding markdown file(s) from the changed file(s) */

    for (const markdownFile of markdownFilesToUpdate) {
      // touch the corresponding markdown file, so that it's reloaded
      utimesSync(markdownFile, new Date(), new Date());
    }
  });