[DO NOT MERGE WIP] Web stuff

android/syrnative/build.gradle

@@ -17,7 +17,7 @@ android {
             proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
         }
     }
-    buildToolsVersion '26.0.2'
+    buildToolsVersion '27.0.3'
     compileOptions {
         sourceCompatibility JavaVersion.VERSION_1_7
         targetCompatibility JavaVersion.VERSION_1_7

lib/component.js

@@ -34,15 +34,17 @@ class Component {
 
       // send updated AST to raster
       // check to see that this instance is available before we attempt to update it
-      if(Render.getInstance(this.uuid)) {
+      if (Render.getInstance(this.uuid)) {
         this.render ? Render(this) : '';
         if (cb) {
           cb();
         }
       } else {
-        console.warn('Set state called, while component exited the component tree! >>>', this);
+        console.warn(
+          'Set state called, while component exited the component tree! >>>',
+          this
+        );
       }
-
     };
   }
 }

lib/events.js

@@ -68,12 +68,14 @@ class events {
     let lifeCycleNotifiers = {};
     let lifeCycleQueue = [];
     function handleLifeCycle(event, component) {
+      // console.log('Events', event, component)
       // todo: early exit logic, if we've crawled a parent alreadycd
       // then lets not crawl it again.
       let walk = (event, component) => {
         let handler =
           component[event.type] ||
           (component.props && component.props[event.type]);
+        // console.log('handler>>>', handler)
         if (handler) {
           // if the component is currently already awaiting notification queue
           // then notify

lib/rastermanager.js

@@ -207,7 +207,6 @@ const initializeComponent = component => {
 
 const updateComponent = (component, rendered) => {
   function reflow(component, passedUpdates) {
-
     let updates = [];
     let shouldComponentUpdate = true;
     let previousProps = (component.instance && component.instance.props) || {};
@@ -227,14 +226,17 @@ const updateComponent = (component, rendered) => {
           // console.log('setting props >>> ' + component.elementName + ' ' + JSON.stringify(component.instance.props) + ' --> ' + JSON.stringify(passedUpdates.attributes))
           component.instance.setProps(passedUpdates.attributes);
 
-
           if (component.instance.shouldComponentUpdate) {
-            shouldComponentUpdate = component.instance.shouldComponentUpdate.call(this, passedUpdates.attributes, component.instance.state);
+            shouldComponentUpdate = component.instance.shouldComponentUpdate.call(
+              this,
+              passedUpdates.attributes,
+              component.instance.state
+            );
           }
 
           // --- component update start ---
 
-          if(shouldComponentUpdate) {
+          if (shouldComponentUpdate) {
             if (passedUpdates.attributes.style) {
               component.instance.style = passedUpdates.attributes.style;
               // console.log('updating styles >>> ' + component.elementName + '' + JSON.stringify(passedUpdates.attributes.style))
@@ -268,7 +270,6 @@ const updateComponent = (component, rendered) => {
     }
 
     if (updates.length > 0) {
-
       updates = flattenChildren(updates);
 
       // get a fence id from the components children
@@ -291,7 +292,6 @@ const updateComponent = (component, rendered) => {
 
           // check the cache
           if (typeof _cache[uuid] == 'undefined') {
-
             // key is added during create component
             // not clean :shrug: - derek
             update.uuid = fenceid + '-' + update.guid;
@@ -304,7 +304,7 @@ const updateComponent = (component, rendered) => {
             component.children.splice(index, 0, newComponent);
           } else {
             // update the component
-            reflow(_cache[uuid], update)
+            reflow(_cache[uuid], update);
           }
 
           // cache the update id's to verify if we need to unmount
@@ -319,22 +319,23 @@ const updateComponent = (component, rendered) => {
 
         // if the component is not int he update tree
         // mark for removal
-        if(!updateIDs[child.instance.uuid]) {
+        if (!updateIDs[child.instance.uuid]) {
           child.unmount = true;
           // and remove from cache
           delete _cache[child.instance.uuid];
-        }
-        else if(child.unmount) {
+        } else if (child.unmount) {
           // if we're reconciling a tree previously built,
           // remove any unmounts from the tree we marked last time
           component.children.splice(index, 1);
         }
       }
-
     }
 
     if (component.instance && component.instance.componentDidUpdate) {
-      shouldComponentUpdate = component.instance.componentDidUpdate.call(this, previousProps);
+      shouldComponentUpdate = component.instance.componentDidUpdate.call(
+        this,
+        previousProps
+      );
     }
   }
 
@@ -346,7 +347,7 @@ const updateComponent = (component, rendered) => {
 
   reflow(component);
   component.update = true;
-  
+
   // console.timeEnd("ui reconciled");
   return component;
 };

lib/rasters/dom/animator.js

@@ -1,3 +1,5 @@
+import {DOMRaster} from './index';
+
 class animator {
   constructor() {
     this._animatedInstances = {};
@@ -12,64 +14,68 @@ class animator {
       this._animatedInstances[message.guid] = element;
     }
     const animationValues = message.animation;
+    const duration = animationValues.duration;
     const property = animationValues.animatedProperty;
     let fromValue = animationValues.value;
     let toValue = animationValues.toValue;
-    let keyframes = [];
+    let transform;
     if (property) {
       switch (true) {
         case /opacity/.test(property): {
-          keyframes = [{ opacity: fromValue }, { opacity: toValue }];
+          transform = null;
           break;
         }
         case /height/.test(property): {
-          fromValue = element.style.height;
-          toValue = `${toValue}px`;
-          keyframes = [{ height: fromValue }, { height: toValue }];
+          transform = `translateY(${toValue}px)`;
           break;
         }
         case /width/.test(property): {
-          fromValue = element.style.width;
-          toValue = `${toValue}px`;
-          keyframes = [{ width: fromValue }, { width: toValue }];
+          transform = `translateX(${toValue}px)`;
           break;
         }
         case /rotate|rotate[XYZ]/.test(property): {
-          keyframes = [
-            {
-              transform: `${property}(${fromValue}deg)`,
-            },
-            {
-              transform: `${property}(${toValue}deg)`,
-            },
-          ];
+          let value = toValue;
+
+          let fullRotation = value % 360 == 0 ? true : false;
+
+          // match axis to get current rotation angle
+          let re = /(rotateZ)(\(.*(?:deg\)))/g;
+          let degrees = element.style.webkitTransform.match(re);
+          if (degrees && degrees.length > 0) {
+            degrees = parseInt(degrees[0].replace(/^\D+/gi, ''));
+          }
+
+          // get the value of the next rotation from current value
+          value = value + degrees;
+          transform = `${property}(${value}deg)`;
           break;
         }
       }
-    } else {
-      //default to z animations A.K.A rotate
-      keyframes = [
-        { transform: `rotateZ(${fromValue}deg)` },
-        { transform: `rotateZ(${toValue}deg)` },
-      ];
     }
 
-    let animation = element.animate(keyframes, {
-      duration: animationValues.duration,
-      fill: 'both',
-      composite: 'add',
-    });
-    animation.onfinish = () => {
-      //@TODO Looking for alternatives to remove this.
-      if (property == 'height' || property == 'width') {
-        element.style[property] = toValue;
-      }
-      SyrEvents.emit({
-        type: 'animationComplete',
-        guid: message.guid,
-        animation: message.animation,
-      });
+    let handler = () => {
+      // remove handler
+      element.removeEventListener(`transitionend`, handler);
+      // callback
+      setTimeout(() => {
+        SyrEvents.emit({
+          type: 'animationComplete',
+          guid: message.guid,
+          animation: message.animation,
+        });
+      }, 0);
     };
+    // add call back
+    element.addEventListener(`transitionend`, handler, false);
+
+    // animate
+    element.style.transition = `all ${duration / 1000 || 0}s`;
+    element.style.transitionTimingFunction = 'linear';
+    if (transform) {
+      element.style.transform = transform;
+    } else {
+      element.style.opacity = toValue;
+    }
   }
 
   animateComponentXY(message) {
@@ -82,36 +88,35 @@ class animator {
     }
 
     const animationValues = message.animation;
+    const duration = `all ${animationValues.duration / 1000 || 1}s`;
 
     const x = animationValues.x || 0;
     const x2 = animationValues.x2 || 0;
     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(${destinationX}px) translateY(${destinationY}px)`,
-        },
-      ],
-      {
-        duration: animationValues.duration,
-        fill: 'both',
-        composite: 'add',
-      }
-    );
-
-    animation.onfinish = () => {
-      SyrEvents.emit({
-        type: 'animationComplete',
-        guid: message.guid,
-        animation: message.animation,
-      });
+
+    // set the call back
+    let handler = () => {
+      // remove handler
+      element.removeEventListener('transitionend', handler);
+      // callback
+      setTimeout(() => {
+        SyrEvents.emit({
+          type: 'animationComplete',
+          guid: message.guid,
+          animation: message.animation,
+        });
+      }, 0);
     };
+    // add call back
+    element.addEventListener('transitionend', handler, false);
+
+    // animate
+    element.style.transition = duration;
+    element.style.transitionTimingFunction = 'linear';
+    element.style.transform = `translate(${x2}px, ${destinationY}px)`;
   }
 
   animate(message) {

lib/rasters/dom/index.js

@@ -1,4 +1,5 @@
 import { Raster } from './raster';
+import { RasterUtils } from '../rasterutils';
 
 const document = global.document || {
   body: {
@@ -37,6 +38,9 @@ class domraster {
   }
 
   props() {
+    if (RasterUtils.props && RasterUtils.props.initial_props) {
+      return JSON.parse(RasterUtils.props.initial_props);
+    }
     return {};
   }
 }