refs #31

Avoid duplicate loading of stylesheets

main.js

@@ -22,9 +22,10 @@ define("xstyle/main", [
 	// traverse the @imports to load the sources 
 	function checkImports(element, callback, fixedImports){
 		var sheet = element.sheet || element.styleSheet;
-		if(!sheet){
+		if(!sheet || (sheet.processed && !fixedImports)){
 			return;
 		}
+		sheet.processed = true;
 		var needsParsing = sheet.needsParsing, // load-imports can check for the need to parse when it does it's recursive look at imports 
 			cssRules = sheet.rules || sheet.cssRules;
 		function fixImports(){
@@ -55,7 +56,7 @@ define("xstyle/main", [
 			return fixImports();
 		}
 		if(!needsParsing){
-			for(var i = 0; i < cssRules.length; i++){								
+			for(var i = 0; i < cssRules.length; i++){
 				var rule = cssRules[i];
 				if(rule.href && !fixedImports){
 					// it's an import (for non-IE browsers)

test/contacts.js

@@ -1,15 +1,15 @@
-define(['dstore/Memory', 'dstore/Trackable', 'dmodel/Model'], function(Memory, Trackable, Model){
+define(['dstore/Memory', 'dstore/Trackable'], function(Memory, Trackable){
 	// create an observable memory store with our test data 
 	contactStore = new (Memory.createSubclass(Trackable))({data:[
 		{id:1, firstName: 'Jimi', lastName:'Hendrix', email:'[email protected]'},
 		{id:2, firstName: 'Janis', lastName:'Joplin', email:'[email protected]'},
 		{id:3, firstName: 'Jim', lastName:'Morrison', email:'[email protected]'},	
 		{id:4, firstName: 'Kurt', lastName:'Cobain', email:'[email protected]'},
-		{id:5, firstName: 'Amy', lastName:'Winehouse', email:'[email protected]'},	
+		{id:5, firstName: 'Amy', lastName:'Winehouse', email:'[email protected]'}
 	]});
 	var nextId = 6;
 	// create a base binding, that we can set properties on
-	contacts ={
+	contacts = {
 		// list of contacts
 		list: contactStore.track(),
 		select: function(item){
@@ -31,9 +31,6 @@ define(['dstore/Memory', 'dstore/Trackable', 'dmodel/Model'], function(Memory, T
 	function newContact(){
 		contacts.selected = {firstName:'', lastName: '', email: '', id: nextId++};
 	}
-	/*var firstName = contacts.property('selected').property('firstName');
-	firstName.observe(function(value){
-		firstName.set('error', value && value.length < 3 ? 'Name must be at least three characters' : '');
-	});*/
+
 	return contacts;
 });

test/converter.js

@@ -0,0 +1,92 @@
+define(['xstyle/core/elemental'], function(elemental){
+	var model = {
+		data: '{\n  "first": "Web",\n  "last": "Developer",\n  "favorites": [\n    "Data Bindings", "CSS Extensions"\n  ]\n}', 
+		ui: "#target {\n =>\n    h2 (data/first+' '+data/last),\n    ul (data/favorites) {\n      color: #060;\n    };\n  background-color: #ccc;\n  width: 200px;\n  padding: 10px;\n}", 
+		parsed: {},
+		schema: {
+			data: new Property({
+				coerce: coerceLiterals
+			}),
+			ui: new Property({
+				coerce: coerceLiterals
+			})
+		}};
+	function coerceLiterals(value){
+		if(typeof value !== 'string' && value[0]){
+			// a string literal
+			value = value[0].value;
+		}
+		return value;
+	}
+	var registered = {};
+	function updateJson(){
+		var asJson = JSON.stringify(parsed.valueOf(), null, '  ');
+		if(model.data !== asJson){
+			model.set('data', asJson);
+		}
+	}
+	function registerDataChanges(toWatch, model, registeredMap){
+		registeredMap = registeredMap || registered;
+		for(var i in toWatch){
+			var property = model.property(i);
+			if(!(i in registeredMap)){
+				// listen for changes
+				registeredMap[i] = true;
+				property.observe(updateJson);
+			}
+			if(toWatch[i] && typeof toWatch[i] === 'object'){
+				//registerDataChanges(toWatch[i], property, registeredMap[i]);
+			}
+		}
+	}
+	var parsed = model.property('parsed');
+	model.observe('data', update);
+	model.observe('ui', update);
+	var parse, lastStyleSheet;
+	function update(){
+		console.log('model.data, model.ui', model.data, model.ui);
+		var newSheet = createStyleSheet(model.ui);
+		try{
+			var data = JSON.parse(model.data);
+			parsed.put(data);
+			registerDataChanges(data, parsed);
+			model.property('data').set('error', '');
+		}catch(e){
+			model.property('data').set('error', e);
+		}
+		setTimeout(function(){
+			if(lastStyleSheet){
+				// remove the last stylesheet
+				document.head.removeChild(lastStyleSheet);
+				elemental.clearRenderers();
+				var target = document.getElementById("target");
+				if(target){
+					target.innerHTML = "";
+				}
+			}
+
+			lastStyleSheet = newSheet;
+			var error;
+			var ui = model.property('ui');
+			parse.onerror = function(e, message){
+				ui.set('error', error = e + ' line' + message.slice(18));
+			};
+			try{
+				parse(model.ui, lastStyleSheet.sheet);
+				if(!error){
+					ui.set('error','');
+				}
+			}catch(e){
+				ui.set('error', e);
+			}
+		},100);
+	}
+	model.define = function(rule){
+		do{
+			parse = rule.parse;
+			rule = rule.parent;
+		}while(!parse);
+		return model;
+	}
+	return model;
+});