├── README.md
└── jss.js


/README.md:
--------------------------------------------------------------------------------
 1 | This project is not complete, this is just a sketch right now
 2 | <h1>JSON Style Sheets</h1>
 3 | JSON Style Sheets (JSS) is a templating tool for rendering JSON/JavaScript data. JSS
 4 | is designed to provide a presentation layer as an extension to CSS, without incurring
 5 | the extra overhead and complexity of intermediate HTML generation. CSS is designed
 6 | to seperate the visual concerns from semantic data concerns of HTML. However,
 7 | with JSON templating, HTML often becomes completely abused, used as a semi-presentation
 8 | layer for the JSON data, muddying the separation of concerns and creating excessively 
 9 | complex relations and indirection between the data and the intended rendering. JSS 
10 | extends CSS to provide the necessary facilities to render JSON with minimally sufficient 
11 | embedded HTML layout information to properly present data, while still using standard
12 | language syntax and semantics. All valid CSS is valid JSS, and most HTML is valid JSS 
13 | as well.
14 | 
15 | data.json:
16 | 	{
17 | 	  "title": "Search for sedans",
18 | 	  "cars": [
19 | 	      {"make": "Honda", "model": "Accord"},
20 | 	      {"make": "Ford", "model": "Taurus"},
21 | 	    ]
22 | 	}
23 | template.jss:
24 | 	
25 | 	/title {
26 | 		font-size: 24px;
27 | 	}
28 | 	/cars {
29 | 		border: 1px;
30 | 	}
31 | 	/cars/#/make {
32 | 		color: blue;
33 | 	};
34 | 
35 | To apply this template to the data:
36 | 
37 | 	var templateString = loadTemplate();
38 | 	var compile = require("jss").compile;
39 | 	var template = compile(templateString);
40 | 	template.apply(targetDom);	
41 | 	
42 | This would render the JSON with the given styles.
43 | 
44 | JSS allows for nested definitions as well:
45 | 	/cars {
46 | 		border: 1px;
47 | 		/make {
48 | 			color: blue;
49 | 		};
50 | 	}
51 | 
52 | Or even mixed with standards CSS selectors:
53 | 	.some-class {
54 | 		/title {
55 | 			font-size: 24px;
56 | 		}
57 | 		/cars {
58 | 			border: 1px;
59 | 		}
60 | 	}
61 | 
62 | 
63 | However, when rendering JSON in application, we often need much more control over
64 | the layout, we can utilize HTML directives to add information for layout and interpretation
65 | of semantics directly within our style sheet (no need for a separate file). We can insert
66 | HTML directly into JSS. We can also postpend HTML fragments with selector/rules to
67 | define the styles for that element:
68 | 
69 | 	<h1>My App</h1>
70 | 	<h2> /title {
71 | 		font-size: 24px;
72 | 	}
73 | 	
74 | 	<ul> {
75 | 		border: 1px;
76 | 		<li> /cars {
77 | 			/make {
78 | 				color: blue;
79 | 			}
80 | 		}
81 | 	}
82 | 
83 | We can also specify variables within the HTML:
84 | 	<ul> {
85 | 		border: 1px;
86 | 		<li><a href="{/id}"> /cars {
87 | 			/make {
88 | 				color: blue;
89 | 			}
90 | 		}
91 | 	}
92 | 
93 | 


--------------------------------------------------------------------------------
/jss.js:
--------------------------------------------------------------------------------
 1 | define([], function(){
 2 | 	return {
 3 | 		parse: function(css, onRuleStart, onRuleEnd){
 4 | 			var fullProperties;
 5 | 			css.replace(/\/\*.*?\*\//g,'') // remove comments
 6 | 				.replace(/\s*([^{;]+{)?\s*([^{}]+;)?\s*(})?/g, function(full, selector, properties, close){
 7 | 				if(selector){
 8 | 					onRuleStart(selector);
 9 | 					fullProperties = "";
10 | 				}
11 | 				if(properties){
12 | 					fullProperties += properties;
13 | 				}
14 | 				if(close){
15 | 					onRuleClose(fullProperties);
16 | 				}
17 | 			});
18 | 		},
19 | 		apply: function(css, domNode, data){
20 | 			var currentFrame = {data: data};
21 | 			function Frame(){
22 | 				
23 | 			}
24 | 			var outputCss = [];
25 | 			var stack = [currentFrame];
26 | 			this.parse(css, function(selector){
27 | 				Frame.prototype = parentFrame = currentFrame; 
28 | 				var frame = currentFrame = new Frame();
29 | 				var element;
30 | 				stack.push(frame);
31 | 				if(selector.charAt(0) == "<"){
32 | 					// its an HTML layout element, separate HTML from selector
33 | 					var html = selector.match(/(.+?)(\s[^\s])?/);
34 | 					selector = html[1].substring(1);
35 | 					html = html[0];
36 | 					// insert HTML, with a marker to find target element
37 | 					parentFrame.element.innerHTML += html + '<span id="__jss_marker__" data-path="' + selector + '"></span>';
38 | 					parentFrame.laidout = true;
39 | 					element = parentFrame.element.getElementById("__jss_marker__");
40 | 					delete element.id;
41 | 				}
42 | 				if(selector.indexOf("/") > -1){
43 | 					// a data selector
44 | 					// drill down into the selected path
45 | 					var paths = selector.split("/");
46 | 					var target = parentFrame;
47 | 					for(var i = 0; i < paths.length; i++){
48 | 						target = target && (typeof target.get == "function" ? target.get(paths[i]) : target[paths[i]]);
49 | 					}
50 | 					if(!parentFrame.laidout && !parentFrame["child_" + selector]){
51 | 						parentFrame["child_" + selector] = frame;
52 | 						// set the new local variable/path
53 | 						frame[paths[0]] = target;
54 | 						if(!frame.element){
55 | 							element = parentFrame.element.appendChild(document.createElement("div"));
56 | 							element.setAttribute("data-path", selector);
57 | 						}
58 | 					}
59 | 				}else{
60 | 					// a regular CSS selector
61 | 					// TODO: split on commas
62 | 					frame.selector = parentFrame.selector + selector;
63 | 				}
64 | 				if(element){
65 | 					frame.selector = "span[data-path='" + selector + "']";
66 | 				}
67 | 				
68 | 			}, function(properties){
69 | 				outputCss.push(frame.selector + '{' + properties + ';}');
70 | 				if(!frame.laidout){
71 | 					var data = frame.data;
72 | 					for(var i in data){
73 | 						if(frame["child_" + i]){
74 | 							frame.element.appendChild(document.createElement("div"));
75 | 							
76 | 							
77 | 						}
78 | 						
79 | 					}
80 | 					frame.laidout = true;
81 | 				}
82 | 			});
83 | 			// TODO: create a style tag for the CSS
84 | 			outputCss
85 | 		}
86 | 	}
87 | });


--------------------------------------------------------------------------------