riot_js-rails 0.6.2 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 5209662e90ea7c75f0e12cfb17dd327504638d01
-  data.tar.gz: 49c4adcf8d1244370fc76f1cbdfbb520bb47fa31
+  metadata.gz: 7f1f3ab924a0ddd2a63b4a9d73614ab08a2792a9
+  data.tar.gz: 07c38e96e874e3c56b6f7ddae718680ab7b569bd
 SHA512:
-  metadata.gz: 7cbe0afdfe02b06dc7145d875e3e677b926e6cb43345f710e96881a66058a4e74ed25a472dd8b14485a876e48e4bc4df56efc421553b80ffa8e5abf403cd9f50
-  data.tar.gz: 451bceae8a8539a844d9ebcb3b5bd64c16f8c2e24c4337bcfc4f5d81dc1597e89a28e147464c6174f51ec2b8a3776dcd57697e12043b363bbf1098faa443d0aa
+  metadata.gz: 6eb2e719eebf5c16705da093042c667b4d88bdc438875adffb4cc54208d827509ba6c2c57fa4a8c1ac464980d973bb37c168fd2b03e5bd25363ff239303abd24
+  data.tar.gz: d0a18d5eeb06494ad0c28bba921f814cb4c9b24e73040a8fe7d4b82f1a60eb792ec29b71072379303fe0b45f40a418bc76776170b39d6ac4832555f7a687a1e7

data/Rakefile

@@ -7,4 +7,12 @@ Rake::TestTask.new do |t|
 end
 
 desc "Run tests"
-task :default => :test
+task :default => :test
+
+namespace :test do
+  desc "Test with various versions of sprockets"
+  task :sprockets_versions do
+    sh "bash test/test_sprockets_versions.sh"
+  end
+end
+

data/lib/riot_js/rails/processors/processor.rb

@@ -1,23 +1,103 @@
 require 'riot_js/rails/processors/compiler'
 
-if Gem::Version.new(Sprockets::VERSION) < Gem::Version.new('3.0.0')
-  require 'riot_js/rails/processors/sprockets_processor_v2'
-else
-  require 'riot_js/rails/processors/sprockets_processor_v3'
-end
-
 module RiotJs
   module Rails
-    class Processor < SprocketsProcessor
 
-      def process
-        compile_tag
+    # Sprockets 2, 3 & 4 interface
+    class SprocketsExtensionBase
+      attr_reader :default_mime_type
+
+      def initialize(filename, &block)
+        @filename = filename
+        @source   = block.call
+      end
+
+      def render(context, empty_hash_wtf)
+        self.class.run(@filename, @source, context)
+      end
+
+      def self.run(filename, source, context)
+        raise 'Not implemented'
+      end
+
+      def self.call(input)
+        if input.is_a?(String)
+          run("", input, nil)
+        else
+          filename = input[:filename]
+          source   = input[:data]
+          context  = input[:environment].context_class.new(input)
+
+          result = run(filename, source, context)
+          context.metadata.merge(data: result)
+        end
       end
 
       private
 
-      def compile_tag
-        ::RiotJs::Rails::Compiler.compile(@data)
+      def self.register_self_helper(app, config, file_ext, mime_type_from, mime_type_to, charset=nil)
+
+        if config.respond_to?(:assets)
+          config.assets.configure do |env|
+            if env.respond_to?(:register_transformer)
+              # Sprockets 3 and 4
+              env.register_mime_type mime_type_from, extensions: [file_ext], charset: charset
+              env.register_transformer mime_type_from, mime_type_to, self
+            elsif env.respond_to?(:register_engine)
+              if Sprockets::VERSION.start_with?("3")
+                # Sprockets 3 ... is this needed?
+                env.register_engine file_ext, self, { mime_type: mime_type_to, silence_deprecation: true }
+              else
+                # Sprockets 2.12.4
+                @default_mime_type = mime_type_to
+                env.register_engine file_ext, self
+              end
+            end
+          end
+        else
+          # Sprockets 2.2.3
+          @default_mime_type = mime_type_to
+          app.assets.register_engine file_ext, self
+        end
+      end
+
+    end
+
+    class Processor < SprocketsExtensionBase
+
+      def self.run(filename, source, context)
+        ::RiotJs::Rails::Compiler.compile(source)
+      end
+
+      def self.register_self(app, config)
+        # app is a YourApp::Application
+        # config is Rails::Railtie::Configuration that belongs to RiotJs::Rails::Railtie
+        register_self_helper(app, config, '.tag', 'text/riot-tag', 'application/javascript', :html)
+      end
+
+      def self.register_nested(app, config, type, charset, tilt_template)
+        extention = '.' + type
+        if config.respond_to?(:assets)
+          config.assets.configure do |env|
+            if env.respond_to?(:register_transformer)
+              # Sprockets 3 and 4
+              env.register_mime_type 'text/riot-tag+'+type, extensions: ['.tag'+extention], charset: charset
+              env.register_transformer 'text/riot-tag+'+type, 'application/javascript',
+                Proc.new{ |input| Processor.call(tilt_template.new{input[:data]}.render) }
+            elsif env.respond_to?(:register_engine)
+              if Sprockets::VERSION.start_with?("3")
+                # Sprockets 3 ... is this needed?
+                env.register_engine extention, tilt_template, { silence_deprecation: true }
+              else
+                # Sprockets 2.12.4
+                env.register_engine extention, tilt_template
+              end
+            end
+          end
+        else
+          # Sprockets 2
+          app.assets.register_engine extention, tilt_template
+        end
       end
     end
   end

data/lib/riot_js/rails/railtie.rb

@@ -9,15 +9,18 @@ module RiotJs
       config.riot.node_paths = []
 
       initializer :setup_sprockets do |app|
-        Processor.register_self config
+        # app is a YourApp::Application
+        # config is Rails::Railtie::Configuration that belongs to RiotJs::Rails::Railtie
+        Processor.register_self app, config
 
-        if defined? ::Haml
+        if defined?(::Haml)
           require 'tilt/haml'
-          config.assets.register_engine '.haml', ::Tilt::HamlTemplate
+          Haml::Template.options[:format] = :html5
+          Processor.register_nested(app, config, 'haml', :html, ::Tilt::HamlTemplate)
         end
 
-        if defined? ::Slim
-          config.assets.register_engine '.slim', ::Slim::Template
+        if defined?(::Slim)
+          Processor.register_nested(app, config, 'slim', :html, ::Slim::Template)
         end
       end
 
@@ -36,7 +39,6 @@ module RiotJs
         ENV['NODE_PATH'] = node_paths.join(':')
       end
 
-
       def detect_node_global_path
         prefix = `npm config get prefix`.to_s.chomp("\n")
         possible_paths = [ "#{prefix}/lib/node", "#{prefix}/lib/node_modules" ]

data/lib/riot_js/rails/version.rb

@@ -1,5 +1,5 @@
 module RiotJs
   module Rails
-    VERSION = '0.6.2'
+    VERSION = '0.7.0'
   end
 end

data/vendor/assets/javascripts/compiler/brackets.js

@@ -1,7 +1,10 @@
+'use strict'
+
 /**
  * Brackets support for the node.js version of the riot-compiler
  * @module
  */
+var safeRegex = require('./safe-regex.js')
 
 /**
  * Matches valid, multiline JavaScript comments in almost all its forms.
@@ -128,7 +131,7 @@ module.exports.split = function split (str, _, _bp) {
 
   isexpr = start = re.lastIndex = 0       // re is reused, we must reset lastIndex
 
-  while (match = re.exec(str)) {
+  while ((match = re.exec(str))) {
 
     pos = match.index
 
@@ -202,7 +205,7 @@ module.exports.split = function split (str, _, _bp) {
 
     rr.lastIndex = ix
     ix = 1
-    while (mm = rr.exec(s)) {
+    while ((mm = rr.exec(s))) {
       if (mm[1] &&
         !(mm[1] === ch ? ++ix : --ix)) break
     }
@@ -214,9 +217,8 @@ module.exports.split = function split (str, _, _bp) {
   }
 }
 
-var
-  INVALIDCH = /[\x00-\x1F<>a-zA-Z0-9'",;\\]/,   // invalid characters for brackets
-  ESCAPEDCH = /(?=[[\]()*+?.^$|])/g             // this characters must be escaped
+var INVALIDCH = safeRegex(/[@-@<>a-zA-Z0-9'",;\\]/, 'x00', 'x1F')   // invalid characters for brackets
+var ESCAPEDCH = /(?=[[\]()*+?.^$|])/g                               // this characters must be escaped
 
 /**
  * Returns an array with information for the given brackets using a cache for the

data/vendor/assets/javascripts/compiler/compiler.js

@@ -4,13 +4,17 @@
  * @module compiler
  * @version WIP
  * @license MIT
- * @copyright 2015 Muut Inc. + contributors
+ * @copyright Muut Inc. + contributors
  */
 'use strict'
 
-var brackets = require('./brackets')
-var parsers = require('./parsers')
-var path = require('path')
+var brackets  = require('./brackets')
+var parsers   = require('./parsers')
+var safeRegex = require('./safe-regex')
+var path      = require('path')
+
+var extend = require('./parsers/_utils').mixobj
+/* eslint-enable */
 
 /**
  * Source for creating regexes matching valid quoted, single-line JavaScript strings.
@@ -54,20 +58,14 @@ var HTML_COMMS = RegExp(/<!--(?!>)[\S\s]*?-->/.source + '|' + S_LINESTR, 'g')
  *  {@link module:compiler~parseAttribs|parseAttribs}
  * @const {RegExp}
  */
-var HTML_TAGS = /<([-\w]+)(?:\s+([^"'\/>]*(?:(?:"[^"]*"|'[^']*'|\/[^>])[^'"\/>]*)*)|\s*)(\/?)>/g
+var HTML_TAGS = /<(-?[A-Za-z][-\w\xA0-\xFF]*)(?:\s+([^"'\/>]*(?:(?:"[^"]*"|'[^']*'|\/[^>])[^'"\/>]*)*)|\s*)(\/?)>/g
 
 /**
- * Matches boolean HTML attributes, prefixed with `"__"` in the riot tag definition.
- * Used by {@link module:compiler~parseAttribs|parseAttribs} with lowercase names.
- * With a long list like this, a regex is faster than `[].indexOf` in most browsers.
- * @const {RegExp}
- * @see [attributes.md](https://github.com/riot/compiler/blob/dev/doc/attributes.md)
+ * Matches spaces and tabs between HTML tags
+ * Used by the `compact` option.
+ * @const RegExp
  */
-var BOOL_ATTRS = RegExp(
-    '^(?:disabled|checked|readonly|required|allowfullscreen|auto(?:focus|play)|' +
-    'compact|controls|default|formnovalidate|hidden|ismap|itemscope|loop|' +
-    'multiple|muted|no(?:resize|shade|validate|wrap)?|open|reversed|seamless|' +
-    'selected|sortable|truespeed|typemustmatch)$')
+var HTML_PACK = />[ \t]+<(-?[A-Za-z]|\/[-A-Za-z])/g
 
 /**
  * These attributes give error when parsed on browsers with an expression in its value.
@@ -76,7 +74,7 @@ var BOOL_ATTRS = RegExp(
  * @const {Array}
  * @see [attributes.md](https://github.com/riot/compiler/blob/dev/doc/attributes.md)
  */
-var RIOT_ATTRS = ['style', 'src', 'd']
+var RIOT_ATTRS = ['style', 'src', 'd', 'value']
 
 /**
  * HTML5 void elements that cannot be auto-closed.
@@ -103,6 +101,12 @@ var PRE_TAGS = /<pre(?:\s+(?:[^">]*|"[^"]*")*)?>([\S\s]+?)<\/pre\s*>/gi
  */
 var SPEC_TYPES = /^"(?:number|date(?:time)?|time|month|email|color)\b/i
 
+/**
+ * Matches the 'import' statement
+ * @const {RegExp}
+ */
+var IMPORT_STATEMENT = /^\s*import(?:(?:\s|[^\s'"])*)['|"].*\n?/gm
+
 /**
  * Matches trailing spaces and tabs by line.
  * @const {RegExp}
@@ -110,6 +114,10 @@ var SPEC_TYPES = /^"(?:number|date(?:time)?|time|month|email|color)\b/i
 var TRIM_TRAIL = /[ \t]+$/gm
 
 var
+  RE_HASEXPR = safeRegex(/@#\d/, 'x01'),
+  RE_REPEXPR = safeRegex(/@#(\d+)/g, 'x01'),
+  CH_IDEXPR  = '\x01#',
+  CH_DQCODE  = '\u2057',
   DQ = '"',
   SQ = "'"
 
@@ -132,7 +140,7 @@ function cleanSource (src) {
   }
 
   re.lastIndex = 0
-  while (mm = re.exec(src)) {
+  while ((mm = re.exec(src))) {
     if (mm[0][0] === '<') {
       src = RegExp.leftContext + RegExp.rightContext
       re.lastIndex = mm[3] + 1
@@ -160,7 +168,7 @@ function parseAttribs (str, pcex) {
 
   str = str.replace(/\s+/g, ' ')
 
-  while (match = HTML_ATTRS.exec(str)) {
+  while ((match = HTML_ATTRS.exec(str))) {
     var
       k = match[1].toLowerCase(),
       v = match[2]
@@ -176,11 +184,10 @@ function parseAttribs (str, pcex) {
       if (k === 'type' && SPEC_TYPES.test(v)) {
         type = v
       } else {
-        if (/\u0001\d/.test(v)) {
+        if (RE_HASEXPR.test(v)) {
 
           if (k === 'value') vexp = 1
-          else if (BOOL_ATTRS.test(k)) k = '__' + k
-          else if (~RIOT_ATTRS.indexOf(k)) k = 'riot-' + k
+          if (~RIOT_ATTRS.indexOf(k)) k = 'riot-' + k
         }
 
         list.push(k + '=' + v)
@@ -213,19 +220,17 @@ function splitHtml (html, opts, pcex) {
     var
       jsfn = opts.expr && (opts.parser || opts.type) ? _compileJS : 0,
       list = brackets.split(html, 0, _bp),
-      expr, israw
+      expr
 
     for (var i = 1; i < list.length; i += 2) {
       expr = list[i]
       if (expr[0] === '^') {
         expr = expr.slice(1)
       } else if (jsfn) {
-        israw = expr[0] === '='
-        expr = jsfn(israw ? expr.slice(1) : expr, opts).trim()
+        expr = jsfn(expr, opts).trim()
         if (expr.slice(-1) === ';') expr = expr.slice(0, -1)
-        if (israw) expr = '=' + expr
       }
-      list[i] = '\u0001' + (pcex.push(expr) - 1) + _bp[1]
+      list[i] = CH_IDEXPR + (pcex.push(expr) - 1) + _bp[1]
     }
     html = list.join('')
   }
@@ -242,20 +247,10 @@ function splitHtml (html, opts, pcex) {
  */
 function restoreExpr (html, pcex) {
   if (pcex.length) {
-    html = html
-      .replace(/\u0001(\d+)/g, function (_, d) {
-        var expr = pcex[d]
-
-        if (expr[0] === '=') {
-          expr = expr.replace(brackets.R_STRINGS, function (qs) {
-            return qs
-              .replace(/</g, '&lt;')
-              .replace(/>/g, '&gt;')
-          })
-        }
+    html = html.replace(RE_REPEXPR, function (_, d) {
 
-        return pcex._bp[0] + expr.trim().replace(/[\r\n]+/g, ' ').replace(/"/g, '\u2057')
-      })
+      return pcex._bp[0] + pcex[d].trim().replace(/[\r\n]+/g, ' ').replace(/"/g, CH_DQCODE)
+    })
   }
   return html
 }
@@ -271,6 +266,7 @@ function restoreExpr (html, pcex) {
  * @see {@link http://www.w3.org/TR/html5/syntax.html}
  */
 function _compileHTML (html, opts, pcex) {
+  if (!/\S/.test(html)) return ''
 
   html = splitHtml(html, opts, pcex)
     .replace(HTML_TAGS, function (_, name, attr, ends) {
@@ -299,7 +295,7 @@ function _compileHTML (html, opts, pcex) {
     if (p.length) html = html.replace(/\u0002/g, function () { return p.shift() })
   }
 
-  if (opts.compact) html = html.replace(/>[ \t]+<([-\w\/])/g, '><$1')
+  if (opts.compact) html = html.replace(HTML_PACK, '><$1')
 
   return restoreExpr(html, pcex).replace(TRIM_TRAIL, '')
 }
@@ -377,7 +373,7 @@ function riotjs (js) {
 
   if (~js.indexOf('/')) js = rmComms(js, JS_COMMS)
 
-  while (match = js.match(JS_ES6SIGN)) {
+  while ((match = js.match(JS_ES6SIGN))) {
 
     parts.push(RE.leftContext)
     js  = RE.rightContext
@@ -396,7 +392,7 @@ function riotjs (js) {
 
   function rmComms (s, r, m) {
     r.lastIndex = 0
-    while (m = r.exec(s)) {
+    while ((m = r.exec(s))) {
       if (m[0][0] === '/' && !m[1] && !m[2]) {
         s = RE.leftContext + ' ' + RE.rightContext
         r.lastIndex = m[3] + 1
@@ -434,11 +430,8 @@ function _compileJS (js, opts, type, parserOpts, url) {
   if (!/\S/.test(js)) return ''
   if (!type) type = opts.type
 
-  var parser = opts.parser || (type ? parsers.js[type] : riotjs)
+  var parser = opts.parser || type && parsers._req('js.' + type, true) || riotjs
 
-  if (!parser) {
-    throw new Error('JS parser not found: "' + type + '"')
-  }
   return parser(js, parserOpts, url).replace(/\r\n?/g, '\n').replace(TRIM_TRAIL, '')
 }
 
@@ -478,7 +471,7 @@ function compileJS (js, opts, type, userOpts) {
   return _compileJS(js, opts || {}, type, userOpts.parserOptions, userOpts.url)
 }
 
-var CSS_SELECTOR = RegExp('([{}]|^)[ ;]*([^@ ;{}][^{}]*)(?={)|' + S_LINESTR, 'g')
+var CSS_SELECTOR = RegExp('([{}]|^)[; ]*((?:[^@ ;{}][^{}]*)?[^@ ;{}:] ?)(?={)|' + S_LINESTR, 'g')
 
 /**
  * Parses styles enclosed in a "scoped" tag (`scoped` was removed from HTML5).
@@ -498,17 +491,21 @@ function scopedCSS (tag, css) {
     p2 = p2.replace(/[^,]+/g, function (sel) {
       var s = sel.trim()
 
+      if (s.indexOf(tag) === 0) {
+        return sel
+      }
+
       if (!s || s === 'from' || s === 'to' || s.slice(-1) === '%') {
         return sel
       }
 
       if (s.indexOf(scope) < 0) {
-        s = tag + ' ' + s + ',[riot-tag="' + tag + '"] ' + s
+        s = tag + ' ' + s + ',[data-is="' + tag + '"] ' + s
       } else {
         s = s.replace(scope, tag) + ',' +
-            s.replace(scope, '[riot-tag="' + tag + '"]')
+            s.replace(scope, '[data-is="' + tag + '"]')
       }
-      return sel.slice(-1) === ' ' ? s + ' ' : s
+      return s
     })
 
     return p1 ? p1 + ' ' + p2 : p2
@@ -530,26 +527,19 @@ function scopedCSS (tag, css) {
  * @see {@link module:compiler.compileCSS|compileCSS}
  */
 function _compileCSS (css, tag, type, opts) {
-  var scoped = (opts || (opts = {})).scoped
+  opts = opts || {}
 
   if (type) {
-    if (type === 'scoped-css') {
-      scoped = true
-    } else if (parsers.css[type]) {
-      css = parsers.css[type](tag, css, opts.parserOpts || {}, opts.url)
-    } else if (type !== 'css') {
-      throw new Error('CSS parser not found: "' + type + '"')
+    if (type !== 'css') {
+
+      var parser = parsers._req('css.' + type, true)
+      css = parser(tag, css, opts.parserOpts || {}, opts.url)
     }
   }
 
   css = css.replace(brackets.R_MLCOMMS, '').replace(/\s+/g, ' ').trim()
+  if (tag) css = scopedCSS(tag, css)
 
-  if (scoped) {
-    if (!tag) {
-      throw new Error('Can not parse scoped CSS without a tagName')
-    }
-    css = scopedCSS(tag, css)
-  }
   return css
 }
 
@@ -624,7 +614,7 @@ var MISC_ATTR = '\\s*=\\s*(' + S_STRINGS + '|{[^}]+}|\\S+)'
  * ```
  * @const {RegExp}
  */
-var END_TAGS = /\/>\n|^<(?:\/?[-\w]+\s*|[-\w]+\s+[-\w:\xA0-\xFF][\S\s]*?)>\n/
+var END_TAGS = /\/>\n|^<(?:\/?-?[A-Za-z][-\w\xA0-\xFF]*\s*|-?[A-Za-z][-\w\xA0-\xFF]*\s+[-\w:\xA0-\xFF][\S\s]*?)>\n/
 
 /**
  * Encloses the given string in single quotes.
@@ -646,25 +636,26 @@ function _q (s, r) {
 /**
  * Generates code to call the `riot.tag2` function with the processed parts.
  *
- * @param   {string} name    - The tag name
- * @param   {string} html    - HTML (can contain embeded eols)
- * @param   {string} css     - Styles
- * @param   {string} attribs - Root attributes
- * @param   {string} js      - JavaScript "constructor"
- * @param   {Array}  pcex    - Expressions
+ * @param   {string} name - The tag name
+ * @param   {string} html - HTML (can contain embeded eols)
+ * @param   {string} css  - Styles
+ * @param   {string} attr - Root attributes
+ * @param   {string} js   - JavaScript "constructor"
+ * @param   {string} imports - Code containing 'import' statements
+ * @param   {object} opts - Compiler options
  * @returns {string} Code to call `riot.tag2`
  */
-function mktag (name, html, css, attribs, js, pcex) {
+function mktag (name, html, css, attr, js, imports, opts) {
   var
-    c = ', ',
-    s = '}' + (pcex.length ? ', ' + _q(pcex._bp[8]) : '') + ');'
+    c = opts.debug ? ',\n  ' : ', ',
+    s = '});'
 
   if (js && js.slice(-1) !== '\n') s = '\n' + s
 
-  return 'riot.tag2(\'' + name + SQ +
+  return imports + 'riot.tag2(\'' + name + SQ +
     c + _q(html, 1) +
     c + _q(css) +
-    c + _q(attribs) + ', function(opts) {\n' + js + s
+    c + _q(attr) + ', function(opts) {\n' + js + s
 }
 
 /**
@@ -686,7 +677,9 @@ function splitBlocks (str) {
       m = str.slice(k, n).match(END_TAGS)
       if (m) {
         k += m.index + m[0].length
-        return [str.slice(0, k), str.slice(k)]
+        m = str.slice(0, k)
+        if (m.slice(-5) === '<-/>\n') m = m.slice(0, -5)
+        return [m, str.slice(k)]
       }
       n = k
       k = str.lastIndexOf('<', k - 1)
@@ -732,6 +725,20 @@ function getAttrib (attribs, name) {
   return ''
 }
 
+/**
+ * Unescape any html string
+ * @param   {string} str escaped html string
+ * @returns {string} unescaped html string
+ */
+function unescapeHTML (str) {
+  return str
+          .replace(/&amp;/g, '&')
+          .replace(/&lt;/g, '<')
+          .replace(/&gt;/g, '>')
+          .replace(/&quot;/g, '"')
+          .replace(/&#039;/g, '\'')
+}
+
 /**
  * Gets the parser options from the "options" attribute.
  *
@@ -739,7 +746,7 @@ function getAttrib (attribs, name) {
  * @returns {object} Parsed options, or null if no options
  */
 function getParserOptions (attribs) {
-  var opts = getAttrib(attribs, 'options')
+  var opts = unescapeHTML(getAttrib(attribs, 'options'))
 
   return opts ? JSON.parse(opts) : null
 }
@@ -756,9 +763,10 @@ function getParserOptions (attribs) {
  * @returns {string} Parsed code
  */
 function getCode (code, opts, attribs, base) {
-  var type = getType(attribs)
-
-  var src = getAttrib(attribs, 'src')
+  var
+    type = getType(attribs),
+    src  = getAttrib(attribs, 'src'),
+    jsParserOptions = extend({}, opts.parserOptions.js)
 
   if (src) {
     if (DEFER_ATTR.test(attribs)) return false
@@ -768,7 +776,14 @@ function getCode (code, opts, attribs, base) {
 
     code = require('fs').readFileSync(file, charset || 'utf8')
   }
-  return _compileJS(code, opts, type, getParserOptions(attribs), base)
+
+  return _compileJS(
+          code,
+          opts,
+          type,
+          extend(jsParserOptions, getParserOptions(attribs)),
+          base
+        )
 }
 
 /**
@@ -782,11 +797,12 @@ function getCode (code, opts, attribs, base) {
  * @returns {string} Parsed styles
  */
 function cssCode (code, opts, attribs, url, tag) {
-  var extraOpts = {
-    parserOpts: getParserOptions(attribs),
-    scoped: attribs && /\sscoped(\s|=|$)/i.test(attribs),
-    url: url
-  }
+  var
+    parserStyleOptions = extend({}, opts.parserOptions.style),
+    extraOpts = {
+      parserOpts: extend(parserStyleOptions, getParserOptions(attribs)),
+      url: url
+    }
 
   return _compileCSS(code, tag, getType(attribs) || opts.style, extraOpts)
 }
@@ -803,11 +819,8 @@ function cssCode (code, opts, attribs, url, tag) {
  * @throws  Will throw "Template parser not found" if the HTML parser cannot be loaded.
  */
 function compileTemplate (html, url, lang, opts) {
-  var parser = parsers.html[lang]
 
-  if (!parser) {
-    throw new Error('Template parser not found: "' + lang + '"')
-  }
+  var parser = parsers._req('html.' + lang, true)
   return parser(html, opts, url)
 }
 
@@ -820,7 +833,7 @@ var
    * unquoted expressions, but disallows the character '>' within unquoted attribute values.
    * @const {RegExp}
    */
-  CUST_TAG = RegExp(/^([ \t]*)<([-\w]+)(?:\s+([^'"\/>]+(?:(?:@|\/[^>])[^'"\/>]*)*)|\s*)?(?:\/>|>[ \t]*\n?([\S\s]*)^\1<\/\2\s*>|>(.*)<\/\2\s*>)/
+  CUST_TAG = RegExp(/^([ \t]*)<(-?[A-Za-z][-\w\xA0-\xFF]*)(?:\s+([^'"\/>]+(?:(?:@|\/[^>])[^'"\/>]*)*)|\s*)?(?:\/>|>[ \t]*\n?([\S\s]*)^\1<\/\2\s*>|>(.*)<\/\2\s*>)/
     .source.replace('@', S_STRINGS), 'gim'),
   /**
    * Matches `script` elements, capturing its attributes in $1 and its content in $2.
@@ -865,10 +878,18 @@ var
 function compile (src, opts, url) {
   var
     parts = [],
-    included
+    included,
+    defaultParserptions = {
+
+      template: {},
+      js: {},
+      style: {}
+    }
 
   if (!opts) opts = {}
 
+  opts.parserOptions = extend(defaultParserptions, opts.parserOptions || {})
+
   included = opts.exclude
     ? function (s) { return opts.exclude.indexOf(s) < 0 } : function () { return 1 }
 
@@ -877,7 +898,7 @@ function compile (src, opts, url) {
   var _bp = brackets.array(opts.brackets)
 
   if (opts.template) {
-    src = compileTemplate(src, url, opts.template, opts.templateOptions)
+    src = compileTemplate(src, url, opts.template, opts.parserOptions.template)
   }
 
   src = cleanSource(src)
@@ -886,6 +907,7 @@ function compile (src, opts, url) {
         jscode = '',
         styles = '',
         html = '',
+        imports = '',
         pcex = []
 
       pcex._bp = _bp
@@ -908,13 +930,6 @@ function compile (src, opts, url) {
 
           body = body.replace(RegExp('^' + indent, 'gm'), '')
 
-          body = body.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 (included('js')) {
               var code = getCode(_script, opts, _attrs, url)
@@ -925,6 +940,13 @@ function compile (src, opts, url) {
             return ''
           })
 
+          body = body.replace(STYLES, function (_m, _attrs, _style) {
+            if (included('css')) {
+              styles += (styles ? ' ' : '') + cssCode(_style, opts, _attrs, url, tagName)
+            }
+            return ''
+          })
+
           var blocks = splitBlocks(body.replace(TRIM_TRAIL, ''))
 
           if (included('html')) {
@@ -934,6 +956,10 @@ function compile (src, opts, url) {
           if (included('js')) {
             body = _compileJS(blocks[1], opts, null, null, url)
             if (body) jscode += (jscode ? '\n' : '') + body
+            jscode = jscode.replace(IMPORT_STATEMENT, function (s) {
+              imports += s.trim() + '\n'
+              return ''
+            })
           }
         }
       }
@@ -946,12 +972,13 @@ function compile (src, opts, url) {
           html: html,
           css: styles,
           attribs: attribs,
-          js: jscode
+          js: jscode,
+          imports: imports
         })
         return ''
       }
 
-      return mktag(tagName, html, styles, attribs, jscode, pcex)
+      return mktag(tagName, html, styles, attribs, jscode, imports, opts)
     })
 
   if (opts.entities) return parts