@vue/web-component-wrapper
Advanced tools
Comparing version 1.0.0 to 1.1.0
{ | ||
"name": "@vue/web-component-wrapper", | ||
"version": "1.0.0", | ||
"version": "1.1.0", | ||
"description": "wrap a vue component as a web component.", | ||
"main": "src/index.js", | ||
"main": "dist/vue-wc-wrapper.js", | ||
"unpkg": "dist/vue-wc-wrapper.global.js", | ||
"scripts": { | ||
"test": "jest", | ||
"lint": "eslint src" | ||
"lint": "eslint src", | ||
"build": "rollup -c", | ||
"pretest": "yarn build" | ||
}, | ||
@@ -31,2 +34,3 @@ "repository": { | ||
"puppeteer": "^1.0.0", | ||
"rollup": "^0.55.3", | ||
"vue": "^2.5.13", | ||
@@ -33,0 +37,0 @@ "yorkie": "^1.0.3" |
@@ -1,2 +0,2 @@ | ||
# @vue/web-component-wrapper | ||
# @vue/web-component-wrapper [![CircleCI](https://circleci.com/gh/vuejs/vue-web-component-wrapper.svg?style=shield)](https://circleci.com/gh/vuejs/vue-web-component-wrapper) | ||
@@ -7,6 +7,24 @@ > Wrap and register a Vue component as a custom element. | ||
Requires [native ES2015 class support](https://caniuse.com/#feat=es6-class). IE11 and below are not supported. | ||
**[Requires ES2015 classes](https://caniuse.com/es6-class). IE11 and below not supported.** | ||
- **If targeting browsers that natively supports ES2015, but not native Web Components:** | ||
You will also need the [Shady DOM + Custom Elements polyfill](https://github.com/webcomponents/webcomponentsjs/blob/master/webcomponents-sd-ce.js). | ||
See caniuse for support on [Custom Elements v1](https://caniuse.com/#feat=custom-elementsv1) and [Shadow DOM v1](https://caniuse.com/#feat=shadowdomv1). | ||
- **Note on CSS Encapsulation When Using the Shady DOM polyfill** | ||
It's recommended to use [CSS Modules](https://vue-loader.vuejs.org/en/features/css-modules.html) instead of `<style scoped>` in your `*.vue` files if you intend to use the Shady DOM polyfill, because it does not offer real style encapsulation like Shadow DOM does, so external stylesheets may affect your components if not using hashed class names. | ||
- **If targeting browsers that does not support ES2015:** | ||
You might want to reconsider since you'll be better off not using Web Components in this case. | ||
## Usage | ||
- **`dist/vue-wc-wrapper.js`**: This file is in ES modules format. It's the default export for bundlers, and can be used in browsers with `<script type="module">`. | ||
- **`dist/vue-wc-wrapper.global.js`**: This is for old school `<script>` includes in browsers that do not support `<script type="module">` yet (exposes `wrapVueWebComponent` global). | ||
``` js | ||
@@ -13,0 +31,0 @@ import Vue from 'vue' |
@@ -45,4 +45,3 @@ import { | ||
super() | ||
const el = this | ||
this._wrapper = new Vue({ | ||
const wrapper = this._wrapper = new Vue({ | ||
name: 'shadow-root', | ||
@@ -53,6 +52,3 @@ customElement: this, | ||
props: getInitialProps(camelizedPropsList), | ||
slotChildren: Object.freeze(toVNodes( | ||
this.$createElement, | ||
el.childNodes | ||
)) | ||
slotChildren: [] | ||
} | ||
@@ -71,4 +67,4 @@ }, | ||
const observer = new MutationObserver(() => { | ||
this._wrapper.slotChildren = Object.freeze(toVNodes( | ||
this._wrapper.$createElement, | ||
wrapper.slotChildren = Object.freeze(toVNodes( | ||
wrapper.$createElement, | ||
this.childNodes | ||
@@ -90,11 +86,17 @@ )) | ||
connectedCallback () { | ||
if (!this._wrapper._isMounted) { | ||
const wrapper = this._wrapper | ||
if (!wrapper._isMounted) { | ||
this._shadowRoot = this.attachShadow({ mode: 'open' }) | ||
this._wrapper.$options.shadowRoot = this._shadowRoot | ||
this._wrapper.$mount() | ||
wrapper.$options.shadowRoot = this._shadowRoot | ||
// initialize children | ||
wrapper.slotChildren = Object.freeze(toVNodes( | ||
wrapper.$createElement, | ||
this.childNodes | ||
)) | ||
wrapper.$mount() | ||
// sync default props values to wrapper | ||
for (const key of camelizedPropsList) { | ||
this._wrapper.props[key] = this.vueComponent[key] | ||
} | ||
this._shadowRoot.appendChild(this._wrapper.$el) | ||
camelizedPropsList.forEach(key => { | ||
wrapper.props[key] = this.vueComponent[key] | ||
}) | ||
this._shadowRoot.appendChild(wrapper.$el) | ||
} else { | ||
@@ -101,0 +103,0 @@ callHooks(this.vueComponent, 'activated') |
@@ -13,5 +13,5 @@ const camelizeRE = /-(\w)/g | ||
const res = {} | ||
for (const key of propsList) { | ||
propsList.forEach(key => { | ||
res[key] = undefined | ||
} | ||
}) | ||
return res | ||
@@ -58,3 +58,7 @@ } | ||
export function toVNodes (h, children) { | ||
return [].map.call(children, node => toVNode(h, node)) | ||
const res = [] | ||
for (let i = 0; i < children.length; i++) { | ||
res.push(toVNode(h, children[i])) | ||
} | ||
return res | ||
} | ||
@@ -84,3 +88,4 @@ | ||
const res = {} | ||
for (const attr of node.attributes) { | ||
for (let i = 0; i < node.attributes.length; i++) { | ||
const attr = node.attributes[i] | ||
res[attr.nodeName] = attr.nodeValue | ||
@@ -87,0 +92,0 @@ } |
@@ -15,10 +15,6 @@ const puppeteer = require('puppeteer') | ||
const logs = [] | ||
const ready = new Promise(resolve => { | ||
page.on('console', msg => { | ||
logs.push(msg.text()) | ||
if (msg.text() === `ready`) resolve() | ||
}) | ||
page.on('console', msg => { | ||
logs.push(msg.text()) | ||
}) | ||
await page.goto(url) | ||
await ready | ||
return { browser, page, logs } | ||
@@ -25,0 +21,0 @@ } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
151562
15
717
89
9