plugin-component and node attributes

[bitboxer]

I am trying to add a custom element to our carta setup. I have a plugin that adds a prefix to a line and a transformer that transforms that item to a special kind of list that looks like this:

<li data-item-id="12345">List Item</li>

And I now want to add a custom renderer using the plugin-component thing. But sadly it looks like it wraps the li into a div and I have no way to access the data attribute in the custom component. Or am I mistaken?

[BearToCode]

Hi,

You should be able to access the properties of the HTML element inside your component, as they are passed as props to it:

carta/packages/plugin-component/src/lib/svelte.ts

Lines 117 to 132 in e5f9b72

	const props = Array.from(placeholder.attributes)
	.filter((attr) => attr.name !== 'data-component')
	.map((attr) => ({
	[attr.name]: attr.value
	}))
	.reduce((acc, curr) => ({ ...acc, ...curr }), {});
	const wrapper = document.createElement('div');
	wrapper.setAttribute('data-mounted-component', id);
	wrapper.style.display = 'contents';
	placeholder.replaceWith(wrapper);
	mount(component.component, {
	target: wrapper,
	props
	});

It should basically be the same as with the example of the guide, but with your custom prop. However, I'm not really sure about how you would export a property with dashes in its name, as in your case with data-item-id... I think it works in Svelte 5, using the $props rune. I kind of remember the existance of an hacky way to do the same in Svelte 4, although I'm not sure. Otherwise just try to change the name if the parameter and see if you can now do:

<script>
  export let dataItemId;
</script>

The value should be there.

[bitboxer]

Thanks for your quick answer ❤️. Changing the name made the trick. Will try to figure this one out with svelte.

The other problem is the code generates a div, which is not ideal:

[BearToCode]

I think a wrapper element is still needed for how the plugin is implemented. What do you suggest changing?