Merge pull request #6 from pauwell/feature/refactoring

Removing logs, adding comments. Better regex for for-loop var replace…

index.html

@@ -32,7 +32,7 @@ <h1>Just a demo!</h1>
           <input type="text" value="${window.performance.now().toFixed(2)}" readonly>
         </div>`
       });
-      console.log(myTemplate);
+      console.log('Template created: ', myTemplate);
       myTemplate.mountTo(document.getElementById('app'));
   </script>
 </body>

src/module/template.ts

@@ -54,13 +54,11 @@ export default class Template {
       let val = this.template.state[property];
       Object.defineProperty.call(that, this._template.state, property, {
         get() {
-          // console.log('Calling getter for ' + property, that);
           return val;
         },
         set(value: any) {
-          // console.log('Calling setter for ' + property);
           val = value;
-          that.update();
+          that.update(); // TODO check diff if update is necessary.
         }
       });
     });

src/parser/eval/evalDoEvent.ts

@@ -3,9 +3,9 @@
 import { ITemplate } from '../../module/template';
 
 /**
- * TODO
- * @param statement TODO
- * @param context TODO
+ * Evaluate `event`-nodes.
+ * @param statement The statement that needs to be evaluated.
+ * @param context The context in which it gets used.
  */
 const evalDoEvent = (statement: string, context: ITemplate) => {
   const eventType = statement.split(':')[0];

src/parser/eval/evalForNode.ts

@@ -9,16 +9,12 @@ import { ITemplate } from '../../module/template';
  */
 const evalForNode = (forNode: HTMLSpanElement, condition: string, context: ITemplate): string => {
   const multipliedChildren: string[] = [];
-
-  // TODO: Variable context.
-
   Function(
     'multipliedChildren', // The multiplied content of the for-node.
     'innerHTML', // The content of the for-node.
     'replaceLoopVarsInHTML', // Evaluate the inner appearances of the loop variable.
     `let loopVar;
       if(/^var |^let /.test('${condition}')){
-        console.log('${condition}'.slice('${condition}'.indexOf(' '), '${condition}'.indexOf('=')).trim());
         loopVar = '${condition}'.slice(
           '${condition}'.indexOf(' '),
           '${condition}'.indexOf('=')
@@ -37,20 +33,22 @@ const evalForNode = (forNode: HTMLSpanElement, condition: string, context: ITemp
 };
 
 /**
- * TODO
- * @param loopVar TODO
- * @param innerHTML TODO
+ * Find loop variables in HTML (e.g. $i, $xyz) and replace them with their actual value.
+ * @param loopVar The name of the variable.
+ * @param varValue The actual value of the variable.
+ * @param innerHTML The HTML that needs to be replaced.
  */
 const replaceLoopVarsInHTML = (loopVar: string, varValue: number, innerHTML: string) => {
-  // TODO only replace the variables between mustaches {{ $i }}
-  /* const findVarRegex = /{{.*?(\$i).*?}}/g;
-  while (findVarRegex.test(innerHTML)) {
-    innerHTML.replace(findVarRegex, loopVar);
-  } */
+  // Naive solution, just replace:
   while (innerHTML.indexOf('$' + loopVar) >= 0) {
     innerHTML = innerHTML.replace('$' + loopVar, String(varValue));
   }
 
+  // Fix this solution please:
+  /* const findVarRegex = /<do.*?js.*?>.*?(\$i).*?<\/do>/;
+  while (findVarRegex.test(innerHTML)) {
+    innerHTML = innerHTML.replace(findVarRegex, String(varValue));
+  } */
   return innerHTML;
 };
 

src/parser/eval/evalJSNode.ts

@@ -2,7 +2,11 @@
 
 import { ITemplate } from '../../module/template';
 
-// TODO impl.
+/**
+ * Evaluate sandboxed `js`-expression nodes.
+ * @param statement The statement that gets evaluated.
+ * @param context The context in which it should be evaluated.
+ */
 const evalJSNode = (statement: string, context: ITemplate): string => {
   // Evaluate state variable.
   if (context.state.hasOwnProperty(statement)) {