TSX, components, and shortcodes

[pauleveritt]

TSX, components, and shortcodes

[pauleveritt]

Maybe a better way to think about it: eliminate the TSX part. Just think of it as a JavaScript template calling a shortcode.

How would a universal shortcode call css and get something added to the bundle, when used in a JavaScript template?

[zachleat]

Some overlap with #3310

[monochromer]

In Eleventy itself, the context this is binded to filters (what makes it possible to work for filters from the bundle plugin) something like this:

eleventy/src/Engines/JavaScript.js

Lines 12 to 13 in 55e2279

	// which data keys to bind to `this` in JavaScript template functions
	static DATA_KEYS_TO_BIND = ["page", "eleventy"];

eleventy/src/Engines/JavaScript.js

Lines 119 to 145 in 55e2279

	getJavaScriptFunctions(inst) {
	let fns = {};
	let configFns = this.config.javascriptFunctions;
	for (let key in configFns) {
	// prefer pre-existing `page` javascriptFunction, if one exists
	if (key === "page") {
	// do nothing
	} else {
	// note: wrapping creates a new function
	fns[key] = JavaScript.wrapJavaScriptFunction(inst, configFns[key]);
	}
	}
	return fns;
	}
	static wrapJavaScriptFunction(inst, fn) {
	return function (...args) {
	for (let key of JavaScript.DATA_KEYS_TO_BIND) {
	if (inst && inst[key]) {
	this[key] = inst[key];
	}
	}
	return fn.call(this, ...args);
	};
	}

[pauleveritt]

@monochromer My plugin bundle concern...let's say I have a JavaScript template that inserts the CSS bundle in the head, then later, calls a shortcode. The shortcode adds something to the CSS bundle. But it is called after the bundle is put in the head.

I don't think the binding to this is enough for this. There's something deferred happening when the bundle gets put in the head, with some re-evaluation/resolution happening after the first pass through. (Confession: I should read the source rather than guess.)

[monochromer]

Eleventy bundle plugin functions inserts placeholders into html, then transforms replace them with content or links of bundles.

[pauleveritt]

Thanks a bunch for that tip @monochromer .... I now see the placeholder, its string scheme, and the event that processes after build.

Thanks to my buddy Khalid, we found where the problem lies. addContent needs a `page.url.

My subcomponent doesn't have this.page. I would need to pass in the URL each time, and find a way to get to page.url in each subcomponent. I made an arrow function in compile to automate that.

I made a video walking through the problem and hacky-y solution.

Not much 11ty can do to help. It doesn't control the creation of the "shortcode" (subcomponent.) I could imagine some relationship with the jsx-async-runtime project (nice small codebase) where it allowed a pluggable factory to control the this.

I'd be ok with closing this ticket.