From 8a002cb8d9d42b8c7265381d039bb5bbd29e27fa Mon Sep 17 00:00:00 2001 From: Galen Warren Date: Sat, 24 Mar 2018 22:50:29 -0400 Subject: [PATCH 1/4] transpile code during build --- .babelrc | 7 + .eslintignore | 1 + dist/vue-wc-wrapper.global.js | 505 ++++++++++++++++++---------------- dist/vue-wc-wrapper.js | 274 +++++++++--------- package.json | 3 + rollup.config.js | 7 + yarn.lock | 420 +++++++++++++++++++++++++++- 7 files changed, 840 insertions(+), 377 deletions(-) create mode 100644 .babelrc create mode 100644 .eslintignore diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..16c30ec --- /dev/null +++ b/.babelrc @@ -0,0 +1,7 @@ +{ + "presets": [ + ["env", { + "modules": false + }] + ] +} diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..1521c8b --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +dist diff --git a/dist/vue-wc-wrapper.global.js b/dist/vue-wc-wrapper.global.js index db8253a..a09c0e0 100644 --- a/dist/vue-wc-wrapper.global.js +++ b/dist/vue-wc-wrapper.global.js @@ -1,272 +1,289 @@ var wrapVueWebComponent = (function () { -'use strict'; - -const camelizeRE = /-(\w)/g; -const camelize = str => { - return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '') -}; - -const hyphenateRE = /\B([A-Z])/g; -const hyphenate = str => { - return str.replace(hyphenateRE, '-$1').toLowerCase() -}; - -function getInitialProps (propsList) { - const res = {}; - propsList.forEach(key => { - res[key] = undefined; - }); - return res -} - -function injectHook (options, key, hook) { - options[key] = [].concat(options[key] || []); - options[key].unshift(hook); -} - -function callHooks (vm, hook) { - if (vm) { - const hooks = vm.$options[hook] || []; - hooks.forEach(hook => { - hook.call(vm); - }); + 'use strict' + + const camelizeRE = /-(\w)/g + const camelize = str => { + return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '') } -} - -function createCustomEvent (name, args) { - return new CustomEvent(name, { - bubbles: false, - cancelable: false, - detail: args - }) -} - -const isBoolean = val => /function Boolean/.test(String(val)); -const isNumber = val => /function Number/.test(String(val)); - -function convertAttributeValue (value, name, { type } = {}) { - if (isBoolean(type)) { - if (value === 'true' || value === 'false') { - return value === 'true' - } - if (value === '' || value === name) { - return true + + const hyphenateRE = /\B([A-Z])/g + const hyphenate = str => { + return str.replace(hyphenateRE, '-$1').toLowerCase() + } + + function getInitialProps (propsList) { + const res = {} + propsList.forEach(key => { + res[key] = undefined + }) + return res + } + + function injectHook (options, key, hook) { + options[key] = [].concat(options[key] || []) + options[key].unshift(hook) + } + + function callHooks (vm, hook) { + if (vm) { + const hooks = vm.$options[hook] || [] + hooks.forEach(hook => { + hook.call(vm) + }) } - return value != null - } else if (isNumber(type)) { - const parsed = parseFloat(value, 10); - return isNaN(parsed) ? value : parsed - } else { - return value } -} -function toVNodes (h, children) { - const res = []; - for (let i = 0, l = children.length; i < l; i++) { - res.push(toVNode(h, children[i])); + function createCustomEvent (name, args) { + return new CustomEvent(name, { + bubbles: false, + cancelable: false, + detail: args + }) } - return res -} - -function toVNode (h, node) { - if (node.nodeType === 3) { - return node.data.trim() ? node.data : null - } else if (node.nodeType === 1) { - const data = { - attrs: getAttributes(node), - domProps: { - innerHTML: node.innerHTML + + const isBoolean = val => /function Boolean/.test(String(val)) + const isNumber = val => /function Number/.test(String(val)) + + function convertAttributeValue (value, name, { type } = {}) { + if (isBoolean(type)) { + if (value === 'true' || value === 'false') { + return value === 'true' + } + if (value === '' || value === name) { + return true } - }; - if (data.attrs.slot) { - data.slot = data.attrs.slot; - delete data.attrs.slot; + return value != null + } else if (isNumber(type)) { + const parsed = parseFloat(value, 10) + return isNaN(parsed) ? value : parsed + } else { + return value } - return h(node.tagName, data) - } else { - return null } -} -function getAttributes (node) { - const res = {}; - for (let i = 0, l = node.attributes.length; i < l; i++) { - const attr = node.attributes[i]; - res[attr.nodeName] = attr.nodeValue; + function toVNodes (h, children) { + const res = [] + for (let i = 0, l = children.length; i < l; i++) { + res.push(toVNode(h, children[i])) + } + return res } - return res -} - -function wrap (Vue, Component) { - const isAsync = typeof Component === 'function' && !Component.cid; - let isInitialized = false; - let hyphenatedPropsList; - let camelizedPropsList; - let camelizedPropsMap; - - function initialize (Component) { - if (isInitialized) return - - const options = typeof Component === 'function' - ? Component.options - : Component; - - // extract props info - const propsList = Array.isArray(options.props) - ? options.props - : Object.keys(options.props || {}); - hyphenatedPropsList = propsList.map(hyphenate); - camelizedPropsList = propsList.map(camelize); - const originalPropsAsObject = Array.isArray(options.props) ? {} : options.props || {}; - camelizedPropsMap = camelizedPropsList.reduce((map, key, i) => { - map[key] = originalPropsAsObject[propsList[i]]; - return map - }, {}); - - // proxy $emit to native DOM events - injectHook(options, 'beforeCreate', function () { - const emit = this.$emit; - this.$emit = (name, ...args) => { - this.$root.$options.customElement.dispatchEvent(createCustomEvent(name, args)); - return emit.call(this, name, ...args) - }; - }); - - injectHook(options, 'created', function () { - // sync default props values to wrapper on created - camelizedPropsList.forEach(key => { - this.$root.props[key] = this[key]; - }); - }); - - // proxy props as Element properties - camelizedPropsList.forEach(key => { - Object.defineProperty(CustomElement.prototype, key, { - get () { - return this._wrapper.props[key] - }, - set (newVal) { - this._wrapper.props[key] = newVal; - }, - enumerable: false, - configurable: true - }); - }); - - isInitialized = true; + + function toVNode (h, node) { + if (node.nodeType === 3) { + return node.data.trim() ? node.data : null + } else if (node.nodeType === 1) { + const data = { + attrs: getAttributes(node), + domProps: { + innerHTML: node.innerHTML + } + } + if (data.attrs.slot) { + data.slot = data.attrs.slot + delete data.attrs.slot + } + return h(node.tagName, data) + } else { + return null + } } - function syncAttribute (el, key) { - const camelized = camelize(key); - const value = el.hasAttribute(key) ? el.getAttribute(key) : undefined; - el._wrapper.props[camelized] = convertAttributeValue( - value, - key, - camelizedPropsMap[camelized] - ); + function getAttributes (node) { + const res = {} + for (let i = 0, l = node.attributes.length; i < l; i++) { + const attr = node.attributes[i] + res[attr.nodeName] = attr.nodeValue + } + return res } - class CustomElement extends HTMLElement { - constructor () { - super(); - this.attachShadow({ mode: 'open' }); - - const wrapper = this._wrapper = new Vue({ - name: 'shadow-root', - customElement: this, - shadowRoot: this.shadowRoot, - data () { - return { - props: {}, - slotChildren: [] - } - }, - render (h) { - return h(Component, { - ref: 'inner', - props: this.props - }, this.slotChildren) - } - }); - - // Use MutationObserver to react to future attribute & slot content change - const observer = new MutationObserver(mutations => { - 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); - } else { - hasChildrenChange = true; + var _createClass = (function () { function defineProperties (target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor) } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor } }()) + + function _classCallCheck (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function') } } + + function _possibleConstructorReturn (self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called") } return call && (typeof call === 'object' || typeof call === 'function') ? call : self } + + function _inherits (subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass) } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true }}); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass } + + function wrap (Vue, Component) { + var isAsync = typeof Component === 'function' && !Component.cid + var isInitialized = false + var hyphenatedPropsList = void 0 + var camelizedPropsList = void 0 + var camelizedPropsMap = void 0 + + function initialize (Component) { + if (isInitialized) return + + var options = typeof Component === 'function' ? Component.options : Component + + // extract props info + var propsList = Array.isArray(options.props) ? options.props : Object.keys(options.props || {}) + hyphenatedPropsList = propsList.map(hyphenate) + camelizedPropsList = propsList.map(camelize) + var originalPropsAsObject = Array.isArray(options.props) ? {} : options.props || {} + camelizedPropsMap = camelizedPropsList.reduce(function (map, key, i) { + map[key] = originalPropsAsObject[propsList[i]] + return map + }, {}) + + // proxy $emit to native DOM events + injectHook(options, 'beforeCreate', function () { + var _this = this + + var emit = this.$emit + this.$emit = function (name) { + for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key] } + + _this.$root.$options.customElement.dispatchEvent(createCustomEvent(name, args)) + return emit.call.apply(emit, [_this, name].concat(args)) } - if (hasChildrenChange) { - wrapper.slotChildren = Object.freeze(toVNodes( - wrapper.$createElement, - this.childNodes - )); - } - }); - observer.observe(this, { - childList: true, - subtree: true, - characterData: true, - attributes: true - }); + }) + + injectHook(options, 'created', function () { + var _this2 = this + + // sync default props values to wrapper on created + camelizedPropsList.forEach(function (key) { + _this2.$root.props[key] = _this2[key] + }) + }) + + // proxy props as Element properties + camelizedPropsList.forEach(function (key) { + Object.defineProperty(CustomElement.prototype, key, { + get: function get () { + return this._wrapper.props[key] + }, + set: function set (newVal) { + this._wrapper.props[key] = newVal + }, + + enumerable: false, + configurable: true + }) + }) + + isInitialized = true } - get vueComponent () { - return this._wrapper.$refs.inner + function syncAttribute (el, key) { + var camelized = camelize(key) + var value = el.hasAttribute(key) ? el.getAttribute(key) : undefined + el._wrapper.props[camelized] = convertAttributeValue(value, key, camelizedPropsMap[camelized]) } - connectedCallback () { - const wrapper = this._wrapper; - if (!wrapper._isMounted) { - // initialize attributes - const syncInitialAttributes = () => { - wrapper.props = getInitialProps(camelizedPropsList); - hyphenatedPropsList.forEach(key => { - syncAttribute(this, key); - }); - }; - - if (isInitialized) { - syncInitialAttributes(); - } else { - // async & unresolved - Component().then(resolved => { - if (resolved.__esModule || resolved[Symbol.toStringTag] === 'Module') { - resolved = resolved.default; + var CustomElement = (function (_HTMLElement) { + _inherits(CustomElement, _HTMLElement) + + function CustomElement () { + _classCallCheck(this, CustomElement) + + var _this3 = _possibleConstructorReturn(this, (CustomElement.__proto__ || Object.getPrototypeOf(CustomElement)).call(this)) + + _this3.attachShadow({ mode: 'open' }) + + var wrapper = _this3._wrapper = new Vue({ + name: 'shadow-root', + customElement: _this3, + shadowRoot: _this3.shadowRoot, + data: function data () { + return { + props: {}, + slotChildren: [] } - initialize(resolved); - syncInitialAttributes(); - }); - } - // initialize children - wrapper.slotChildren = Object.freeze(toVNodes( - wrapper.$createElement, - this.childNodes - )); - wrapper.$mount(); - this.shadowRoot.appendChild(wrapper.$el); - } else { - callHooks(this.vueComponent, 'activated'); + }, + render: function render (h) { + return h(Component, { + ref: 'inner', + props: this.props + }, this.slotChildren) + } + }) + + // Use MutationObserver to react to future attribute & slot content change + var observer = new MutationObserver(function (mutations) { + var hasChildrenChange = false + for (var i = 0; i < mutations.length; i++) { + var m = mutations[i] + if (isInitialized && m.type === 'attributes' && m.target === _this3) { + syncAttribute(_this3, m.attributeName) + } else { + hasChildrenChange = true + } + } + if (hasChildrenChange) { + wrapper.slotChildren = Object.freeze(toVNodes(wrapper.$createElement, _this3.childNodes)) + } + }) + observer.observe(_this3, { + childList: true, + subtree: true, + characterData: true, + attributes: true + }) + return _this3 } - } - disconnectedCallback () { - callHooks(this.vueComponent, 'deactivated'); - } - } + _createClass(CustomElement, [{ + key: 'connectedCallback', + value: function connectedCallback () { + var _this4 = this - if (!isAsync) { - initialize(Component); - } + var wrapper = this._wrapper + if (!wrapper._isMounted) { + // initialize attributes + var syncInitialAttributes = function syncInitialAttributes () { + wrapper.props = getInitialProps(camelizedPropsList) + hyphenatedPropsList.forEach(function (key) { + syncAttribute(_this4, key) + }) + } - return CustomElement -} + if (isInitialized) { + syncInitialAttributes() + } else { + // async & unresolved + Component().then(function (resolved) { + if (resolved.__esModule || resolved[Symbol.toStringTag] === 'Module') { + resolved = resolved.default + } + initialize(resolved) + syncInitialAttributes() + }) + } + // initialize children + wrapper.slotChildren = Object.freeze(toVNodes(wrapper.$createElement, this.childNodes)) + wrapper.$mount() + this.shadowRoot.appendChild(wrapper.$el) + } else { + callHooks(this.vueComponent, 'activated') + } + } + }, { + key: 'disconnectedCallback', + value: function disconnectedCallback () { + callHooks(this.vueComponent, 'deactivated') + } + }, { + key: 'vueComponent', + get: function get () { + return this._wrapper.$refs.inner + } + }]) + + return CustomElement + }(HTMLElement)) -return wrap; + if (!isAsync) { + initialize(Component) + } + + return CustomElement + } -}()); + return wrap +}()) diff --git a/dist/vue-wc-wrapper.js b/dist/vue-wc-wrapper.js index 36b4469..baa2c47 100644 --- a/dist/vue-wc-wrapper.js +++ b/dist/vue-wc-wrapper.js @@ -1,32 +1,32 @@ -const camelizeRE = /-(\w)/g; +const camelizeRE = /-(\w)/g const camelize = str => { return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '') -}; +} -const hyphenateRE = /\B([A-Z])/g; +const hyphenateRE = /\B([A-Z])/g const hyphenate = str => { return str.replace(hyphenateRE, '-$1').toLowerCase() -}; +} function getInitialProps (propsList) { - const res = {}; + const res = {} propsList.forEach(key => { - res[key] = undefined; - }); + res[key] = undefined + }) return res } function injectHook (options, key, hook) { - options[key] = [].concat(options[key] || []); - options[key].unshift(hook); + options[key] = [].concat(options[key] || []) + options[key].unshift(hook) } function callHooks (vm, hook) { if (vm) { - const hooks = vm.$options[hook] || []; + const hooks = vm.$options[hook] || [] hooks.forEach(hook => { - hook.call(vm); - }); + hook.call(vm) + }) } } @@ -38,8 +38,8 @@ function createCustomEvent (name, args) { }) } -const isBoolean = val => /function Boolean/.test(String(val)); -const isNumber = val => /function Number/.test(String(val)); +const isBoolean = val => /function Boolean/.test(String(val)) +const isNumber = val => /function Number/.test(String(val)) function convertAttributeValue (value, name, { type } = {}) { if (isBoolean(type)) { @@ -51,7 +51,7 @@ function convertAttributeValue (value, name, { type } = {}) { } return value != null } else if (isNumber(type)) { - const parsed = parseFloat(value, 10); + const parsed = parseFloat(value, 10) return isNaN(parsed) ? value : parsed } else { return value @@ -59,9 +59,9 @@ function convertAttributeValue (value, name, { type } = {}) { } function toVNodes (h, children) { - const res = []; + const res = [] for (let i = 0, l = children.length; i < l; i++) { - res.push(toVNode(h, children[i])); + res.push(toVNode(h, children[i])) } return res } @@ -75,10 +75,10 @@ function toVNode (h, node) { domProps: { innerHTML: node.innerHTML } - }; + } if (data.attrs.slot) { - data.slot = data.attrs.slot; - delete data.attrs.slot; + data.slot = data.attrs.slot + delete data.attrs.slot } return h(node.tagName, data) } else { @@ -87,181 +87,199 @@ function toVNode (h, node) { } function getAttributes (node) { - const res = {}; + const res = {} for (let i = 0, l = node.attributes.length; i < l; i++) { - const attr = node.attributes[i]; - res[attr.nodeName] = attr.nodeValue; + const attr = node.attributes[i] + res[attr.nodeName] = attr.nodeValue } return res } +var _createClass = (function () { function defineProperties (target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor) } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor } }()) + +function _classCallCheck (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function') } } + +function _possibleConstructorReturn (self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called") } return call && (typeof call === 'object' || typeof call === 'function') ? call : self } + +function _inherits (subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass) } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true }}); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass } + function wrap (Vue, Component) { - const isAsync = typeof Component === 'function' && !Component.cid; - let isInitialized = false; - let hyphenatedPropsList; - let camelizedPropsList; - let camelizedPropsMap; + var isAsync = typeof Component === 'function' && !Component.cid + var isInitialized = false + var hyphenatedPropsList = void 0 + var camelizedPropsList = void 0 + var camelizedPropsMap = void 0 function initialize (Component) { if (isInitialized) return - const options = typeof Component === 'function' - ? Component.options - : Component; + var options = typeof Component === 'function' ? Component.options : Component // extract props info - const propsList = Array.isArray(options.props) - ? options.props - : Object.keys(options.props || {}); - hyphenatedPropsList = propsList.map(hyphenate); - camelizedPropsList = propsList.map(camelize); - const originalPropsAsObject = Array.isArray(options.props) ? {} : options.props || {}; - camelizedPropsMap = camelizedPropsList.reduce((map, key, i) => { - map[key] = originalPropsAsObject[propsList[i]]; + var propsList = Array.isArray(options.props) ? options.props : Object.keys(options.props || {}) + hyphenatedPropsList = propsList.map(hyphenate) + camelizedPropsList = propsList.map(camelize) + var originalPropsAsObject = Array.isArray(options.props) ? {} : options.props || {} + camelizedPropsMap = camelizedPropsList.reduce(function (map, key, i) { + map[key] = originalPropsAsObject[propsList[i]] return map - }, {}); + }, {}) // proxy $emit to native DOM events injectHook(options, 'beforeCreate', function () { - const emit = this.$emit; - this.$emit = (name, ...args) => { - this.$root.$options.customElement.dispatchEvent(createCustomEvent(name, args)); - return emit.call(this, name, ...args) - }; - }); + var _this = this + + var emit = this.$emit + this.$emit = function (name) { + for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key] + } + + _this.$root.$options.customElement.dispatchEvent(createCustomEvent(name, args)) + return emit.call.apply(emit, [_this, name].concat(args)) + } + }) injectHook(options, 'created', function () { + var _this2 = this + // sync default props values to wrapper on created - camelizedPropsList.forEach(key => { - this.$root.props[key] = this[key]; - }); - }); + camelizedPropsList.forEach(function (key) { + _this2.$root.props[key] = _this2[key] + }) + }) // proxy props as Element properties - camelizedPropsList.forEach(key => { + camelizedPropsList.forEach(function (key) { Object.defineProperty(CustomElement.prototype, key, { - get () { + get: function get () { return this._wrapper.props[key] }, - set (newVal) { - this._wrapper.props[key] = newVal; + set: function set (newVal) { + this._wrapper.props[key] = newVal }, + enumerable: false, configurable: true - }); - }); + }) + }) - isInitialized = true; + isInitialized = true } function syncAttribute (el, key) { - const camelized = camelize(key); - const value = el.hasAttribute(key) ? el.getAttribute(key) : undefined; - el._wrapper.props[camelized] = convertAttributeValue( - value, - key, - camelizedPropsMap[camelized] - ); + var camelized = camelize(key) + var value = el.hasAttribute(key) ? el.getAttribute(key) : undefined + el._wrapper.props[camelized] = convertAttributeValue(value, key, camelizedPropsMap[camelized]) } - class CustomElement extends HTMLElement { - constructor () { - super(); - this.attachShadow({ mode: 'open' }); + var CustomElement = (function (_HTMLElement) { + _inherits(CustomElement, _HTMLElement) - const wrapper = this._wrapper = new Vue({ + function CustomElement () { + _classCallCheck(this, CustomElement) + + var _this3 = _possibleConstructorReturn(this, (CustomElement.__proto__ || Object.getPrototypeOf(CustomElement)).call(this)) + + _this3.attachShadow({ mode: 'open' }) + + var wrapper = _this3._wrapper = new Vue({ name: 'shadow-root', - customElement: this, - shadowRoot: this.shadowRoot, - data () { + customElement: _this3, + shadowRoot: _this3.shadowRoot, + data: function data () { return { props: {}, slotChildren: [] } }, - render (h) { + render: function render (h) { return h(Component, { ref: 'inner', props: this.props }, this.slotChildren) } - }); + }) // Use MutationObserver to react to future attribute & slot content change - const observer = new MutationObserver(mutations => { - 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); + var observer = new MutationObserver(function (mutations) { + var hasChildrenChange = false + for (var i = 0; i < mutations.length; i++) { + var m = mutations[i] + if (isInitialized && m.type === 'attributes' && m.target === _this3) { + syncAttribute(_this3, m.attributeName) } else { - hasChildrenChange = true; + hasChildrenChange = true } } if (hasChildrenChange) { - wrapper.slotChildren = Object.freeze(toVNodes( - wrapper.$createElement, - this.childNodes - )); + wrapper.slotChildren = Object.freeze(toVNodes(wrapper.$createElement, _this3.childNodes)) } - }); - observer.observe(this, { + }) + observer.observe(_this3, { childList: true, subtree: true, characterData: true, attributes: true - }); + }) + return _this3 } - get vueComponent () { - return this._wrapper.$refs.inner - } + _createClass(CustomElement, [{ + key: 'connectedCallback', + value: function connectedCallback () { + var _this4 = this - connectedCallback () { - const wrapper = this._wrapper; - if (!wrapper._isMounted) { - // initialize attributes - const syncInitialAttributes = () => { - wrapper.props = getInitialProps(camelizedPropsList); - hyphenatedPropsList.forEach(key => { - syncAttribute(this, key); - }); - }; - - if (isInitialized) { - syncInitialAttributes(); + var wrapper = this._wrapper + if (!wrapper._isMounted) { + // initialize attributes + var syncInitialAttributes = function syncInitialAttributes () { + wrapper.props = getInitialProps(camelizedPropsList) + hyphenatedPropsList.forEach(function (key) { + syncAttribute(_this4, key) + }) + } + + if (isInitialized) { + syncInitialAttributes() + } else { + // async & unresolved + Component().then(function (resolved) { + if (resolved.__esModule || resolved[Symbol.toStringTag] === 'Module') { + resolved = resolved.default + } + initialize(resolved) + syncInitialAttributes() + }) + } + // initialize children + wrapper.slotChildren = Object.freeze(toVNodes(wrapper.$createElement, this.childNodes)) + wrapper.$mount() + this.shadowRoot.appendChild(wrapper.$el) } else { - // async & unresolved - Component().then(resolved => { - if (resolved.__esModule || resolved[Symbol.toStringTag] === 'Module') { - resolved = resolved.default; - } - initialize(resolved); - syncInitialAttributes(); - }); + callHooks(this.vueComponent, 'activated') } - // initialize children - wrapper.slotChildren = Object.freeze(toVNodes( - wrapper.$createElement, - this.childNodes - )); - wrapper.$mount(); - this.shadowRoot.appendChild(wrapper.$el); - } else { - callHooks(this.vueComponent, 'activated'); } - } + }, { + key: 'disconnectedCallback', + value: function disconnectedCallback () { + callHooks(this.vueComponent, 'deactivated') + } + }, { + key: 'vueComponent', + get: function get () { + return this._wrapper.$refs.inner + } + }]) - disconnectedCallback () { - callHooks(this.vueComponent, 'deactivated'); - } - } + return CustomElement + }(HTMLElement)) if (!isAsync) { - initialize(Component); + initialize(Component) } return CustomElement } -export default wrap; +export default wrap diff --git a/package.json b/package.json index f7ec743..2956316 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,8 @@ }, "homepage": "https://github.com/vuejs/web-component-wrapper#readme", "devDependencies": { + "babel-core": "^6.22.1", + "babel-preset-env": "^1.6.1", "eslint": "^4.16.0", "eslint-plugin-vue-libs": "^2.1.0", "http-server": "^0.11.1", @@ -35,6 +37,7 @@ "lint-staged": "^6.1.0", "puppeteer": "^1.0.0", "rollup": "^0.55.3", + "rollup-plugin-babel": "^3.0.3", "vue": "^2.5.13", "yorkie": "^1.0.3" }, diff --git a/rollup.config.js b/rollup.config.js index b9aabda..21bc2fb 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,3 +1,5 @@ +import babel from 'rollup-plugin-babel' + export default { input: 'src/index.js', output: [ @@ -10,5 +12,10 @@ export default { name: 'wrapVueWebComponent', file: 'dist/vue-wc-wrapper.global.js' } + ], + plugins: [ + babel({ + include: 'src/index.js' + }) ] } diff --git a/yarn.lock b/yarn.lock index 2622dc1..8f4f537 100644 --- a/yarn.lock +++ b/yarn.lock @@ -226,7 +226,7 @@ babel-code-frame@^6.22.0, babel-code-frame@^6.26.0: esutils "^2.0.2" js-tokens "^3.0.2" -babel-core@^6.0.0, babel-core@^6.26.0: +babel-core@^6.0.0, babel-core@^6.22.1, babel-core@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.0.tgz#af32f78b31a6fcef119c87b0fd8d9753f03a0bb8" dependencies: @@ -263,6 +263,100 @@ babel-generator@^6.18.0, babel-generator@^6.26.0: source-map "^0.5.6" trim-right "^1.0.1" +babel-helper-builder-binary-assignment-operator-visitor@^6.24.1: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-helper-builder-binary-assignment-operator-visitor/-/babel-helper-builder-binary-assignment-operator-visitor-6.24.1.tgz#cce4517ada356f4220bcae8a02c2b346f9a56664" + dependencies: + babel-helper-explode-assignable-expression "^6.24.1" + babel-runtime "^6.22.0" + babel-types "^6.24.1" + +babel-helper-call-delegate@^6.24.1: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-helper-call-delegate/-/babel-helper-call-delegate-6.24.1.tgz#ece6aacddc76e41c3461f88bfc575bd0daa2df8d" + dependencies: + babel-helper-hoist-variables "^6.24.1" + babel-runtime "^6.22.0" + babel-traverse "^6.24.1" + babel-types "^6.24.1" + +babel-helper-define-map@^6.24.1: + version "6.26.0" + resolved "https://registry.yarnpkg.com/babel-helper-define-map/-/babel-helper-define-map-6.26.0.tgz#a5f56dab41a25f97ecb498c7ebaca9819f95be5f" + dependencies: + babel-helper-function-name "^6.24.1" + babel-runtime "^6.26.0" + babel-types "^6.26.0" + lodash "^4.17.4" + +babel-helper-explode-assignable-expression@^6.24.1: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-helper-explode-assignable-expression/-/babel-helper-explode-assignable-expression-6.24.1.tgz#f25b82cf7dc10433c55f70592d5746400ac22caa" + dependencies: + babel-runtime "^6.22.0" + babel-traverse "^6.24.1" + babel-types "^6.24.1" + +babel-helper-function-name@^6.24.1: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-helper-function-name/-/babel-helper-function-name-6.24.1.tgz#d3475b8c03ed98242a25b48351ab18399d3580a9" + dependencies: + babel-helper-get-function-arity "^6.24.1" + babel-runtime "^6.22.0" + babel-template "^6.24.1" + babel-traverse "^6.24.1" + babel-types "^6.24.1" + +babel-helper-get-function-arity@^6.24.1: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.24.1.tgz#8f7782aa93407c41d3aa50908f89b031b1b6853d" + dependencies: + babel-runtime "^6.22.0" + babel-types "^6.24.1" + +babel-helper-hoist-variables@^6.24.1: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-helper-hoist-variables/-/babel-helper-hoist-variables-6.24.1.tgz#1ecb27689c9d25513eadbc9914a73f5408be7a76" + dependencies: + babel-runtime "^6.22.0" + babel-types "^6.24.1" + +babel-helper-optimise-call-expression@^6.24.1: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-helper-optimise-call-expression/-/babel-helper-optimise-call-expression-6.24.1.tgz#f7a13427ba9f73f8f4fa993c54a97882d1244257" + dependencies: + babel-runtime "^6.22.0" + babel-types "^6.24.1" + +babel-helper-regex@^6.24.1: + version "6.26.0" + resolved "https://registry.yarnpkg.com/babel-helper-regex/-/babel-helper-regex-6.26.0.tgz#325c59f902f82f24b74faceed0363954f6495e72" + dependencies: + babel-runtime "^6.26.0" + babel-types "^6.26.0" + lodash "^4.17.4" + +babel-helper-remap-async-to-generator@^6.24.1: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-helper-remap-async-to-generator/-/babel-helper-remap-async-to-generator-6.24.1.tgz#5ec581827ad723fecdd381f1c928390676e4551b" + dependencies: + babel-helper-function-name "^6.24.1" + babel-runtime "^6.22.0" + babel-template "^6.24.1" + babel-traverse "^6.24.1" + babel-types "^6.24.1" + +babel-helper-replace-supers@^6.24.1: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-helper-replace-supers/-/babel-helper-replace-supers-6.24.1.tgz#bf6dbfe43938d17369a213ca8a8bf74b6a90ab1a" + dependencies: + babel-helper-optimise-call-expression "^6.24.1" + babel-messages "^6.23.0" + babel-runtime "^6.22.0" + babel-template "^6.24.1" + babel-traverse "^6.24.1" + babel-types "^6.24.1" + babel-helpers@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.24.1.tgz#3471de9caec388e5c850e597e58a26ddf37602b2" @@ -283,6 +377,12 @@ babel-messages@^6.23.0: dependencies: babel-runtime "^6.22.0" +babel-plugin-check-es2015-constants@^6.22.0: + version "6.22.0" + resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz#35157b101426fd2ffd3da3f75c7d1e91835bbf8a" + dependencies: + babel-runtime "^6.22.0" + babel-plugin-istanbul@^4.1.5: version "4.1.5" resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.5.tgz#6760cdd977f411d3e175bb064f2bc327d99b2b6e" @@ -295,10 +395,254 @@ babel-plugin-jest-hoist@^22.1.0: version "22.1.0" resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-22.1.0.tgz#c1281dd7887d77a1711dc760468c3b8285dde9ee" +babel-plugin-syntax-async-functions@^6.8.0: + version "6.13.0" + resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95" + +babel-plugin-syntax-exponentiation-operator@^6.8.0: + version "6.13.0" + resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de" + babel-plugin-syntax-object-rest-spread@^6.13.0: version "6.13.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5" +babel-plugin-syntax-trailing-function-commas@^6.22.0: + version "6.22.0" + resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz#ba0360937f8d06e40180a43fe0d5616fff532cf3" + +babel-plugin-transform-async-to-generator@^6.22.0: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.24.1.tgz#6536e378aff6cb1d5517ac0e40eb3e9fc8d08761" + dependencies: + babel-helper-remap-async-to-generator "^6.24.1" + babel-plugin-syntax-async-functions "^6.8.0" + babel-runtime "^6.22.0" + +babel-plugin-transform-es2015-arrow-functions@^6.22.0: + version "6.22.0" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221" + dependencies: + babel-runtime "^6.22.0" + +babel-plugin-transform-es2015-block-scoped-functions@^6.22.0: + version "6.22.0" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoped-functions/-/babel-plugin-transform-es2015-block-scoped-functions-6.22.0.tgz#bbc51b49f964d70cb8d8e0b94e820246ce3a6141" + dependencies: + babel-runtime "^6.22.0" + +babel-plugin-transform-es2015-block-scoping@^6.23.0: + version "6.26.0" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.26.0.tgz#d70f5299c1308d05c12f463813b0a09e73b1895f" + dependencies: + babel-runtime "^6.26.0" + babel-template "^6.26.0" + babel-traverse "^6.26.0" + babel-types "^6.26.0" + lodash "^4.17.4" + +babel-plugin-transform-es2015-classes@^6.23.0: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.24.1.tgz#5a4c58a50c9c9461e564b4b2a3bfabc97a2584db" + dependencies: + babel-helper-define-map "^6.24.1" + babel-helper-function-name "^6.24.1" + babel-helper-optimise-call-expression "^6.24.1" + babel-helper-replace-supers "^6.24.1" + babel-messages "^6.23.0" + babel-runtime "^6.22.0" + babel-template "^6.24.1" + babel-traverse "^6.24.1" + babel-types "^6.24.1" + +babel-plugin-transform-es2015-computed-properties@^6.22.0: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.24.1.tgz#6fe2a8d16895d5634f4cd999b6d3480a308159b3" + dependencies: + babel-runtime "^6.22.0" + babel-template "^6.24.1" + +babel-plugin-transform-es2015-destructuring@^6.23.0: + version "6.23.0" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.23.0.tgz#997bb1f1ab967f682d2b0876fe358d60e765c56d" + dependencies: + babel-runtime "^6.22.0" + +babel-plugin-transform-es2015-duplicate-keys@^6.22.0: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.24.1.tgz#73eb3d310ca969e3ef9ec91c53741a6f1576423e" + dependencies: + babel-runtime "^6.22.0" + babel-types "^6.24.1" + +babel-plugin-transform-es2015-for-of@^6.23.0: + version "6.23.0" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.23.0.tgz#f47c95b2b613df1d3ecc2fdb7573623c75248691" + dependencies: + babel-runtime "^6.22.0" + +babel-plugin-transform-es2015-function-name@^6.22.0: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-function-name/-/babel-plugin-transform-es2015-function-name-6.24.1.tgz#834c89853bc36b1af0f3a4c5dbaa94fd8eacaa8b" + dependencies: + babel-helper-function-name "^6.24.1" + babel-runtime "^6.22.0" + babel-types "^6.24.1" + +babel-plugin-transform-es2015-literals@^6.22.0: + version "6.22.0" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-literals/-/babel-plugin-transform-es2015-literals-6.22.0.tgz#4f54a02d6cd66cf915280019a31d31925377ca2e" + dependencies: + babel-runtime "^6.22.0" + +babel-plugin-transform-es2015-modules-amd@^6.22.0, babel-plugin-transform-es2015-modules-amd@^6.24.1: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.24.1.tgz#3b3e54017239842d6d19c3011c4bd2f00a00d154" + dependencies: + babel-plugin-transform-es2015-modules-commonjs "^6.24.1" + babel-runtime "^6.22.0" + babel-template "^6.24.1" + +babel-plugin-transform-es2015-modules-commonjs@^6.23.0, babel-plugin-transform-es2015-modules-commonjs@^6.24.1: + version "6.26.0" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.0.tgz#0d8394029b7dc6abe1a97ef181e00758dd2e5d8a" + dependencies: + babel-plugin-transform-strict-mode "^6.24.1" + babel-runtime "^6.26.0" + babel-template "^6.26.0" + babel-types "^6.26.0" + +babel-plugin-transform-es2015-modules-systemjs@^6.23.0: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.24.1.tgz#ff89a142b9119a906195f5f106ecf305d9407d23" + dependencies: + babel-helper-hoist-variables "^6.24.1" + babel-runtime "^6.22.0" + babel-template "^6.24.1" + +babel-plugin-transform-es2015-modules-umd@^6.23.0: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.24.1.tgz#ac997e6285cd18ed6176adb607d602344ad38468" + dependencies: + babel-plugin-transform-es2015-modules-amd "^6.24.1" + babel-runtime "^6.22.0" + babel-template "^6.24.1" + +babel-plugin-transform-es2015-object-super@^6.22.0: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.24.1.tgz#24cef69ae21cb83a7f8603dad021f572eb278f8d" + dependencies: + babel-helper-replace-supers "^6.24.1" + babel-runtime "^6.22.0" + +babel-plugin-transform-es2015-parameters@^6.23.0: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.24.1.tgz#57ac351ab49caf14a97cd13b09f66fdf0a625f2b" + dependencies: + babel-helper-call-delegate "^6.24.1" + babel-helper-get-function-arity "^6.24.1" + babel-runtime "^6.22.0" + babel-template "^6.24.1" + babel-traverse "^6.24.1" + babel-types "^6.24.1" + +babel-plugin-transform-es2015-shorthand-properties@^6.22.0: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.24.1.tgz#24f875d6721c87661bbd99a4622e51f14de38aa0" + dependencies: + babel-runtime "^6.22.0" + babel-types "^6.24.1" + +babel-plugin-transform-es2015-spread@^6.22.0: + version "6.22.0" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-spread/-/babel-plugin-transform-es2015-spread-6.22.0.tgz#d6d68a99f89aedc4536c81a542e8dd9f1746f8d1" + dependencies: + babel-runtime "^6.22.0" + +babel-plugin-transform-es2015-sticky-regex@^6.22.0: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.24.1.tgz#00c1cdb1aca71112cdf0cf6126c2ed6b457ccdbc" + dependencies: + babel-helper-regex "^6.24.1" + babel-runtime "^6.22.0" + babel-types "^6.24.1" + +babel-plugin-transform-es2015-template-literals@^6.22.0: + version "6.22.0" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-template-literals/-/babel-plugin-transform-es2015-template-literals-6.22.0.tgz#a84b3450f7e9f8f1f6839d6d687da84bb1236d8d" + dependencies: + babel-runtime "^6.22.0" + +babel-plugin-transform-es2015-typeof-symbol@^6.23.0: + version "6.23.0" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.23.0.tgz#dec09f1cddff94b52ac73d505c84df59dcceb372" + dependencies: + babel-runtime "^6.22.0" + +babel-plugin-transform-es2015-unicode-regex@^6.22.0: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.24.1.tgz#d38b12f42ea7323f729387f18a7c5ae1faeb35e9" + dependencies: + babel-helper-regex "^6.24.1" + babel-runtime "^6.22.0" + regexpu-core "^2.0.0" + +babel-plugin-transform-exponentiation-operator@^6.22.0: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.24.1.tgz#2ab0c9c7f3098fa48907772bb813fe41e8de3a0e" + dependencies: + babel-helper-builder-binary-assignment-operator-visitor "^6.24.1" + babel-plugin-syntax-exponentiation-operator "^6.8.0" + babel-runtime "^6.22.0" + +babel-plugin-transform-regenerator@^6.22.0: + version "6.26.0" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz#e0703696fbde27f0a3efcacf8b4dca2f7b3a8f2f" + dependencies: + regenerator-transform "^0.10.0" + +babel-plugin-transform-strict-mode@^6.24.1: + version "6.24.1" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz#d5faf7aa578a65bbe591cf5edae04a0c67020758" + dependencies: + babel-runtime "^6.22.0" + babel-types "^6.24.1" + +babel-preset-env@^1.6.1: + version "1.6.1" + resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.6.1.tgz#a18b564cc9b9afdf4aae57ae3c1b0d99188e6f48" + dependencies: + babel-plugin-check-es2015-constants "^6.22.0" + babel-plugin-syntax-trailing-function-commas "^6.22.0" + babel-plugin-transform-async-to-generator "^6.22.0" + babel-plugin-transform-es2015-arrow-functions "^6.22.0" + babel-plugin-transform-es2015-block-scoped-functions "^6.22.0" + babel-plugin-transform-es2015-block-scoping "^6.23.0" + babel-plugin-transform-es2015-classes "^6.23.0" + babel-plugin-transform-es2015-computed-properties "^6.22.0" + babel-plugin-transform-es2015-destructuring "^6.23.0" + babel-plugin-transform-es2015-duplicate-keys "^6.22.0" + babel-plugin-transform-es2015-for-of "^6.23.0" + babel-plugin-transform-es2015-function-name "^6.22.0" + babel-plugin-transform-es2015-literals "^6.22.0" + babel-plugin-transform-es2015-modules-amd "^6.22.0" + babel-plugin-transform-es2015-modules-commonjs "^6.23.0" + babel-plugin-transform-es2015-modules-systemjs "^6.23.0" + babel-plugin-transform-es2015-modules-umd "^6.23.0" + babel-plugin-transform-es2015-object-super "^6.22.0" + babel-plugin-transform-es2015-parameters "^6.23.0" + babel-plugin-transform-es2015-shorthand-properties "^6.22.0" + babel-plugin-transform-es2015-spread "^6.22.0" + babel-plugin-transform-es2015-sticky-regex "^6.22.0" + babel-plugin-transform-es2015-template-literals "^6.22.0" + babel-plugin-transform-es2015-typeof-symbol "^6.23.0" + babel-plugin-transform-es2015-unicode-regex "^6.22.0" + babel-plugin-transform-exponentiation-operator "^6.22.0" + babel-plugin-transform-regenerator "^6.22.0" + browserslist "^2.1.2" + invariant "^2.2.2" + semver "^5.3.0" + babel-preset-jest@^22.1.0: version "22.1.0" resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-22.1.0.tgz#ff4e704102f9642765e2254226050561d8942ec9" @@ -318,7 +662,7 @@ babel-register@^6.26.0: mkdirp "^0.5.1" source-map-support "^0.4.15" -babel-runtime@^6.22.0, babel-runtime@^6.26.0: +babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe" dependencies: @@ -335,7 +679,7 @@ babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.26.0: babylon "^6.18.0" lodash "^4.17.4" -babel-traverse@^6.18.0, babel-traverse@^6.26.0: +babel-traverse@^6.18.0, babel-traverse@^6.24.1, babel-traverse@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee" dependencies: @@ -349,7 +693,7 @@ babel-traverse@^6.18.0, babel-traverse@^6.26.0: invariant "^2.2.2" lodash "^4.17.4" -babel-types@^6.18.0, babel-types@^6.26.0: +babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497" dependencies: @@ -421,6 +765,13 @@ browser-resolve@^1.11.2: dependencies: resolve "1.1.7" +browserslist@^2.1.2: + version "2.11.3" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.11.3.tgz#fe36167aed1bbcde4827ebfe71347a2cc70b99b2" + dependencies: + caniuse-lite "^1.0.30000792" + electron-to-chromium "^1.3.30" + bser@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719" @@ -453,6 +804,10 @@ camelcase@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd" +caniuse-lite@^1.0.30000792: + version "1.0.30000819" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000819.tgz#aabee5fd15a080febab6ae5d30c9ea15f4c6d4e2" + caseless@~0.12.0: version "0.12.0" resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc" @@ -788,6 +1143,10 @@ ecstatic@^3.0.0: minimist "^1.1.0" url-join "^2.0.2" +electron-to-chromium@^1.3.30: + version "1.3.40" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.40.tgz#1fbd6d97befd72b8a6f921dc38d22413d2f6fddf" + elegant-spinner@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e" @@ -942,6 +1301,10 @@ estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13" +estree-walker@^0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.2.1.tgz#bdafe8095383d8414d5dc2ecf4c9173b6db9412e" + esutils@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b" @@ -2079,6 +2442,10 @@ jsesc@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b" +jsesc@~0.5.0: + version "0.5.0" + resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d" + json-parse-better-errors@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.1.tgz#50183cd1b2d25275de069e9e71b467ac9eab973a" @@ -2743,7 +3110,7 @@ pretty-format@^22.1.0: ansi-regex "^3.0.0" ansi-styles "^3.2.0" -private@^0.1.7: +private@^0.1.6, private@^0.1.7: version "0.1.8" resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff" @@ -2845,16 +3212,46 @@ realpath-native@^1.0.0: dependencies: util.promisify "^1.0.0" +regenerate@^1.2.1: + version "1.3.3" + resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.3.tgz#0c336d3980553d755c39b586ae3b20aa49c82b7f" + regenerator-runtime@^0.11.0: version "0.11.1" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" +regenerator-transform@^0.10.0: + version "0.10.1" + resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd" + dependencies: + babel-runtime "^6.18.0" + babel-types "^6.19.0" + private "^0.1.6" + regex-cache@^0.4.2: version "0.4.4" resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd" dependencies: is-equal-shallow "^0.1.3" +regexpu-core@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-2.0.0.tgz#49d038837b8dcf8bfa5b9a42139938e6ea2ae240" + dependencies: + regenerate "^1.2.1" + regjsgen "^0.2.0" + regjsparser "^0.1.4" + +regjsgen@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.2.0.tgz#6c016adeac554f75823fe37ac05b92d5a4edb1f7" + +regjsparser@^0.1.4: + version "0.1.5" + resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.1.5.tgz#7ee8f84dc6fa792d3fd0ae228d24bd949ead205c" + dependencies: + jsesc "~0.5.0" + remove-trailing-separator@^1.0.1: version "1.1.0" resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef" @@ -3008,6 +3405,19 @@ rimraf@2, rimraf@^2.2.8, rimraf@^2.5.1, rimraf@^2.5.4, rimraf@^2.6.1: dependencies: glob "^7.0.5" +rollup-plugin-babel@^3.0.3: + version "3.0.3" + resolved "https://registry.yarnpkg.com/rollup-plugin-babel/-/rollup-plugin-babel-3.0.3.tgz#63adedc863130327512a4a9006efc2241c5b7c15" + dependencies: + rollup-pluginutils "^1.5.0" + +rollup-pluginutils@^1.5.0: + version "1.5.2" + resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz#1e156e778f94b7255bfa1b3d0178be8f5c552408" + dependencies: + estree-walker "^0.2.1" + minimatch "^3.0.2" + rollup@^0.55.3: version "0.55.3" resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.55.3.tgz#0af082a766d51c3058430c8372442ff5207d8736" From e41f700b1afb8f8fe471625cc254fb7a8111737c Mon Sep 17 00:00:00 2001 From: Galen Warren Date: Sat, 24 Mar 2018 22:54:09 -0400 Subject: [PATCH 2/4] transpile code during build --- dist/vue-wc-wrapper.global.js | 499 +++++++++++++++++----------------- dist/vue-wc-wrapper.js | 222 +++++++-------- 2 files changed, 361 insertions(+), 360 deletions(-) diff --git a/dist/vue-wc-wrapper.global.js b/dist/vue-wc-wrapper.global.js index a09c0e0..2189d6c 100644 --- a/dist/vue-wc-wrapper.global.js +++ b/dist/vue-wc-wrapper.global.js @@ -1,289 +1,290 @@ var wrapVueWebComponent = (function () { - 'use strict' - - const camelizeRE = /-(\w)/g - const camelize = str => { - return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '') - } - - const hyphenateRE = /\B([A-Z])/g - const hyphenate = str => { - return str.replace(hyphenateRE, '-$1').toLowerCase() - } - - function getInitialProps (propsList) { - const res = {} - propsList.forEach(key => { - res[key] = undefined - }) - return res - } - - function injectHook (options, key, hook) { - options[key] = [].concat(options[key] || []) - options[key].unshift(hook) +'use strict'; + +const camelizeRE = /-(\w)/g; +const camelize = str => { + return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '') +}; + +const hyphenateRE = /\B([A-Z])/g; +const hyphenate = str => { + return str.replace(hyphenateRE, '-$1').toLowerCase() +}; + +function getInitialProps (propsList) { + const res = {}; + propsList.forEach(key => { + res[key] = undefined; + }); + return res +} + +function injectHook (options, key, hook) { + options[key] = [].concat(options[key] || []); + options[key].unshift(hook); +} + +function callHooks (vm, hook) { + if (vm) { + const hooks = vm.$options[hook] || []; + hooks.forEach(hook => { + hook.call(vm); + }); } - - function callHooks (vm, hook) { - if (vm) { - const hooks = vm.$options[hook] || [] - hooks.forEach(hook => { - hook.call(vm) - }) +} + +function createCustomEvent (name, args) { + return new CustomEvent(name, { + bubbles: false, + cancelable: false, + detail: args + }) +} + +const isBoolean = val => /function Boolean/.test(String(val)); +const isNumber = val => /function Number/.test(String(val)); + +function convertAttributeValue (value, name, { type } = {}) { + if (isBoolean(type)) { + if (value === 'true' || value === 'false') { + return value === 'true' } - } - - function createCustomEvent (name, args) { - return new CustomEvent(name, { - bubbles: false, - cancelable: false, - detail: args - }) - } - - const isBoolean = val => /function Boolean/.test(String(val)) - const isNumber = val => /function Number/.test(String(val)) - - function convertAttributeValue (value, name, { type } = {}) { - if (isBoolean(type)) { - if (value === 'true' || value === 'false') { - return value === 'true' - } - if (value === '' || value === name) { - return true - } - return value != null - } else if (isNumber(type)) { - const parsed = parseFloat(value, 10) - return isNaN(parsed) ? value : parsed - } else { - return value + if (value === '' || value === name) { + return true } + return value != null + } else if (isNumber(type)) { + const parsed = parseFloat(value, 10); + return isNaN(parsed) ? value : parsed + } else { + return value } +} - function toVNodes (h, children) { - const res = [] - for (let i = 0, l = children.length; i < l; i++) { - res.push(toVNode(h, children[i])) - } - return res +function toVNodes (h, children) { + const res = []; + for (let i = 0, l = children.length; i < l; i++) { + res.push(toVNode(h, children[i])); } - - function toVNode (h, node) { - if (node.nodeType === 3) { - return node.data.trim() ? node.data : null - } else if (node.nodeType === 1) { - const data = { - attrs: getAttributes(node), - domProps: { - innerHTML: node.innerHTML - } + return res +} + +function toVNode (h, node) { + if (node.nodeType === 3) { + return node.data.trim() ? node.data : null + } else if (node.nodeType === 1) { + const data = { + attrs: getAttributes(node), + domProps: { + innerHTML: node.innerHTML } - if (data.attrs.slot) { - data.slot = data.attrs.slot - delete data.attrs.slot - } - return h(node.tagName, data) - } else { - return null + }; + if (data.attrs.slot) { + data.slot = data.attrs.slot; + delete data.attrs.slot; } + return h(node.tagName, data) + } else { + return null } +} - function getAttributes (node) { - const res = {} - for (let i = 0, l = node.attributes.length; i < l; i++) { - const attr = node.attributes[i] - res[attr.nodeName] = attr.nodeValue - } - return res +function getAttributes (node) { + const res = {}; + for (let i = 0, l = node.attributes.length; i < l; i++) { + const attr = node.attributes[i]; + res[attr.nodeName] = attr.nodeValue; } + return res +} - var _createClass = (function () { function defineProperties (target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor) } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor } }()) +var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); - function _classCallCheck (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function') } } +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - function _possibleConstructorReturn (self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called") } return call && (typeof call === 'object' || typeof call === 'function') ? call : self } +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } - function _inherits (subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass) } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true }}); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass } +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } - function wrap (Vue, Component) { - var isAsync = typeof Component === 'function' && !Component.cid - var isInitialized = false - var hyphenatedPropsList = void 0 - var camelizedPropsList = void 0 - var camelizedPropsMap = void 0 +function wrap(Vue, Component) { + var isAsync = typeof Component === 'function' && !Component.cid; + var isInitialized = false; + var hyphenatedPropsList = void 0; + var camelizedPropsList = void 0; + var camelizedPropsMap = void 0; - function initialize (Component) { - if (isInitialized) return + function initialize(Component) { + if (isInitialized) return; - var options = typeof Component === 'function' ? Component.options : Component + var options = typeof Component === 'function' ? Component.options : Component; - // extract props info - var propsList = Array.isArray(options.props) ? options.props : Object.keys(options.props || {}) - hyphenatedPropsList = propsList.map(hyphenate) - camelizedPropsList = propsList.map(camelize) - var originalPropsAsObject = Array.isArray(options.props) ? {} : options.props || {} - camelizedPropsMap = camelizedPropsList.reduce(function (map, key, i) { - map[key] = originalPropsAsObject[propsList[i]] - return map - }, {}) + // extract props info + var propsList = Array.isArray(options.props) ? options.props : Object.keys(options.props || {}); + hyphenatedPropsList = propsList.map(hyphenate); + camelizedPropsList = propsList.map(camelize); + var originalPropsAsObject = Array.isArray(options.props) ? {} : options.props || {}; + camelizedPropsMap = camelizedPropsList.reduce(function (map, key, i) { + map[key] = originalPropsAsObject[propsList[i]]; + return map; + }, {}); - // proxy $emit to native DOM events - injectHook(options, 'beforeCreate', function () { - var _this = this + // proxy $emit to native DOM events + injectHook(options, 'beforeCreate', function () { + var _this = this; - var emit = this.$emit - this.$emit = function (name) { - for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { - args[_key - 1] = arguments[_key] - } - - _this.$root.$options.customElement.dispatchEvent(createCustomEvent(name, args)) - return emit.call.apply(emit, [_this, name].concat(args)) + var emit = this.$emit; + this.$emit = function (name) { + for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key]; } - }) - injectHook(options, 'created', function () { - var _this2 = this + _this.$root.$options.customElement.dispatchEvent(createCustomEvent(name, args)); + return emit.call.apply(emit, [_this, name].concat(args)); + }; + }); - // sync default props values to wrapper on created - camelizedPropsList.forEach(function (key) { - _this2.$root.props[key] = _this2[key] - }) - }) + injectHook(options, 'created', function () { + var _this2 = this; - // proxy props as Element properties + // sync default props values to wrapper on created camelizedPropsList.forEach(function (key) { - Object.defineProperty(CustomElement.prototype, key, { - get: function get () { - return this._wrapper.props[key] - }, - set: function set (newVal) { - this._wrapper.props[key] = newVal - }, - - enumerable: false, - configurable: true - }) - }) - - isInitialized = true - } + _this2.$root.props[key] = _this2[key]; + }); + }); + + // proxy props as Element properties + camelizedPropsList.forEach(function (key) { + Object.defineProperty(CustomElement.prototype, key, { + get: function get() { + return this._wrapper.props[key]; + }, + set: function set(newVal) { + this._wrapper.props[key] = newVal; + }, + + enumerable: false, + configurable: true + }); + }); + + isInitialized = true; + } - function syncAttribute (el, key) { - var camelized = camelize(key) - var value = el.hasAttribute(key) ? el.getAttribute(key) : undefined - el._wrapper.props[camelized] = convertAttributeValue(value, key, camelizedPropsMap[camelized]) - } + function syncAttribute(el, key) { + var camelized = camelize(key); + var value = el.hasAttribute(key) ? el.getAttribute(key) : undefined; + el._wrapper.props[camelized] = convertAttributeValue(value, key, camelizedPropsMap[camelized]); + } - var CustomElement = (function (_HTMLElement) { - _inherits(CustomElement, _HTMLElement) - - function CustomElement () { - _classCallCheck(this, CustomElement) - - var _this3 = _possibleConstructorReturn(this, (CustomElement.__proto__ || Object.getPrototypeOf(CustomElement)).call(this)) - - _this3.attachShadow({ mode: 'open' }) - - var wrapper = _this3._wrapper = new Vue({ - name: 'shadow-root', - customElement: _this3, - shadowRoot: _this3.shadowRoot, - data: function data () { - return { - props: {}, - slotChildren: [] - } - }, - render: function render (h) { - return h(Component, { - ref: 'inner', - props: this.props - }, this.slotChildren) - } - }) - - // Use MutationObserver to react to future attribute & slot content change - var observer = new MutationObserver(function (mutations) { - var hasChildrenChange = false - for (var i = 0; i < mutations.length; i++) { - var m = mutations[i] - if (isInitialized && m.type === 'attributes' && m.target === _this3) { - syncAttribute(_this3, m.attributeName) - } else { - hasChildrenChange = true - } - } - if (hasChildrenChange) { - wrapper.slotChildren = Object.freeze(toVNodes(wrapper.$createElement, _this3.childNodes)) + var CustomElement = function (_HTMLElement) { + _inherits(CustomElement, _HTMLElement); + + function CustomElement() { + _classCallCheck(this, CustomElement); + + var _this3 = _possibleConstructorReturn(this, (CustomElement.__proto__ || Object.getPrototypeOf(CustomElement)).call(this)); + + _this3.attachShadow({ mode: 'open' }); + + var wrapper = _this3._wrapper = new Vue({ + name: 'shadow-root', + customElement: _this3, + shadowRoot: _this3.shadowRoot, + data: function data() { + return { + props: {}, + slotChildren: [] + }; + }, + render: function render(h) { + return h(Component, { + ref: 'inner', + props: this.props + }, this.slotChildren); + } + }); + + // Use MutationObserver to react to future attribute & slot content change + var observer = new MutationObserver(function (mutations) { + var hasChildrenChange = false; + for (var i = 0; i < mutations.length; i++) { + var m = mutations[i]; + if (isInitialized && m.type === 'attributes' && m.target === _this3) { + syncAttribute(_this3, m.attributeName); + } else { + hasChildrenChange = true; } - }) - observer.observe(_this3, { - childList: true, - subtree: true, - characterData: true, - attributes: true - }) - return _this3 - } + } + if (hasChildrenChange) { + wrapper.slotChildren = Object.freeze(toVNodes(wrapper.$createElement, _this3.childNodes)); + } + }); + observer.observe(_this3, { + childList: true, + subtree: true, + characterData: true, + attributes: true + }); + return _this3; + } - _createClass(CustomElement, [{ - key: 'connectedCallback', - value: function connectedCallback () { - var _this4 = this + _createClass(CustomElement, [{ + key: 'connectedCallback', + value: function connectedCallback() { + var _this4 = this; - var wrapper = this._wrapper - if (!wrapper._isMounted) { + var wrapper = this._wrapper; + if (!wrapper._isMounted) { // initialize attributes - var syncInitialAttributes = function syncInitialAttributes () { - wrapper.props = getInitialProps(camelizedPropsList) - hyphenatedPropsList.forEach(function (key) { - syncAttribute(_this4, key) - }) - } - - if (isInitialized) { - syncInitialAttributes() - } else { - // async & unresolved - Component().then(function (resolved) { - if (resolved.__esModule || resolved[Symbol.toStringTag] === 'Module') { - resolved = resolved.default - } - initialize(resolved) - syncInitialAttributes() - }) - } - // initialize children - wrapper.slotChildren = Object.freeze(toVNodes(wrapper.$createElement, this.childNodes)) - wrapper.$mount() - this.shadowRoot.appendChild(wrapper.$el) + var syncInitialAttributes = function syncInitialAttributes() { + wrapper.props = getInitialProps(camelizedPropsList); + hyphenatedPropsList.forEach(function (key) { + syncAttribute(_this4, key); + }); + }; + + if (isInitialized) { + syncInitialAttributes(); } else { - callHooks(this.vueComponent, 'activated') + // async & unresolved + Component().then(function (resolved) { + if (resolved.__esModule || resolved[Symbol.toStringTag] === 'Module') { + resolved = resolved.default; + } + initialize(resolved); + syncInitialAttributes(); + }); } + // initialize children + wrapper.slotChildren = Object.freeze(toVNodes(wrapper.$createElement, this.childNodes)); + wrapper.$mount(); + this.shadowRoot.appendChild(wrapper.$el); + } else { + callHooks(this.vueComponent, 'activated'); } - }, { - key: 'disconnectedCallback', - value: function disconnectedCallback () { - callHooks(this.vueComponent, 'deactivated') - } - }, { - key: 'vueComponent', - get: function get () { - return this._wrapper.$refs.inner - } - }]) - - return CustomElement - }(HTMLElement)) + } + }, { + key: 'disconnectedCallback', + value: function disconnectedCallback() { + callHooks(this.vueComponent, 'deactivated'); + } + }, { + key: 'vueComponent', + get: function get() { + return this._wrapper.$refs.inner; + } + }]); - if (!isAsync) { - initialize(Component) - } + return CustomElement; + }(HTMLElement); - return CustomElement + if (!isAsync) { + initialize(Component); } - return wrap -}()) + return CustomElement; +} + +return wrap; + +}()); diff --git a/dist/vue-wc-wrapper.js b/dist/vue-wc-wrapper.js index baa2c47..32fd721 100644 --- a/dist/vue-wc-wrapper.js +++ b/dist/vue-wc-wrapper.js @@ -1,32 +1,32 @@ -const camelizeRE = /-(\w)/g +const camelizeRE = /-(\w)/g; const camelize = str => { return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '') -} +}; -const hyphenateRE = /\B([A-Z])/g +const hyphenateRE = /\B([A-Z])/g; const hyphenate = str => { return str.replace(hyphenateRE, '-$1').toLowerCase() -} +}; function getInitialProps (propsList) { - const res = {} + const res = {}; propsList.forEach(key => { - res[key] = undefined - }) + res[key] = undefined; + }); return res } function injectHook (options, key, hook) { - options[key] = [].concat(options[key] || []) - options[key].unshift(hook) + options[key] = [].concat(options[key] || []); + options[key].unshift(hook); } function callHooks (vm, hook) { if (vm) { - const hooks = vm.$options[hook] || [] + const hooks = vm.$options[hook] || []; hooks.forEach(hook => { - hook.call(vm) - }) + hook.call(vm); + }); } } @@ -38,8 +38,8 @@ function createCustomEvent (name, args) { }) } -const isBoolean = val => /function Boolean/.test(String(val)) -const isNumber = val => /function Number/.test(String(val)) +const isBoolean = val => /function Boolean/.test(String(val)); +const isNumber = val => /function Number/.test(String(val)); function convertAttributeValue (value, name, { type } = {}) { if (isBoolean(type)) { @@ -51,7 +51,7 @@ function convertAttributeValue (value, name, { type } = {}) { } return value != null } else if (isNumber(type)) { - const parsed = parseFloat(value, 10) + const parsed = parseFloat(value, 10); return isNaN(parsed) ? value : parsed } else { return value @@ -59,9 +59,9 @@ function convertAttributeValue (value, name, { type } = {}) { } function toVNodes (h, children) { - const res = [] + const res = []; for (let i = 0, l = children.length; i < l; i++) { - res.push(toVNode(h, children[i])) + res.push(toVNode(h, children[i])); } return res } @@ -75,10 +75,10 @@ function toVNode (h, node) { domProps: { innerHTML: node.innerHTML } - } + }; if (data.attrs.slot) { - data.slot = data.attrs.slot - delete data.attrs.slot + data.slot = data.attrs.slot; + delete data.attrs.slot; } return h(node.tagName, data) } else { @@ -87,199 +87,199 @@ function toVNode (h, node) { } function getAttributes (node) { - const res = {} + const res = {}; for (let i = 0, l = node.attributes.length; i < l; i++) { - const attr = node.attributes[i] - res[attr.nodeName] = attr.nodeValue + const attr = node.attributes[i]; + res[attr.nodeName] = attr.nodeValue; } return res } -var _createClass = (function () { function defineProperties (target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor) } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor } }()) +var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); -function _classCallCheck (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function') } } +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } -function _possibleConstructorReturn (self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called") } return call && (typeof call === 'object' || typeof call === 'function') ? call : self } +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } -function _inherits (subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass) } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true }}); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass } +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } -function wrap (Vue, Component) { - var isAsync = typeof Component === 'function' && !Component.cid - var isInitialized = false - var hyphenatedPropsList = void 0 - var camelizedPropsList = void 0 - var camelizedPropsMap = void 0 +function wrap(Vue, Component) { + var isAsync = typeof Component === 'function' && !Component.cid; + var isInitialized = false; + var hyphenatedPropsList = void 0; + var camelizedPropsList = void 0; + var camelizedPropsMap = void 0; - function initialize (Component) { - if (isInitialized) return + function initialize(Component) { + if (isInitialized) return; - var options = typeof Component === 'function' ? Component.options : Component + var options = typeof Component === 'function' ? Component.options : Component; // extract props info - var propsList = Array.isArray(options.props) ? options.props : Object.keys(options.props || {}) - hyphenatedPropsList = propsList.map(hyphenate) - camelizedPropsList = propsList.map(camelize) - var originalPropsAsObject = Array.isArray(options.props) ? {} : options.props || {} + var propsList = Array.isArray(options.props) ? options.props : Object.keys(options.props || {}); + hyphenatedPropsList = propsList.map(hyphenate); + camelizedPropsList = propsList.map(camelize); + var originalPropsAsObject = Array.isArray(options.props) ? {} : options.props || {}; camelizedPropsMap = camelizedPropsList.reduce(function (map, key, i) { - map[key] = originalPropsAsObject[propsList[i]] - return map - }, {}) + map[key] = originalPropsAsObject[propsList[i]]; + return map; + }, {}); // proxy $emit to native DOM events injectHook(options, 'beforeCreate', function () { - var _this = this + var _this = this; - var emit = this.$emit + var emit = this.$emit; this.$emit = function (name) { for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { - args[_key - 1] = arguments[_key] + args[_key - 1] = arguments[_key]; } - _this.$root.$options.customElement.dispatchEvent(createCustomEvent(name, args)) - return emit.call.apply(emit, [_this, name].concat(args)) - } - }) + _this.$root.$options.customElement.dispatchEvent(createCustomEvent(name, args)); + return emit.call.apply(emit, [_this, name].concat(args)); + }; + }); injectHook(options, 'created', function () { - var _this2 = this + var _this2 = this; // sync default props values to wrapper on created camelizedPropsList.forEach(function (key) { - _this2.$root.props[key] = _this2[key] - }) - }) + _this2.$root.props[key] = _this2[key]; + }); + }); // proxy props as Element properties camelizedPropsList.forEach(function (key) { Object.defineProperty(CustomElement.prototype, key, { - get: function get () { - return this._wrapper.props[key] + get: function get() { + return this._wrapper.props[key]; }, - set: function set (newVal) { - this._wrapper.props[key] = newVal + set: function set(newVal) { + this._wrapper.props[key] = newVal; }, enumerable: false, configurable: true - }) - }) + }); + }); - isInitialized = true + isInitialized = true; } - function syncAttribute (el, key) { - var camelized = camelize(key) - var value = el.hasAttribute(key) ? el.getAttribute(key) : undefined - el._wrapper.props[camelized] = convertAttributeValue(value, key, camelizedPropsMap[camelized]) + function syncAttribute(el, key) { + var camelized = camelize(key); + var value = el.hasAttribute(key) ? el.getAttribute(key) : undefined; + el._wrapper.props[camelized] = convertAttributeValue(value, key, camelizedPropsMap[camelized]); } - var CustomElement = (function (_HTMLElement) { - _inherits(CustomElement, _HTMLElement) + var CustomElement = function (_HTMLElement) { + _inherits(CustomElement, _HTMLElement); - function CustomElement () { - _classCallCheck(this, CustomElement) + function CustomElement() { + _classCallCheck(this, CustomElement); - var _this3 = _possibleConstructorReturn(this, (CustomElement.__proto__ || Object.getPrototypeOf(CustomElement)).call(this)) + var _this3 = _possibleConstructorReturn(this, (CustomElement.__proto__ || Object.getPrototypeOf(CustomElement)).call(this)); - _this3.attachShadow({ mode: 'open' }) + _this3.attachShadow({ mode: 'open' }); var wrapper = _this3._wrapper = new Vue({ name: 'shadow-root', customElement: _this3, shadowRoot: _this3.shadowRoot, - data: function data () { + data: function data() { return { props: {}, slotChildren: [] - } + }; }, - render: function render (h) { + render: function render(h) { return h(Component, { ref: 'inner', props: this.props - }, this.slotChildren) + }, this.slotChildren); } - }) + }); // Use MutationObserver to react to future attribute & slot content change var observer = new MutationObserver(function (mutations) { - var hasChildrenChange = false + var hasChildrenChange = false; for (var i = 0; i < mutations.length; i++) { - var m = mutations[i] + var m = mutations[i]; if (isInitialized && m.type === 'attributes' && m.target === _this3) { - syncAttribute(_this3, m.attributeName) + syncAttribute(_this3, m.attributeName); } else { - hasChildrenChange = true + hasChildrenChange = true; } } if (hasChildrenChange) { - wrapper.slotChildren = Object.freeze(toVNodes(wrapper.$createElement, _this3.childNodes)) + wrapper.slotChildren = Object.freeze(toVNodes(wrapper.$createElement, _this3.childNodes)); } - }) + }); observer.observe(_this3, { childList: true, subtree: true, characterData: true, attributes: true - }) - return _this3 + }); + return _this3; } _createClass(CustomElement, [{ key: 'connectedCallback', - value: function connectedCallback () { - var _this4 = this + value: function connectedCallback() { + var _this4 = this; - var wrapper = this._wrapper + var wrapper = this._wrapper; if (!wrapper._isMounted) { // initialize attributes - var syncInitialAttributes = function syncInitialAttributes () { - wrapper.props = getInitialProps(camelizedPropsList) + var syncInitialAttributes = function syncInitialAttributes() { + wrapper.props = getInitialProps(camelizedPropsList); hyphenatedPropsList.forEach(function (key) { - syncAttribute(_this4, key) - }) - } + syncAttribute(_this4, key); + }); + }; if (isInitialized) { - syncInitialAttributes() + syncInitialAttributes(); } else { // async & unresolved Component().then(function (resolved) { if (resolved.__esModule || resolved[Symbol.toStringTag] === 'Module') { - resolved = resolved.default + resolved = resolved.default; } - initialize(resolved) - syncInitialAttributes() - }) + initialize(resolved); + syncInitialAttributes(); + }); } // initialize children - wrapper.slotChildren = Object.freeze(toVNodes(wrapper.$createElement, this.childNodes)) - wrapper.$mount() - this.shadowRoot.appendChild(wrapper.$el) + wrapper.slotChildren = Object.freeze(toVNodes(wrapper.$createElement, this.childNodes)); + wrapper.$mount(); + this.shadowRoot.appendChild(wrapper.$el); } else { - callHooks(this.vueComponent, 'activated') + callHooks(this.vueComponent, 'activated'); } } }, { key: 'disconnectedCallback', - value: function disconnectedCallback () { - callHooks(this.vueComponent, 'deactivated') + value: function disconnectedCallback() { + callHooks(this.vueComponent, 'deactivated'); } }, { key: 'vueComponent', - get: function get () { - return this._wrapper.$refs.inner + get: function get() { + return this._wrapper.$refs.inner; } - }]) + }]); - return CustomElement - }(HTMLElement)) + return CustomElement; + }(HTMLElement); if (!isAsync) { - initialize(Component) + initialize(Component); } - return CustomElement + return CustomElement; } -export default wrap +export default wrap; From 40285cc060616a9f0321bd5504fd7ac53c7b874c Mon Sep 17 00:00:00 2001 From: Galen Warren Date: Sun, 25 Mar 2018 11:36:37 -0400 Subject: [PATCH 3/4] add babel-plugin-transform-builtin-classes plugin --- .babelrc | 12 ++++++++---- dist/vue-wc-wrapper.global.js | 30 ++++++++++++++++++++++++++++-- dist/vue-wc-wrapper.js | 30 ++++++++++++++++++++++++++++-- package.json | 3 +++ yarn.lock | 14 +++++++++++--- 5 files changed, 78 insertions(+), 11 deletions(-) diff --git a/.babelrc b/.babelrc index 16c30ec..d6f5a24 100644 --- a/.babelrc +++ b/.babelrc @@ -1,7 +1,11 @@ { - "presets": [ - ["env", { - "modules": false + "plugins": [ + ["transform-builtin-classes", { + "globals": ["HTMLElement"], + "logIfPatched": true }] - ] + ], + "presets": [ + ["env", { "modules": false }] + ], } diff --git a/dist/vue-wc-wrapper.global.js b/dist/vue-wc-wrapper.global.js index 2189d6c..5802a05 100644 --- a/dist/vue-wc-wrapper.global.js +++ b/dist/vue-wc-wrapper.global.js @@ -98,6 +98,8 @@ function getAttributes (node) { return res } +var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; + var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } @@ -106,6 +108,30 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } +var _fixBabelExtend = function (O) { + var gPO = O.getPrototypeOf || function (o) { + return o.__proto__; + }, + sPO = O.setPrototypeOf || function (o, p) { + o.__proto__ = p; + return o; + }, + construct = (typeof Reflect === 'undefined' ? 'undefined' : _typeof(Reflect)) === 'object' ? Reflect.construct : function (Parent, args, Class) { + var Constructor, + a = [null]; + a.push.apply(a, args); + Constructor = Parent.bind.apply(Parent, a); + return sPO(new Constructor(), Class.prototype); + }; + + return function fixBabelExtend(Class) { + var Parent = gPO(Class); + return sPO(Class, sPO(function Super() { + return construct(Parent, arguments, gPO(this).constructor); + }, Parent)); + }; +}(Object); + function wrap(Vue, Component) { var isAsync = typeof Component === 'function' && !Component.cid; var isInitialized = false; @@ -176,7 +202,7 @@ function wrap(Vue, Component) { el._wrapper.props[camelized] = convertAttributeValue(value, key, camelizedPropsMap[camelized]); } - var CustomElement = function (_HTMLElement) { + var CustomElement = _fixBabelExtend(function (_HTMLElement) { _inherits(CustomElement, _HTMLElement); function CustomElement() { @@ -276,7 +302,7 @@ function wrap(Vue, Component) { }]); return CustomElement; - }(HTMLElement); + }(HTMLElement)); if (!isAsync) { initialize(Component); diff --git a/dist/vue-wc-wrapper.js b/dist/vue-wc-wrapper.js index 32fd721..64f85c4 100644 --- a/dist/vue-wc-wrapper.js +++ b/dist/vue-wc-wrapper.js @@ -95,6 +95,8 @@ function getAttributes (node) { return res } +var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; + var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } @@ -103,6 +105,30 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } +var _fixBabelExtend = function (O) { + var gPO = O.getPrototypeOf || function (o) { + return o.__proto__; + }, + sPO = O.setPrototypeOf || function (o, p) { + o.__proto__ = p; + return o; + }, + construct = (typeof Reflect === 'undefined' ? 'undefined' : _typeof(Reflect)) === 'object' ? Reflect.construct : function (Parent, args, Class) { + var Constructor, + a = [null]; + a.push.apply(a, args); + Constructor = Parent.bind.apply(Parent, a); + return sPO(new Constructor(), Class.prototype); + }; + + return function fixBabelExtend(Class) { + var Parent = gPO(Class); + return sPO(Class, sPO(function Super() { + return construct(Parent, arguments, gPO(this).constructor); + }, Parent)); + }; +}(Object); + function wrap(Vue, Component) { var isAsync = typeof Component === 'function' && !Component.cid; var isInitialized = false; @@ -173,7 +199,7 @@ function wrap(Vue, Component) { el._wrapper.props[camelized] = convertAttributeValue(value, key, camelizedPropsMap[camelized]); } - var CustomElement = function (_HTMLElement) { + var CustomElement = _fixBabelExtend(function (_HTMLElement) { _inherits(CustomElement, _HTMLElement); function CustomElement() { @@ -273,7 +299,7 @@ function wrap(Vue, Component) { }]); return CustomElement; - }(HTMLElement); + }(HTMLElement)); if (!isAsync) { initialize(Component); diff --git a/package.json b/package.json index 2956316..225d115 100644 --- a/package.json +++ b/package.json @@ -55,5 +55,8 @@ "eslint --fix", "git add" ] + }, + "dependencies": { + "babel-plugin-transform-builtin-classes": "^0.6.1" } } diff --git a/yarn.lock b/yarn.lock index 8f4f537..20c7009 100644 --- a/yarn.lock +++ b/yarn.lock @@ -419,6 +419,14 @@ babel-plugin-transform-async-to-generator@^6.22.0: babel-plugin-syntax-async-functions "^6.8.0" babel-runtime "^6.22.0" +babel-plugin-transform-builtin-classes@^0.6.1: + version "0.6.1" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-builtin-classes/-/babel-plugin-transform-builtin-classes-0.6.1.tgz#09286f575267f01d09d279a7d8e02d58739f16c2" + dependencies: + babel-plugin-transform-es2015-classes "^6.24.1" + babel-runtime "^6.23.0" + babel-template "^6.25.0" + babel-plugin-transform-es2015-arrow-functions@^6.22.0: version "6.22.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221" @@ -441,7 +449,7 @@ babel-plugin-transform-es2015-block-scoping@^6.23.0: babel-types "^6.26.0" lodash "^4.17.4" -babel-plugin-transform-es2015-classes@^6.23.0: +babel-plugin-transform-es2015-classes@^6.23.0, babel-plugin-transform-es2015-classes@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.24.1.tgz#5a4c58a50c9c9461e564b4b2a3bfabc97a2584db" dependencies: @@ -662,14 +670,14 @@ babel-register@^6.26.0: mkdirp "^0.5.1" source-map-support "^0.4.15" -babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0: +babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe" dependencies: core-js "^2.4.0" regenerator-runtime "^0.11.0" -babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.26.0: +babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.25.0, babel-template@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02" dependencies: From 5a025636b9b4bda184b43ca325fc98cf59950596 Mon Sep 17 00:00:00 2001 From: Galen Warren Date: Sun, 25 Mar 2018 11:47:30 -0400 Subject: [PATCH 4/4] fix package.json --- package.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/package.json b/package.json index 225d115..120c03d 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "homepage": "https://github.com/vuejs/web-component-wrapper#readme", "devDependencies": { "babel-core": "^6.22.1", + "babel-plugin-transform-builtin-classes": "^0.6.1", "babel-preset-env": "^1.6.1", "eslint": "^4.16.0", "eslint-plugin-vue-libs": "^2.1.0", @@ -55,8 +56,5 @@ "eslint --fix", "git add" ] - }, - "dependencies": { - "babel-plugin-transform-builtin-classes": "^0.6.1" } }