WebC introduction

[rdela]

modified: eleventy.config.js

uncommenting L35 of eleventy.config.js (eleventy-img/*.webc) breaks build

+	eleventyConfig.addPlugin(pluginWebc, {
+		components: [
+			"./_components/**/*.webc",
+			// "npm:@11ty/eleventy-img/*.webc",
+		],
+	});

[11ty] Original error stack trace: Error: Check the webc:type="js" element in
./content/archive/fourthpost/fourthpost.md.

[11ty] Original error message: Cannot read properties of undefined
(reading 'directories')

Seems like it is getting hung up here:
https://github.com/11ty/eleventy-img/blob/main/eleventy-image.webc#L72-L81

modified: content/archive/fourthpost/fourthpost.md

-{% image "./possum.png", "A possum parent and two possum kids hanging from the iconic red balloon" %}
+<img webc:is="eleventy-image" width="288,350" sizes="100vw" src="/img/possum.png" formats="avif,webp,png" alt="A possum parent and two possum kids hanging from the iconic red balloon">

modified: package.json

added webc plugin

new file: _components/html/h2.webc
new file: _components/html/h3.webc
new file: _components/html/h4.webc
new file: _components/html/heading.css
renamed: content/archive/fourthpost/possum.png -> public/img/possum.png

[netlify]

✅ Deploy Preview for eleventeen ready!

Name	Link
🔨 Latest commit	5b9f812
🔍 Latest deploy log	https://app.netlify.com/sites/eleventeen/deploys/669f60a2495fd10008e48c92
😎 Deploy Preview	https://deploy-preview-40--eleventeen.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 100 (no change from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 100 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[rdela]

With the eleventy-img/*.webc component commented out, it builds:
https://deploy-preview-40--eleventeen.netlify.app/archive/fourthpost/

But when I uncomment it in the config so it includes eleventy-image.webc, build breaks with directories error.

Also seems like there is no good way to override html elements like h2, h3 created from syntax like ##, ### inside markdown posts? I tried changing markdownTemplateEngine & htmlTemplateEngine to webc and alternatively using templateEngineOverride: md,webc but lots of sharp edges (relative src paths for images don't seem to work, for instance.)

Ideally I would get the result in Tugboat/Donut with the heading anchor links, if I cleaned up the unnecessary slugify calls from Tugboat and passed in the already slugified ids, since I got the new IdAttributePlugin working in #39

Wide view, I am struggling with whether to ditch Nunjucks entirely now and switch over to .webc for all the .njk templates in eleventeen, or to hold off on integrating WebC further for now and to appreciate the battle-tested terseness of the Nunjucks syntax.

Understanding WebC Features and Concepts was helpful as I tried to debug the error cascade, as was 11ty/eleventy-plugin-webc#22

This seemed like a good time to take stock.

[rdela]

I have done an experimental conversion of the post.njk template to WebC, and although I got the posts mostly rendering, there is a cascading set of issues that arise from beginning to switch from Nunjucks to WebC. All of the archive indices hero image thumbnails broke right away, and finding a file path format/directory for the images that worked with both Nunjucks and WebC proved elusive. If any gradual conversion from .njk to .webc will be full of pain and friction, traveling further down the road of mixing Nunjucks and WebC seems unwise. Continuing to weigh doing a clean room “from scratch” implementation of eleventeen based on Tugboat/Donut, having to recreate everything already here. Sparse documentation and few examples to work off make that unappealing though.

[rdela]

Question asked in Discord:

If I have markdown processed into markup with slugified IDs from the new IdAttributePlugin [see above] like…

<h2 id="foo-bar">Foo Bar</h2>
<h2 id="baz-qux">Baz Qux</h2>

…then in _components/html/h2.webc similar to what Tugboat does 1, I want to use the id in the expanded “overloaded” h2.webc 2, how do I reference it?

I see @attributes 3, but what is the best way to reuse the value of the host h2 id to make the anchor links?

UPDATE: Looks like they would be in global attributes and webc.attributes.attributes if my webc template was working?

UPDATE 2: Child components must use $data for globals, thanks rothsandro, but that does not seem to be the issue here.

Child components will now need to access global data through a top level $data variable instead of as top level variables. This is important to prevent global data leaking into component data and affecting component logic.

– WebC v0.11.0: Child Components accessing Global Data

UPDATE 3: see also…

• webc v0.11.2
• Slotted content (in a top level page) should have access to global data without using $data 11ty/webc#152
• Accessing page data in a layout requires $data sometimes 11ty/eleventy-plugin-webc#78

[socket-security]

New dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@11ty/eleventy-plugin-webc@0.11.2	Transitive: environment, filesystem, unsafe	+33	4.39 MB	zachleat

View full report↗︎

[rdela]

Just pushed 02c3b31, WIP code to document and reproduce what I think is collision happening similar to cases in 11ty/webc#151

WIP post.njk to webc conversion, log collison template bugs
_components/html/h2.webc: console.log(slots.text.default);

Tried various combinations of markdownTemplateEngine and htmlTemplateEngine settings and this was as good as any.

markdownTemplateEngine: "njk",
htmlTemplateEngine: "webc",

Post images broken in all the indexes now and still no heading anchors, IdAttributePlugin still in the mix. Build failed due to Lighthouse accessibility score for Links do not have a discernible name.

which is Thought it was due to me dropping “anchor” because it was getting added to the slugified ID from IdAttributePlugin. But it was the partially commented out postlist thumb links so pushed another commit commenting it out, which took a couple tries to get correct. Either way the terminal console shows the issue and one can always clone and run the PR locally I suppose.

[rdela]

Alright building again and the collision/template garble problem is visible on the page above each heading and in the build log.

[rdela]

Time to move on from Nunjucks?

It may well be that, in time, WebC will become Eleventy’s most familiar templating language, taking the spot long held by Nunjucks. And that’s probably just as well, because Nunjucks is a project bearing the signs of neglect.

Earlier this month, during an interview on Episode #266 of the JS Party podcast, Leatherman compared Nunjucks’ condition to that of the somewhat similar Liquid templating engine:

I think that WebC will be seen as a successor to some of these template syntaxes that aren’t maintained very well anymore, as the maintainers sort of move on… Liquid is very well-maintained. Nunjucks, not so much.

Mozilla’s Nunjucks repo had its latest release (v3.2.3) on June 2, 2022 (although its package.json was last updated in early 2021), but a look through the docs portion of the repo shows many files and directories that are ancient by web dev standards. Some date back to February, 2015.

Written by Bryce Wray on 2023-03-18.

Notably, a month later on 2023-04-19 Nunjucks released v3.2.4 to fix CVE-2023-2142 (bugzilla #1825980). Critical security patches were still happening then, at least.

[rdela]

Moving on with #41 for now and leaving this as is.

EDIT: closing this…

@trovster@mastodon.social yes the #WebC learning curve is steep. It was eventually a quite rewarding journey for me but I decided not to switch to it in critical production scenarios yet. Cc @d3v1an7@infosec.exchange @eleventy@fosstodon.org

https://mastodon.social/@rdela/113017711036978098

[rdela]

Re:

Tried various combinations of markdownTemplateEngine and htmlTemplateEngine settings and this was as good as any.

From unpublished Donut testing, we need markdownTemplateEngine: "webc" for WebC elements/components to get expanded in markdown, so am now using:

markdownTemplateEngine: "webc",
htmlTemplateEngine: "webc",

there. This repo relies on Nunjucks in too many places to do that now but food for thought.

WebC holds tons of promise, but basic issues like how do I getAttribute can lead one down thorny paths like this that are potentially points of no return at the moment, where anyone that has the answer is not readily available.

Considering switching from Nunjucks to Liquid, mainly for Bookshop compatibility. So at this point it is Liquid vs WebC, with Liquid in the lead.

Main factors so far:

• Unclear future of Nunjucks: WebC introduction #40 (comment)
• Zach uses Liquid.
• 11ty contributes to LiquidJS.
• Difficulty of getting help with esoteric WebC issues (this PR, Donut/Tugboat, other top secret experiments).

Unless final evaluation truly surprises me, Nunjucks is on it’s way out either way.