Rework framework delegation (ModusCreateOrg#27)

* Rework framework delegation

* Fix and improve tests

* Streamline exports

* Fix circular dependency and imporove delegation

* Improve router init

* Reuse Delegate class instance

* Store Delegate instance as a static property

* Allow Vue to cleanup, don't remove from DOM

* Enable lazy loading with Ionic. Update to latest Ionic beta. Update tests

Author: michaeltintiuc

build/rollup.config.js

@@ -41,7 +41,7 @@ function baseConfig() {
       'vue',
       'vue-router',
       '@ionic/core/dist/esm',
-      '@ionic/core/css/ionic.css',
+      '@ionic/core/css/ionic.bundle.css',
       '@ionic/core/dist/ionic/svg',
       'ionicons/dist/collection/icon/icon.css',
     ],

package.json

@@ -65,7 +65,7 @@
     "vue": "^2.5.16",
     "vue-template-compiler": "^2.5.16",
     "vue-router": "^3.0.1",
-    "@ionic/core": "4.0.0-beta.4"
+    "@ionic/core": "4.0.0-beta.7"
   },
   "jestSonar": {
     "reportPath": "reports",

src/api-utils.js

@@ -1,28 +1,15 @@
-import { Delegate } from './framework-delegate'
-
 // A proxy method that initializes the controller and calls requested method
 export function proxyMethod(tag, method, ...opts) {
   return initController(tag).then(ctrl => ctrl[method].apply(ctrl, opts))
 }
 
 // Initialize an Ionic controller and append it to DOM
 export function initController(tag) {
-  const element = getOrAppendElement(tag)
-
-  // Set the framework-specific implementations for Ionic's internals
-  element.delegate = Delegate
-
-  // Return a Promise
-  return element.componentOnReady()
-}
-
-// Return existing Element (tag) or create a new one
-function getOrAppendElement(tag) {
   let element = document.querySelector(tag)
 
   if (element) {
-    return element
+    return element.componentOnReady()
   }
 
-  return document.body.appendChild(document.createElement(tag))
+  return document.body.appendChild(document.createElement(tag)).componentOnReady()
 }

src/api.js

@@ -1,58 +1,67 @@
+import Delegate from './framework-delegate'
 import ProxyController from './proxy-controller'
 import ProxyMenuController from './proxy-menu-controller'
+import ProxyDelegateController from './proxy-delegate-controller'
+
+let _Vue, _Delegate
 
 export default class Api {
   // Create or return a ActionSheetController instance
   get actionSheetController() {
-    return getOrCreateController('_actionSheetController', 'ion-action-sheet-controller')
+    return getOrCreateController('ion-action-sheet-controller')
   }
 
   // Create or return an AlertController instance
   get alertController() {
-    return getOrCreateController('_alertController', 'ion-alert-controller')
+    return getOrCreateController('ion-alert-controller')
   }
 
   // Create or return a LoadingController instance
   get loadingController() {
-    return getOrCreateController('_loadingController', 'ion-loading-controller')
+    return getOrCreateController('ion-loading-controller')
   }
 
   // Create or return a MenuController instance
   get menuController() {
-    return getOrCreateController('_menuController', 'ion-menu-controller', ProxyMenuController)
+    return getOrCreateMenuController('ion-menu-controller')
   }
 
   // Create or return a ModalController instance
   get modalController() {
-    return getOrCreateController('_modalController', 'ion-modal-controller')
+    return getOrCreateDelegatedController('ion-modal-controller')
   }
 
   // Create or return a PopoverController instance
   get popoverController() {
-    return getOrCreateController('_popoverController', 'ion-popover-controller')
+    return getOrCreateDelegatedController('ion-popover-controller')
   }
 
   // Create or return a ToastController instance
   get toastController() {
-    return getOrCreateController('_toastController', 'ion-toast-controller')
+    return getOrCreateController('ion-toast-controller')
   }
 }
 
 // Cached controllers
-Api._actionSheetController = null
-Api._alertController = null
-Api._loadingController = null
-Api._menuController = null
-Api._modalController = null
-Api._popoverController = null
-Api._toastController = null
+Api.cache = {
+  'ion-action-sheet-controller': null,
+  'ion-alert-controller': null,
+  'ion-loading-controller': null,
+  'ion-menu-controller': null,
+  'ion-modal-controller': null,
+  'ion-popover-controller': null,
+  'ion-toast-controller': null,
+}
 
 Api.install = function(Vue) {
   // If installed - skip
-  if (Api.install.installed) {
+  if (Api.install.installed && _Vue === Vue) {
     return
   }
 
+  _Vue = Vue
+  _Delegate = new Delegate(Vue)
+
   Api.install.installed = true
 
   // Ignore Ionic custom elements
@@ -66,11 +75,29 @@ Api.install = function(Vue) {
   })
 }
 
-// Get existing controller instance or initialize a new one
-function getOrCreateController(cache, tag, proxy = ProxyController) {
-  if (!Api[cache]) {
-    Api[cache] = new proxy(tag)
+// Get existing Base controller instance or initialize a new one
+function getOrCreateController(tag) {
+  if (!Api.cache[tag]) {
+    Api.cache[tag] = new ProxyController(tag)
+  }
+
+  return Api.cache[tag]
+}
+
+// Get existing Menu controller instance or initialize a new one
+function getOrCreateMenuController(tag) {
+  if (!Api.cache[tag]) {
+    Api.cache[tag] = new ProxyMenuController(tag)
+  }
+
+  return Api.cache[tag]
+}
+
+// Get existing Delegated controller instance or initialize a new one
+function getOrCreateDelegatedController(tag) {
+  if (!Api.cache[tag]) {
+    Api.cache[tag] = new ProxyDelegateController(tag, _Delegate)
   }
 
-  return Api[cache]
+  return Api.cache[tag]
 }

src/framework-delegate.js

@@ -1,74 +1,56 @@
-import Vue from 'vue'
-
-let globalVue = null
-
-// Detect environment (browser, module, etc.)
-if (typeof window !== 'undefined' && window.Vue !== undefined) {
-  globalVue = window.Vue
-} else if (typeof global !== 'undefined') {
-  globalVue = global.Vue
-}
-
-if (!globalVue) {
-  globalVue = Vue
-  globalVue.config.productionTip = false
-}
-
-// Attach the passed Vue component to DOM
-export function attachViewToDom(parentElement, vueComponent, propsData, classes) {
-  // Create an appropriate wrapper for the component
-  const wrapper = document.createElement(shouldWrapInIonPage(parentElement) ? 'ion-page' : 'div')
+export default class Delegate {
+  constructor(Vue) {
+    this.Vue = Vue
+  }
 
-  parentElement.appendChild(wrapper)
+  // Attach the passed Vue component to DOM
+  attachViewToDom(parentElement, component, opts, classes) {
+    // Get the Vue controller
+    return this.vueController(component).then(controller => {
+      const vueComponent = this.vueComponent(controller, opts)
 
-  // Create a Vue component constructor
-  const vueElement = globalVue.extend(vueComponent)
+      // Add any classes to the Vue component's root element
+      addClasses(vueComponent.$el, classes)
 
-  // Create a new instance of the Vue component
-  const page = new vueElement({ propsData }).$mount(wrapper)
-
-  // Add any classes the Vue component's root element
-  if (classes) {
-    for (const cls of classes) {
-      page.$el.classList.add(cls)
-    }
+      // Append the Vue component to DOM
+      parentElement.appendChild(vueComponent.$el)
+      return vueComponent.$el
+    })
   }
 
-  // Resolve the Vue component element
-  return Promise.resolve(page.$el)
-}
+  // Remove the earlier created Vue component from DOM
+  removeViewFromDom(parentElement, childElement) {
+    // Destroy the Vue component instance
+    if (childElement.__vue__) {
+      childElement.__vue__.$destroy()
+    }
 
-// Remove the earlier created Vue component from DOM
-export function removeViewFromDom(parentElement, childElement) {
-  // Destroy the Vue component instance
-  if (childElement.hasOwnProperty('__vue__')) {
-    childElement.__vue__.$destroy()
+    return Promise.resolve()
   }
 
-  // Remove from DOM
-  parentElement.removeChild(childElement)
-
-  return Promise.resolve()
-}
+  // Handle creation of sync and async components
+  vueController(component) {
+    return Promise.resolve(
+      typeof component === 'function' && component.cid === undefined
+        ? component().then(c => this.Vue.extend(isESModule(c) ? c.default : c))
+        : this.Vue.extend(component)
+    )
+  }
 
-const Delegate = {
-  attachViewToDom,
-  removeViewFromDom,
+  // Create a new instance of the Vue component
+  vueComponent(controller, opts) {
+    return new controller(opts).$mount()
+  }
 }
 
-export { Delegate }
+const hasSymbol = typeof Symbol === 'function' && typeof Symbol.toStringTag === 'symbol'
 
-// Detect wrapper to be used
-function shouldWrapInIonPage(element) {
-  return isElementModal(element) || isElementNav(element)
+function isESModule(obj) {
+  return obj.__esModule || (hasSymbol && obj[Symbol.toStringTag] === 'Module')
 }
 
-// Check if element is ION-NAV
-function isElementNav(element) {
-  return element.tagName.toUpperCase() === 'ION-NAV'
-}
-
-// Check if element has modal-wrapper class
-function isElementModal(element) {
-  return element.classList.contains('modal-wrapper')
+function addClasses(element, classes = []) {
+  for (const cls of classes) {
+    element.classList.add(cls)
+  }
 }

src/ionic.js

@@ -1,4 +1,4 @@
-import '@ionic/core/css/ionic.css'
+import '@ionic/core/css/ionic.bundle.css'
 import 'ionicons/dist/collection/icon/icon.css'
 import '@ionic/core/dist/ionic/svg'
 import { defineCustomElements } from '@ionic/core/dist/esm'

src/proxy-controller.js

@@ -6,7 +6,7 @@ export default class ProxyController {
     this.tag = tag
   }
 
-  create(opts) {
+  create(opts = {}) {
     return apiUtils.proxyMethod(this.tag, 'create', opts)
   }
 

src/proxy-delegate-controller.js

@@ -0,0 +1,17 @@
+import ProxyController from './proxy-controller'
+
+// A proxy class that allows early access to controller methods
+export default class ProxyDelegateController extends ProxyController {
+  constructor(tag, delegate) {
+    super(tag)
+
+    if (!ProxyDelegateController.delegate) {
+      ProxyDelegateController.delegate = delegate
+    }
+  }
+
+  create(opts = {}) {
+    opts.delegate = ProxyDelegateController.delegate
+    return super.create(opts)
+  }
+}

src/router.js

@@ -2,27 +2,13 @@ import VueRouter from 'vue-router'
 import IonVueRouter from './components/ion-vue-router.vue'
 import IonVueRouterTransitionless from './components/ion-vue-router-transitionless.vue'
 
-let globalVue = null
-let globalVueRouter = null
-let globalDisableIonicTransitions = false
+const inBrowser = typeof window !== 'undefined'
 
 // Detect environment (browser, module, etc.)
-if (typeof window !== 'undefined' && window.Vue !== undefined) {
-  globalVue = window.Vue
-  globalVueRouter = window.VueRouter
-  globalDisableIonicTransitions = window.disableIonicTransitions
-} else if (typeof global !== 'undefined') {
-  globalVue = global.Vue
-  globalVueRouter = global.VueRouter
-  globalDisableIonicTransitions = global.disableIonicTransitions
-}
-
-if (!globalVueRouter) {
-  globalVueRouter = VueRouter
-}
+const _VueRouter = inBrowser && window.VueRouter ? window.VueRouter : VueRouter
 
 // Extend the official VueRouter
-export default class Router extends globalVueRouter {
+export default class Router extends _VueRouter {
   constructor(...args) {
     super(...args)
 
@@ -97,17 +83,14 @@ Router.install = function(Vue, { disableIonicTransitions } = {}) {
   Router.install.installed = true
 
   // Install the official VueRouter
-  globalVueRouter.install(Vue)
+  _VueRouter.install(Vue)
 
   // Register the IonVueRouter component globally
   // either with default Ionic transitions turned on or off
-  Vue.component(
-    'IonVueRouter',
-    !disableIonicTransitions ? IonVueRouter : IonVueRouterTransitionless
-  )
+  Vue.component('IonVueRouter', disableIonicTransitions ? IonVueRouterTransitionless : IonVueRouter)
 }
 
 // Auto-install when Vue is found (i.e. in browser via <script> tag)
-if (globalVue) {
-  globalVue.use(Router, { disableIonicTransitions: globalDisableIonicTransitions })
+if (inBrowser && window.Vue) {
+  window.Vue.use(Router, { disableIonicTransitions: window.disableIonicTransitions })
 }

test/api.spec.js

@@ -39,7 +39,7 @@ describe('API', () => {
     const app = new Vue()
 
     expect(typeof app.$ionic).toBe('object')
-    expect(API.install()).toBeFalsy()
+    expect(API.install(Vue)).toBeFalsy()
   })
 
   it('Creates action sheet controller', () => {