diff --git a/dist/vue-wc-wrapper.global.js b/dist/vue-wc-wrapper.global.js
index db8253a..889a242 100644
--- a/dist/vue-wc-wrapper.global.js
+++ b/dist/vue-wc-wrapper.global.js
@@ -49,10 +49,10 @@ 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
@@ -169,13 +169,13 @@ function wrap (Vue, Component) {
class CustomElement extends HTMLElement {
constructor () {
- super();
- this.attachShadow({ mode: 'open' });
+ const self = super();
+ self.attachShadow({ mode: 'open' });
- const wrapper = this._wrapper = new Vue({
+ const wrapper = self._wrapper = new Vue({
name: 'shadow-root',
- customElement: this,
- shadowRoot: this.shadowRoot,
+ customElement: self,
+ shadowRoot: self.shadowRoot,
data () {
return {
props: {},
@@ -195,8 +195,8 @@ function wrap (Vue, Component) {
let hasChildrenChange = false;
for (let i = 0; i < mutations.length; i++) {
const m = mutations[i];
- if (isInitialized && m.type === 'attributes' && m.target === this) {
- syncAttribute(this, m.attributeName);
+ if (isInitialized && m.type === 'attributes' && m.target === self) {
+ syncAttribute(self, m.attributeName);
} else {
hasChildrenChange = true;
}
@@ -204,11 +204,11 @@ function wrap (Vue, Component) {
if (hasChildrenChange) {
wrapper.slotChildren = Object.freeze(toVNodes(
wrapper.$createElement,
- this.childNodes
+ self.childNodes
));
}
});
- observer.observe(this, {
+ observer.observe(self, {
childList: true,
subtree: true,
characterData: true,
diff --git a/dist/vue-wc-wrapper.js b/dist/vue-wc-wrapper.js
index 36b4469..721bf1f 100644
--- a/dist/vue-wc-wrapper.js
+++ b/dist/vue-wc-wrapper.js
@@ -46,10 +46,10 @@ 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
@@ -166,13 +166,13 @@ function wrap (Vue, Component) {
class CustomElement extends HTMLElement {
constructor () {
- super();
- this.attachShadow({ mode: 'open' });
+ const self = super();
+ self.attachShadow({ mode: 'open' });
- const wrapper = this._wrapper = new Vue({
+ const wrapper = self._wrapper = new Vue({
name: 'shadow-root',
- customElement: this,
- shadowRoot: this.shadowRoot,
+ customElement: self,
+ shadowRoot: self.shadowRoot,
data () {
return {
props: {},
@@ -192,8 +192,8 @@ function wrap (Vue, Component) {
let hasChildrenChange = false;
for (let i = 0; i < mutations.length; i++) {
const m = mutations[i];
- if (isInitialized && m.type === 'attributes' && m.target === this) {
- syncAttribute(this, m.attributeName);
+ if (isInitialized && m.type === 'attributes' && m.target === self) {
+ syncAttribute(self, m.attributeName);
} else {
hasChildrenChange = true;
}
@@ -201,11 +201,11 @@ function wrap (Vue, Component) {
if (hasChildrenChange) {
wrapper.slotChildren = Object.freeze(toVNodes(
wrapper.$createElement,
- this.childNodes
+ self.childNodes
));
}
});
- observer.observe(this, {
+ observer.observe(self, {
childList: true,
subtree: true,
characterData: true,
diff --git a/package.json b/package.json
index 83f4979..54b7473 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,13 @@
{
"name": "@vue/web-component-wrapper",
- "version": "1.2.0",
+ "version": "1.3.0",
"description": "wrap a vue component as a web component.",
"main": "dist/vue-wc-wrapper.js",
"unpkg": "dist/vue-wc-wrapper.global.js",
+ "types": "types/index.d.ts",
"files": [
- "dist"
+ "dist",
+ "types/*.d.ts"
],
"scripts": {
"test": "jest",
@@ -41,6 +43,7 @@
"yorkie": "^1.0.3"
},
"eslintConfig": {
+ "root": true,
"env": {
"browser": true
},
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..f851639 100644
--- a/test/fixtures/attributes.html
+++ b/test/fixtures/attributes.html
@@ -11,6 +11,14 @@
bar: {
type: Boolean
},
+ baz: {
+ type: Boolean,
+ default: true
+ },
+ qux: {
+ type: Boolean,
+ default: true
+ },
someNumber: {
type: Number
}
@@ -20,4 +28,4 @@
window.el = document.querySelector('my-element')
-
+
diff --git a/test/test.js b/test/test.js
index 9423d7a..9f60f7f 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,14 @@ 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)
+
+ // 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)
@@ -41,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)
})