diff --git a/.changeset/fifty-hounds-press.md b/.changeset/fifty-hounds-press.md new file mode 100644 index 00000000..ae5133b9 --- /dev/null +++ b/.changeset/fifty-hounds-press.md @@ -0,0 +1,5 @@ +--- +"preact-render-to-string": patch +--- + +Enumerate draggable attribute, so the output isn't `draggable` but `draggable="true"` diff --git a/src/index.js b/src/index.js index a9309ec2..31bae09c 100644 --- a/src/index.js +++ b/src/index.js @@ -311,8 +311,13 @@ function _renderToString(vnode, context, isSvgMode, selectValue, parent) { name = name.toLowerCase().replace(XLINK_REPLACE_REGEX, 'xlink:'); } else if (UNSAFE_NAME.test(name)) { continue; - } else if (name[0] === 'a' && name[1] === 'r' && v != null) { - // serialize boolean aria-xyz attribute values as strings + } else if ( + ((name[0] === 'a' && name[1] === 'r') || name === 'draggable') && + v != null + ) { + // serialize boolean aria-xyz or draggable attribute values as strings + // `draggable` is an enumerated attribute and not Boolean. A value of `true` or `false` is mandatory + // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable v += ''; } } diff --git a/test/render.test.js b/test/render.test.js index 7ab0bcf8..0b501dd2 100644 --- a/test/render.test.js +++ b/test/render.test.js @@ -135,6 +135,13 @@ describe('render', () => { expect(rendered).to.equal(expected); }); + it('should include boolean draggable attribute', () => { + let rendered = render(
), + expected = `
`; + + expect(rendered).to.equal(expected); + }); + describe('attribute name sanitization', () => { it('should omit attributes with invalid names', () => { let rendered = render(