ExternalScriptsHandle does not attach custom attributes to link

[IgnisDa]

Describe the bug

Here is my handle function:

export const handle: ExternalScriptsHandle<SerializeFrom<typeof loader>> = {
	scripts(_params) {
		return [{
			src: "https://us.umami.is/script.js",
			defer: true,
			"website-id": "abcd",
			"data-domains": undefined
	        }];
	},
};

However, this is rendered as:

<script src="https://us.umami.is/script.js" defer="" async=""></script>

Your Example Website or App

https://github.com/IgnisDa/ryot/blob/8204c2f5bc9de32e4181cf60a117db184b9eba88/apps/frontend/app/routes/_dashboard.tsx#L148

Steps to Reproduce the Bug or Issue

• Use the above handler function anywhere.

Expected behavior

I expect it to be rendered as:

<script src="https://us.umami.is/script.js" defer="" async="" data-website-id="abcd"></script>

Screenshots or Videos

No response

Platform

• OS: All
• Browser: All
• Version: [email protected]

Additional context

No response

[IgnisDa]

I think this can be fixed by attaching rest props for this:

remix-utils/src/react/external-scripts.tsx

Lines 229 to 239 in e8a1991

	<script
	src={src}
	defer={defer}
	async={async}
	type={type}
	noModule={noModule}
	nonce={nonce}
	crossOrigin={crossOrigin}
	integrity={integrity}
	referrerPolicy={referrerPolicy}
	/>

[gar1t]

Just a bump to this - not supporting data-xxx breaks this abstraction.

As a point of design feedback, I would not use rest/spread to support but an explicit property that simply passes through whatever is provided. E.g. extraAttrs or something like that. This is not a mainstream case, but it's a critical one.

[wouterds]

Would be nice, e.g. the Cloudflare beacon uses this custom data-cf-beacon attribute. You can have it automagically insert but then the console is full of hydration mismatch errors.

Edit: was just adding tracking and came across this, data attributes seem to be frequently used on third party scripts.

[Rocinante89]

Agreed with @gar1t on this one. Came across this issue integrating Cloudflare beacon.

[theosenoussaoui]

Would love to the possibility of passing custom attributes as well !

[theocerutti]

same!