From 9ecc1f1f33fe52c2cb68f50b756005d85d2dfa4f Mon Sep 17 00:00:00 2001 From: tanglei02 Date: Tue, 25 Feb 2020 15:43:10 +0800 Subject: [PATCH 1/3] fix vue component register twice bug --- packages/mip/src/services/extensions.js | 65 ++++++++++++------------- 1 file changed, 30 insertions(+), 35 deletions(-) diff --git a/packages/mip/src/services/extensions.js b/packages/mip/src/services/extensions.js index ee6a9c6c..b254972b 100644 --- a/packages/mip/src/services/extensions.js +++ b/packages/mip/src/services/extensions.js @@ -245,37 +245,6 @@ export class Extensions { this.currentExtensionId = extensionId factory(...args) - /** - * This extension needs `mip-vue` service. - */ - if ( - document.documentElement.hasAttribute('mip-vue') && - !Services.getServiceOrNull('mip-vue') - ) { - /** - * Inserts script of `mip-vue` service if needed. - */ - if (!document.querySelector('script[src*="mip-vue.js"]')) { - /* istanbul ignore if */ - if (process.env.NODE_ENV === 'production') { - insertScript(`https://c.mipcdn.com/static/v2/mip-vue.js`) - } else { - const baseUrl = document.querySelector('script[src*="mip.js"]').src.replace(/\/[^/]+$/, '') - - insertScript(`${baseUrl}/mip-vue.js`) - } - } - - /** - * Interrupts current registration. - * Reregisters this extension while `mip-vue` service is loaded. - */ - Services.getServicePromise('mip-vue') - .then(() => this.registerExtension(extensionId, factory, ...args)) - - return - } - /** * It still possible that all element instances in current extension call lifecycle `build` synchronously. * Executes callback in microtask to make sure all these elements are built. @@ -290,6 +259,29 @@ export class Extensions { } } + /** + * load mip-vue script + */ + loadVueScript () { + if ( + document.documentElement.hasAttribute('mip-vue') && + !Services.getServiceOrNull('mip-vue') + ) { + /** + * Inserts script of `mip-vue` service if needed. + */ + if (!document.querySelector('script[src*="mip-vue.js"]')) { + /* istanbul ignore if */ + if (process.env.NODE_ENV === 'production') { + insertScript(`https://c.mipcdn.com/static/v2/mip-vue.js`) + } else { + const baseUrl = document.querySelector('script[src*="mip.js"]').src.replace(/\/[^/]+$/, '') + insertScript(`${baseUrl}/mip-vue.js`) + } + } + } + } + /** * To see if all elements registered in current extension are built. * @@ -367,7 +359,7 @@ export class Extensions { * @param {string=} css * @param {Object=} options */ - registerElement (name, implementation, css, options) { + async registerElement (name, implementation, css, options) { const holder = this.getCurrentExtensionHolder() const element = {implementation, css} const version = options && options.version && '' + options.version @@ -380,10 +372,13 @@ export class Extensions { holder.extension.elements[name] = element } - const registrator = this.getElementRegistrator(element) - + let registrator = this.getElementRegistrator(element) + // only vue registrator would return undefined + // so reload vue script and get registrator again if (!registrator) { - return + this.loadVueScript() + await Services.getServicePromise('mip-vue') + registrator = this.getElementRegistrator(element) } /** @type {?HTMLElement[]} */ From 6587de104c56580aa26f90233fe69c72536d40a3 Mon Sep 17 00:00:00 2001 From: tanglei02 Date: Tue, 25 Feb 2020 17:01:58 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E5=B0=86=20registerElement=20=E4=BB=8E=20a?= =?UTF-8?q?sync=20=E5=87=BD=E6=95=B0=E6=94=B9=E5=9B=9E=E6=99=AE=E9=80=9A?= =?UTF-8?q?=E5=87=BD=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/mip/src/services/extensions.js | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/mip/src/services/extensions.js b/packages/mip/src/services/extensions.js index b254972b..b38f5d1f 100644 --- a/packages/mip/src/services/extensions.js +++ b/packages/mip/src/services/extensions.js @@ -359,7 +359,7 @@ export class Extensions { * @param {string=} css * @param {Object=} options */ - async registerElement (name, implementation, css, options) { + registerElement (name, implementation, css, options) { const holder = this.getCurrentExtensionHolder() const element = {implementation, css} const version = options && options.version && '' + options.version @@ -377,10 +377,26 @@ export class Extensions { // so reload vue script and get registrator again if (!registrator) { this.loadVueScript() - await Services.getServicePromise('mip-vue') - registrator = this.getElementRegistrator(element) + Services.getServicePromise('mip-vue').then(() => { + registrator = this.getElementRegistrator(element) + this.execRegisterElement(registrator, name, implementation, css, holder) + }) + } else { + this.execRegisterElement(registrator, name, implementation, css, holder) } + } + + /** + * using registrator to execute registration + * + * @param {Function} registrator MIP Component registrator + * @param {string} name Component name + * @param {!Object | !Object} implementation implementation + * @param {string=} css css string + * @param {Object} holder component holder + */ + execRegisterElement (registrator, name, implementation, css, holder) { /** @type {?HTMLElement[]} */ let elementInstances = registrator(name, implementation, css) From 4cb31766a3ef6dfbba8b3e1b88e37d5e1f65eec5 Mon Sep 17 00:00:00 2001 From: tanglei02 Date: Tue, 3 Mar 2020 11:12:07 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20detached=20=E5=8D=95?= =?UTF-8?q?=E6=B5=8B=E4=B8=8D=E7=A8=B3=E5=AE=9A=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/mip/test/specs/mip1-polyfill/element.spec.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/mip/test/specs/mip1-polyfill/element.spec.js b/packages/mip/test/specs/mip1-polyfill/element.spec.js index 6da42721..cd7a98e7 100644 --- a/packages/mip/test/specs/mip1-polyfill/element.spec.js +++ b/packages/mip/test/specs/mip1-polyfill/element.spec.js @@ -354,10 +354,13 @@ describe('mip1 element', function () { let node = createDomByTag(name) node.setAttribute('name', 'MIP') - return extensions.waitForExtension(name).then(function () { - document.body.removeChild(node) - expect(queue).to.deep.equal(['createdCallback', 'attachedCallback', 'build', 'detachedCallback']) - }) + return extensions.waitForExtension(name) + .then(function () { + document.body.removeChild(node) + }) + .then(function () { + expect(queue).to.deep.equal(['createdCallback', 'attachedCallback', 'build', 'detachedCallback']) + }) }) })