Frequent component property/attribute data collisions with global data

[zachleat]

On 11ty-website I have a src/_includes/components/site-card.webc component which uses a date prop:

<div class="sites-site-vert">
	<a :href="url" class="elv-externalexempt" :title="name || false">
…
			<span class="metadata" webc:if="date" @text="`(${date.split('-').shift()})`"></span>
…
	</a>
</div>

which is fine until I have usage where the prop is left off when used (e.g. on docs/getting-started.webc)

<site-card @date="2023-01-01"></site-card><!-- sure, fine -->
<site-card></site-card><!-- not fine -->

This collides with any top level date set in Eleventy’s data cascade.

My proposal is to move internal components (e.g. src/_includes/components/* in my example) and not top level WebC template pages (e.g. *.webc files in the Eleventy input folder) to need to reference global data in this way as $data.date instead.

This will prevent undesirable collisions but may require component code to change (if it previously accessed global data). In this above example the component doesn’t use global data and expects date to not have a value, thus does not require code changes.

[zachleat]

Related to 11ty/eleventy-plugin-webc#66 though 11ty/eleventy-plugin-webc#66 is helper collisions, which are a bit different.

[zachleat]

Just as an example, here is the commit required to upgrade 11ty.dev with this breaking change: 11ty/11ty-website@23a51ac