Instantly share code, notes, and snippets.

View README.md

Syntax: Marko vs Vue

Custom tags and passing data

Marko:

<greeting
  name=fullName
  message-count=30
View README.md

Below are the sizes of various UI libraries. The JavaScript bundles for each library includes the minimal code to render a very basic UI component in the browser. That is, the bundle includes the UI library and the code for a single UI component. The JavaScript bundle is generated using Rollup with NODE_ENV=production and all helpful optimizations are used to reduce the code size (envify, uglifyjs, minprops, etc.).

[marko]
  gzip:  11,802 bytes
   min:  32,289 bytes

[preact]
  gzip:   4,401 bytes
   min:  10,272 bytes
View template.dot.js
module.exports=function anonymous(it
/**/) {
var encodeHTML = typeof _encodeHTML !== 'undefined' ? _encodeHTML : (function (doNotSkipEncoded) {
var encodeHTMLRules = { "&": "&#38;", "<": "&#60;", ">": "&#62;", '"': "&#34;", "'": "&#39;", "/": "&#47;" },
matchHTML = doNotSkipEncoded ? /[&<>"'\/]/g : /&(?!#?\w+;)|<|>|"|'|\//g;
return function(code) {
return code ? code.toString().replace(matchHTML, function(m) {return encodeHTMLRules[m] || m;}) : "";
};
}());var out='Hello '+encodeHTML(it.name)+'! ';if(it.colors && it.colors.length){out+=' <ul> ';var arr1=it.colors;if(arr1){var color,i1=-1,l1=arr1.length-1;while(i1<l1){color=arr1[i1+=1];out+=' <li class="color">'+encodeHTML(color)+'</li> ';} } out+='</ul>';}else{out+='<div> No colors!</div>';}return out;
}
View new-package.json
{
"raptor": {
"dependencies": [
{
"include-pattern": "\\.*",
"extension-pattern": "_([A-Za-z0-9]+)\\."
}
]
}
}
View settings-data.js
{
"settings" : {
"foo" : "low",
"bar" : "high",
"baz" : "low"
}
}
View gist:3383452
raptor.define(
'my.module',
{
hello: "World"
});
raptor.define(
'my.module',
function() {
return {
View gist:3125854
<!-- "LOGIC-LESS": -->
{{#cartEmpty}}
<div>
Your shopping cart is empty!
</div>
{{/cartEmpty}}
{{#cartNotEmpty}}
<ul>
{{cartItems}}
View gist:3034264
-----------------
Option A:
Hello {{name}}!
{{#hasItems}}
<ul>
{{#items}}
<li>{{.}}</li>
{{/items}}
</ul>