Easy way to serialize all host component attributes/props in JavaScript

[zachleat]

Notably you can use webc:root to re-use and merge host component attributes in a component definition in markup.

https://www.11ty.dev/docs/languages/webc/#attributes-and-webcroot

This would be the script alternative to this (for webc:type="js" or webc:type="render")

cc @ascorbic

[ascorbic]

Adding something like a "props" object that contains them all would be a big help here too, as it would at least let us do it manually. I tried using "this" but of course that has loads of other stuff on it so didn't work.

[zachleat]

A new webc.attributes object and webc.renderAttributes() function will now be available to transforms (e.g. webc:type="js" and webc:type="render"). For consistency these will also be available (though less usefully) in dynamic attributes and @html/webc:if.

[zachleat]

Related test has a usage example, notably this will not render private props:

https://github.com/11ty/webc/blob/06768af3fb20b1d416276f2f07ac3865a4f3a80c/test/issue-104-test.js
https://github.com/11ty/webc/blob/06768af3fb20b1d416276f2f07ac3865a4f3a80c/test/stubs/issue-104/component.webc

<script webc:type="js" webc:root="override">
`<img ${webc.renderAttributes(webc.attributes)}>`
</script>

Will ship with WebC v0.9.0

[ascorbic]

Perfect! Thank you

[zachleat]

Docs for this will live at https://www.11ty.dev/docs/languages/webc/#extra-data-for-javascript-render-functions