From b5f870cbd7cda026c898e95bf0fc419499c2a8b0 Mon Sep 17 00:00:00 2001 From: amarcruz Date: Mon, 29 Aug 2016 21:01:54 -0500 Subject: [PATCH] ES6 modules, limited support. Add 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). --- .eslintrc.yml | 2 +- CHANGELOG.md | 1 + dist/es6.compiler.js | 25 +++++---------- dist/riot.compiler.js | 25 +++++---------- doc/README.md | 1 + doc/guide.md | 23 +++++++++++--- lib/compiler.js | 35 +++++---------------- src/core.js | 35 +++++---------------- test/specs/expect/es6-import-untagged.js | 4 +++ test/specs/expect/es6-import.js | 2 +- test/specs/fixtures/es6-import-untagged.tag | 5 +++ test/specs/fixtures/es6-import.tag | 1 - test/specs/tag.js | 4 +++ 13 files changed, 63 insertions(+), 100 deletions(-) create mode 100644 test/specs/expect/es6-import-untagged.js create mode 100644 test/specs/fixtures/es6-import-untagged.tag diff --git a/.eslintrc.yml b/.eslintrc.yml index db845bf..1b0f052 100644 --- a/.eslintrc.yml +++ b/.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]) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4186b8b..6b420c2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ### v2.5.4 - 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. diff --git a/dist/es6.compiler.js b/dist/es6.compiler.js index 77273a0..d26eaef 100644 --- a/dist/es6.compiler.js +++ b/dist/es6.compiler.js @@ -164,7 +164,7 @@ var PRE_TAGS = /]*|"[^"]*")*)?>([\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 +274,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 +675,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 +692,8 @@ function compile (src, opts, url) { html: html, css: styles, attribs: attribs, - js: jscode + js: jscode, + imports: imports }) return '' } diff --git a/dist/riot.compiler.js b/dist/riot.compiler.js index e8fbe7d..79c77fe 100644 --- a/dist/riot.compiler.js +++ b/dist/riot.compiler.js @@ -162,7 +162,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 +272,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 +673,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 +690,8 @@ var compile = (function () { html: html, css: styles, attribs: attribs, - js: jscode + js: jscode, + imports: imports }) return '' } diff --git a/doc/README.md b/doc/README.md index 3dfd6fa..3577faf 100644 --- a/doc/README.md +++ b/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 diff --git a/doc/guide.md b/doc/guide.md index 3dd0007..832a1f9 100644 --- a/doc/guide.md +++ b/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 `

` to `

`) | 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