v2.5.4

.eslintrc.yml

@@ -134,7 +134,7 @@ rules:
     keyword-spacing: 2          # enforce spacing before and after keywords
     linebreak-style: [2, "unix"]
     max-depth: [1, 5]           # specify the maximum depth blocks can be nested
-    max-len: [1, 92, 4, { "ignoreTrailingComments": true, "ignoreUrls": true, "ignorePattern": "=\\s+/|_regEx\\(|RegExp\\(" }]
+    max-len: [1, 96, 4, { "ignoreTrailingComments": true, "ignoreUrls": true, "ignorePattern": "=\\s+/|_regEx\\(|RegExp\\(" }]
     no-control-regex: 1
                                 # maximum line length, except for regexes
     max-nested-callbacks: [2, 4] # specify the maximum depth callbacks can be nested (Default: [0, 2])

.travis.yml

@@ -18,6 +18,7 @@ install:
 
  # babel presets
   - npm i babel-preset-es2015-riot
+  - npm i buble
   - npm i coffee-script
   - npm i livescript
   - npm i typescript-simple

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Compiler Changes
 
+### v2.5.4
+- Fix #68 : SASS inside Pug template gives Invalid CSS.
+- Added parser for [bublé](https://buble.surge.sh) as `buble` in the browser. Option `modules` is `false` in all versions.
+- Added parser for [bublé](https://buble.surge.sh) as `buble`.
+- Added support for es6 `import` statements. Thanks to @kuashe! - Related to [riot#1715](https://github.com/riot/riot/issues/1715), [riot#1784](https://github.com/riot/riot/issues/1784), and [riot#1864](https://github.com/riot/riot/issues/1864).
+
 ### v2.5.3
 - Fix #73 : resolveModuleSource must be a function - Option removed from the default Babel options.
 - Updated node.js to 4.4 in the Travis environment.

README.md

@@ -15,11 +15,6 @@
 
 `$ npm install riot-compiler --save`
 
-### Bower
-
-`$ bower install riot-compiler --save`
-
-
 ### Read more in the [doc folder](doc/) and the [CHANGELOG](CHANGELOG.md)
 
 _Please note: the documentation is a work in progress. Contributions are welcome._

dist/es6.compiler.js

@@ -1,6 +1,6 @@
 /**
  * Compiler for riot custom tags
- * @version v2.5.3
+ * @version v2.5.4
  */
 
 import { brackets } from 'riot-tmpl'
@@ -107,6 +107,13 @@ var parsers = (function (win) {
     babel: function (js, opts, url) {
       return _r('babel').transform(js, extend({ filename: url }, opts)).code
     },
+    buble: function (js, opts, url) {
+      opts = extend({
+        source: url,
+        modules: false
+      }, opts)
+      return _r('buble').transform(js, opts).code
+    },
     coffee: function (js, opts) {
       return _r('CoffeeScript').compile(js, extend({ bare: true }, opts))
     },
@@ -164,7 +171,7 @@ var PRE_TAGS = /<pre(?:\s+(?:[^">]*|"[^"]*")*)?>([\S\s]+?)<\/pre\s*>/gi
 
 var SPEC_TYPES = /^"(?:number|date(?:time)?|time|month|email|color)\b/i
 
-var IMPORT_STATEMENT = /^(?: )*(?:import)(?:(?:.*))*$/gm
+var IMPORT_STATEMENT = /^\s*import(?:\s*[*{]|\s+[$_a-zA-Z'"]).*\n?/gm
 
 var TRIM_TRAIL = /[ \t]+$/gm
 
@@ -274,20 +281,6 @@ function restoreExpr (html, pcex) {
   return html
 }
 
-function compileImports (js) {
-  var imp = []
-  var imports = ''
-  while (imp = IMPORT_STATEMENT.exec(js)) {
-    imports += imp[0].trim() + '\n'
-  }
-  return imports
-}
-
-function rmImports (js) {
-  var jsCode = js.replace(IMPORT_STATEMENT, '')
-  return jsCode
-}
-
 function _compileHTML (html, opts, pcex) {
 
   html = splitHtml(html, opts, pcex)
@@ -689,9 +682,11 @@ function compile (src, opts, url) {
 
           if (included('js')) {
             body = _compileJS(blocks[1], opts, null, null, url)
-            imports = compileImports(jscode)
-            jscode  = rmImports(jscode)
             if (body) jscode += (jscode ? '\n' : '') + body
+            jscode = jscode.replace(IMPORT_STATEMENT, function (s) {
+              imports += s.trim() + '\n'
+              return ''
+            })
           }
         }
       }
@@ -704,7 +699,8 @@ function compile (src, opts, url) {
           html: html,
           css: styles,
           attribs: attribs,
-          js: jscode
+          js: jscode,
+          imports: imports
         })
         return ''
       }
@@ -717,7 +713,7 @@ function compile (src, opts, url) {
   return src
 }
 
-var version = 'v2.5.3'
+var version = 'v2.5.4'
 
 export default {
   compile,

dist/riot.compiler.js

@@ -101,6 +101,13 @@ var parsers = (function (win) {
     babel: function (js, opts, url) {
       return _r('babel').transform(js, extend({ filename: url }, opts)).code
     },
+    buble: function (js, opts, url) {
+      opts = extend({
+        source: url,
+        modules: false
+      }, opts)
+      return _r('buble').transform(js, opts).code
+    },
     coffee: function (js, opts) {
       return _r('CoffeeScript').compile(js, extend({ bare: true }, opts))
     },
@@ -129,7 +136,7 @@ riot.parsers = parsers
 
 /**
  * Compiler for riot custom tags
- * @version v2.5.3
+ * @version v2.5.4
  */
 var compile = (function () {
 
@@ -162,7 +169,7 @@ var compile = (function () {
 
   var SPEC_TYPES = /^"(?:number|date(?:time)?|time|month|email|color)\b/i
 
-  var IMPORT_STATEMENT = /^(?: )*(?:import)(?:(?:.*))*$/gm
+  var IMPORT_STATEMENT = /^\s*import(?:\s*[*{]|\s+[$_a-zA-Z'"]).*\n?/gm
 
   var TRIM_TRAIL = /[ \t]+$/gm
 
@@ -272,20 +279,6 @@ var compile = (function () {
     return html
   }
 
-  function compileImports (js) {
-    var imp = []
-    var imports = ''
-    while (imp = IMPORT_STATEMENT.exec(js)) {
-      imports += imp[0].trim() + '\n'
-    }
-    return imports
-  }
-
-  function rmImports (js) {
-    var jsCode = js.replace(IMPORT_STATEMENT, '')
-    return jsCode
-  }
-
   function _compileHTML (html, opts, pcex) {
 
     html = splitHtml(html, opts, pcex)
@@ -687,9 +680,11 @@ var compile = (function () {
 
             if (included('js')) {
               body = _compileJS(blocks[1], opts, null, null, url)
-              imports = compileImports(jscode)
-              jscode  = rmImports(jscode)
               if (body) jscode += (jscode ? '\n' : '') + body
+              jscode = jscode.replace(IMPORT_STATEMENT, function (s) {
+                imports += s.trim() + '\n'
+                return ''
+              })
             }
           }
         }
@@ -702,7 +697,8 @@ var compile = (function () {
             html: html,
             css: styles,
             attribs: attribs,
-            js: jscode
+            js: jscode,
+            imports: imports
           })
           return ''
         }
@@ -720,7 +716,7 @@ var compile = (function () {
     html: compileHTML,
     css: compileCSS,
     js: compileJS,
-    version: 'v2.5.3'
+    version: 'v2.5.4'
   }
   return compile
 

doc/README.md

@@ -159,6 +159,7 @@ The predefined parsers are:
 - `typescript`
 - `es6` - (using `babel-core` or `babel`)
 - `babel` - (using `babel-core` v6.x and the `es2015` preset)
+- `buble`
 - `coffee` or `coffeescript`
 
 ## Changes in v2.3.0

doc/guide.md

@@ -150,7 +150,7 @@ The `compile` and `riot.compile` functions can take an additional parameter spec
 | compact     | html    | boolean | Remove spaces between tags (minify `<p> </p> <p> </p>` to `<p></p><p></p>`)
 | whitespace  | html    | boolean | Preserve newlines and tabs. newlines are normalized anyway
 | template    | html    | string  | HTML pre-processor. Built-in support for: jade
-| type        | js      | string  | JavaScript pre-processor. Built-in support for: es6, babel, coffeescript, typescript, livescript, none (no preprocess)
+| type        | js      | string  | JavaScript pre-processor. Built-in support for: es6, babel, buble, coffeescript, typescript, livescript, none (no preprocess)
 | style       | css     | string  | CSS pre-processor. Built-in support for: sass, scss, less, stylus (only less in browsers)
 | entities    | compile | boolean | Split the tag in its raw parts.
 | exclude     | compile | array   | This is an array of strings with part names to exclude. These names are the same as those generated by the `entities` option: html, css, attribs, js. Ej. `{exclude: ['js']}`
@@ -160,6 +160,8 @@ The `compile` and `riot.compile` functions can take an additional parameter spec
 This option, new in v2.3.13, causes the `compile` function return an array of objects with the parts of the tags.
 Each object contains five properties: tagName, html, attribs, css, and js. Propertie values for non-existent parts are empty strings.
 
+From v2.5.4, `entities` includes the `import` declarations as a multiline string.
+
 Example:
 ```html
 <script type="riot/tag" id="test1">
@@ -168,6 +170,7 @@ Example:
   <tag2>
     <style>#id1 {top:0}</style>
     <p/>
+    import * as foo from "./module"
     click(e) {
     }
   </tag2>
@@ -181,7 +184,7 @@ will set `arr` to be:
 ```js
 [
   {tagName: 'tag1', html: '<div></div>', css: '', attribs: 'id="id1"', js: ''},
-  {tagName: 'tag2', html: '<p></p>', css: '#id1 {top:0}', attribs: '', js: '  this.click = function(e) {\n  }.bind(this);' }
+  {tagName: 'tag2', html: '<p></p>', css: '#id1 {top:0}', attribs: '', js: '  this.click = function(e) {\n  }.bind(this);', imports: 'import * as foo from "./module"\n' }
 ]
 ```
 
@@ -253,6 +256,16 @@ Following the above rules, detect the last HTML tag is not difficult, but keep i
 ```
 The compiler does not recognize template strings and confuses `<p>` with the last HTML element.
 
+
+### ES6 modules
+
+From v2.5.4 the riot-compiler offers limited support for ES6 modules (`import` declarations are hoisted and each must be written in one line).
+Also, the `entities` option returns the declarations as one multiline string.
+
+**Note:** An `import` declaration must not spawn multiple lines.
+
+See [Chapter 16 Modules](http://exploringjs.com/es6/ch_modules.html) of Exploring ES6.
+
 ### Multiple JavaScript Blocks
 
 Each JavaScript block in the tag can have different `type` attributes.
@@ -268,7 +281,7 @@ The filename in `src` can be absolute or relative. If you pass a third parameter
 Without a `type=` directive, the JavaScript parser defaults to the `type` specified in the options passed to the compiler. If you don't want the code to be parsed, use `type="none"`.
 
 If you just want to get the `script` tag rendered, keeping the `type`
-attribute and the tag contents untouched, you should then use the `defer` 
+attribute and the tag contents untouched, you should then use the `defer`
 attribute.
 
 The `defer` attribute is used to avoid the processing of the `script` tag
@@ -389,9 +402,9 @@ The `parserOpts` and `url` properties of _extraOptions_ will be passed to the gi
 Example:
 ```js
 var opts = {url: url},
-    css = compiler.js(code, 'babel', opts)
+    css = compiler.js(code, 'buble', opts)
 ```
-will run `parsers.js.babel(code, opts.parserOpts, opts.url)` (inside the parser, the url will be passed as `{filename: url}` to babel).
+will run `parsers.js.buble(code, opts.parserOpts, opts.url)` (inside the parser, the url will be passed as `{source: url}` to bublé).
 
 **Note:**
 If you omit `parserName` but include `extraOptions`, you **must** include `compilerOptions` as well:

lib/compiler.js

@@ -1,8 +1,8 @@
 /**
- * The riot-compiler v2.5.3
+ * The riot-compiler v2.5.4
  *
  * @module compiler
- * @version v2.5.3
+ * @version v2.5.4
  * @license MIT
  * @copyright Muut Inc. + contributors
  */
@@ -118,7 +118,7 @@ var SPEC_TYPES = /^"(?:number|date(?:time)?|time|month|email|color)\b/i
  * Matches the 'import' statement
  * @const {RegExp}
  */
-var IMPORT_STATEMENT = /^(?: )*(?:import)(?:(?:.*))*$/gm
+var IMPORT_STATEMENT = /^\s*import(?:\s*[*{]|\s+[$_a-zA-Z'"]).*\n?/gm
 
 /**
  * Matches trailing spaces and tabs by line.
@@ -269,30 +269,6 @@ function restoreExpr (html, pcex) {
   return html
 }
 
-/**
- * Return imports statement of the code as a string
- * @param    {string} js - The js code containing the imports statement
- * @returns  {string} Js code containing only the imports statement
- */
-function compileImports (js) {
-  var imp = []
-  var imports = ''
-  while (imp = IMPORT_STATEMENT.exec(js)) {
-    imports += imp[0].trim() + '\n'
-  }
-  return imports
-}
-
-/**
- * Remove 'import' statement from JSCode
- * @param    {string} js - The Js code
- * @returns  {string} jsCode The js code without 'import' statement
- */
-function rmImports (js) {
-  var jsCode = js.replace(IMPORT_STATEMENT, '')
-  return jsCode
-}
-
 /**
  * The internal HTML compiler.
  *
@@ -996,9 +972,11 @@ function compile (src, opts, url) {
 
           if (included('js')) {
             body = _compileJS(blocks[1], opts, null, null, url)
-            imports = compileImports(jscode)
-            jscode  = rmImports(jscode)
             if (body) jscode += (jscode ? '\n' : '') + body
+            jscode = jscode.replace(IMPORT_STATEMENT, function (s) {
+              imports += s.trim() + '\n'
+              return ''
+            })
           }
         }
       }
@@ -1011,7 +989,8 @@ function compile (src, opts, url) {
           html: html,
           css: styles,
           attribs: attribs,
-          js: jscode
+          js: jscode,
+          imports: imports
         })
         return ''
       }
@@ -1035,5 +1014,5 @@ module.exports = {
   css: compileCSS,
   js: compileJS,
   parsers: parsers,
-  version: 'v2.5.3'
+  version: 'v2.5.4'
 }

lib/parsers.js

@@ -26,7 +26,7 @@ var _parsers = {
 var _loaders = {
   html: { jade: TRUE, pug: TRUE },
   css: { sass: TRUE, scss: TRUE, less: TRUE, stylus: TRUE },
-  js: { es6: TRUE, babel: TRUE, coffee: TRUE, livescript: TRUE, typescript: TRUE }
+  js: { es6: TRUE, babel: TRUE, buble: TRUE, coffee: TRUE, livescript: TRUE, typescript: TRUE }
 }
 
 _loaders.js.coffeescript = TRUE // 4 the nostalgics