refactor: AnimationHandler's dependencies being imported by the builder

the dependencies were being imported inside the begin(), middle(), or end() methods
TODO: import dependencies right after page load to improve UX

Author: igorMSoares

js-css-animations/AnimationHandler.js

@@ -9,13 +9,23 @@ export default class AnimationHandler {
 
   static async getModule(modulePath) {
     if (!(modulePath in this.modules)) {
+      const toCamelCase = path => {
+        const fileName = path.match(/\/([^\.]+)(?:\.js)?$/)[1];
+        return fileName.replace(/-([a-z])/g, (_, letter) =>
+          letter.toUpperCase()
+        );
+      };
       const module = await import(modulePath);
-      this.modules[modulePath] = module;
+      this.modules[toCamelCase(modulePath)] = module;
     }
 
     return this.modules[modulePath];
   }
 
+  async initDependencies() {
+    return Promise.resolve();
+  }
+
   begin() {
     throw new TypeError("Method 'begin' is not implemented.");
   }

js-css-animations/MotionAnimationHandler.js

@@ -7,8 +7,6 @@ export default class MotionAnimationHandler extends AnimationHandler {
     this.currentTransition = null;
   }
 
-  static #transitionsModule = null;
-
   static #removeMotionCssClass(element) {
     const className = [...element.classList].find(cl =>
       cl.match(/js\-anim\-\-(rotate|scale)/)
@@ -20,27 +18,20 @@ export default class MotionAnimationHandler extends AnimationHandler {
     }
   }
 
-  static async #initTransitionsModule() {
-    if (!this.#transitionsModule) {
-      this.#transitionsModule = await AnimationHandler.getModule(
-        './transitions.js'
-      );
-    }
+  async initDependencies() {
+    await AnimationHandler.getModule('./transitions.js');
   }
 
-  async begin() {
-    await MotionAnimationHandler.#initTransitionsModule();
-    this.currentTransition =
-      MotionAnimationHandler.#transitionsModule.getCurrentTransition(
-        this.element
-      );
+  begin() {
+    const { getCurrentTransition } = AnimationHandler.modules.transitions;
+    this.currentTransition = getCurrentTransition(this.element);
     MotionAnimationHandler.#removeMotionCssClass(this.element);
   }
 
-  async middle() {
-    await MotionAnimationHandler.#initTransitionsModule();
+  middle() {
     if (this.currentTransition) {
-      MotionAnimationHandler.#transitionsModule.appendTransition(
+      const { appendTransition } = AnimationHandler.modules.transitions;
+      appendTransition(
         this.element,
         CLASS_NAMES[this.action][this.animationId],
         this.currentTransition

js-css-animations/VisibilityAnimationWithParentResizeHandler.js

@@ -1,3 +1,4 @@
+import AnimationHandler from './AnimationHandler.js';
 import VisibilityAnimationHandler from './VisibilityAnimationHandler.js';
 
 export default class VisibilityAnimationWithParentResizeHandler extends VisibilityAnimationHandler {
@@ -9,76 +10,59 @@ export default class VisibilityAnimationWithParentResizeHandler extends Visibili
     this.parentMeasures = null;
   }
 
-  setDimensionsTransition(heightTransition, widthTransition) {
+  setDimensionsTransition({ heightTransition, widthTransition }) {
     this.heightTransition = heightTransition;
     this.widthTransition = widthTransition;
   }
 
-  static #resizeParentModule = null;
-  static #measurementsModule = null;
-
-  static async #initResizeParentModule() {
-    if (!VisibilityAnimationWithParentResizeHandler.#resizeParentModule) {
-      VisibilityAnimationWithParentResizeHandler.#resizeParentModule =
-        await this.getModule('./resize-parent.js');
-    }
+  async initDependencies() {
+    await AnimationHandler.getModule('./resize-parent.js');
+    await AnimationHandler.getModule('./measurements.js');
   }
 
-  static async #initMeasurementsModule() {
-    if (!VisibilityAnimationWithParentResizeHandler.#measurementsModule) {
-      VisibilityAnimationWithParentResizeHandler.#measurementsModule =
-        await this.getModule('./measurements.js');
-    }
-  }
-
-  async begin() {
-    await VisibilityAnimationWithParentResizeHandler.#initResizeParentModule();
+  begin() {
     super.begin();
 
     if (this.widthTransition || this.heightTransition) {
-      const parentData =
-        VisibilityAnimationWithParentResizeHandler.#resizeParentModule.initParentResize(
-          {
-            element: this.element,
-            action: this.action,
-            widthTransition: this.widthTransition,
-            heightTransition: this.heightTransition,
-          }
-        );
+      const { initParentResize } = AnimationHandler.modules.resizeParent;
+
+      const parentData = initParentResize({
+        element: this.element,
+        action: this.action,
+        widthTransition: this.widthTransition,
+        heightTransition: this.heightTransition,
+      });
 
       this.parentMeasures = parentData.parentMeasures;
       this.dimension = parentData.dimension;
     }
   }
 
-  async middle() {
-    await VisibilityAnimationWithParentResizeHandler.#initMeasurementsModule();
+  middle() {
     super.middle();
 
     setTimeout(() => {
-      if (this.dimension)
-        VisibilityAnimationWithParentResizeHandler.#measurementsModule.setParentMaxMeasures(
-          {
-            parentState: 'final',
-            element: this.element,
-            parentMeasures: this.parentMeasures,
-            action: this.action,
-            dimension: this.dimension,
-          }
-        );
+      if (this.dimension) {
+        const { setParentMaxMeasures } = AnimationHandler.modules.measurements;
+
+        setParentMaxMeasures({
+          parentState: 'final',
+          element: this.element,
+          parentMeasures: this.parentMeasures,
+          action: this.action,
+          dimension: this.dimension,
+        });
+      }
     }, 0);
   }
 
-  async end() {
-    await VisibilityAnimationWithParentResizeHandler.#initResizeParentModule();
+  end() {
     super.end();
 
     const { widthTransition, heightTransition } = this;
     if (widthTransition || heightTransition) {
-      VisibilityAnimationWithParentResizeHandler.#resizeParentModule.endParentResize(
-        this.element,
-        { widthTransition, heightTransition }
-      );
+      const { endParentResize } = AnimationHandler.modules.resizeParent;
+      endParentResize(this.element, { widthTransition, heightTransition });
     }
   }
 }

js-css-animations/animate.js

@@ -2,7 +2,6 @@
  * Handles all the animation process
  * @module animate
  */
-import VisibilityAnimationWithParentResizeHandler from './VisibilityAnimationWithParentResizeHandler.js';
 import {
   MOTION_ANIMS_ID,
   PROPERTY_NAMES,
@@ -343,46 +342,38 @@ const initCallback = (trigger, fn, type) => {
 
 const getAnimationHandler = async (animType, args) => {
   const { element, action, id } = args;
+  let animationHandler = null;
+
   if (animType === 'motion') {
     const { default: MotionAnimationHandler } = await import(
       './MotionAnimationHandler.js'
     );
-    return new MotionAnimationHandler(element, action, id);
-  }
-
-  if (animType === 'visibility') {
+    animationHandler = new MotionAnimationHandler(element, action, id);
+  } else if (animType === 'visibility') {
     const { widthTransition, heightTransition } = args;
 
     if (widthTransition || heightTransition) {
       const { default: VisibilityAnimationHandler } = await import(
         './VisibilityAnimationWithParentResizeHandler.js'
       );
-      const animationHandler = new VisibilityAnimationHandler(
-        element,
-        action,
-        id
-      );
+      animationHandler = new VisibilityAnimationHandler(element, action, id);
       animationHandler.setDimensionsTransition({
         heightTransition,
         widthTransition,
       });
-
-      return animationHandler;
+    } else {
+      const { default: VisibilityAnimationHandler } = await import(
+        './VisibilityAnimationHandler.js'
+      );
+      animationHandler = new VisibilityAnimationHandler(element, action, id);
     }
 
-    const { default: VisibilityAnimationHandler } = await import(
-      './VisibilityAnimationHandler.js'
-    );
-    const animationHandler = new VisibilityAnimationHandler(
-      element,
-      action,
-      id
-    );
     if (args.overflowHidden) animationHandler.setOverflowHidden(true);
     if (args.maintainSpace) animationHandler.setMaintainSpace(true);
-
-    return animationHandler;
   }
+
+  await animationHandler.initDependencies();
+  return animationHandler;
 };
 
 /**
@@ -441,15 +432,15 @@ const animate = async (element, action, id, opts = {}) => {
     }
   };
 
-  await handleAnimation.begin();
+  handleAnimation.begin();
   if (typeof start === 'function') {
     initCallback(trigger, start, 'start');
   }
   element.classList.add(CLASS_NAMES[action][id]);
   element.classList.remove(CLASS_NAMES[OPPOSITE_ACTION[action]][id]);
-  await handleAnimation.middle();
+  handleAnimation.middle();
 
-  setTimeout(() => {
+  setTimeout(async () => {
     handleAnimation.end();
     if (typeof complete === 'function') {
       initCallback(trigger, complete, 'complete');
@@ -554,6 +545,17 @@ const init = (animationId, opts = {}) => {
     cursor,
   } = opts;
 
+  /** TODO: load dependencies on page load */
+  // async function loadDependencies() {
+  //   await import('./resize-parent.js');
+  //   await import('./measurements.js');
+  //   await import('./transitions.js');
+
+  //   removeEventListener('load', loadDependencies);
+  // }
+
+  // addEventListener('load', loadDependencies);
+
   document.querySelectorAll(trigger).forEach(btn => {
     btn.classList.add(CLASS_NAMES.btnCursor);
     if (typeof cursor === 'string') {