11ty / 11ty/webc

Content caching when using `webc:setup`

Open
#201 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
1.4k
Forks
46
Avg merge
10m
Merged PRs (30d)
2

Description

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

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the linked test repository with a.md, b.md, child.webc, base.webc, and the shown Eleventy configuration to reproduce the cached content. Trace how webc:setup evaluates the content variable across those two pages; done means the generated a/index.html contains A content and b/index.html contains B content.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
build-system, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.