Skip to content

Commit 9a92404

Browse files
lmkarollmkarol
committedFeb 27, 2021
[build] 3.3.0
·
v3.3.0
1 parent eaa2401 commit 9a92404

8 files changed

+198
-186
lines changed
 

‎dist/vue-custom-element.esm.js

+94-88
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
2-
* vue-custom-element v3.2.14
3-
* (c) 2020 Karol Fabjańczuk
2+
* vue-custom-element v3.3.0
3+
* (c) 2021 Karol Fabjańczuk
44
* @license MIT
55
*/
66
/**
@@ -361,109 +361,113 @@ function customEmit(element, eventName) {
361361
}
362362

363363
function createVueInstance(element, Vue, componentDefinition, props, options) {
364-
if (!element.__vue_custom_element__) {
365-
var beforeCreate = function beforeCreate() {
366-
this.$emit = function emit() {
367-
var _proto__$$emit;
364+
if (element.__vue_custom_element__) {
365+
return Promise.resolve(element);
366+
}
367+
var ComponentDefinition = Vue.util.extend({}, componentDefinition);
368+
var propsData = getPropsData(element, ComponentDefinition, props);
369+
var vueVersion = Vue.version && parseInt(Vue.version.split('.')[0], 10) || 0;
368370

369-
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
370-
args[_key] = arguments[_key];
371-
}
371+
function beforeCreate() {
372+
this.$emit = function emit() {
373+
var _proto__$$emit;
372374

373-
customEmit.apply(undefined, [element].concat(args));
374-
this.__proto__ && (_proto__$$emit = this.__proto__.$emit).call.apply(_proto__$$emit, [this].concat(args));
375-
};
376-
};
375+
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
376+
args[_key] = arguments[_key];
377+
}
377378

378-
var ComponentDefinition = Vue.util.extend({}, componentDefinition);
379-
var propsData = getPropsData(element, ComponentDefinition, props);
380-
var vueVersion = Vue.version && parseInt(Vue.version.split('.')[0], 10) || 0;
379+
customEmit.apply(undefined, [element].concat(args));
380+
this.__proto__ && (_proto__$$emit = this.__proto__.$emit).call.apply(_proto__$$emit, [this].concat(args));
381+
};
382+
}
383+
ComponentDefinition.beforeCreate = [].concat(ComponentDefinition.beforeCreate || [], beforeCreate);
384+
385+
if (ComponentDefinition._compiled) {
386+
var constructorOptions = {};
387+
var _constructor = ComponentDefinition._Ctor;
388+
if (_constructor) {
389+
constructorOptions = Object.keys(_constructor).map(function (key) {
390+
return _constructor[key];
391+
})[0].options;
392+
}
393+
constructorOptions.beforeCreate = ComponentDefinition.beforeCreate;
394+
}
381395

382-
ComponentDefinition.beforeCreate = [].concat(ComponentDefinition.beforeCreate || [], beforeCreate);
396+
var rootElement = void 0;
383397

384-
if (ComponentDefinition._compiled) {
385-
var constructorOptions = {};
386-
var _constructor = ComponentDefinition._Ctor;
387-
if (_constructor) {
388-
constructorOptions = Object.keys(_constructor).map(function (key) {
389-
return _constructor[key];
390-
})[0].options;
391-
}
392-
constructorOptions.beforeCreate = ComponentDefinition.beforeCreate;
393-
}
398+
if (vueVersion >= 2) {
399+
var elementOriginalChildren = element.cloneNode(true).childNodes;
400+
rootElement = {
401+
propsData: propsData,
402+
props: props.camelCase,
403+
computed: {
404+
reactiveProps: function reactiveProps$$1() {
405+
var _this = this;
394406

395-
var rootElement = void 0;
407+
var reactivePropsList = {};
408+
props.camelCase.forEach(function (prop) {
409+
typeof _this[prop] !== 'undefined' && (reactivePropsList[prop] = _this[prop]);
410+
});
396411

397-
if (vueVersion >= 2) {
398-
var elementOriginalChildren = element.cloneNode(true).childNodes;
399-
rootElement = {
400-
propsData: propsData,
401-
props: props.camelCase,
402-
computed: {
403-
reactiveProps: function reactiveProps$$1() {
404-
var _this = this;
412+
return reactivePropsList;
413+
}
414+
},
415+
render: function render(createElement) {
416+
var data = {
417+
props: this.reactiveProps
418+
};
405419

406-
var reactivePropsList = {};
407-
props.camelCase.forEach(function (prop) {
408-
typeof _this[prop] !== 'undefined' && (reactivePropsList[prop] = _this[prop]);
409-
});
420+
return createElement(ComponentDefinition, data, getSlots(elementOriginalChildren, createElement));
421+
}
422+
};
423+
} else if (vueVersion === 1) {
424+
rootElement = ComponentDefinition;
425+
rootElement.propsData = propsData;
426+
} else {
427+
rootElement = ComponentDefinition;
428+
var propsWithDefault = {};
429+
Object.keys(propsData).forEach(function (prop) {
430+
propsWithDefault[prop] = { default: propsData[prop] };
431+
});
432+
rootElement.props = propsWithDefault;
433+
}
410434

411-
return reactivePropsList;
412-
}
413-
},
414-
render: function render(createElement) {
415-
var data = {
416-
props: this.reactiveProps
417-
};
435+
var elementInnerHtml = vueVersion >= 2 ? '<div></div>' : ('<div>' + element.innerHTML + '</div>').replace(/vue-slot=/g, 'slot=');
436+
if (options.shadow && element.shadowRoot) {
437+
element.shadowRoot.innerHTML = elementInnerHtml;
438+
rootElement.el = element.shadowRoot.children[0];
439+
} else {
440+
element.innerHTML = elementInnerHtml;
441+
rootElement.el = element.children[0];
442+
}
418443

419-
return createElement(ComponentDefinition, data, getSlots(elementOriginalChildren, createElement));
420-
}
421-
};
422-
} else if (vueVersion === 1) {
423-
rootElement = ComponentDefinition;
424-
rootElement.propsData = propsData;
425-
} else {
426-
rootElement = ComponentDefinition;
427-
var propsWithDefault = {};
428-
Object.keys(propsData).forEach(function (prop) {
429-
propsWithDefault[prop] = { default: propsData[prop] };
430-
});
431-
rootElement.props = propsWithDefault;
432-
}
444+
if (options.shadow && options.shadowCss && element.shadowRoot) {
445+
var style = document.createElement('style');
446+
style.type = 'text/css';
447+
style.appendChild(document.createTextNode(options.shadowCss));
433448

434-
var elementInnerHtml = vueVersion >= 2 ? '<div></div>' : ('<div>' + element.innerHTML + '</div>').replace(/vue-slot=/g, 'slot=');
435-
if (options.shadow && element.shadowRoot) {
436-
element.shadowRoot.innerHTML = elementInnerHtml;
437-
rootElement.el = element.shadowRoot.children[0];
438-
} else {
439-
element.innerHTML = elementInnerHtml;
440-
rootElement.el = element.children[0];
441-
}
449+
element.shadowRoot.appendChild(style);
450+
}
442451

443-
reactiveProps(element, props);
452+
reactiveProps(element, props);
444453

445-
if (typeof options.beforeCreateVueInstance === 'function') {
446-
rootElement = options.beforeCreateVueInstance(rootElement) || rootElement;
447-
}
454+
if (typeof options.beforeCreateVueInstance === 'function') {
455+
rootElement = options.beforeCreateVueInstance(rootElement) || rootElement;
456+
}
448457

449-
element.__vue_custom_element__ = new Vue(rootElement);
458+
return Promise.resolve(rootElement).then(function (vueOpts) {
459+
element.__vue_custom_element__ = new Vue(vueOpts);
450460
element.__vue_custom_element_props__ = props;
451461
element.getVueInstance = function () {
452462
var vueInstance = element.__vue_custom_element__;
453463
return vueInstance.$children.length ? vueInstance.$children[0] : vueInstance;
454464
};
455465

456-
if (options.shadow && options.shadowCss && element.shadowRoot) {
457-
var style = document.createElement('style');
458-
style.type = 'text/css';
459-
style.appendChild(document.createTextNode(options.shadowCss));
460-
461-
element.shadowRoot.appendChild(style);
462-
}
463466
element.removeAttribute('vce-cloak');
464467
element.setAttribute('vce-ready', '');
465468
customEmit(element, 'vce-ready');
466-
}
469+
return element;
470+
});
467471
}
468472

469473
function install(Vue) {
@@ -491,14 +495,16 @@ function install(Vue) {
491495
}
492496
if (!this.__detached__) {
493497
if (isAsyncComponentPromise) {
494-
asyncComponentPromise.then(function (lazyLoadedComponent) {
495-
var lazyLoadedComponentProps = getProps(lazyLoadedComponent);
496-
createVueInstance(_this, Vue, lazyLoadedComponent, lazyLoadedComponentProps, options);
497-
typeof options.vueInstanceCreatedCallback === 'function' && options.vueInstanceCreatedCallback.call(_this);
498+
asyncComponentPromise.then(function (lazyComponent) {
499+
var lazyProps = getProps(lazyComponent);
500+
createVueInstance(_this, Vue, lazyComponent, lazyProps, options).then(function () {
501+
typeof options.vueInstanceCreatedCallback === 'function' && options.vueInstanceCreatedCallback.call(_this);
502+
});
498503
});
499504
} else {
500-
createVueInstance(this, Vue, componentDefinition, props, options);
501-
typeof options.vueInstanceCreatedCallback === 'function' && options.vueInstanceCreatedCallback.call(this);
505+
createVueInstance(this, Vue, componentDefinition, props, options).then(function () {
506+
typeof options.vueInstanceCreatedCallback === 'function' && options.vueInstanceCreatedCallback.call(_this);
507+
});
502508
}
503509
}
504510

‎dist/vue-custom-element.js

+94-88
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
2-
* vue-custom-element v3.2.14
3-
* (c) 2020 Karol Fabjańczuk
2+
* vue-custom-element v3.3.0
3+
* (c) 2021 Karol Fabjańczuk
44
* @license MIT
55
*/
66
(function (global, factory) {
@@ -367,109 +367,113 @@ function customEmit(element, eventName) {
367367
}
368368

369369
function createVueInstance(element, Vue, componentDefinition, props, options) {
370-
if (!element.__vue_custom_element__) {
371-
var beforeCreate = function beforeCreate() {
372-
this.$emit = function emit() {
373-
var _proto__$$emit;
370+
if (element.__vue_custom_element__) {
371+
return Promise.resolve(element);
372+
}
373+
var ComponentDefinition = Vue.util.extend({}, componentDefinition);
374+
var propsData = getPropsData(element, ComponentDefinition, props);
375+
var vueVersion = Vue.version && parseInt(Vue.version.split('.')[0], 10) || 0;
374376

375-
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
376-
args[_key] = arguments[_key];
377-
}
377+
function beforeCreate() {
378+
this.$emit = function emit() {
379+
var _proto__$$emit;
378380

379-
customEmit.apply(undefined, [element].concat(args));
380-
this.__proto__ && (_proto__$$emit = this.__proto__.$emit).call.apply(_proto__$$emit, [this].concat(args));
381-
};
382-
};
381+
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
382+
args[_key] = arguments[_key];
383+
}
383384

384-
var ComponentDefinition = Vue.util.extend({}, componentDefinition);
385-
var propsData = getPropsData(element, ComponentDefinition, props);
386-
var vueVersion = Vue.version && parseInt(Vue.version.split('.')[0], 10) || 0;
385+
customEmit.apply(undefined, [element].concat(args));
386+
this.__proto__ && (_proto__$$emit = this.__proto__.$emit).call.apply(_proto__$$emit, [this].concat(args));
387+
};
388+
}
389+
ComponentDefinition.beforeCreate = [].concat(ComponentDefinition.beforeCreate || [], beforeCreate);
390+
391+
if (ComponentDefinition._compiled) {
392+
var constructorOptions = {};
393+
var _constructor = ComponentDefinition._Ctor;
394+
if (_constructor) {
395+
constructorOptions = Object.keys(_constructor).map(function (key) {
396+
return _constructor[key];
397+
})[0].options;
398+
}
399+
constructorOptions.beforeCreate = ComponentDefinition.beforeCreate;
400+
}
387401

388-
ComponentDefinition.beforeCreate = [].concat(ComponentDefinition.beforeCreate || [], beforeCreate);
402+
var rootElement = void 0;
389403

390-
if (ComponentDefinition._compiled) {
391-
var constructorOptions = {};
392-
var _constructor = ComponentDefinition._Ctor;
393-
if (_constructor) {
394-
constructorOptions = Object.keys(_constructor).map(function (key) {
395-
return _constructor[key];
396-
})[0].options;
397-
}
398-
constructorOptions.beforeCreate = ComponentDefinition.beforeCreate;
399-
}
404+
if (vueVersion >= 2) {
405+
var elementOriginalChildren = element.cloneNode(true).childNodes;
406+
rootElement = {
407+
propsData: propsData,
408+
props: props.camelCase,
409+
computed: {
410+
reactiveProps: function reactiveProps$$1() {
411+
var _this = this;
400412

401-
var rootElement = void 0;
413+
var reactivePropsList = {};
414+
props.camelCase.forEach(function (prop) {
415+
typeof _this[prop] !== 'undefined' && (reactivePropsList[prop] = _this[prop]);
416+
});
402417

403-
if (vueVersion >= 2) {
404-
var elementOriginalChildren = element.cloneNode(true).childNodes;
405-
rootElement = {
406-
propsData: propsData,
407-
props: props.camelCase,
408-
computed: {
409-
reactiveProps: function reactiveProps$$1() {
410-
var _this = this;
418+
return reactivePropsList;
419+
}
420+
},
421+
render: function render(createElement) {
422+
var data = {
423+
props: this.reactiveProps
424+
};
411425

412-
var reactivePropsList = {};
413-
props.camelCase.forEach(function (prop) {
414-
typeof _this[prop] !== 'undefined' && (reactivePropsList[prop] = _this[prop]);
415-
});
426+
return createElement(ComponentDefinition, data, getSlots(elementOriginalChildren, createElement));
427+
}
428+
};
429+
} else if (vueVersion === 1) {
430+
rootElement = ComponentDefinition;
431+
rootElement.propsData = propsData;
432+
} else {
433+
rootElement = ComponentDefinition;
434+
var propsWithDefault = {};
435+
Object.keys(propsData).forEach(function (prop) {
436+
propsWithDefault[prop] = { default: propsData[prop] };
437+
});
438+
rootElement.props = propsWithDefault;
439+
}
416440

417-
return reactivePropsList;
418-
}
419-
},
420-
render: function render(createElement) {
421-
var data = {
422-
props: this.reactiveProps
423-
};
441+
var elementInnerHtml = vueVersion >= 2 ? '<div></div>' : ('<div>' + element.innerHTML + '</div>').replace(/vue-slot=/g, 'slot=');
442+
if (options.shadow && element.shadowRoot) {
443+
element.shadowRoot.innerHTML = elementInnerHtml;
444+
rootElement.el = element.shadowRoot.children[0];
445+
} else {
446+
element.innerHTML = elementInnerHtml;
447+
rootElement.el = element.children[0];
448+
}
424449

425-
return createElement(ComponentDefinition, data, getSlots(elementOriginalChildren, createElement));
426-
}
427-
};
428-
} else if (vueVersion === 1) {
429-
rootElement = ComponentDefinition;
430-
rootElement.propsData = propsData;
431-
} else {
432-
rootElement = ComponentDefinition;
433-
var propsWithDefault = {};
434-
Object.keys(propsData).forEach(function (prop) {
435-
propsWithDefault[prop] = { default: propsData[prop] };
436-
});
437-
rootElement.props = propsWithDefault;
438-
}
450+
if (options.shadow && options.shadowCss && element.shadowRoot) {
451+
var style = document.createElement('style');
452+
style.type = 'text/css';
453+
style.appendChild(document.createTextNode(options.shadowCss));
439454

440-
var elementInnerHtml = vueVersion >= 2 ? '<div></div>' : ('<div>' + element.innerHTML + '</div>').replace(/vue-slot=/g, 'slot=');
441-
if (options.shadow && element.shadowRoot) {
442-
element.shadowRoot.innerHTML = elementInnerHtml;
443-
rootElement.el = element.shadowRoot.children[0];
444-
} else {
445-
element.innerHTML = elementInnerHtml;
446-
rootElement.el = element.children[0];
447-
}
455+
element.shadowRoot.appendChild(style);
456+
}
448457

449-
reactiveProps(element, props);
458+
reactiveProps(element, props);
450459

451-
if (typeof options.beforeCreateVueInstance === 'function') {
452-
rootElement = options.beforeCreateVueInstance(rootElement) || rootElement;
453-
}
460+
if (typeof options.beforeCreateVueInstance === 'function') {
461+
rootElement = options.beforeCreateVueInstance(rootElement) || rootElement;
462+
}
454463

455-
element.__vue_custom_element__ = new Vue(rootElement);
464+
return Promise.resolve(rootElement).then(function (vueOpts) {
465+
element.__vue_custom_element__ = new Vue(vueOpts);
456466
element.__vue_custom_element_props__ = props;
457467
element.getVueInstance = function () {
458468
var vueInstance = element.__vue_custom_element__;
459469
return vueInstance.$children.length ? vueInstance.$children[0] : vueInstance;
460470
};
461471

462-
if (options.shadow && options.shadowCss && element.shadowRoot) {
463-
var style = document.createElement('style');
464-
style.type = 'text/css';
465-
style.appendChild(document.createTextNode(options.shadowCss));
466-
467-
element.shadowRoot.appendChild(style);
468-
}
469472
element.removeAttribute('vce-cloak');
470473
element.setAttribute('vce-ready', '');
471474
customEmit(element, 'vce-ready');
472-
}
475+
return element;
476+
});
473477
}
474478

475479
function install(Vue) {
@@ -497,14 +501,16 @@ function install(Vue) {
497501
}
498502
if (!this.__detached__) {
499503
if (isAsyncComponentPromise) {
500-
asyncComponentPromise.then(function (lazyLoadedComponent) {
501-
var lazyLoadedComponentProps = getProps(lazyLoadedComponent);
502-
createVueInstance(_this, Vue, lazyLoadedComponent, lazyLoadedComponentProps, options);
503-
typeof options.vueInstanceCreatedCallback === 'function' && options.vueInstanceCreatedCallback.call(_this);
504+
asyncComponentPromise.then(function (lazyComponent) {
505+
var lazyProps = getProps(lazyComponent);
506+
createVueInstance(_this, Vue, lazyComponent, lazyProps, options).then(function () {
507+
typeof options.vueInstanceCreatedCallback === 'function' && options.vueInstanceCreatedCallback.call(_this);
508+
});
504509
});
505510
} else {
506-
createVueInstance(this, Vue, componentDefinition, props, options);
507-
typeof options.vueInstanceCreatedCallback === 'function' && options.vueInstanceCreatedCallback.call(this);
511+
createVueInstance(this, Vue, componentDefinition, props, options).then(function () {
512+
typeof options.vueInstanceCreatedCallback === 'function' && options.vueInstanceCreatedCallback.call(_this);
513+
});
508514
}
509515
}
510516

‎dist/vue-custom-element.min.js

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/css/demo.136a22b64891051d61f63caecc6c6a27.css ‎docs/css/demo.6defd80297c0131c376f78d2eeddd0be.css

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/css/demo.136a22b64891051d61f63caecc6c6a27.css.map ‎docs/css/demo.6defd80297c0131c376f78d2eeddd0be.css.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/demo.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/demo.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html><html lang=en><head><title>Vue-custom-element</title><meta charset=utf-8><meta name=description content="Vue-custom-element - Custom Elements for Vue.js"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono" rel=stylesheet type=text/css><link href="//fonts.googleapis.com/css?family=Dosis:500&text=Vue-custom-element" rel=stylesheet type=text/css><link href=/vue-custom-element/css/demo.136a22b64891051d61f63caecc6c6a27.css rel=stylesheet></head><body><div id=vue-demo-app><router-view></router-view></div><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
1+
<!DOCTYPE html><html lang=en><head><title>Vue-custom-element</title><meta charset=utf-8><meta name=description content="Vue-custom-element - Custom Elements for Vue.js"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono" rel=stylesheet type=text/css><link href="//fonts.googleapis.com/css?family=Dosis:500&text=Vue-custom-element" rel=stylesheet type=text/css><link href=/vue-custom-element/css/demo.6defd80297c0131c376f78d2eeddd0be.css rel=stylesheet></head><body><div id=vue-demo-app><router-view></router-view></div><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
22
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
33
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
44
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

0 commit comments

Comments
 (0)
Please sign in to comment.