nombrekeff · nombrekeff · Jan 6, 2017 · Nov 26, 2017 · Nov 26, 2017 · Nov 26, 2017
diff --git a/README.md b/README.md
@@ -8,10 +8,10 @@ A simple html preprocessor made with nodejs, making It for fun
 div#target(.bold .row)[click="doX()"]
   div(.col-4)
     span "Heyy"
-  div(.col-6)
+  div(.col-6 .centered)
     span "You like stones?"
 ```
-The above piece of **stml** code will result in:
+The above piece of **stml** syntax will result in:
 
 ```html
 <div id="target" class="bold row" click="doX()">
@@ -24,9 +24,26 @@ The above piece of **stml** code will result in:
 </div>
 ```
 
+### For Loop
+
+```sass
+div#id
+  @for(i = 0; i < 6; i += 2){
+     span(.banan-${i}) "text ${i}"
+  }
+```
+The above piece of **stml** syntax will result in:
+
+```html
+<div id="id">
+  <span class="banan-0">text 0</span>
+  <span class="banan-2">text 2</span>
+  <span class="banan-4">text 4</span>
+</div>
+```
+
 #### How to install it?
 npm:
-* *not supported yet*
 ```shell
 $ npm install stimule -g
 ```

diff --git a/example/forexample.html b/example/forexample.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+
+  <body id="id2" class="body logged-in" name="body">
+    <div id="id">
+      <span class="banan-0">text 0</span>
+      <span class="banan-2">text 2</span>
+      <span class="banan-4">text 4</span>
+    </div>
+  </body>
+
+</html>
diff --git a/example/forexample.stml b/example/forexample.stml
@@ -0,0 +1,5 @@
+body#id2(.body .logged-in)[name="body"]
+    div#id
+      @for(i = 0; i < 6; i += 2){
+         span(.banan-${i}) "text ${i}"
+      }
diff --git a/example/ideas.md b/example/ideas.md
@@ -4,7 +4,7 @@ My first idea was to do it as follows,  because it a nown way of doing it:
 ```javascript
 @for($i = 0; i < 3; i++){
    span "var"+$i; // This should be a valid tag
- }
+}
 
 // Would result in:
 span "var 0"
@@ -17,3 +17,22 @@ span "var 2"
 <span>var 1</span>
 <span>var 2</span>
 ```
+
+#### Document declaration
+*Should be at the top of the stml document*
+
+Should declare the main document, so it ads the `html` tag and `<!DOCTYPE html>` to the top of the file:
+
+1. More like the stml tag syntax `prefered`
+```sass
+@document#html(.no-js)[lang="es"]
+```
+
+2. This one has posibility to expand
+```js
+@document({
+    lang:"es",
+    class: "no-js",
+    id: "html"
+})
+```
diff --git a/example/index.html b/example/index.html
@@ -23,8 +23,7 @@
       <div>
         <span class="span-red">Hello im a span</span>
         <span>var</span>
-        <span>banananananan</span>
-      </div>
+        <span>banananananan</span> undefined</div>
     </div>
   </body>
 

diff --git a/example/index.stml b/example/index.stml
@@ -18,3 +18,6 @@ body#id2(.body .logged-in)[name="body"]
             span(.span-red) "Hello im a span"
             span "var"
             span "banananananan"
+            @for(i = 0; i < 6; a += 2){
+               span(.banan-${i}) "text ${i}"
+            }
diff --git a/example/transpiled.html b/example/transpiled.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <!--  Comment -->
+
+  <body id="id2" class="body logged-in" name="body">
+    <div id="id">
+      <span class="span-red">Hello im a span</span>
+      <span>var</span>
+      <span>banananananan</span> undefined</div>
+  </body>
+
+</html>
diff --git a/lex/lex.json b/lex/lex.json
@@ -1,13 +1,15 @@
 {
-    "lexic":{
-        "validChars":"abcdefghjiklmnopqrstuvwxyzABCDEFGHJKILMNOPQRSTUVWXYZ_$1234567890"
-    },
-    "closingTags":[
-        "div", "span", "section", "h1", "h2", "h3", "h5", "p", "a", "b", "i",
-        "script", "body", "header","head", "html", "style", "svg", "canvas", "table","th",
-        "thead","tbody","tr","td","strong","bold", "title", "textarea"
-    ],
-    "selfClosing":[
-        "area", "base", "br", "col", "embed", "hr", "img", "input", "link", "menuitem", "meta", "param", "source", "track", "wbr"
-    ]
+  "closingTags":[
+      "div", "span", "section", "h1", "h2", "h3", "h5", "p", "a", "b", "i",
+      "script", "body", "header","head", "html", "style", "svg", "canvas",
+      "table","th","thead","tbody","tr","td","strong","bold", "title",
+      "textarea"
+  ],
+  "selfClosing":[
+      "area", "base", "br", "col", "embed", "hr", "img", "input",
+      "link", "menuitem", "meta", "param", "source", "track", "wbr"
+  ],
+  "metatags": [
+    "include", "style", "for", "document"
+  ]
 }
diff --git a/lib/error.handler.js b/lib/error.handler.js
@@ -0,0 +1,38 @@
+
+/*
+  Error handling
+  @author: keff
+*/
+
+
+/*
+  External libraries
+*/
+const fs       = require("fs")
+const beautify = require('js-beautify').html
+const clc      = require('cli-color');
+const notice   = clc.xterm(32);
+const succs    = clc.green;
+
+class handler {
+  constructor(compiler) {
+    this.compiler = compiler;
+  }
+  error(msg, trace, i) {
+    var tempString = this.compiler.inFileData.substring(0, i);
+    var ln = tempString.split(/\n/g).length;
+    var cn = i - tempString.length
+    let error = {
+      message: msg,
+      at: `~/${process.inputFile} ${ln}:${cn}`,
+      trace: trace
+    }
+    error = JSON.stringify(error, null, 4)
+    throw error
+  }
+}
+
+
+module.exports = {
+  handler
+};
diff --git a/lib/meta-tag-handler.js b/lib/meta-tag-handler.js
@@ -0,0 +1,158 @@
+/*
+  Meta tag handler class
+  @author: keff
+  @version: 0.1.0
+*/
+
+const utils = require("./utils")
+const clc      = require('cli-color');
+const notice   = clc.xterm(32);
+const succs    = clc.green;
+
+
+// "include", "style", "for", "document"
+class MetaTagHandler {
+  constructor(compiler) {
+    this.compiler = compiler;
+    this.errorHandler = this.compiler.errorHandler
+    this.data = this.compiler.inFileData+"";
+    this.has = this.doHasTests();
+  }
+
+  doHasTests(){
+    let hasStyles = utils.Tests.style.test(this.data)
+    let hasForLoops = utils.Tests.fors.test(this.data)
+
+    console.log(hasStyles, hasForLoops);
+    return {
+      styles: hasStyles,
+      fors: hasForLoops
+    }
+  }
+
+  handleStyles(){
+    console.log("handleStyles");
+    let styles = this.compiler.styles;
+    return this.data.replace(utils.StmlRegex.style, function(a, b){
+      styles.push(b);
+      return 'style[source="#'+(styles.length - 1)+'"]';
+    })
+  }
+  handleDocument(){
+
+  }
+  handleInclude(){
+
+  }
+  handleFors(){
+    // succs("handleFors");
+    let loops = this.compiler.forLoops;
+    console.log("Test", utils.StmlRegex.forLoop.test(this.data));
+    let data = this.data.match(utils.StmlRegex.forLoop);
+
+    if(data){
+      let vName  = data[2];
+      let vValue = parseInt(data[3]);
+      let cName  = data[5];
+      let cCond  = data[6];
+      let cVal   = parseInt(data[7]);
+      let iValue = data[9];
+      let iSgns  = data[10];
+
+      let forContent  = data[12];
+
+      let dummy = {};
+
+      dummy.content = forContent;
+
+      dummy.var = dummy[vName] = vValue;
+
+      dummy.condition  = `dummy.${cName} ${cCond} ${cVal}`;
+      dummy.operation  = `dummy.${iValue}${iSgns}`;
+      dummy.evaledCond = eval(dummy.condition);
+
+      /* test if vars are correct */
+
+      if(dummy[cName] != dummy[vName]){
+        this.errorHandler.error(
+          `Variable ${cName} is not defined`,
+          data[0],
+          data.index
+        )
+      }
+      if(dummy[iValue] != dummy[vName]){
+        this.errorHandler.error(
+          `Variable '${iValue}' is not defined`,
+          data[0],
+          data.index
+        )
+      }
+      else {
+        console.log(JSON.stringify(dummy, null, 4));
+        return this.data.replace(utils.StmlRegex.forLoop, function(a, b){
+          return iterate(dummy);
+        })
+      }
+    }
+    else {
+      let vName  = data[2];
+      let vValue = parseInt(data[3]);
+      let cName  = data[5];
+      let cCond  = data[6];
+      let cVal   = parseInt(data[7]);
+      let iValue = data[9];
+      let iSgns  = data[10];
+      console.log(`
+        ${notice('vName')} : ${vName}
+        ${notice('vValue')}: ${vValue}
+        ${notice('cName')} : ${cName}
+        ${notice('cCond')} : ${cCond}
+        ${notice('cVal')}  : ${cVal}
+        ${notice('iValue')}: ${iValue}
+        ${notice('iSgns')} : ${iSgns}
+      `);
+      console.log(data);
+      throw "Errorrrrr";
+    }
+  }
+
+  handle(callback){
+    // console.log("handling");
+
+    if (this.has.styles) {
+      this.data = this.handleStyles();
+    }
+    if (this.has.include) {
+      this.data = this.handleIncludes();
+    }
+    if (this.has.fors) {
+      this.data = this.handleFors();
+    }
+    return this.data;
+  }
+}
+function iterate(dummy) {
+  let s = "";
+  let security = 0;
+  while (dummy.evaledCond && security++ != 100000) {
+    dummy.evaledCond = eval(dummy.condition);
+    if(dummy.evaledCond){
+      if(/\$\{.*\}/.test(dummy.content)){
+        let cnt = dummy.content;
+        cnt = dummy.content.replace(/\$\{([a-zA-Z ]*)\}/g, function (a, b) {
+          console.log("reoplace", a, '-', b);
+          return dummy[b];
+        })
+        s+= cnt;
+      }
+      else{
+        s += dummy.content
+      }
+      eval(dummy.operation);
+    }
+  }
+  return s;
+}
+
+
+module.exports = MetaTagHandler;