diff --git a/README.md b/README.md index 48a5b63..e1825fb 100644 --- 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
@@ -24,9 +24,26 @@ The above piece of **stml** code will result in:
``` +### 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 +
+ text 0 + text 2 + text 4 +
+``` + #### How to install it? npm: -* *not supported yet* ```shell $ npm install stimule -g ``` diff --git a/example/forexample.html b/example/forexample.html new file mode 100644 index 0000000..8f15d9a --- /dev/null +++ b/example/forexample.html @@ -0,0 +1,12 @@ + + + + +
+ text 0 + text 2 + text 4 +
+ + + \ No newline at end of file diff --git a/example/forexample.stml b/example/forexample.stml new file mode 100644 index 0000000..d958ae9 --- /dev/null +++ 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 index f96fec0..fe580ce 100644 --- 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" var 1 var 2 ``` + +#### Document declaration +*Should be at the top of the stml document* + +Should declare the main document, so it ads the `html` tag and `` 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 index 0995a7a..3ff2b3b 100644 --- a/example/index.html +++ b/example/index.html @@ -23,8 +23,7 @@
Hello im a span var - banananananan -
+ banananananan undefined diff --git a/example/index.stml b/example/index.stml index 9f6e79f..6ff71e9 100644 --- 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 new file mode 100644 index 0000000..9eb016b --- /dev/null +++ b/example/transpiled.html @@ -0,0 +1,12 @@ + + + + + +
+ Hello im a span + var + banananananan undefined
+ + + \ No newline at end of file diff --git a/lex/lex.json b/lex/lex.json index 5dbb858..33aa72a 100644 --- 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 new file mode 100644 index 0000000..068a737 --- /dev/null +++ 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 new file mode 100644 index 0000000..2277c81 --- /dev/null +++ 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; diff --git a/lib/stml-compiler.js b/lib/stml-compiler.js index 4c84e6a..9eaa129 100644 --- a/lib/stml-compiler.js +++ b/lib/stml-compiler.js @@ -5,6 +5,26 @@ @version: 0.1.0 */ + +/* +var s = `@for($i = 0; i <= 32; i--){ + span +}` +var forRegex = /@for\(((\$[\w][\w\d]*)[ ]*=[ ]*([\d]*))[ ]*;[ ]*(([\w][\w\d]*)[ ]*([<=>!]*)[ ]*([\d\w]*))[ ]*;[ ]*((\w*)[ ]*([\+\=\-\*\/]*)[ ]*([\d\w]*))\)\{([\n\r ]*.*[\n\r ]*)\}/ +var res = s.match(forRegex); +console.log(res) +console.log("Var name: "+res[2]) +console.log("Var value: "+res[3]) +console.log("condition var: "+res[5]) +console.log("condition var c: "+res[6]) +console.log("condition var c value: "+res[7]) + +console.log("increment name: "+res[9]) +console.log("increment / decrement sngs: "+res[10]) +*/ + + + /* External libraries */ @@ -21,41 +41,32 @@ const succs = clc.green; */ const utils = require("./utils") const Tag = require('./tag') +const MetaTagHandler = require('./meta-tag-handler') +const ErrorHandler = require("./error.handler") -const options = { - -} /* StimuleCompiler makes all the compilment */ class StimuleCompiler { constructor(inFile, outFile, opts) { - this.inFileName = inFile; - this.InFile = this.readFile(this.inFileName, 'utf8'); - this.OutFile = outFile; - this.opts = { - minify: opts.minify || false - } - this.lines = []; - this.cTags = []; - this.tags = []; - this.closingTags = []; - this.parsedSTML = []; - this.scope = []; - this.isInFor = false; - this.filters = utils.filters; - this.Status = utils.Status; - this.lex = JSON.parse(this.readFile("./lex/lex.json")); - this.styles = [] - - - - // TODO: This should be refactored big * time - let styles = this.styles; - - this.InFile = this.handleStyles(); - - this.lines = this.InFile.split("\n").filter(this.filters.filterSlashR); + this.inFileName = inFile; + this.inFileData = this.readFile(this.inFileName, 'utf8'); + this.OutFile = outFile; + this.opts = { minify: opts.minify || false }; + this.lines = []; + this.cTags = []; + this.tags = []; + this.closingTags = []; + this.parsedSTML = []; + this.scope = []; + this.isInFor = false; + this.filters = utils.filters; + this.Status = utils.Status; + this.lex = JSON.parse(this.readFile("./lex/lex.json")); + this.styles = []; + this.forLoops = []; + this.errorHandler = new ErrorHandler.handler(this); + this.mTagHandler = new MetaTagHandler(this); } @@ -92,15 +103,6 @@ class StimuleCompiler { } } - handleStyles(){ - let styles = this.styles; - return this.InFile - .replace(/@style\(([ a-zA-Z0-9.:;\-{}\n\r]*)\)/m, function(a, b){ - styles.push(b); - return 'style[source="#'+(styles.length - 1)+'"]'; - }) - } - /* Parses lines, and checks for errors */ @@ -204,6 +206,14 @@ class StimuleCompiler { res = this.Status.GOOD, lastTag = null; + + // This class handles all the metatags + this.inFileData = this.mTagHandler.handle(); + + /* I split the file by lines and filter the empty lines */ + this.lines = this.inFileData.split("\n").filter(this.filters.filterSlashR); + + /* First it loops over all the lines and parses each line and checks for errors @@ -233,7 +243,7 @@ class StimuleCompiler { else if(parsedTag.value != '' && parsedTag.name != undefined){ this.tags.push(parsedTag); } - } + }//Endfor /* Now we check if there are no errors, if there are no errors, diff --git a/lib/tag.js b/lib/tag.js index 4ce1262..e4c8369 100644 --- a/lib/tag.js +++ b/lib/tag.js @@ -80,7 +80,7 @@ class Tag { return attr } getTextStuff(){ - var text = this.value.match(/[ ]*["']([\w $]*)["']/)[1]; + let text = (this.value.match(/[ ]*["']([\w $]*)["']/) || [null, null])[1]; return text; } addChild(t){ diff --git a/lib/utils.js b/lib/utils.js index 0f223c3..eb89b6e 100644 --- a/lib/utils.js +++ b/lib/utils.js @@ -1,3 +1,5 @@ + + function SplitBy(str, split) { return str.split(split); } @@ -136,5 +138,15 @@ module.exports = { getComment, formatComment, filters, - Status + Status, + StmlRegex: { + style: /@style\(([ a-zA-Z0-9.:;\-{}\n\r]*)\)/m, + forLoop: /@for\((([\w][\w\d]*)[ ]*=[ ]*([\d]*))[ ]*;[ ]*(([\w][\w\d]*)[ ]*([<=>!]*)[ ]*([\d\w]*))[ ]*;[ ]*((\w*)[ ]*([\+\=\-\*\/]*[ ]*[\d]*)[ ]*([\d\w]*))\)\{([\n\r ]*.*[\n\r ]*)\}/m + }, + Tests: { + style: /@style(.*)/, + include: /@include(.*)/, + document: /@document(.*)/, + fors: /@for(.*)\{[\n\r ]*.*[\n\r ]*\}/gm + } } diff --git a/npm-debug.log b/npm-debug.log new file mode 100644 index 0000000..6a52de6 --- /dev/null +++ b/npm-debug.log @@ -0,0 +1,29 @@ +0 info it worked if it ends with ok +1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe', +1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js', +1 verbose cli 'version', +1 verbose cli 'patch' ] +2 info using npm@3.10.8 +3 info using node@v6.9.1 +4 info git [ 'status', '--porcelain' ] +5 verbose stack Error: Git working directory not clean. +5 verbose stack M .gitignore +5 verbose stack M README.md +5 verbose stack at C:\Program Files\nodejs\node_modules\npm\lib\version.js:247:19 +5 verbose stack at C:\Program Files\nodejs\node_modules\npm\lib\utils\no-progress-while-running.js:21:8 +5 verbose stack at ChildProcess.exithandler (child_process.js:197:7) +5 verbose stack at emitTwo (events.js:106:13) +5 verbose stack at ChildProcess.emit (events.js:191:7) +5 verbose stack at maybeClose (internal/child_process.js:877:16) +5 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5) +6 verbose cwd C:\Users\keff\Desktop\cosas\Dev\fun\stml\STML +7 error Windows_NT 10.0.10586 +8 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "version" "patch" +9 error node v6.9.1 +10 error npm v3.10.8 +11 error Git working directory not clean. +11 error M .gitignore +11 error M README.md +12 error If you need help, you may report this error at: +12 error +13 verbose exit [ 1, true ] diff --git a/package.json b/package.json index 942276b..c0fdf3f 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,15 @@ { "name": "stimule", - "version": "0.1.0", + "version": "0.1.2", "description": "Compiler for stimule, a simple html preprocessor", "author": "nombrekeff", "license": "ISC", "bin": { "stimule": "./stimule.js" }, + "scripts": { + "compile": "node stimule.js" + }, "dependencies": { "cli-color": "^1.1.0", "commander": "^2.9.0",