diff --git a/src/attribute.json b/src/attribute.json deleted file mode 100644 index 8286be4..0000000 --- a/src/attribute.json +++ /dev/null @@ -1,49 +0,0 @@ -{ - "for": "htmlFor", - "class": "className", - "acceptcharset": "acceptCharset", - "accesskey": "accessKey", - "allowfullscreen": "allowFullScreen", - "autocomplete": "autoComplete", - "autofocus": "autoFocus", - "autoplay": "autoPlay", - "cellpadding": "cellPadding", - "cellspacing": "cellSpacing", - "charset": "charSet", - "classid": "classID", - "classname": "className", - "colspan": "colSpan", - "contenteditable": "contentEditable", - "contextmenu": "contextMenu", - "crossorigin": "crossOrigin", - "datetime": "dateTime", - "enctype": "encType", - "formaction": "formAction", - "formenctype": "formEncType", - "formmethod": "formMethod", - "formnovalidate": "formNoValidate", - "formtarget": "formTarget", - "frameborder": "frameBorder", - "hreflang": "hrefLang", - "htmlfor": "htmlFor", - "httpequiv": "httpEquiv", - "inputmode": "inputMode", - "keyparams": "keyParams", - "keytype": "keyType", - "marginheight": "marginHeight", - "marginwidth": "marginWidth", - "maxlength": "maxLength", - "mediagroup": "mediaGroup", - "minlength": "minLength", - "novalidate": "noValidate", - "radiogroup": "radioGroup", - "readonly": "readOnly", - "rowspan": "rowSpan", - "spellcheck": "spellCheck", - "srcdoc": "srcDoc", - "srclang": "srcLang", - "srcset": "srcSet", - "tabindex": "tabIndex", - "usemap": "useMap", - "viewbox": "viewBox" -} diff --git a/src/index.browser.ts b/src/index.browser.ts index e2c03a7..41ba430 100644 --- a/src/index.browser.ts +++ b/src/index.browser.ts @@ -121,6 +121,9 @@ const attributePropMap: Record = { spellcheck: 'spellCheck', srcdoc: 'srcDoc', srcset: 'srcSet', + itemscope: 'itemScope', + itemprop: 'itemProp', + itemtype: 'itemType', }; /** @@ -158,9 +161,13 @@ function getPropInfo(tagName: HTMLTags, attributeName: string) { function checkBooleanAttribute(el: HTMLElement, prop: any) { el.setAttribute(prop, ''); // @ts-ignore - return el[prop] === true; + return el[prop] === true || SPECIAL_BOOLEAN_ATTRIBUTES.indexOf(prop) > -1; } +// some attribute can't be checked whether it's a boolean attribute +// or not by using setAttribute trick +const SPECIAL_BOOLEAN_ATTRIBUTES: string[] = ['itemScope']; + function reactCreateElement( tag: HTMLTags, props: ReturnType, diff --git a/src/index.ts b/src/index.ts index 2718e04..41c665f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -120,11 +120,6 @@ function toReactNode( } } -import attributes from './attribute.json'; - -type AttributeMap = Record; -const attrs = attributes; - function getPropInfo(_originalTag: HTMLTags, attributeName: string) { const propName = attrs[attributeName] || attributeName; return { @@ -133,6 +128,60 @@ function getPropInfo(_originalTag: HTMLTags, attributeName: string) { }; } +type AttributeMap = Record; +const attrs: AttributeMap = { + for: 'htmlFor', + class: 'className', + acceptcharset: 'acceptCharset', + accesskey: 'accessKey', + allowfullscreen: 'allowFullScreen', + autocomplete: 'autoComplete', + autofocus: 'autoFocus', + autoplay: 'autoPlay', + cellpadding: 'cellPadding', + cellspacing: 'cellSpacing', + charset: 'charSet', + classid: 'classID', + classname: 'className', + colspan: 'colSpan', + contenteditable: 'contentEditable', + contextmenu: 'contextMenu', + crossorigin: 'crossOrigin', + datetime: 'dateTime', + enctype: 'encType', + formaction: 'formAction', + formenctype: 'formEncType', + formmethod: 'formMethod', + formnovalidate: 'formNoValidate', + formtarget: 'formTarget', + frameborder: 'frameBorder', + hreflang: 'hrefLang', + htmlfor: 'htmlFor', + httpequiv: 'httpEquiv', + inputmode: 'inputMode', + itemscope: 'itemScope', + itemprop: 'itemProp', + itemtype: 'itemType', + keyparams: 'keyParams', + keytype: 'keyType', + marginheight: 'marginHeight', + marginwidth: 'marginWidth', + maxlength: 'maxLength', + mediagroup: 'mediaGroup', + minlength: 'minLength', + novalidate: 'noValidate', + radiogroup: 'radioGroup', + readonly: 'readOnly', + rowspan: 'rowSpan', + spellcheck: 'spellCheck', + srcdoc: 'srcDoc', + srclang: 'srcLang', + srcset: 'srcSet', + tabindex: 'tabIndex', + usemap: 'useMap', + viewbox: 'viewBox', +}; + const BOOLEAN_ATTRIBUTES = [ // https://github.com/facebook/react/blob/cae635054e17a6f107a39d328649137b83f25972/packages/react-dom/src/shared/DOMProperty.js#L319 'allowFullScreen', diff --git a/test/__snapshots__/htmr.test.js.snap b/test/__snapshots__/htmr.test.js.snap index 02c6185..e472c0c 100644 --- a/test/__snapshots__/htmr.test.js.snap +++ b/test/__snapshots__/htmr.test.js.snap @@ -126,6 +126,23 @@ exports[`attributes correctly map HTML attributes to react props 10`] = ` /> `; +exports[`attributes correctly map HTML attributes to react props 11`] = ` +
+ + +

+ Avatar +

+ + +
+`; + exports[`attributes decode HTML entities inside style declaration 1`] = ` { testRender(''); testRender(''); testRender('alt'); + testRender(html` +
+

Avatar

+
+ `); }); // https://github.com/pveyes/htmr/issues/103