Ups

lib/Module.js

@@ -25,6 +25,20 @@ export default class Module extends React.Component{
 		}
 	}
 
+	getId() {
+		return this.props.ModuleID;
+	}
+
+	renderModule(ctor, namespace = "default", props = {}) {
+		let VS = this.props.CoreSystem.ViewSystem;
+		if(!this.props.CoreSystem.ModuleSystem.get(ctor, namespace)) return null;
+		return VS.renderModule({
+          	value: ctor,
+          	namespace,
+          	props
+        }, this.getId() +"C"+ (this.counter++));
+	}
+
 	createAction(action) {
 		if(!this.props.CoreSystem) {
 			console.warning("This module was constructed without a CoreSystem");
@@ -40,7 +54,8 @@ export default class Module extends React.Component{
 	display() {
 		throw new Error("You must extend this base Module and override display method!");
 	}
-	render() { 
+	render() {
+		this.counter = 0;
 		return <View ModuleID={this.props.ModuleID} style={[{overflow:'hidden'}]} MY_WRAPPER_FROM_BASE_MODULE={true}>
 			{this.display()}
 		</View>

lib/Types.js

@@ -12,7 +12,8 @@ let Types = {
 	Float: 10,
 	Modules: 11,
 	Whatever: 12,
-	Action: 13
+	Action: 13,
+	Module: 14
 }
 
 
@@ -180,6 +181,33 @@ class JSArray extends Type{
 	}
 }
 
+
+class Module extends Type{
+	constructor(){
+		super(Types.Module)
+	}
+
+	parse(data) {
+
+		let {
+			value,
+			namespace
+		} = data || {};
+		return {
+			value,
+			namespace
+		};
+	}
+
+	resolve(value){
+		if(typeof value === "object" && value.value)
+			return true;
+		else if ((value === undefined || value === null) && !this.isRequired)
+			return true;
+		return false;
+	}
+}
+
 export default {
 	Action,
 	Bool,
@@ -189,6 +217,7 @@ export default {
 	Text,
 	Types,
 	Type,
+	Module,
 	Array: JSArray
 }
 

lib/systems/ModuleSystem.js

@@ -45,7 +45,7 @@ export default class ModuleSystem {
 	}
 
 	get(modName, namespace = "default") {
-		return this.constructors[namespace][modName];
+		return this.constructors[namespace] && this.constructors[namespace][modName];
 	}
 
 	fromViewNode(vn) {

lib/systems/ViewSystem.js

@@ -34,6 +34,7 @@ export default class ViewSystem {
 		this.CoreSystem = CS;
 		this.ModuleSystem = CS.ModuleSystem;
 		this.EventSystem = CS.EventSystem;
+		this.ghosts = {};
 	}
 
 	getNode(ViewId, NodeId) {
@@ -58,6 +59,27 @@ export default class ViewSystem {
 		return this.views[name].render(this.CoreSystem);
 	}
 
+	renderModule(mod, id) {
+		let selfView = this.CoreSystem.getCurrentView();
+		let nodeId = "___"+id+"Node";
+		let {
+			value,
+			props,
+			namespace
+		} = mod;
+		if(!selfView.ghosts[nodeId]) {
+			let viewNode = new ViewNode(id, value, props, namespace);
+			let node = new Node(nodeId, {}, viewNode);
+			selfView.ghosts[nodeId] = node;
+		}
+		let vn = selfView.ghosts[nodeId].content;
+		vn.value = value;
+		vn.namespace = namespace;
+
+		let ViewNodeReact = renderContent(selfView.ghosts[nodeId], this.CoreSystem, selfView);
+		return renderNode(selfView.ghosts[nodeId], this.CoreSystem, ViewNodeReact);
+	}
+
 	export() {
 		let views = {};
 
@@ -92,6 +114,8 @@ export class View {
 		let rootNode = new Node(Math.random(), {stretchContainer: false, selected: true}); // row
 		this.addViewNode(rootNode);
 		this.defaultContainer = rootNode;
+
+		this.ghosts = {};
 	}
 
 	getDefaultContainer() {
@@ -102,7 +126,7 @@ export class View {
 		return this.ViewTree.root;
 	}
 	getNode(id) {
-		return this.ViewTree.getNode(id);
+		return this.ghosts[id] || this.ViewTree.getNode(id);
 	}
 
 	has(node) {
@@ -126,6 +150,7 @@ export class View {
 	}
 
 	getParent(node) {
+		if(!this.has(node)) return false;
 		return this.getNode(this.ViewTree.getParent(node));
 	}
 
@@ -222,12 +247,15 @@ export class View {
 	}
 
 	import(data, parentNode) {
-		let { tree } = data;
+		let { tree, ghosts } = data;
 		if(!parentNode)
 			this.ViewTree = new Tree();
 		try {
 			this.ViewTree.import(tree, Node, parentNode);
 			this.defaultContainer = this.ViewTree.root;
+			for(var i in ghosts) {
+				this.ghosts[i] = new Node().import(ghosts[i]);
+			}
 		} catch(e) {
 			log(e);
 			throw new Error("ViewSystem import error : ", e);
@@ -237,8 +265,15 @@ export class View {
 
 	export(node) {
 		let tree = this.ViewTree.export(node);
+		
+		let ghostsExported = {};
+		for(var i in this.ghosts) {
+			ghostsExported[i] = this.ghosts[i].export();
+		}
+
 		return {
-			tree
+			tree,
+			ghosts: ghostsExported
 		};
 	}
 }
@@ -266,26 +301,14 @@ let Renderer = (props) => {
 	let ViewNodeReact;
 	// IF CONTENT
 	if(viewNode) {
-		// Create ref
-		ModuleSystem.createRef(viewNode.id);
-		// Crete element
-		ViewNodeReact = ModuleSystem.createElement(
-			viewNode.value,
-			{ 
-				...viewNode.props,
-				ModuleID: viewNode.id,
-				NodeID: node.id,
-				EventSystem: EventSystem,
-				CoreSystem: CoreSystem,
-				View: selfView
-			},
-			null, // children
-			viewNode.namespace,
-			viewNode.id
-		);
-	}
-	ModuleSystem.createRef(node.id);
-	return ModuleSystem.createElementCtor(
+		ViewNodeReact = renderContent(node, CoreSystem, selfView);
+	}
+	return renderNode(node, CoreSystem, ViewNodeReact, childrenReact);
+}
+
+let renderNode = (node, CoreSystem, ViewNodeReact, childrenReact) => {
+	CoreSystem.ModuleSystem.createRef(node.id);
+	return CoreSystem.ModuleSystem.createElementCtor(
 		node.ctor, 
 		{
 			...node.props,
@@ -298,7 +321,26 @@ let Renderer = (props) => {
 		node.id
 	);
 }
-
+let renderContent = (node, CoreSystem, selfView) => {
+	let viewNode = node.content;
+	// Create ref
+	CoreSystem.ModuleSystem.createRef(viewNode.id);
+	// Crete element
+	return CoreSystem.ModuleSystem.createElement(
+		viewNode.value,
+		{ 
+			...viewNode.props,
+			ModuleID: viewNode.id,
+			NodeID: node.id,
+			EventSystem: CoreSystem.EventSystem,
+			CoreSystem: CoreSystem,
+			View: selfView
+		},
+		null, // children
+		viewNode.namespace,
+		viewNode.id
+	);
+}
 const styles = StyleSheet.create({
 	colWrapper: {
 		"position": "absolute",

modules/NativeBase/index.js

@@ -119,6 +119,7 @@ export class Button extends Module {
 export class Card extends Module {
 	constructor(props) {
 		super(props);
+		this.CoreSystem = props.CoreSystem;
 	}
 	display() {
 		let {
@@ -127,6 +128,9 @@ export class Card extends Module {
 			footer,
 			...rest
 		} = this.props;
+
+		let item = this.renderModule('Button','NativeBase');
+		console.log("ITEM : ", item);
 		return  <CardCtor {...rest}>
             <CardItemCtor header>
               <TextCtor>{header}</TextCtor>
@@ -135,6 +139,7 @@ export class Card extends Module {
               <BodyCtor>
                 <TextCtor>
                   {body}
+                  {item}
                 </TextCtor>
               </BodyCtor>
             </CardItemCtor>
@@ -328,11 +333,15 @@ export class Item extends Module {
 	display() {
 		let {
 			placeholder,
+			mod,
 			...rest
 		} = this.props;
-		return <ItemCtor {...rest}>
-			<InputCtor placeholder={placeholder}/>
-		</ItemCtor>;
+		console.log("RENDERMOD:", mod);
+		return <ContentCtor>
+		<ItemCtor {...rest}>
+			{mod ? this.renderModule(mod.value, mod.namespace) : null}
+		</ItemCtor>
+		</ContentCtor>;
 	}
 }
 export class Label extends Module {
@@ -641,6 +650,7 @@ IconNB.Inputs = {
 	
 }
 Item.Inputs = {
+	mod: new Types.Module(),
 	inlineLabel: new Types.Bool(),
 	floatingLabel: new Types.Bool(),
 	stackedLabel: new Types.Bool(),