11ty / webc

Single File Web Components
MIT License
1.3k stars 36 forks source link

Content caching when using `webc:setup` #201

Open alexnozer opened 4 months ago

alexnozer commented 4 months ago

I tried accessing the built-in content variable in webc:setup, which stores the contents of the template for some manipulation/transformation, and got unexpected behavior.

I have this structure:

_includes
├─ base.webc
└─ child.webc
a.md
b.md
eleventy.config.js

base.webc

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body @html="content"></body>
</html>

child.webc

---
layout: base.webc
---
<script webc:setup>
    // some content processing, wrapping with <article> just for example
    const processedContent = `<article>${content}</article>`; 

    // for a.md the content should be <h1>A content</h1>
    // for b.md the content should be <h1>B content</h1>
    // But for b.md the content is actually <h1>A Content</h1>
</script>
<div class="some-wrapper">
    <slot @raw="processedContent"></slot>
</div>

a.md

---
layout: child.webc
---
# A content

b.md

---
layout: child.webc
---
# B content

eleventy.config.js

const pluginWebc = require("@11ty/eleventy-plugin-webc");

module.exports = function(eleventyConfig) {
    eleventyConfig.addPlugin(pluginWebc);
};

But after build I have the same content for both templates:

_site/a/index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body><div class="some-wrapper">
    <article><h1>A content</h1>
</article>
</div></body>
</html>

_site/b/index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body><div class="some-wrapper">
    <article><h1>A content</h1>
</article>
</div></body>
</html>

It looks like the content variable is cached and uses the content of the first template every time.

Windows 10 11ty/eleventy@2.0.1 11ty/eleventy-plugin-webc@0.11.2 Test repo