Friday, March 29, 2024
HomeJavaScriptFirst Expertise Constructing with Eleventy's WebC Plugin

First Expertise Constructing with Eleventy’s WebC Plugin


Just a few weeks in the past, Zach Leatherman started discussing his plans so as to add internet element assist to Eleventy. Beginning along with his announcement put up, Including Elements to Eleventy with WebC, builders can now begin working with a plugin, WebC, to check out this new assist. The plugin docs have a terrific explainer as to why this assist is being added, however to me it primarily boils down – working our internet parts throughout server construct and never on the client-side with JavaScript. Now, to date, my very own experiments with internet parts have been pretty easy, small issues, so I am not too involved in regards to the client-side influence, however heck, if we will ship no JavaScript, that is higher than a small quantity.

I’ll say that whereas the WebC docs are pretty in depth, I’m struggling to wrap my head round it fully now. To be trustworthy, I struggled with Eleventy Serverless too, so I determine I simply must construct out a number of demos and I feel I I will grok it higher. As all the time, I weblog what I be taught so I hope this entry (and any additional ones) helps others.

I do not need to repeat the docs so I will not stroll you thru set up and the like, that is all pretty easy, however I do need to level out a number of issues that precipitated me bother at first.

By default, while you add WebC to an Eleventy venture, it does not scan for and routinely add in internet parts. That is coated however (imo) somewhat late within the docs. Once I’m studying one thing I completely don’t learn to the of the web page. As quickly as I really feel like I can play, I do, and if an essential element is a bit late within the doc, I sometimes find yourself screwing one thing up. 😉

You may add assist for a particular or glob of internet parts 3 ways, however for now I will give attention to two. You may both outline a glob of internet parts in entrance matter (on the template or listing stage), or as a configuration possibility. Whereas the primary code pattern exhibits the default habits:

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

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

You’ll most certainly need to begin off by having Eleventy routinely scan a folder of internet parts like so:

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

module.exports = perform(eleventyConfig) {
	eleventyConfig.addPlugin(pluginWebc, {
	    parts: "_includes/parts/**/*.webc"
	});
};

By the best way, the precise folder does not actually matter. I used the above based mostly on examples from the docs, however I feel going ahead I will use one thing like _components to match the fashion utilized by information and embrace recordsdata in Eleventy.

The subsequent factor that precipitated me bother was creating an online element that was dynamic based mostly on attributes. I feel my problem was that I used to be considering that Liquid directives and tags can be supported, however that is not the case. You utilize a brand new file kind, .webc, and whereas it has assist for binding attributes through a :identify, it is not actually a template language like Liquid. So for instance, I could not do basic items like conditionals. This is an instance of the straightforward stage you are able to do with a .webc file, on this case hello-world.webc:

Hiya! <span @html="this.identify" :alt="this.identify"></span>

On this case, I am binding the alt attribute (which is not actually an attribute of span afaik) in addition to defining the internal HTML of a block by utilizing the attribute handed through identify, so for instance:

<hello-world @identify="ray"></hello-world>

This all outputs to:

Hiya! <span alt="ray">ray</span>

However like I stated, I wished extra flexibility in my element, what I actually wished was Liquid. There’s a approach to do this, simply wrap your element with:

<template webc:kind="11ty" 11ty:kind="liquid">
stuff right here
</template>

I feel for now my plan is to simply use this as a foundation for my parts, except I do know for positive I do not want situations and looping.

As I stated – I am fairly new to this so I anticipate how I do issues will change as I be taught.

That is just about the primary issues that causes me issues to date, so let us take a look at a demo!

A Placeholder WebC Instance

Again a number of days in the past, I blogged a few placeholder internet element that made use of dynamic SVG to render easy placeholder photographs. It was fairly easy, however truly sensible I feel. How would I convert that code to a server-side rendered WebC element? I principally simply switched from JavaScript to Liquid:

<template webc:kind="11ty" 11ty:kind="liquid">
{% if width == clean %}
	{% assign width = "199" %}
{% endif %}
{% if top == clean %}
	{% assign top = "199" %}
{% endif %}

<svg ns="http://www.w3.org/2000/svg" 
	width="{{width}}"
	top="{{top}}" viewbox="0 0 {{width}} {{top}}">
	<rect width="100%" top="100%" fill="#ff0000"></rect>
	{% if textual content %}
	<textual content x="50%" y="50%" dominant-baseline="center" text-anchor="center">{{ textual content }}</textual content>
	{% endif %}
</svg>
</template>

For comparability’s sake, this is the JavaScript one:

const ns="http://www.w3.org/2000/svg";

class PlaceHolder extends HTMLElement {

	constructor() {

		tremendous();

		const shadow = this.attachShadow({mode:'open'});

		this.width = 250;
		this.top = 250;
		this.bgcolor="#c0c0c0";

		if(this.hasAttribute('width')) this.width = parseInt(this.getAttribute('width'), 10);
		if(this.hasAttribute('top')) this.top = parseInt(this.getAttribute('top'), 10);
		if(this.hasAttribute('bgcolor')) this.bgcolor = this.getAttribute('bgcolor');

		const wrapper = doc.createElementNS(ns, 'svg');
		wrapper.setAttribute('width', this.width);
		wrapper.setAttribute('top', this.top);
		wrapper.setAttribute('viewBox', `0 0 ${this.width} ${this.top}`);

		const rect = doc.createElementNS(ns, 'rect');
		rect.setAttribute('width', '100%');
		rect.setAttribute('top', '100%');
		rect.setAttribute('fill', this.bgcolor);
		wrapper.appendChild(rect);

		if(this.getAttribute('textual content')) {
			const textual content = doc.createElementNS(ns, 'textual content');
			textual content.setAttribute('x', '50%');
			textual content.setAttribute('y', '50%');
			textual content.setAttribute('dominant-baseline', 'center');
			textual content.setAttribute('text-anchor', 'center');
			textual content.textContent = this.getAttribute('textual content');
			wrapper.appendChild(textual content);
		}

		shadow.appendChild(wrapper);
	}
}

customElements.outline('place-holder', PlaceHolder);

I’ve to say – as a lot as I do not thoughts the JavaScript interface for working with internet parts (and I nonetheless have a number of exploring to do), that Liquid/HTML model is a heck of quite a bit easier! Principally – examine and default my top and width and simply output SVG, with a conditional block inside.

I added this to my parts listing, after which in an Eleventy index.webc file, used it like so:

<h3>No Tags</h3>
<place-holder></place-holder>

<p>

<h3>Specified w,h, and textual content.</h3>
<place-holder width="250" top="300" textual content="ray"></place-holder>

I did NOT embrace a JavaScript file, I needn’t. The output in _site seems to be like so:

<h3>No Tags</h3>


	


	


<svg ns="http://www.w3.org/2000/svg" width="199" top="199" viewBox="0 0 199 199">
	<rect width="100%" top="100%" fill="#ff0000"></rect>
	
</svg>



<p>

Specified w,h, and textual content. <br>




<svg ns="http://www.w3.org/2000/svg" width="250" top="300" viewBox="0 0 250 300">
	<rect width="100%" top="100%" fill="#ff0000"></rect>
	
	<textual content x="50%" y="50%" dominant-baseline="center" text-anchor="center">ray</textual content>
	
</svg>

You may discover a number of white house within the output above. When you can repair that with a HTML put up processor (see the tremendous easy Eleventy pattern code instance), it is one thing I need to see if I can repair myself later. Most significantly although – not a lick of JavaScript!

Wish to see it your self? I made a decision to provide it a attempt on Glitch, a service I found a month or so in the past. You may browse a stay, working Eleventy web site on their service right here: https://glitch.com/edit/#!/placeholder-demo. You may view the working model right here: https://placeholder-demo.glitch.me/ Give it a shot and let me know what you suppose.

Edit on 10/17 at 1:13PM: Only a fast observe. I acquired an e mail from Rian Murnen who identified I may assist restrict the whitespace utilizing Liquid dashes: https://shopify.github.io/liquid/fundamentals/whitespace/. I made this tweak on a fork of the Glitch right here: https://glitch.com/edit/#!/screeching-stitch-field You may completely see the distinction. I may most likely shrink the whitespace extra however this was a terrific fast change. Thanks, Rian!

Picture by Mateusz Feliksik on Unsplash

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments