60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
const DOMAttributeNames: Record<string, string> = {
|
|
acceptCharset: 'accept-charset',
|
|
className: 'class',
|
|
htmlFor: 'for',
|
|
httpEquiv: 'http-equiv',
|
|
noModule: 'noModule',
|
|
}
|
|
|
|
const ignoreProps = [
|
|
'onLoad',
|
|
'onReady',
|
|
'dangerouslySetInnerHTML',
|
|
'children',
|
|
'onError',
|
|
'strategy',
|
|
'stylesheets',
|
|
]
|
|
|
|
function isBooleanScriptAttribute(
|
|
attr: string
|
|
): attr is 'async' | 'defer' | 'noModule' {
|
|
return ['async', 'defer', 'noModule'].includes(attr)
|
|
}
|
|
|
|
export function setAttributesFromProps(el: HTMLElement, props: object) {
|
|
for (const [p, value] of Object.entries(props)) {
|
|
if (!props.hasOwnProperty(p)) continue
|
|
if (ignoreProps.includes(p)) continue
|
|
|
|
// we don't render undefined props to the DOM
|
|
if (value === undefined) {
|
|
continue
|
|
}
|
|
|
|
const attr = DOMAttributeNames[p] || p.toLowerCase()
|
|
|
|
if (el.tagName === 'SCRIPT' && isBooleanScriptAttribute(attr)) {
|
|
// Correctly assign boolean script attributes
|
|
// https://github.com/vercel/next.js/pull/20748
|
|
;(el as HTMLScriptElement)[attr] = !!value
|
|
} else {
|
|
el.setAttribute(attr, String(value))
|
|
}
|
|
|
|
// Remove falsy non-zero boolean attributes so they are correctly interpreted
|
|
// (e.g. if we set them to false, this coerces to the string "false", which the browser interprets as true)
|
|
if (
|
|
value === false ||
|
|
(el.tagName === 'SCRIPT' &&
|
|
isBooleanScriptAttribute(attr) &&
|
|
(!value || value === 'false'))
|
|
) {
|
|
// Call setAttribute before, as we need to set and unset the attribute to override force async:
|
|
// https://html.spec.whatwg.org/multipage/scripting.html#script-force-async
|
|
el.setAttribute(attr, '')
|
|
el.removeAttribute(attr)
|
|
}
|
|
}
|
|
}
|