diff --git a/src/index.js b/src/index.js index b2de14cd..91f5644f 100644 --- a/src/index.js +++ b/src/index.js @@ -24,6 +24,50 @@ const VOID_ELEMENTS = [ 'wbr' ]; +const MAPPED_ATTRIBUTES = { + acceptCharset: 'accept-charset', + accessKey: 'access-key', + allowFullScreen: 'allow-full-screen', + allowTransparency: 'allow-transparency', + autoPlay: 'auto-play', + cellPadding: 'cell-padding', + cellSpacing: 'cell-spacing', + charSet: 'char-set', + className: 'class-name', + colSpan: 'col-span', + contentEditable: 'content-editable', + contextMenu: 'context-menu', + crossOrigin: 'cross-origin', + dateTime: 'date-time', + encType: 'enc-type', + formAction: 'form-action', + formEncType: 'form-enc-type', + formMethod: 'form-method', + formNoValidate: 'form-no-validate', + formTarget: 'form-target', + frameBorder: 'frame-border', + hrefLang: 'href-lang', + httpEquiv: 'http-equiv', + inputMode: 'input-mode', + keyParams: 'key-params', + keyType: 'key-type', + marginHeight: 'margin-height', + marginWidth: 'margin-width', + maxLength: 'max-length', + mediaGroup: 'media-group', + minLength: 'min-length', + noValidate: 'no-validate', + radioGroup: 'radio-group', + readOnly: 'read-only', + rowSpan: 'row-span', + spellCheck: 'spell-check', + srcDoc: 'src-doc', + srcLang: 'src-lang', + srcSet: 'src-set', + tabIndex: 'tab-index', + useMap: 'use-Map' +}; + /** Render Preact JSX + Components to an HTML string. * @name render @@ -119,6 +163,11 @@ export default function renderToString(vnode, context, opts, inner, isSvgMode) { if (attributes['class']) continue; name = 'class'; } + else if (MAPPED_ATTRIBUTES.hasOwnProperty(name)) { + const actual = MAPPED_ATTRIBUTES[name]; + if (attributes[actual]) continue; + name = actual; + } else if (isSvgMode && name.match(/^xlink\:?(.+)/)) { name = name.toLowerCase().replace(/^xlink\:?(.+)/, 'xlink:$1'); } diff --git a/test/jsx.js b/test/jsx.js index e10f6996..106e9cd7 100644 --- a/test/jsx.js +++ b/test/jsx.js @@ -40,6 +40,10 @@ describe('jsx', () => { expect(renderJsx()).to.equal(''); }); + it('should render supported camel cased attributes in normal form', () => { + expect(renderJsx()).to.equal(''); + }); + it('should render JSX attributes inline if short enough', () => { expect(renderJsx( bar