TSX, components, and shortcodes

[pauleveritt]

Operating system

macOS Big Sur

Eleventy

3.0 alpha 13

Describe the bug

Repo and video

TSX layout components work great. Subcomponents work great. But they don't have good access to universal shortcodes, in particular, eleventy-plugin-bundle stuff such as css.

In short, Preact manages the instantiation of subcomponents, which means 11ty can't bind this. But Preact has a way to pass a "context" object to the render function, and every component will get this.context. I'm able to pass in
shortcodes: eleventyConfig.javascriptFunctions and thus call this.context.shortcodes.css(".xyz {}") in my subcomponent.

But when the caller (the layout template) renders, this.getBundle() doesn't return anything. Which makes sense, from an order-of-execution perspective.

Here is a repo with a README and example code.

Reproduction steps

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See an error

Expected behavior

1. Clone the repo.
2. Run the build script.
3. Note that xyz is not in the build output.
4. Or: watch the video walkthrough

Reproduction URL

https://github.com/pauleveritt/eleventy-tsx-shortcodes

Screenshots

Video: https://youtu.be/m0lzT7__O7U

[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.

[monochromer]

it would be nice to have an API to control order (priority) of transforms. For example, if we have jsx-plugin with transform:

eleventyConfig.addTranform('some-transform-name', function () {
 return `<!DOCTYPE html>` + someRenderFromJsxToHtml(<Component />)
})

This transform will perform before bundle transform, which replace placeholders (/*__EleventyBundle:get:css:default:EleventyBundle__*/) to real resources links.