51 lines
2.1 KiB
TypeScript
51 lines
2.1 KiB
TypeScript
|
import { makeMap } from './makeMap'
|
||
|
|
|
||
|
|
// TODO validate this list!
|
||
|
|
// on the client, most of these probably has corresponding prop
|
||
|
|
// or, like allowFullscreen on iframe, although case is different, the attr
|
||
|
|
// affects the property properly...
|
||
|
|
// Basically, we can skip this check on the client
|
||
|
|
// but they are still needed during SSR to produce correct initial markup
|
||
|
|
export const isBooleanAttr = makeMap(
|
||
|
|
'allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,' +
|
||
|
|
'default,defaultchecked,defaultmuted,defaultselected,defer,disabled,' +
|
||
|
|
'enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,' +
|
||
|
|
'muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,' +
|
||
|
|
'required,reversed,scoped,seamless,selected,sortable,translate,' +
|
||
|
|
'truespeed,typemustmatch,visible'
|
||
|
|
)
|
||
|
|
|
||
|
|
const unsafeAttrCharRE = /[>/="'\u0009\u000a\u000c\u0020]/
|
||
|
|
const attrValidationCache: Record<string, boolean> = {}
|
||
|
|
|
||
|
|
export function isSSRSafeAttrName(name: string): boolean {
|
||
|
|
if (attrValidationCache.hasOwnProperty(name)) {
|
||
|
|
return attrValidationCache[name]
|
||
|
|
}
|
||
|
|
const isUnsafe = unsafeAttrCharRE.test(name)
|
||
|
|
if (isUnsafe) {
|
||
|
|
console.error(`unsafe attribute name: ${name}`)
|
||
|
|
}
|
||
|
|
return (attrValidationCache[name] = !isUnsafe)
|
||
|
|
}
|
||
|
|
|
||
|
|
export const propsToAttrMap: Record<string, string | undefined> = {
|
||
|
|
acceptCharset: 'accept-charset',
|
||
|
|
className: 'class',
|
||
|
|
htmlFor: 'for',
|
||
|
|
httpEquiv: 'http-equiv'
|
||
|
|
}
|
||
|
|
|
||
|
|
// CSS properties that accept plain numbers
|
||
|
|
export const isNoUnitNumericStyleProp = makeMap(
|
||
|
|
`animation-iteration-count,border-image-outset,border-image-slice,` +
|
||
|
|
`border-image-width,box-flex,box-flex-group,box-ordinal-group,column-count,` +
|
||
|
|
`columns,flex,flex-grow,flex-positive,flex-shrink,flex-negative,flex-order,` +
|
||
|
|
`grid-row,grid-row-end,grid-row-span,grid-row-start,grid-column,` +
|
||
|
|
`grid-column-end,grid-column-span,grid-column-start,font-weight,line-clamp,` +
|
||
|
|
`line-height,opacity,order,orphans,tab-size,widows,z-index,zoom,` +
|
||
|
|
// SVG
|
||
|
|
`fill-opacity,flood-opacity,stop-opacity,stroke-dasharray,stroke-dashoffset,` +
|
||
|
|
`stroke-miterlimit,stroke-opacity,stroke-width`
|
||
|
|
)
|