Merge pull request syrjs#121 from MSiddharthReddy/jsxmodNrendertargets

Jsx Mod nd Render Targets for web raster

dev.config.js

@@ -47,9 +47,9 @@ module.exports = {
   plugins: [
     new HtmlWebpackPlugin({
       inject: false,
-      appMountId: 'app',
       title: 'Test Fixture',
       mobile: true,
+      bodyHtmlSnippet: '<div id="root"></div>',
       template: require('html-webpack-template'),
       links: [],
     }),

lib/rastermanager.js

@@ -97,7 +97,7 @@ const createComponent = ast => {
   return ast;
 };
 
-RasterManager.render = component => {
+RasterManager.render = (component, target) => {
   // rudementary rendering
   if (typeof component == 'function') {
     // hasn't been inflated yet
@@ -124,7 +124,7 @@ RasterManager.render = component => {
     parseAST.instance.parent = c;
 
     // render through raster
-    _raster.render(parseAST);
+    _raster.render(parseAST, target);
   } else {
     // update path
     // look for calculated values {attributes, string children}
@@ -154,7 +154,7 @@ RasterManager.render = component => {
     crawl(component.render(), updateAST);
     updateAST.update = true;
 
-    _raster.render(updateAST);
+    _raster.render(updateAST, target);
   }
 };
 

lib/rasters/dom/index.js

@@ -15,21 +15,20 @@ class domraster {
     this.type = 'dom';
   }
 
-  render(component) {
+  render(component, target) {
     // render a view
-    this.sendMessage('gui', component);
+    this.sendMessage('gui',{component, target});
   }
 
   sendMessage(type, message) {
     if (type === 'gui') {
-      Raster.parseAST(message);
+      Raster.parseAST(message.component, message.target);
     } else if (type === 'animation') {
       Raster.setupAnimation(message);
     }
   }
 
   dimensions() {
-    console.log(window.innerWidth, window.innerHeight)
     return {
       width: window.innerWidth,
       height: window.innerHeight,

lib/rasters/dom/raster.js

@@ -4,19 +4,21 @@ import { Animator } from './animator';
 let _instances = {};
 
 class raster {
-  parseAST(ast) {
+  parseAST(ast, target) {
     if (ast.update) {
     } else {
-      this.build(ast);
+      this.build(ast, target);
     }
   }
   setupAnimation(ast) {
     Animator.animate(ast);
   }
-  build(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) {
-      document.body.appendChild(instance);
+      renderTarget.appendChild(instance);
       SyrEvents.emit({
         type: 'componentDidMount',
         guid: ast.guid,
@@ -51,6 +53,9 @@ class raster {
     }
     instance.id = component.guid;
     _instances[instance.id] = instance;
+    if(component.attributes.className) {
+      instance.className = component.attributes.className;
+    }
     let styles = component.instance.attributes
       ? component.instance.attributes.style
       : {};

libs/jsx.js

@@ -72,7 +72,7 @@ exports.default = function (_ref) {
       // Otherwise, we won‘t be mapping.
       jsxObjectTransformer = _identity2.default;
     }
-
+    // console.dir('Object Transformer >>>>', jsxObjectTransformer);
     return {
       variablesRegex: variablesRegex,
       jsxObjectTransformer: jsxObjectTransformer
@@ -199,7 +199,16 @@ exports.default = function (_ref) {
     };
 
     var JSXElement = function JSXElement(node) {
-      return jsxObjectTransformer(t.objectExpression([t.objectProperty(t.identifier(nameProperty), JSXElementName(node.openingElement.name)), t.objectProperty(t.identifier(attributesProperty), JSXAttributes(node.openingElement.attributes)), t.objectProperty(t.identifier(childrenProperty), node.children ? JSXChildren(node.children) : t.nullLiteral()), t.objectProperty(t.identifier(uniqueId), t.stringLiteral(guid()))]));
+      return jsxObjectTransformer(t.objectExpression(
+        [
+          t.objectProperty(t.identifier(nameProperty),
+          JSXElementName(node.openingElement.name)),
+          t.objectProperty(t.identifier(attributesProperty),
+          JSXAttributes(node.openingElement.attributes)),
+          t.objectProperty(t.identifier(childrenProperty), JSXChildren(node.children)),
+          t.objectProperty(t.identifier(uniqueId), t.stringLiteral(guid()))
+        ]
+      ));
     };
 
     var JSXChild = transformOnType({ JSXText: JSXText, JSXElement: JSXElement, JSXExpressionContainer: JSXExpressionContainer });
@@ -210,6 +219,12 @@ exports.default = function (_ref) {
       // an optimization as we minimize the number of nodes created.
       // This step just turns `['1', '2']` into `['12']`.
       .reduce(function (children, child) {
+        //if it is a child is an empty expression dont append the child just return current array.
+        //This removes 'empty' or 'null' spaces in the children.
+        if(child.type === 'JSXEmptyExpression') {
+          return _toConsumableArray(children);
+        }
+
         var lastChild = children.length > 0 ? children[children.length - 1] : null;
 
         // If this is a string literal, and the last child is a string literal, merge them.

test/jsxtest.js

@@ -0,0 +1,29 @@
+import { Component, Render, RasterManager, View, Text } from '../index';
+const assert = require('assert');
+
+describe('JSX', function() {
+  describe('Comments', 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>;
+        }
+      }
+
+      const mycomponent = new MyComponent();
+      const rendering = mycomponent.render();
+
+      assert.equal(typeof rendering.elementName, 'function');
+      assert.equal(typeof rendering.attributes, 'object');
+      assert.equal(rendering.children instanceof Array, true);
+      assert.equal(rendering.children.length, 2);
+      assert.equal(typeof rendering.guid, 'string');
+    });
+  });
+});

test/rastertest.js

@@ -0,0 +1,47 @@
+import { Component, Render, RasterManager, Text } from '../index';
+const assert = require('assert');
+const initHTML = `<!DOCTYPE html><body><div id="root"></div></body></html>`;
+
+
+// including JSDOM to test browser rendering.
+require('./testsetup').testDom(initHTML);
+const HTMLSpanElement = window.HTMLSpanElement;
+
+
+describe('Render Target', function() {
+  class RenderTargetTest extends Component {
+    render() {
+      return <Text className="foo" style={{height: 50, width: 100}}>Hello World</Text>;
+    }
+  }
+
+  Render(RenderTargetTest, 'root');
+  const element = document.getElementById('root').children[0];
+
+  it('should render the given element as a child to the target', function() {
+     assert.equal(element.style['height'], '50px');
+      assert.equal(element.style['width'], '100px');
+    assert.equal(element.innerText, 'Hello World');
+  });
+
+
+});
+describe('Render className', function() {
+  class RenderClassNameTest extends Component {
+    render() {
+      return <Text className="foo" style={{height: 50, width: 100}}>Hello World</Text>;
+    }
+  }
+
+  Render(RenderClassNameTest);
+  //selecting the element with the given className
+  const element = document.querySelector('.foo');
+
+  it('should render the given element with the given class', function() {
+    assert.equal(element instanceof HTMLElement, true);
+    assert.equal(element instanceof HTMLSpanElement, true);
+    assert.equal(element.innerText, 'Hello World');
+  });
+
+
+});

test/scrollviewtest.js

@@ -1,8 +1,9 @@
 import { Component, Render, RasterManager, ScrollView } from '../index';
 const assert = require('assert');
+const initHTML = `<!DOCTYPE html><body></body></html>`;
 
 //including JSDOM to test browser rendering.
-require('./testsetup').testDom();
+require('./testsetup').testDom(initHTML);
 
 describe('ScrollView', function() {
   class ScrollViewTest extends Component {

test/stackviewtest.js

@@ -1,8 +1,9 @@
 import { Component, Render, RasterManager, StackView } from '../index';
 const assert = require('assert');
+const initHTML = `<!DOCTYPE html><body></body></html>`;
 
 //including JSDOM to test browser rendering.
-require('./testsetup').testDom();
+require('./testsetup').testDom(initHTML);
 
 describe('StackView', function() {
   class ScrollViewTest extends Component {

test/testsetup.js

@@ -1,8 +1,10 @@
 //including JSDOM to test browser rendering.
-exports.testDom = function() {
+exports.testDom = function(initHTML) {
 const jsdom = require("jsdom");
 const { JSDOM } = jsdom;
-global.document = new JSDOM(`<!DOCTYPE html><body></body></html>`).window.document;
+global.window = new JSDOM(initHTML).window;
+global.document = window.document;
+global.HTMLElement = window.HTMLElement;
 }
 
 //https://stackoverflow.com/questions/18543047/mocha-monitor-application-output

test/texttest.js

@@ -0,0 +1,26 @@
+import { Component, Render, RasterManager, Text } from '../index';
+const assert = require('assert');
+const initHTML = `<!DOCTYPE html><body></body></html>`;
+
+// including JSDOM to test browser rendering.
+require('./testsetup').testDom(initHTML);
+
+
+describe('Text View', function() {
+  class TextTest extends Component {
+    render() {
+      return <Text style={{height: 50, width: 100}}>Hello World</Text>;
+    }
+  }
+
+  Render(TextTest);
+  //since the text view is rendered in a span.
+  const element = document.querySelector('span');
+
+  it('should render text with the given styles', function() {
+     assert.equal(element.style['height'], '50px');
+      assert.equal(element.style['width'], '100px');
+    assert.equal(element.innerText, 'Hello World');
+  });
+
+});

test/touchabletest.js

@@ -1,8 +1,10 @@
 import { Component, Render, RasterManager, TouchableOpacity } from '../index';
 const assert = require('assert');
+const initHTML = `<!DOCTYPE html><body></body></html>`;
 
 //including JSDOM to test browser rendering.
-require('./testsetup').testDom();
+require('./testsetup').testDom(initHTML);
+
 const captureStream = require('./testsetup').captureStream;
 
 describe('TouchableOpacity', function() {