clean up

dmikey · Jan 12, 2018 · 3158177 · 3158177
1 parent c319a97
commit 3158177
Show file tree

Hide file tree

Showing 22 changed files with 169 additions and 130 deletions.
diff --git a/dev.config.js b/dev.config.js
@@ -51,7 +51,7 @@ module.exports = {
       mobile: true,
       bodyHtmlSnippet: '<div id="root"></div>',
       template: require('html-webpack-template'),
-      bodyHtmlSnippet: '<style>body{margin:0;}</style>',
+      bodyHtmlSnippet: '<style>body{margin:0;font-family:arial;}</style>',
       links: []
     }),
   ],

diff --git a/lib/animated.js b/lib/animated.js
@@ -78,9 +78,11 @@ class animated extends Component {
     let animation = this.animation;
     callbacks[animation.guid] = callback;
 
-    let cached = RasterManager.render.getInstance(this.AnimationTargets[animation.guid]);
+    let cached = RasterManager.render.getInstance(
+      this.AnimationTargets[animation.guid]
+    );
 
-    if(typeof animation.x2 == 'number' || typeof animation.y2 == 'number') {
+    if (typeof animation.x2 == 'number' || typeof animation.y2 == 'number') {
       cached.instance.state.y = animation.y2;
       cached.instance.state.x = animation.x2;
     }

diff --git a/lib/component.js b/lib/component.js
@@ -4,7 +4,6 @@ import { Utils } from './utils';
 
 class Component {
   constructor() {
-
     // init state
     this.state = {};
 

diff --git a/lib/events.js b/lib/events.js
@@ -93,7 +93,7 @@ class events {
     }
 
     // export globally so the JS bridge can use it.
-    if(typeof window !== 'undefined') {
+    if (typeof window !== 'undefined') {
       window.SyrEvents = window.SyrEvents || this;
     } else {
       global.SyrEvents = global.SyrEvents || this;

diff --git a/lib/nativemodules.js b/lib/nativemodules.js
@@ -2,39 +2,37 @@ import { RasterManager } from './rastermanager';
 
 class nativemodules {
   constructor() {
-
-    if(typeof window !== 'undefined') {
-
-    var queryStringKeyValue = window.location.search
-      .replace('?', '')
-      .split('&');
-        if (queryStringKeyValue != '') {
-          for (let i = 0; i < queryStringKeyValue.length; i++) {
-            let className = queryStringKeyValue[i]
+    if (typeof window !== 'undefined') {
+      var queryStringKeyValue = window.location.search
+        .replace('?', '')
+        .split('&');
+      if (queryStringKeyValue != '') {
+        for (let i = 0; i < queryStringKeyValue.length; i++) {
+          let className = queryStringKeyValue[i]
+            .split('=')[0]
+            .replace(queryStringKeyValue[i].split('=')[1], '');
+          let classObj = this[className] || {};
+          let method = queryStringKeyValue[i]
+            .split('=')[1]
+            .replace('__syr_export__', '')
+            .split(':')[0];
+          classObj[method] = function() {
+            var selector = queryStringKeyValue[i].split('=')[1];
+            var nsClass = queryStringKeyValue[i]
               .split('=')[0]
               .replace(queryStringKeyValue[i].split('=')[1], '');
-            let classObj = this[className] || {};
-            let method = queryStringKeyValue[i]
-              .split('=')[1]
-              .replace('__syr_export__', '')
-              .split(':')[0];
-            classObj[method] = function() {
-              var selector = queryStringKeyValue[i].split('=')[1];
-              var nsClass = queryStringKeyValue[i]
-                .split('=')[0]
-                .replace(queryStringKeyValue[i].split('=')[1], '');
-              // post ast to native raster
-              // todo abstract this away from window
-                window.webkit.messageHandlers['SyrNative'].postMessage({
-                  type: 'cmd',
-                  class: nsClass,
-                  selector: selector,
-                  args: JSON.stringify(arguments),
-                });
-            };
-            this[className] = classObj;
-          }
+            // post ast to native raster
+            // todo abstract this away from window
+            window.webkit.messageHandlers['SyrNative'].postMessage({
+              type: 'cmd',
+              class: nsClass,
+              selector: selector,
+              args: JSON.stringify(arguments),
+            });
+          };
+          this[className] = classObj;
         }
+      }
     }
   }
 }

diff --git a/lib/pixelratio.js b/lib/pixelratio.js
@@ -6,13 +6,19 @@ class pixelratio {
     return Dimensions.get('window').scale;
   }
   getPixelSizeForLayoutSize(size) {
+    // check orientation for scaling calc
+    const diff =
+      Dimensions.get('window').width - Dimensions.get('window').height;
+    const currentScreen =
+      diff < 1
+        ? Dimensions.get('window').width
+        : Dimensions.get('window').height;
     const baseScreen = 640; // iPhone 5
-    const ratio = Dimensions.get('window').width / baseScreen;
+    const ratio = currentScreen / baseScreen;
     return Math.round(ratio * size);
   }
 }
 
-
 const PixelRatio = new pixelratio();
 
-export { PixelRatio };
+export { PixelRatio };
diff --git a/lib/rastermanager.js b/lib/rastermanager.js
@@ -30,7 +30,6 @@ RasterManager.getRaster = () => {
  */
 const createComponent = ast => {
   if (typeof ast.elementName == 'function') {
-
     // construct a new instance
     ast.instance = new ast.elementName(ast.attributes);
     ast.instance.guid = ast.guid;
@@ -46,7 +45,10 @@ const createComponent = ast => {
     // pass down props to the child after construction
     if (ast.attributes && ast.attributes.props) {
       if (ast.instance.componentWillRecieveProps) {
-        ast.instance.componentWillRecieveProps.call(ast.instance, ast.attributes.props);
+        ast.instance.componentWillRecieveProps.call(
+          ast.instance,
+          ast.attributes.props
+        );
       }
       ast.instance.props = ast.attributes.props;
     }

diff --git a/lib/rasters/dom/animator.js b/lib/rasters/dom/animator.js
@@ -57,18 +57,17 @@ class animator {
     const y = animationValues.y || 0;
     const y2 = animationValues.y2 || 0;
 
-    const element = document
-      .getElementById(message.guid);
+    const element = document.getElementById(message.guid);
     const animation = element.animate(
-        [
-          { transform: `translateX(${x}px) translateY(${y}px)` },
-          { transform: `translateX(${x2}px) translateY(${y2}px)` },
-        ],
-        {
-          duration: animationValues.duration,
-          iterations: 1,
-        }
-      );
+      [
+        { transform: `translateX(${x}px) translateY(${y}px)` },
+        { transform: `translateX(${x2}px) translateY(${y2}px)` },
+      ],
+      {
+        duration: animationValues.duration,
+        iterations: 1,
+      }
+    );
     animation.onfinish = () => {
       //setting the final postion of the element as the final XnY from the animation.
       element.style['top'] = y2 + 'px';

diff --git a/lib/rasters/dom/index.js b/lib/rasters/dom/index.js
@@ -17,7 +17,7 @@ class domraster {
 
   render(component, target) {
     // render a view
-    this.sendMessage('gui',{component, target});
+    this.sendMessage('gui', { component, target });
   }
 
   sendMessage(type, message) {
@@ -32,7 +32,7 @@ class domraster {
     return {
       width: window.innerWidth,
       height: window.innerHeight,
-      scale: window.devicePixelRatio || 1
+      scale: window.devicePixelRatio || 1,
     };
   }
 

diff --git a/lib/rasters/dom/raster.js b/lib/rasters/dom/raster.js
@@ -16,7 +16,10 @@ class raster {
   build(ast, target) {
     let instance = this.createComponent(ast);
     let renderTarget = target ? target : document.body;
-    renderTarget = renderTarget instanceof HTMLElement ? renderTarget : document.getElementById(renderTarget);
+    renderTarget =
+      renderTarget instanceof HTMLElement
+        ? renderTarget
+        : document.getElementById(renderTarget);
     if (instance) {
       renderTarget.appendChild(instance);
       SyrEvents.emit({
@@ -53,7 +56,7 @@ class raster {
     }
     instance.id = component.guid;
     _instances[instance.id] = instance;
-    if(component.attributes.className) {
+    if (component.attributes.className) {
       instance.className = component.attributes.className;
     }
     let styles = component.instance.attributes

diff --git a/lib/rasters/rasterutils.js b/lib/rasters/rasterutils.js
@@ -1,6 +1,6 @@
 class rasterUtils {
   constructor() {
-    if(typeof window !== 'undefined') {
+    if (typeof window !== 'undefined') {
       var pairs = window.location.search.slice(1).split('&');
       this.props = {};
       pairs.forEach(pair => {

diff --git a/lib/rasters/wkwebview.js b/lib/rasters/wkwebview.js
@@ -35,12 +35,12 @@ class wkraster {
     return {
       width: RasterUtils.props.window_width,
       height: RasterUtils.props.window_height,
-      scale: RasterUtils.props.screen_density
+      scale: RasterUtils.props.screen_density,
     };
   }
 
   props() {
-    if(RasterUtils.props && RasterUtils.props.inital_props) {
+    if (RasterUtils.props && RasterUtils.props.inital_props) {
       return JSON.parse(RasterUtils.props.initial_props);
     }
     return {};

diff --git a/lib/stackview.js b/lib/stackview.js
@@ -6,7 +6,7 @@ class StackView extends Component {
     let tag = document.createElement('div');
     tag.style['display'] = 'flex';
     tag.style['flex-direction'] = this.attributes.axis;
-     //defaulting for now. Can also be passed in as props
+    //defaulting for now. Can also be passed in as props
     tag.style['align-items'] = 'center';
     tag.style['justify-content'] = 'space-around';
     return tag;

diff --git a/lib/touchable.js b/lib/touchable.js
@@ -4,7 +4,7 @@ import { Component } from './component';
 class TouchableOpacity extends Component {
   tag() {
     let tag = document.createElement('div');
-    tag.onclick = (event) => {
+    tag.onclick = event => {
       SyrEvents.emit({
         type: 'onPress',
         guid: event.target.id,

diff --git a/samples/example.js b/samples/example.js
@@ -1,42 +1,61 @@
-import { Component, Render, View, Dimensions, Animated, Text, Button, Image, TouchableOpacity, LinearGradient, PixelRatio } from '../index';
+import {
+  Component,
+  Render,
+  View,
+  Dimensions,
+  Animated,
+  Text,
+  Button,
+  Image,
+  TouchableOpacity,
+  LinearGradient,
+  PixelRatio,
+} from '../index';
 
 const styles = {
   stage: {
     width: Dimensions.get('window').width,
     height: Dimensions.get('window').height,
-    backgroundColor: '#eeeeee'
+    backgroundColor: '#eeeeee',
   },
   button: {
-    height:PixelRatio.getPixelSizeForLayoutSize(125),
-    top:Dimensions.get('window').height - PixelRatio.getPixelSizeForLayoutSize(200),
-    left:(Dimensions.get('window').width/2) - (Dimensions.get('window').width - PixelRatio.getPixelSizeForLayoutSize(200))/2,
-    width:Dimensions.get('window').width - PixelRatio.getPixelSizeForLayoutSize(200),
-    backgroundColor:"#0070ba", color: "#ffffff",
-    borderRadius:15
+    height: PixelRatio.getPixelSizeForLayoutSize(125),
+    top:
+      Dimensions.get('window').height -
+      PixelRatio.getPixelSizeForLayoutSize(200),
+    left:
+      Dimensions.get('window').width / 2 -
+      (Dimensions.get('window').width -
+        PixelRatio.getPixelSizeForLayoutSize(200)) /
+        2,
+    width:
+      Dimensions.get('window').width -
+      PixelRatio.getPixelSizeForLayoutSize(200),
+    backgroundColor: '#0070ba',
+    color: '#ffffff',
+    borderRadius: 15,
   },
   text: {
-    color: "#000000",
+    color: '#000000',
     fontSize: PixelRatio.getPixelSizeForLayoutSize(48),
     width: Dimensions.get('window').width,
     height: 50,
     top: PixelRatio.getPixelSizeForLayoutSize(50),
     left: 0,
-    textAlign:'center'
-  }
+    textAlign: 'center',
+  },
 };
 class MyComponent extends Component {
   constructor() {
     super();
   }
   render() {
-    return <View style={styles.stage}>
-      <Text style={styles.text}>
-       Welcome to Syr Applications!
-      </Text>
-      <Button style={styles.button}>
-        Test Button
-      </Button>
-     </View>;
+    return (
+      <View style={styles.stage}>
+        <Text style={styles.text}>Welcome to Syr Applications!</Text>
+        <Button style={styles.button}>Test Button</Button>
+      </View>
+    );
   }
   componentDidMount() {
     console.log(PixelRatio.get());

diff --git a/test/jsxtest.js b/test/jsxtest.js
@@ -6,13 +6,15 @@ describe('JSX', function() {
     it('should not include comments in children', function() {
       class MyComponent extends Component {
         render() {
-          return <View>
-          {/*These are comments*/}
-          <View/>
-          {/*These are comments*/}
-          <Text> Hello </Text>
-          {/*These are comments*/}
-          </View>;
+          return (
+            <View>
+              {/*These are comments*/}
+              <View />
+              {/*These are comments*/}
+              <Text> Hello </Text>
+              {/*These are comments*/}
+            </View>
+          );
         }
       }