v2.3.21

riot · Jan 15, 2016 · 5433192 · 5433192
1 parent aae998d
commit 5433192
Show file tree

Hide file tree

Showing 13 changed files with 99 additions and 95 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ### v2.3.21
 - Code refactorization of the `parsers` module, removed unuseful CSS parser `stylus` for browsers.
 - Fix [riot#1511](https://github.com/riot/riot/issues/1511) : Escape Quotes - They may be some issues to fix.
+- New logic for parsing `<script>/<style>` blocks. See [doc/guide.md](https://github.com/riot/compiler/blob/dev/doc/guide.md#the-untagged-javascript-block) for details.
 
 ### v2.3.20
 - Fix [riot#1495](https://github.com/riot/riot/issues/1495) : Warning of input tag value - Avoids warnings for date/datetime/time/month/email/color types with expression in its value.

diff --git a/README.md b/README.md
@@ -31,6 +31,10 @@ Due to changes in the babel API, from our v2.3.0 we are separating the babel sup
 * es6 - For `babel` and `babel-core` v5.8.x and below
 * babel - For `babel-core` v6.x - You must `npm install babel-preset-es2015-riot` too, for this to work.
 
+### Known Issues
+
+* Expressions within attribute values containing `>` must be enclosed in quotes. Ex: `<mytag hidden="{ a > 5 }">`.
+* Shorthands within attributes parsed by CoffeeScript must be prefixed with a caret: `<mytag class="{^ c:1 }">`
 
 [travis-image]:  https://img.shields.io/travis/riot/compiler.svg?style=flat-square
 [travis-url]:    https://travis-ci.org/riot/compiler

diff --git a/dist/compiler.js b/dist/compiler.js
@@ -326,8 +326,7 @@ var
 
   HTML_ATTR  = / ?([-\w:\xA0-\xFF]+) ?(?:= ?('[^']*'|"[^"]*"|\S+))?/g,
   SPEC_TYPES = /^"(?:number|date(?:time)?|time|month|email|color)\b/i,
-  TRIM_TRAIL = /[ \t]+$/gm,
-  S_STRINGS  = /"[^"\n\\]*(?:\\[\S\s][^"\n\\]*)*"|'[^'\n\\]*(?:\\[\S\s][^'\n\\]*)*'/.source
+  TRIM_TRAIL = /[ \t]+$/gm
 
 var path = require('path')
 
@@ -448,13 +447,14 @@ function restoreExpr (html, pcex) {
 }
 
 var
-  HTML_COMMENT = _regEx(/<!--(?!>)[\S\s]*?-->/.source + '|' + S_STRINGS, 'g'),
+  HTML_COMMENT = /<!--(?!>)[\S\s]*?-->|"(?:[^"\n\\]*|\\[\S\s])*"|'(?:[^'\n\\]*|\\[\S\s])*'/g,
   HTML_TAGS = /<([-\w]+)(\s+(?:[^"'\/>]*|"[^"]*"|'[^']*'|\/[^>])*)?(\/?)>/g,
   PRE_TAG = /<pre(?:\s+(?:[^">]*|"[^"]*")*)?>([\S\s]+?)<\/pre\s*>/gi
 
 function _compileHTML (html, opts, pcex) {
 
   html = splitHtml(html, opts, pcex)
+    .replace(TRIM_TRAIL, '')
     .replace(HTML_TAGS, function (_, name, attr, ends) {
 
       name = name.toLowerCase()
@@ -499,8 +499,8 @@ function compileHTML (html, opts, pcex) {
     if (!opts) opts = {}
   }
 
-  html = html.replace(/\r\n?/g, '\n').replace(HTML_COMMENT,
-    function (s) { return s[0] === '<' ? '' : s }).replace(TRIM_TRAIL, '')
+  html = html.replace(/\r\n?/g, '\n')
+    .replace(HTML_COMMENT, function (s) { return s[0] === '<' ? '' : s })
 
   if (!pcex._bp) pcex._bp = brackets.array(opts.brackets)
 
@@ -578,7 +578,7 @@ function compileJS (js, opts, type, extra) {
   return _compileJS(js, opts, type, extra.parserOptions, extra.url)
 }
 
-var CSS_SELECTOR = _regEx('(}|{|^)[ ;]*([^@ ;{}][^{}]*)(?={)|' + S_STRINGS, 'g')
+var CSS_SELECTOR = /(}|{|^)[ ;]*([^@ ;{}][^{}]*)(?={)|(?:"(?:[^"\\]*|\\.)*"|'(?:[^'\\]*|\\.)*')/g
 
 function scopedCSS (tag, style) {
   var scope = ':scope'
@@ -729,9 +729,8 @@ function compileTemplate (html, url, lang, opts) {
 
 var
   CUST_TAG = /^([ \t]*)<([-\w]+)(?:\s+([^'"\/>]*(?:(?:"(?:[^"\\]*|\\[\S\s])*"|'(?:[^'\\]*|\\[\S\s])*'|\/[^>])[^'"\/>]*)*)|\s*)?(?:\/>|>[ \t]*\n?([\S\s]*)^\1<\/\2\s*>|>(.*)<\/\2\s*>)/gim,
-  SRC_TAGS = /<style(\s+[^>]*)?>\n?([\S\s]*?)<\/style\s*>/.source + '|' + S_STRINGS,
-  STYLES = _regEx(SRC_TAGS, 'gi'),
-  SCRIPTS = _regEx(SRC_TAGS.replace(/style/g, 'script'), 'gi')
+  SCRIPTS = /<script(\s+[^>]*)?>\n?([\S\s]*?)<\/script\s*>/gi,
+  STYLES = /<style(\s+[^>]*)?>\n?([\S\s]*?)<\/style\s*>/gi
 
 function compile (src, opts, url) {
   var
@@ -778,29 +777,29 @@ function compile (src, opts, url) {
           html = included('html') ? _compileHTML(body2, opts, pcex) : ''
         }
         else {
-          body = body.replace(_regEx('^' + indent, 'gm'), '')
 
-          body = body.replace(STYLES, function (_m, _attrs, _style) {
-            if (_m[0] !== '<') return _m
+          var blocks = splitBlocks(
+            body.replace(_regEx('^' + indent, 'gm'), '').replace(TRIM_TRAIL, '')
+          )
+
+          body = blocks[0].replace(STYLES, function (_m, _attrs, _style) {
             if (included('css')) {
               styles += (styles ? ' ' : '') + cssCode(_style, opts, _attrs, url, tagName)
             }
             return ''
           })
 
           body = body.replace(SCRIPTS, function (_m, _attrs, _script) {
-            if (_m[0] !== '<') return _m
             if (included('js')) {
               jscode += (jscode ? '\n' : '') + getCode(_script, opts, _attrs, url)
             }
             return ''
           })
 
-          var blocks = splitBlocks(body.replace(TRIM_TRAIL, ''))
-
           if (included('html')) {
-            body = blocks[0]
-            if (body) html = _compileHTML(body, opts, pcex)
+            if (/\S/.test(body)) {
+              html = _compileHTML(body, opts, pcex)
+            }
           }
 
           if (included('js')) {
@@ -830,7 +829,7 @@ function compile (src, opts, url) {
 
   if (opts.entities) return parts
 
-  if (url && opts.debug) {
+  if (opts.debug && url.slice(-2) !== '/.') {
     /* istanbul ignore if */
     if (path.isAbsolute(url)) url = path.relative('.', url)
     src = '//src: ' + url.replace(/\\/g, '/') + '\n' + src

diff --git a/dist/es6.compiler.js b/dist/es6.compiler.js
@@ -115,8 +115,7 @@ var
 
   HTML_ATTR  = / ?([-\w:\xA0-\xFF]+) ?(?:= ?('[^']*'|"[^"]*"|\S+))?/g,
   SPEC_TYPES = /^"(?:number|date(?:time)?|time|month|email|color)\b/i,
-  TRIM_TRAIL = /[ \t]+$/gm,
-  S_STRINGS  = /"[^"\n\\]*(?:\\[\S\s][^"\n\\]*)*"|'[^'\n\\]*(?:\\[\S\s][^'\n\\]*)*'/.source
+  TRIM_TRAIL = /[ \t]+$/gm
 
 function q (s) {
   return "'" + (
@@ -235,13 +234,14 @@ function restoreExpr (html, pcex) {
 }
 
 var
-  HTML_COMMENT = _regEx(/<!--(?!>)[\S\s]*?-->/.source + '|' + S_STRINGS, 'g'),
+  HTML_COMMENT = /<!--(?!>)[\S\s]*?-->|"(?:[^"\n\\]*|\\[\S\s])*"|'(?:[^'\n\\]*|\\[\S\s])*'/g,
   HTML_TAGS = /<([-\w]+)(\s+(?:[^"'\/>]*|"[^"]*"|'[^']*'|\/[^>])*)?(\/?)>/g,
   PRE_TAG = /<pre(?:\s+(?:[^">]*|"[^"]*")*)?>([\S\s]+?)<\/pre\s*>/gi
 
 function _compileHTML (html, opts, pcex) {
 
   html = splitHtml(html, opts, pcex)
+    .replace(TRIM_TRAIL, '')
     .replace(HTML_TAGS, function (_, name, attr, ends) {
 
       name = name.toLowerCase()
@@ -286,8 +286,8 @@ function compileHTML (html, opts, pcex) {
     if (!opts) opts = {}
   }
 
-  html = html.replace(/\r\n?/g, '\n').replace(HTML_COMMENT,
-    function (s) { return s[0] === '<' ? '' : s }).replace(TRIM_TRAIL, '')
+  html = html.replace(/\r\n?/g, '\n')
+    .replace(HTML_COMMENT, function (s) { return s[0] === '<' ? '' : s })
 
   if (!pcex._bp) pcex._bp = brackets.array(opts.brackets)
 
@@ -365,7 +365,7 @@ function compileJS (js, opts, type, extra) {
   return _compileJS(js, opts, type, extra.parserOptions, extra.url)
 }
 
-var CSS_SELECTOR = _regEx('(}|{|^)[ ;]*([^@ ;{}][^{}]*)(?={)|' + S_STRINGS, 'g')
+var CSS_SELECTOR = /(}|{|^)[ ;]*([^@ ;{}][^{}]*)(?={)|(?:"(?:[^"\\]*|\\.)*"|'(?:[^'\\]*|\\.)*')/g
 
 function scopedCSS (tag, style) {
   var scope = ':scope'
@@ -508,9 +508,8 @@ function compileTemplate (html, url, lang, opts) {
 
 var
   CUST_TAG = /^([ \t]*)<([-\w]+)(?:\s+([^'"\/>]*(?:(?:"(?:[^"\\]*|\\[\S\s])*"|'(?:[^'\\]*|\\[\S\s])*'|\/[^>])[^'"\/>]*)*)|\s*)?(?:\/>|>[ \t]*\n?([\S\s]*)^\1<\/\2\s*>|>(.*)<\/\2\s*>)/gim,
-  SRC_TAGS = /<style(\s+[^>]*)?>\n?([\S\s]*?)<\/style\s*>/.source + '|' + S_STRINGS,
-  STYLES = _regEx(SRC_TAGS, 'gi'),
-  SCRIPTS = _regEx(SRC_TAGS.replace(/style/g, 'script'), 'gi')
+  SCRIPTS = /<script(\s+[^>]*)?>\n?([\S\s]*?)<\/script\s*>/gi,
+  STYLES = /<style(\s+[^>]*)?>\n?([\S\s]*?)<\/style\s*>/gi
 
 function compile (src, opts, url) {
   var
@@ -557,29 +556,29 @@ function compile (src, opts, url) {
           html = included('html') ? _compileHTML(body2, opts, pcex) : ''
         }
         else {
-          body = body.replace(_regEx('^' + indent, 'gm'), '')
 
-          body = body.replace(STYLES, function (_m, _attrs, _style) {
-            if (_m[0] !== '<') return _m
+          var blocks = splitBlocks(
+            body.replace(_regEx('^' + indent, 'gm'), '').replace(TRIM_TRAIL, '')
+          )
+
+          body = blocks[0].replace(STYLES, function (_m, _attrs, _style) {
             if (included('css')) {
               styles += (styles ? ' ' : '') + cssCode(_style, opts, _attrs, url, tagName)
             }
             return ''
           })
 
           body = body.replace(SCRIPTS, function (_m, _attrs, _script) {
-            if (_m[0] !== '<') return _m
             if (included('js')) {
               jscode += (jscode ? '\n' : '') + getCode(_script, opts, _attrs, url)
             }
             return ''
           })
 
-          var blocks = splitBlocks(body.replace(TRIM_TRAIL, ''))
-
           if (included('html')) {
-            body = blocks[0]
-            if (body) html = _compileHTML(body, opts, pcex)
+            if (/\S/.test(body)) {
+              html = _compileHTML(body, opts, pcex)
+            }
           }
 
           if (included('js')) {

diff --git a/dist/riot.compiler.js b/dist/riot.compiler.js
@@ -112,8 +112,7 @@ var compile = (function () {
 
     HTML_ATTR  = / ?([-\w:\xA0-\xFF]+) ?(?:= ?('[^']*'|"[^"]*"|\S+))?/g,
     SPEC_TYPES = /^"(?:number|date(?:time)?|time|month|email|color)\b/i,
-    TRIM_TRAIL = /[ \t]+$/gm,
-    S_STRINGS  = /"[^"\n\\]*(?:\\[\S\s][^"\n\\]*)*"|'[^'\n\\]*(?:\\[\S\s][^'\n\\]*)*'/.source
+    TRIM_TRAIL = /[ \t]+$/gm
 
   function q (s) {
     return "'" + (
@@ -232,13 +231,14 @@ var compile = (function () {
   }
 
   var
-    HTML_COMMENT = _regEx(/<!--(?!>)[\S\s]*?-->/.source + '|' + S_STRINGS, 'g'),
+    HTML_COMMENT = /<!--(?!>)[\S\s]*?-->|"(?:[^"\n\\]*|\\[\S\s])*"|'(?:[^'\n\\]*|\\[\S\s])*'/g,
     HTML_TAGS = /<([-\w]+)(\s+(?:[^"'\/>]*|"[^"]*"|'[^']*'|\/[^>])*)?(\/?)>/g,
     PRE_TAG = /<pre(?:\s+(?:[^">]*|"[^"]*")*)?>([\S\s]+?)<\/pre\s*>/gi
 
   function _compileHTML (html, opts, pcex) {
 
     html = splitHtml(html, opts, pcex)
+      .replace(TRIM_TRAIL, '')
       .replace(HTML_TAGS, function (_, name, attr, ends) {
 
         name = name.toLowerCase()
@@ -283,8 +283,8 @@ var compile = (function () {
       if (!opts) opts = {}
     }
 
-    html = html.replace(/\r\n?/g, '\n').replace(HTML_COMMENT,
-      function (s) { return s[0] === '<' ? '' : s }).replace(TRIM_TRAIL, '')
+    html = html.replace(/\r\n?/g, '\n')
+      .replace(HTML_COMMENT, function (s) { return s[0] === '<' ? '' : s })
 
     if (!pcex._bp) pcex._bp = brackets.array(opts.brackets)
 
@@ -362,7 +362,7 @@ var compile = (function () {
     return _compileJS(js, opts, type, extra.parserOptions, extra.url)
   }
 
-  var CSS_SELECTOR = _regEx('(}|{|^)[ ;]*([^@ ;{}][^{}]*)(?={)|' + S_STRINGS, 'g')
+  var CSS_SELECTOR = /(}|{|^)[ ;]*([^@ ;{}][^{}]*)(?={)|(?:"(?:[^"\\]*|\\.)*"|'(?:[^'\\]*|\\.)*')/g
 
   function scopedCSS (tag, style) {
     var scope = ':scope'
@@ -505,9 +505,8 @@ var compile = (function () {
 
   var
     CUST_TAG = /^([ \t]*)<([-\w]+)(?:\s+([^'"\/>]*(?:(?:"(?:[^"\\]*|\\[\S\s])*"|'(?:[^'\\]*|\\[\S\s])*'|\/[^>])[^'"\/>]*)*)|\s*)?(?:\/>|>[ \t]*\n?([\S\s]*)^\1<\/\2\s*>|>(.*)<\/\2\s*>)/gim,
-    SRC_TAGS = /<style(\s+[^>]*)?>\n?([\S\s]*?)<\/style\s*>/.source + '|' + S_STRINGS,
-    STYLES = _regEx(SRC_TAGS, 'gi'),
-    SCRIPTS = _regEx(SRC_TAGS.replace(/style/g, 'script'), 'gi')
+    SCRIPTS = /<script(\s+[^>]*)?>\n?([\S\s]*?)<\/script\s*>/gi,
+    STYLES = /<style(\s+[^>]*)?>\n?([\S\s]*?)<\/style\s*>/gi
 
   function compile (src, opts, url) {
     var
@@ -554,29 +553,29 @@ var compile = (function () {
             html = included('html') ? _compileHTML(body2, opts, pcex) : ''
           }
           else {
-            body = body.replace(_regEx('^' + indent, 'gm'), '')
 
-            body = body.replace(STYLES, function (_m, _attrs, _style) {
-              if (_m[0] !== '<') return _m
+            var blocks = splitBlocks(
+              body.replace(_regEx('^' + indent, 'gm'), '').replace(TRIM_TRAIL, '')
+            )
+
+            body = blocks[0].replace(STYLES, function (_m, _attrs, _style) {
               if (included('css')) {
                 styles += (styles ? ' ' : '') + cssCode(_style, opts, _attrs, url, tagName)
               }
               return ''
             })
 
             body = body.replace(SCRIPTS, function (_m, _attrs, _script) {
-              if (_m[0] !== '<') return _m
               if (included('js')) {
                 jscode += (jscode ? '\n' : '') + getCode(_script, opts, _attrs, url)
               }
               return ''
             })
 
-            var blocks = splitBlocks(body.replace(TRIM_TRAIL, ''))
-
             if (included('html')) {
-              body = blocks[0]
-              if (body) html = _compileHTML(body, opts, pcex)
+              if (/\S/.test(body)) {
+                html = _compileHTML(body, opts, pcex)
+              }
             }
 
             if (included('js')) {

diff --git a/doc/README.md b/doc/README.md
@@ -151,6 +151,8 @@ The predefined parsers are:
 - `scss`
 - `stylus`
 
+\* Only `less` is available on browsers.
+
 #### js
 - `none` or `javascript`
 - `livescript`

diff --git a/doc/guide.md b/doc/guide.md
@@ -217,15 +217,18 @@ Where the html ends? or where should I put my JavaScript?
 ### The Untagged JavaScript Block
 
 The first action taken by the compiler is send the received source to any html parser.
-After that, the compiler normalizes line endings to `\n` and removes _html_ comments.
-Once prepared the source, searches the tags, separate its parts (closing/opening tag, root attributes, and content). In the content, one by one, removes the `style` blocks and sends its content to the CSS parser. Next, it does the same for the `script` tags.
-This is done in the entire tag content.
+After that, the compiler normalizes line endings to `\n`.
+This is done in the entire source.
+
+Once prepared the source, searches the html elements. For each found element separates its parts (closing/opening tag, root attributes, and content) and parses the root attributes, then removes _html_ comments and trims trailing whitespace from the content.
 
 In the remaining content, looks for the last html tag which _ends a line_.
-If found, this closing tag signals the end of the html markup and the beginning of the JavaScript code.
+If found, its closing tag signals the end of the html markup and the beginning of the untagged JavaScript code.
 If not found, all remaining is considered JavaScript.
 
-So, although not a good idea, you can put html comments, `style`, and `script` blocks, anywhere inside the tag; the only restriction is that the untagged JavaScript block must follow the remaining html content and you can't use JavaScript comments out of this block.
+In the html part, one by one, removes the `style` blocks and sends its content to the CSS parser. Next, it does the same for the `script` tags.
+
+So, you can put html comments anywhere inside the tag, but keep the `style` and `script` blocks in the html part; the only restriction is that the untagged JavaScript block must follow the html and you can't use JavaScript comments outside this block.
 
 ### Multiple JavaScript Blocks