fix: also render boolean attributes correctly for tags

Author: pimlie

src/server/generators/tag.js

@@ -1,4 +1,4 @@
-import { tagsWithoutEndTag, tagsWithInnerContent, tagAttributeAsInnerContent } from '../../shared/constants'
+import { booleanHtmlAttributes, tagsWithoutEndTag, tagsWithInnerContent, tagAttributeAsInnerContent } from '../../shared/constants'
 import { isUndefined } from '../../shared/typeof'
 
 /**
@@ -36,7 +36,7 @@ export default function tagGenerator({ attribute, tagIDKeyName } = {}, type, tag
             prefix = 'data-'
           }
 
-          return isUndefined(tag[attr])
+          return isUndefined(tag[attr]) || booleanHtmlAttributes.includes(attr)
             ? `${attrsStr} ${prefix}${attr}`
             : `${attrsStr} ${prefix}${attr}="${tag[attr]}"`
         }, '')

test/utils/meta-info-data.js

@@ -117,12 +117,15 @@ const metaInfoData = {
         { src: 'src', async: true, defer: true, body: true }
       ],
       expect: [
-        '<script data-vue-meta="true" src="src" async="true" defer="true" data-vmid="content"></script>',
-        '<script data-vue-meta="true" src="src" async="true" defer="true" data-body="true"></script>'
+        '<script data-vue-meta="true" src="src" async defer data-vmid="content"></script>',
+        '<script data-vue-meta="true" src="src" async defer data-body="true"></script>'
       ],
       test(side, defaultTest) {
         return () => {
           if (side === 'client') {
+            for (const index in this.expect) {
+              this.expect[index] = this.expect[index].replace(/(async|defer)/g, '$1="true"')
+            }
             const tags = defaultTest()
 
             expect(tags.addedTags.script[0].parentNode.tagName).toBe('HEAD')
@@ -139,15 +142,10 @@ const metaInfoData = {
         }
       }
     },
+    // this test only runs for client so we can directly expect wrong boolean attributes
     change: {
       data: [{ src: 'src', async: true, defer: true, [defaultOptions.tagIDKeyName]: 'content2' }],
-      expect: ['<script data-vue-meta="true" src="src" async="true" defer data-vmid="content2"></script>'],
-      test(side, defaultTest) {
-        if (side === 'client') {
-          // jsdom doesnt generate valid boolean attributes
-          this.expect[0] = this.expect[0].replace('defer', 'defer="true"')
-        }
-      }
+      expect: ['<script data-vue-meta="true" src="src" async="true" defer="true" data-vmid="content2"></script>']
     },
     remove: {
       data: [],