fixed integration with Vue for production builds

Author: jamiepine

lib/intergrations/use.ts

@@ -1,49 +1,96 @@
 import reactIntergration from './react.intergration';
 import vueIntergration from './vue.intergration';
+import Pulse from '..';
 
 export interface Intergration {
-  frameworkConstructor: any;
-  name: any;
-  bind: Function;
-  wrapper: Function;
-  updateMethod: Function;
-  onReady: Function;
+  ready?: boolean;
+  frameworkConstructor?: any;
+  name?: any;
+  bind?: Function;
+  updateMethod?: Function;
+  wrapper?: Function;
+  onReady?: Function;
 }
 
-export default (frameworkConstructor, PulseConstructor) => {
-  // React support
+// This gets assigned to the constructor Pulse.intergration
+const intergration: Intergration = {
+  ready: false
+};
 
-  if (!PulseConstructor.intergration) PulseConstructor.intergration = {};
+export default function use(plugin: any, PulseConstructor: Pulse) {
+  const frameworkName = getFrameworkName(plugin);
 
-  if (
-    frameworkConstructor &&
-    frameworkConstructor.hasOwnProperty(
-      '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED'
-    )
-  ) {
-    PulseConstructor.intergration = reactIntergration;
-    // Vue support
-  } else if (frameworkConstructor.name === 'Vue') {
-    PulseConstructor.intergration = vueIntergration;
-
-    // Custom Intergration
-  } else if (
-    frameworkConstructor.hasOwnProperty('name') &&
-    frameworkConstructor.hasOwnProperty('bind') &&
-    frameworkConstructor.hasOwnProperty('updateData')
-  ) {
-    PulseConstructor.intergration = frameworkConstructor;
+  switch (frameworkName) {
+    case 'react':
+      intergrate(reactIntergration, 'react');
+      break;
+    case 'vue':
+      intergrate(vueIntergration, 'vue');
+      break;
+    case 'custom':
+      if (validateCustomFramework(plugin as Intergration))
+        intergrate(plugin, 'custom');
+      break;
   }
 
-  if (!PulseConstructor.intergration) {
+  // assign framework constructor to intergration object
+  if (frameworkName !== 'custom') intergration.frameworkConstructor = plugin;
+
+  // Inject into static property of constructor
+  PulseConstructor.intergration = intergration;
+
+  // if the intergration is ready, call bind otherwise warn user
+  if (intergration.ready) intergration.bind(PulseConstructor);
+  else {
     console.error(
-      'Pulse Error - Intergration not found, make sure to call "Pulse.use()" before "new Pulse()"'
+      `Pulse: Failed to intergrate with framework! It's possible you didn't call Pulse.use() before new Pulse.`
     );
-  } else {
-    PulseConstructor.intergration.frameworkConstructor = frameworkConstructor;
+    // TODO: in some cases one might want to use Pulse without a framework so consider making this warning only show in dev, and making a config option to hide it entirely.
   }
+}
 
-  PulseConstructor.intergration.bind(PulseConstructor);
+//******** HELPERS BELOW *******
 
-  // PulseConstructor.intergration.bind(PulseConstructor);
-};
+function intergrate(int: Intergration, frameworkName: string) {
+  // bind all properties from intergration
+  Object.keys(int).forEach(property => {
+    intergration[property] = int[property];
+  });
+  // assign name and set ready
+  intergration.name = frameworkName;
+  intergration.ready = true;
+}
+
+function validateCustomFramework(customIntergration: Intergration): boolean {
+  let valid: boolean = true;
+  // check for required properties
+  ['name', 'bind', 'updateData'].forEach(property => {
+    if (!customIntergration.hasOwnProperty(property)) valid = false;
+  });
+  return valid;
+}
+
+function getFrameworkName(frameworkConstructor): string {
+  let name: string = 'custom';
+  if (!frameworkConstructor) return name;
+
+  // ATTEMPT CHECK FOR REACT
+  if (
+    frameworkConstructor.hasOwnProperty(
+      '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED'
+    )
+  )
+    return 'react';
+
+  // ATTEMPT CHECK FOR VUE
+  // this check works in dev, but not prod since Vue is a function that returns a constructor in prod, for some reason.
+  if (frameworkConstructor.name === 'Vue') return 'vue';
+
+  if (typeof frameworkConstructor === 'function') {
+    return 'vue'; // more performant than below since it's kinda annoying to contruct an instance of Vue just to check if it is Vue, but it shouldn't hurt until we add support for more frameworks.
+    let maybeVue = new frameworkConstructor();
+    if (maybeVue._isVue) return 'vue';
+  }
+
+  return name;
+}