Ups

src/lib/systems/ActionSystem.js

@@ -3,9 +3,11 @@ import ViewSystem, { View } from './ViewSystem.js';
 import ModuleSystem from './ModuleSystem.js';
 import Modules from '../../modules';
 import EventSystem from './EventSystem';
-import * as Font from 'expo-font';
-export default class ActionSystem {
+import BaseSystem from './System';
+
+export default class ActionSystem extends BaseSystem {
 	constructor(CS) {
+		super();
 		// TODO -- Make correct Initialization
 		this.CoreSystem = CS;
 		this.EventSystem = new EventSystem();
@@ -34,11 +36,6 @@ export default class ActionSystem {
 		if (!action.type) return;
 		this.EventSystem.emit(action.type, action.data);
 	}
-
-	onUpdate(fn) {this._onUpdate = fn;}
-	forceUpdate() {
-		this._onUpdate && this._onUpdate();
-	}
 }
 
 

src/lib/systems/CoreSystem.js

@@ -28,6 +28,7 @@ export default class CoreSystem {
 		this.RulingSystem = new RulingSystem();
 		InjectionSystem.depend("Ruling", this.RulingSystem);
 		this.RulingSystem.addRuleFile(Data);
+		this.RulingSystem.onUpdate(() => this.forceUpdate())
 
 		this.ViewSystem    = new ViewSystem(this);
 		InjectionSystem.depend("Views", this.ViewSystem);

src/lib/systems/InjectionSystem.js

@@ -17,8 +17,6 @@ class InjectionSystem {
 		}
 		return this.systems[SystemName];		
 	}
-
-
 }
 
 export default new InjectionSystem();

src/lib/systems/RulingSystem.js

@@ -3,6 +3,8 @@ import {Node, Link, Graph} from '../helpers/graph'
 import {TreeNode, Tree} from '../helpers/tree'
 import ViewSystem from './ViewSystem';
 
+import BaseSystem from './System';
+
 import CSS from 'css';
 
 function log(...m) {
@@ -14,8 +16,10 @@ const MATCH_CHILD = / *> */gm;
 const MATCH_SPACES = / +/gm;
 const MATCH_PLUS = / *\+ */gm;
 const MATCH_MINUS = / *\- */gm;
-export default class RulingSystem {
+export default class RulingSystem extends BaseSystem {
 	constructor() {
+		super();
+
 		this.rules = [];
 		this.index = {};
 	}
@@ -33,15 +37,29 @@ export default class RulingSystem {
 	}
 
 	getCSS(Node, View) {
-		let rules = this.match(Node,View);
-		
+		let { 
+			rules,
+			contentrules
+		} = this.match(Node,View);
 		let css = rules.map(r => this.getDeclarations(r))
-		return css.reduce((acc, curr) => {
+		let main = css.reduce((acc, curr) => {
 			return {
 				...acc,
 				...curr
 			}
 		}, {});
+		let contentcss = contentrules.map(r => this.getDeclarations(r))
+		let content = contentcss.reduce((acc, curr) => {
+			return {
+				...acc,
+				...curr
+			}
+		}, {});
+
+		return {
+			rules: main,
+			contentrules: content
+		};
 	}
 	match(Node, View) {
 		let rules = [];
@@ -55,7 +73,11 @@ export default class RulingSystem {
 
 		if(!Node.content)return [];
 		// Index
-		let array = [...this.index['*'], ...(this.index[Node.content.value] || [])];
+		let array = [
+			...(this.index['*'] || []), 
+			...(this.index[Node.content.value] || [])
+		];
+
 		for(var i in array) {
 			let rule = array[i];
 			if (this.matchRule(rule, Node, View)) {
@@ -63,10 +85,25 @@ export default class RulingSystem {
 			}
 		}
 
-		return rules;
+		let contentrules = [];
+		let contentarray = [
+			...(this.index['~*'] || []), 
+			...(this.index['~'+Node.content.value] || [])
+		];
+		for(var i in contentarray) {
+			let rule = contentarray[i];
+			if (this.matchRule(rule, Node, View, "~")) {
+				contentrules.push(rule);
+			}
+		}
+
+		return {
+			rules,
+			contentrules
+		};
 	}
 
-	matchRule(rule, Node, View) {
+	matchRule(rule, Node, View, prefix) {
 		let {
 			selectors,
 			declarations
@@ -74,7 +111,7 @@ export default class RulingSystem {
 		
 		for (let i in selectors) {
 			let selector = selectors[i];
-			if (this.matchSelector(selector, Node, View)) {
+			if (this.matchSelector(selector, Node, View, prefix)) {
 				return true;
 			}
 		}
@@ -82,7 +119,7 @@ export default class RulingSystem {
 		return false;
 	}
 
-	matchSelector(selector, Node, View) {
+	matchSelector(selector, Node, View, prefix = "") {
 		if((Node.depth+1) < selector.length) return false;
 		for (let i = selector.length-1; i >= 0; i--) {
 			let ViewNode = Node.content;
@@ -94,9 +131,11 @@ export default class RulingSystem {
 			if(View.isRoot(Node) && nodes.includes('ROOT')) return true;
 			if(!Node.content)return false;
 
-			if(!nodes.includes(ViewNode.value) && !nodes.includes('*')){
+			if(!nodes.includes(prefix+ViewNode.value) && !nodes.includes(prefix+'*')){
 				return false;
 			}
+			prefix = "";
+
 			if(prenodes.length > 0) {
 				let preNode = View.getBefore(Node);
 				let preNodeValue = preNode && preNode.content && preNode.content.value;
@@ -166,31 +205,18 @@ export default class RulingSystem {
 
 	addRuleFile(file){
 		let ruleCSS = CSS.parse(file);
-
+		console.log("RULECSS", ruleCSS);
 		for(var i in ruleCSS.stylesheet.rules) {
 			this.addRule(ruleCSS.stylesheet.rules[i]);
 		}
+		this.forceUpdate();
 	}
 
 	export() {
-		
-		let graph = this.topology.export();
-
-		return {
-			topology: graph,
-			home : this.homeNode
-		}
+		return {};
 	}
 
 	import(data) {
-		let { topology, home } = data;
-		try{ 
-			this.topology.import(topology, RouteNode);
-			this.setHome(home);
-		} catch(e) {
-			console.log(e);
-			throw new Error("RS Import Failed: ");
-		}
 		return this;
 	}
 }

src/lib/systems/System.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export default class BaseSystem{
+	constructor(){
+		this.__update = null;
+	}
+
+
+	onUpdate(fn){
+		this.__update = fn;
+		return this;
+	}
+
+	forceUpdate(props){
+		return this.__update && this.__update(props);
+	}
+}

src/lib/systems/ViewSystem.js

@@ -288,8 +288,6 @@ export class View {
 //  When Content is present, Container for Containers is stretchedToContent
 //  IF NOT -> just be placed there.
 //  
-
-
 let Renderer = (props) => {
 	let { node , tree, CoreSystem, selfView } = props;
 	let childrens = tree.getChildren(node);
@@ -308,12 +306,19 @@ let Renderer = (props) => {
 	let ViewNodeReact;
 	// IF CONTENT
 	if(viewNode) {
-		let rules = RulingSystem.getCSS(node, selfView);
-		console.log("RULES", rules)
+		let {
+			rules,
+			contentrules
+		} = RulingSystem.getCSS(node, selfView);
+		console.log("RULES", viewNode.value, rules, contentrules);
 		node.props = {
 			...node.props,
 			...rules
 		}
+		viewNode.props = {
+			...viewNode.props,
+			...contentrules
+		}
 		ViewNodeReact = renderContent(node, CoreSystem, selfView);
 	}
 	return renderNode(node, CoreSystem, ViewNodeReact, childrenReact);

src/rules/Universal.css

@@ -15,7 +15,20 @@ ROOT > Image {
 }
 
 Image {
-	align-items: center;
+	alignItems: center;
+}
+
+ROOT > ~Badge {
+	TEST: LALALALLA;
+}
+~Text {
+	fontSize: 11;
+}
+Image > ~Text {
+	fontSize: 111;
+}
+Image > Text {
+	asdfontSize: 111;
 }
 Image > * {
 	justifyContent: center;