fix item* attributes (#152)

src/index.browser.ts

@@ -121,6 +121,9 @@ const attributePropMap: Record<string, string | string[]> = {
   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<typeof mapAttribute>,

src/index.ts

@@ -120,11 +120,6 @@ function toReactNode(
   }
 }
 
-import attributes from './attribute.json';
-
-type AttributeMap = Record<string, string>;
-const attrs = <AttributeMap>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<string, string>;
+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',

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`] = `
+<div
+  itemScope={true}
+  itemType="https://schema.org/Movie"
+>
+  
+  
+  <h1
+    itemProp="name"
+  >
+    Avatar
+  </h1>
+  
+
+</div>
+`;
+
 exports[`attributes decode HTML entities inside style declaration 1`] = `
 <em
   style={

test/htmr.test.js

@@ -75,6 +75,11 @@ describe('attributes', () => {
     testRender('<button accesskey="s">Stress reliever</button>');
     testRender('<time datetime="2018-07-07">July 7</time>');
     testRender('<img alt="alt" class="" />');
+    testRender(html`
+      <div itemscope itemtype="https://schema.org/Movie">
+        <h1 itemprop="name">Avatar</h1>
+      </div>
+    `);
   });
 
   // https://github.com/pveyes/htmr/issues/103