Raster N Animations (syrjs#149)

* Included a polyfill for web-animations api. Its a CDN to the standard web-aniamtions polyfill

* Fixes for Web Animator. Translations

* Including height animations  and fixing XY animations

* Inlcuded width animations. Ran Pretty and Cleaned up

* Fixed XY animations to respect the changes

* Included composite for adding animations. Cleanup and Chaching animated elements

* Passing down Target or last rendered parent for the children to get attached to

* Putting back Destx and DestY

lib/rasters/dom/animator.js

@@ -89,10 +89,13 @@ class animator {
     const y = animationValues.y || 0;
     const y2 = animationValues.y2 || 0;
 
+    let destinationY = (y > y2) ? y2 - y : y2 + y;
+   let destinationX = (x > x2) ? x2 - y : x2 + x;
+
     let animation = element.animate(
       [
         { transform: `translateX(${x}px) translateY(${y}px)` },
-        { transform: `translateX(${x2}px) translateY(${y2}px)` },
+        { transform: `translateX(${destinationX}px) translateY(${destinationY}px)` },
       ],
       {
         duration: animationValues.duration,

lib/rasters/dom/raster.js

@@ -11,23 +11,22 @@ class raster {
     Animator.animate(ast);
   }
   build(ast, target) {
-
     let instance = this.createComponent(ast);
     let renderTarget = target ? target : document.body;
     renderTarget =
       renderTarget instanceof HTMLElement
         ? renderTarget
         : document.getElementById(renderTarget);
     if (instance) {
-
       if(!ast.update) {
         renderTarget.appendChild(instance);
+        SyrEvents.emit({
+          type: 'componentDidMount',
+          guid: ast.guid
+        });
+      } else {
+        instance = renderTarget;
       }
-
-      SyrEvents.emit({
-        type: 'componentDidMount',
-        guid: ast.guid,
-      });
       if (ast.children) {
         this.buildChidren(ast, instance, ast.update);
       }
@@ -36,39 +35,37 @@ class raster {
   buildChidren(component, parent, isUpdate) {
     component.children.forEach(element => {
       let component;
-      if (element.instance.tag) {
+      if (element.instance && element.instance.tag) {
         component = element;
       } else if (element.children) {
         component = element.children[0];
       }
-      let instance = this.createComponent(component);
-
-      if(!isUpdate) {
+      let instance = this.createComponent(component) || parent;
+      if(instance) {
+      if (!isUpdate) {
         parent.appendChild(instance);
+        SyrEvents.emit({
+          type: 'componentDidMount',
+          guid: element.guid,
+        });
       }
-
-
-      SyrEvents.emit({
-        type: 'componentDidMount',
-        guid: element.guid,
-      });
-
+    }
       if (component.children) {
         this.buildChidren(component, instance);
       }
     });
   }
   createComponent(component) {
     let instance = _instances[component.guid];
-
+    if(component.instance){
     let tag = component.instance.tag ? component.instance.tag(instance) : 'div';
 
     if (typeof tag === 'object' && instance == null) {
       instance = tag;
     } else if(instance == null) {
       instance = document.createElement(tag);
     }
-    
+
     instance.id = component.guid;
     _instances[instance.id] = instance;
 
@@ -83,6 +80,7 @@ class raster {
     if (styles) {
       Styler.styleElement(instance, styles);
     }
+  }
 
     return instance;
   }