Skip to content

Commit

Permalink
version 1.2.4
Browse files Browse the repository at this point in the history
  • Loading branch information
@eneko
eneko committed Sep 13, 2010
1 parent c3f3bc2 commit d7b19f9
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 32 deletions.
28 changes: 17 additions & 11 deletions Source/mooml.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,9 +71,13 @@ var Mooml = {
*/
evaluate: function(template, data) {
var elements = [];
this.engine.template = template;
this.engine.callstack.push(template);

if (template.prepared == false) {
template.code = this.prepare(template.code);
template.prepared = true;
}

$splat($pick(data, {})).each(function(params, index) {
template.code(params, index);
elements.extend(template.nodes.filter(function(node) {
Expand All @@ -87,8 +91,6 @@ var Mooml = {
if (template.elementRefs) {
$extend(this.engine.callstack.getLast().elementRefs, template.elementRefs);
}
} else {
this.engine.template = null;
}

return (elements.length > 1) ? elements : elements.shift();
Expand All @@ -104,6 +106,7 @@ var Mooml = {
initEngine: function() {
this.htmlTags.each(function(tag) {
Mooml.engine.tags[tag] = function() {
var template = Mooml.engine.callstack.getLast();
var el = new Element(tag);

for (var i=0, l=arguments.length; i<l; i++) {
Expand All @@ -117,9 +120,9 @@ var Mooml = {
break;
}
case "string": {
if (Mooml.engine.template) {
if (template) {
el.getChildren().each(function(child) {
Mooml.engine.template.nodes.erase(child);
template.nodes.erase(child);
});
}
el.set('html', el.get('html') + argument);
Expand All @@ -130,18 +133,20 @@ var Mooml = {
break;
}
case "object": {
if (i == 0) {
if (Mooml.engine.template && Mooml.engine.template.elementRefs && argument.id) {
Mooml.engine.template.elementRefs[argument.id] = el;
if (i === 0) {
if (template && template.elementRefs && argument.id) {
template.elementRefs[argument.id] = el;
}
el.set(argument);
} else if ($type(argument.toElement) == "function") {
el.adopt(argument.toElement());
}
break;
}
}
}

if (Mooml.engine.template) Mooml.engine.template.nodes.push(el);
if (template) template.nodes.push(el);
return el;
}
});
Expand All @@ -161,7 +166,7 @@ var Mooml = {
var codeStr = code.toString();
var args = codeStr.match(/\(([a-zA-Z0-9,\s]*)\)/)[1].replace(/\s/g, '').split(',');
var body = codeStr.match(/\{([\s\S]*)\}/m)[1];
for (var i=this.htmlTags.length; --i; ) {
for (var i=this.htmlTags.length; --i >= 0; ) {
body = body.replace(new RegExp('(^|[^\\w.])(' + this.htmlTags[i] + ')([\\s]*(?=\\())', 'g'), '$1Mooml.engine.tags.$2$3')
}
return new Function(args, body);
Expand All @@ -180,7 +185,8 @@ Mooml.Template = new Class({
this.elementRefs = options.elementRefs;
}
this.name = name;
this.code = Mooml.prepare(code);
this.code = code;
this.prepared = false;
},

render: function(data) {
Expand Down
11 changes: 7 additions & 4 deletions Test/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@
body { font: 12px Helvetica, Arial; background: #f4f5f5; }
pre { background: #fff; padding: 4px; border: solid 1px #ccc; }
</style>
<script type="text/mooml" name="htmltemplate">
<script type="text/mooml" name="htmltemplate" id="htmltemplate">
h2('Template embedded in HTML');
p(
'This template is defined in the HTML as ',
pre('&lt;script type="text\/mooml"&gt;\n\th2(\'Template embedded in HTML\');\n\tp(\'This template is defined in the HTML as \',\n\t\t...\n&lt;\/script&gt;'),
pre('&lt;script type="text\/mooml"&gt;' + data.templateCode + '&lt;\/script&gt;'),
'Embedding Templates in HTML is very useful for graceful degradation, so this HTML is only rendered if Javascript is enabled.',
br(),
'This embedded templates support parameters too: ',
Expand All @@ -33,7 +33,7 @@ <h3>Mooml links</h3>
</ul>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
<!-- script type="text/javascript" src="http://github.com/eneko/mooml/raw/master/Source/mooml.js"></script -->
<!--script type="text/javascript" src="http://github.com/eneko/mooml/raw/master/Source/mooml.js"></script-->
<script type="text/javascript" src="../Source/mooml.js"></script>
<script type="text/javascript">

Expand Down Expand Up @@ -134,7 +134,10 @@ <h3>Mooml links</h3>
body.grab(new Dog({ bark: 'Arf!' }));

// HTML Template
body.adopt(Mooml.render('htmltemplate', {text: '[This text is being passed at render time]'}));
body.adopt(Mooml.render('htmltemplate', {
templateCode: $('htmltemplate').innerHTML,
text: '[This text is being passed at render time]'
}));

// Twitter
body.adopt(twitterTemplate.render('twitter-search'));
Expand Down
56 changes: 39 additions & 17 deletions Test/perftest.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,38 +14,60 @@
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="../Source/mooml.js"></script>
<script type="text/javascript">
var end, start;
var queue=[];
Mooml.register('emptydiv', function() { div(); });
Mooml.register('div', function(value) { div(value); });

function log() {
new Element('p', { text: $A(arguments).join('') }).inject(document.body);
}
function logTime(start, end) {
log(end.getTime() - start.getTime(), 'ms');
function timeDiff(start, end) {
return end.getTime() - start.getTime() + 'ms';
}
function test(desc, fn) {
queue.push({ desc: desc, fn: fn });
}
function start() {
if (!queue.length) return;
var test = queue.shift();
var then = new Date();
test.fn();
log(test.desc, ' ', timeDiff(then, new Date()));
setTimeout(start, 10);
}


// Render 10,000 empty divs
test('10k empty divs:', function() {
for (var i=0; i<1E4; i++) {
Mooml.render('emptydiv');
}
});

log('10k empty divs:');
start = new Date();
for (var i=0; i<1E4; i++) {
Mooml.render('emptydiv');
}
logTime(start, new Date());
// Render 10,000 divs with text

test('10k divs with text:', function() {
for (var i=0; i<1E4; i++) {
Mooml.render('div', '.span.lorem./span. .p..b..u.ipsum.u dolor./b. sit./p.');
}
});

// Render 10,000 empty divs

log('10k empty divs:');
start = new Date();
for (var i=0; i<1E4; i++) {
Mooml.render('emptydiv');
}
logTime(start, new Date());
// Render 10,000 divs with html

test('10k divs with html:', function() {
for (var i=0; i<1E4; i++) {
Mooml.render('div', '<span>lorem</span> <p><b><u>ipsum<u> dolor</b> sit</p>');
}
});

// Render 5x10,000 divs with text

test('5x10k divs with text:', function() {
for (var i=0; i<1E4; i++) {
Mooml.render('div', ['a','b','c','d','e']);
}
});

start();

</script>
27 changes: 27 additions & 0 deletions Test/test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ <h2 id="qunit-userAgent"></h2>
</body>
</html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
<!--script type="text/javascript" src="http://github.com/eneko/mooml/raw/master/Source/mooml.js"></script-->
<script type="text/javascript" src="../Source/mooml.js"></script>
<script type="text/javascript" src="qunit.js"></script>
<script type="text/javascript">
Expand All @@ -24,8 +25,30 @@ <h2 id="qunit-userAgent"></h2>
Mooml.register('div-value', function(value) {
div(value);
});
Mooml.register('string-test', function(data) {
div(
'before',
div(data),
'after'
);
});

// *******************************************************

module("Parameter Tests");

test('Passing a string', function() {
var wrapper = new Element('div');
wrapper.adopt(Mooml.render('string-test', 'test-string'));
equals(wrapper.innerHTML, '<div>before<div>test-string</div>after</div>', 'InnerHTML matches string');
});

test('Passing HTML', function() {
var wrapper = new Element('div');
wrapper.adopt(Mooml.render('string-test', '<span>lorem <b>ipsum</b></span>'));
equals(wrapper.innerHTML, '<div>before<div><span>lorem <b>ipsum</b></span></div>after</div>', 'InnerHTML matches html');
});

test('Passing "false" parameter', function() {
templateElements = Mooml.render('div-text-value', false);
equals(templateElements.tagName, 'DIV', 'Element created is a DIV');
Expand Down Expand Up @@ -56,6 +79,10 @@ <h2 id="qunit-userAgent"></h2>
});
});



// *******************************************************

module("Tag Tests");
test("Create elements for each Mooml supported tag", function() {
Mooml.htmlTags.each(function(tag) {
Expand Down

0 comments on commit d7b19f9

Please sign in to comment.