:^)

src/inc/tpl.mjs

@@ -1,7 +1,10 @@
 export default new class {
   snippets = {};
-  syntax = [
+  #syntax = [
-    [ "each", t => `util.forEach(${t.slice(4).trim()},(value,key)=>{` ], // own valuename {{each items ->|as|=> item}}
+    [ "each", t => {
+      const tmp = t.slice(4).trim().split(" ");
+      return `util.forEach(${tmp[0]},(${(tmp[1] === "as" && tmp[2]) ? tmp[2] : "value"},key)=>{`;
+    } ],
     [ "/each", () => "});" ],
     [ "if", t => `if(${t.slice(2).trim()}){` ],
     [ "elseif", t => `}else if(${t.slice(6).trim()}){` ],
@@ -18,15 +21,14 @@ export default new class {
     else
       throw new Error(`${o} is not a iterable object`);
   }
-  render(tpl, data = {}) {
+  render(tpl, data = {}, f) {
-    return new Function("util", "data", "let html = \"\";with(data){"
+    return new Function("util", "data", "let html = \"\";with(data){" + tpl
-      + tpl.trim().replace(/[\n\r]/g, "").split(/{{\s*([^}]+)\s*}}/).filter(Boolean).map(t => {
+      .trim()
-        for(let i = 0; i < this.syntax.length; i++)
+      .replace(/[\n\r]/g, "")
-          if(t.indexOf(this.syntax[i][0]) === 0)
+      .split(/{{\s*([^}]+)\s*}}/)
-            return this.syntax[i][1](t);
+      .filter(Boolean)
-        return `html+='${t}';`;
+      .map(t => !(f = this.#syntax.filter(s => t.startsWith(s[0]))[0]) ? `html+='${t}';` : f[1](t))
-      })
+      .join("") + "}return html.trim().replace(/>[\\n\\r\\s]*?</g, '><')")
-      .join`` + "}return html.trim().replace(/>[\\n\\r\\s]*?</g, '><')")
       .bind(null, { forEach: this.forEach, snippets: this.snippets })(data);
   }
 };

views/index.html

@@ -11,11 +11,11 @@
   {{include navbar}}
   <div class="container-fluid">
     <ul id="posts" data-last="{{=last}}">
-      {{each items}}
+      {{each items as item}}
       <li class="post">
-        <a href="/{{=value.id}}" title="{{=value.mime}}">
+        <a href="/{{=item.id}}" title="{{=item.mime}}">
-          <img class="thumb" src="/t/{{=value.id}}.png" />
+          <img class="thumb" src="/t/{{=item.id}}.png" />
-          <span class="item-mime">{{=value.mime}}</span>
+          <span class="item-mime">{{=item.mime}}</span>
         </a>
       </li>
       {{/each}}