From e24ba5ba94e2c6924098286dee4f83ad428023b3 Mon Sep 17 00:00:00 2001
From: Sylvain Pollet-Villard <sylvain.pollet.villard@gmail.com>
Date: Fri, 6 Sep 2019 18:09:54 +0200
Subject: [PATCH 1/2] Boolean prop casting should use default value

---
 src/utils.js                  | 4 ++--
 test/fixtures/attributes.html | 8 ++++++--
 test/test.js                  | 9 +++++++--
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/utils.js b/src/utils.js
index 0834f03..c909f02 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -46,10 +46,10 @@ export function convertAttributeValue (value, name, { type } = {}) {
     if (value === 'true' || value === 'false') {
       return value === 'true'
     }
-    if (value === '' || value === name) {
+    if (value === '' || value === name || value != null) {
       return true
     }
-    return value != null
+    return value
   } else if (isNumber(type)) {
     const parsed = parseFloat(value, 10)
     return isNaN(parsed) ? value : parsed
diff --git a/test/fixtures/attributes.html b/test/fixtures/attributes.html
index de789f4..1a0276e 100644
--- a/test/fixtures/attributes.html
+++ b/test/fixtures/attributes.html
@@ -1,6 +1,6 @@
 <script src="../../node_modules/vue/dist/vue.js"></script>
 <script type="module">
-import wrap from '../../src/index.js'
+  import wrap from '../../src/index.js'
 
 customElements.define('my-element', wrap(Vue, {
   template: `<div>{{ foo }} {{ bar }} {{ someNumber }}</div>`,
@@ -11,6 +11,10 @@
     bar: {
       type: Boolean
     },
+    baz: {
+      type: Boolean,
+      default: true
+    },
     someNumber: {
       type: Number
     }
@@ -20,4 +24,4 @@
 window.el = document.querySelector('my-element')
 </script>
 
-<my-element foo="foo" bar="true" some-number="123"></my-element>
+<my-element foo="foo" bar="true" some-number="123"></my-element>
\ No newline at end of file
diff --git a/test/test.js b/test/test.js
index 9423d7a..21b0449 100644
--- a/test/test.js
+++ b/test/test.js
@@ -1,3 +1,4 @@
+/* global test expect el els */
 const launchPage = require('./setup')
 
 test('properties', async () => {
@@ -16,9 +17,9 @@ test('properties', async () => {
     el.foo = 234
     el.someProp = 'lol'
   })
-  const newFoo = await page.evaluate(()  => el.vueComponent.foo)
+  const newFoo = await page.evaluate(() => el.vueComponent.foo)
   expect(newFoo).toBe(234)
-  const newBar = await page.evaluate(()  => el.vueComponent.someProp)
+  const newBar = await page.evaluate(() => el.vueComponent.someProp)
   expect(newBar).toBe('lol')
 })
 
@@ -33,6 +34,10 @@ test('attributes', async () => {
   const bar = await page.evaluate(() => el.bar)
   expect(bar).toBe(true)
 
+  // absence of boolean with default: true
+  const baz = await page.evaluate(() => el.baz)
+  expect(baz).toBe(true)
+
   // some-number="123"
   const someNumber = await page.evaluate(() => el.someNumber)
   expect(someNumber).toBe(123)

From 20ba167f2a1eb8f9da58c94a79f0514648007213 Mon Sep 17 00:00:00 2001
From: sylvainpolletvillard <sylvain.pollet.villard@gmail.com>
Date: Thu, 11 Feb 2021 17:30:13 +0100
Subject: [PATCH 2/2] add a test case for setting false on a default true
 boolean property

---
 test/fixtures/attributes.html | 8 ++++++--
 test/test.js                  | 8 ++++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/test/fixtures/attributes.html b/test/fixtures/attributes.html
index 1a0276e..f851639 100644
--- a/test/fixtures/attributes.html
+++ b/test/fixtures/attributes.html
@@ -1,6 +1,6 @@
 <script src="../../node_modules/vue/dist/vue.js"></script>
 <script type="module">
-  import wrap from '../../src/index.js'
+import wrap from '../../src/index.js'
 
 customElements.define('my-element', wrap(Vue, {
   template: `<div>{{ foo }} {{ bar }} {{ someNumber }}</div>`,
@@ -15,6 +15,10 @@
       type: Boolean,
       default: true
     },
+    qux: {
+      type: Boolean,
+      default: true
+    },
     someNumber: {
       type: Number
     }
@@ -24,4 +28,4 @@
 window.el = document.querySelector('my-element')
 </script>
 
-<my-element foo="foo" bar="true" some-number="123"></my-element>
\ No newline at end of file
+<my-element foo="foo" bar="true" qux="false" some-number="123"></my-element>
diff --git a/test/test.js b/test/test.js
index 21b0449..9f60f7f 100644
--- a/test/test.js
+++ b/test/test.js
@@ -38,6 +38,10 @@ test('attributes', async () => {
   const baz = await page.evaluate(() => el.baz)
   expect(baz).toBe(true)
 
+  // boolean="false" with default: true
+  const qux = await page.evaluate(() => el.qux)
+  expect(qux).toBe(false)
+
   // some-number="123"
   const someNumber = await page.evaluate(() => el.someNumber)
   expect(someNumber).toBe(123)
@@ -46,12 +50,16 @@ test('attributes', async () => {
   await page.evaluate(() => {
     el.setAttribute('foo', 'foo')
     el.setAttribute('bar', 'false')
+    el.setAttribute('baz', 'false')
+    el.setAttribute('qux', '')
     el.setAttribute('some-number', '234')
   })
 
   // boolean="boolean"
   expect(await page.evaluate(() => el.foo)).toBe(true)
   expect(await page.evaluate(() => el.bar)).toBe(false)
+  expect(await page.evaluate(() => el.baz)).toBe(false)
+  expect(await page.evaluate(() => el.qux)).toBe(true)
   expect(await page.evaluate(() => el.someNumber)).toBe(234)
 })