fix: use empty string value for boolean attributes on client side (fixes #381)

Author: pimlie

src/client/updaters/tag.js

@@ -1,3 +1,4 @@
+import { booleanHtmlAttributes } from '../../shared/constants'
 import { isUndefined } from '../../utils/is-type'
 import { toArray, includes } from '../../utils/array'
 
@@ -51,7 +52,7 @@ export default function updateTag(appId, { attribute, tagIDKeyName } = {}, type,
             const _attr = includes(dataAttributes, attr)
               ? `data-${attr}`
               : attr
-            const value = isUndefined(tag[attr]) ? '' : tag[attr]
+            const value = isUndefined(tag[attr]) || booleanHtmlAttributes.includes(attr) ? '' : tag[attr]
             newElement.setAttribute(_attr, value)
           }
         }

test/utils/meta-info-data.js

@@ -124,7 +124,7 @@ const metaInfoData = {
         return () => {
           if (side === 'client') {
             for (const index in this.expect) {
-              this.expect[index] = this.expect[index].replace(/(async|defer)/g, '$1="true"')
+              this.expect[index] = this.expect[index].replace(/(async|defer)/g, '$1=""')
             }
             const tags = defaultTest()
 
@@ -145,7 +145,7 @@ 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="test" src="src" async="true" defer="true" data-vmid="content2"></script>']
+      expect: ['<script data-vue-meta="test" src="src" async="" defer="" data-vmid="content2"></script>']
     },
     remove: {
       data: [],