AssignedTemplateInstance performance

[luwes]

Related to

template-extensions/src/assigned-template.js

Lines 30 to 45 in b9e024b

	// These selectors could potentially be served from the server or
	// saved per unique template to make assigning the DOM parts to
	// a new element faster. It will skip `parse` and `processCallback`.
	//
	// This would make "partial hydration" possible so the JS bundle doesn't
	// need to ship with a template w/ expressions. Just the selectors would
	// be needed for hydration / enhancing.
	//
	// The selectors include xPath like paths (ignoring whitespace nodes).
	//
	// format: {x: expression, p: path, o: offset, a: attributeName, n: nodesLength}
	//
	// {x: '0', p: '/div/h1', o: 7, a: 'class'}
	// {x: '6', p: '/div/div[2]/button[2]', a: 'onclick'}
	// {x: '3', p: '/div/p/text()', o: 448}
	// {x: '9', p: '/div/dl/dt', n: 8}

Parsing and creating DOM parts first on a dummy template to then transfer them over to the SSR'd DOM is quite an expensive operation if wanting top performance. Fine for 90% of use cases, it's as fast as React's hydrate call.

Not needing to ship the full HTML template w/ expressions for the SSR'd content (watch out for conditional branches, these will still need the full HTML template!) is another reason to have the selector representation available straight from the server.

[JulianCataldo]

Is that remotely preventing declarative shadow DOM attachment?
Tried to do that, but template element changes its nature with "shadowroot=open", it's not a regular node anymore, and lose the "content" prop for the template extension lib to load from.

Also, not quite the topic, but I couldn't get to update the container expression with multi levels objects.
Thing like using {{user.name}} is not possible. Work-around is to pass the correct data up-front, when using update.

Great fun experimenting with your lib BTW! I think I could build a small util function to dedup. SSR / client stuff boilerplate, at least for the API user, when using the AstroJS framework. Declarative shadow DOM doesn't seems to be the right path tough, dark DOM can be hard to work with.