diff --git a/dev.config.js b/dev.config.js index 7f1102ce..5977f850 100644 --- a/dev.config.js +++ b/dev.config.js @@ -47,9 +47,9 @@ module.exports = { plugins: [ new HtmlWebpackPlugin({ inject: false, - appMountId: 'app', title: 'Test Fixture', mobile: true, + bodyHtmlSnippet: '
', template: require('html-webpack-template'), links: [], }), diff --git a/lib/rastermanager.js b/lib/rastermanager.js index 249c6813..9b46bb9c 100644 --- a/lib/rastermanager.js +++ b/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); } }; diff --git a/lib/rasters/dom/index.js b/lib/rasters/dom/index.js index 81c45732..e05bb636 100644 --- a/lib/rasters/dom/index.js +++ b/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, diff --git a/lib/rasters/dom/raster.js b/lib/rasters/dom/raster.js index f9674503..e06057c6 100644 --- a/lib/rasters/dom/raster.js +++ b/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 : {}; diff --git a/libs/jsx.js b/libs/jsx.js index e70b96e7..f66d25b6 100644 --- a/libs/jsx.js +++ b/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. diff --git a/test/jsxtest.js b/test/jsxtest.js new file mode 100644 index 00000000..68529656 --- /dev/null +++ b/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