Skip to content
Permalink
Browse files

feat(2 new build options): compile.htmlScripts.client.enable and extr…

…a.compile.client.htmlScripts

These new build options will compile inline html scripts that have es6 code to es5.
Useful for creating web components (think Polymer 2) that work with unsupported browsers like IE 11.
  • Loading branch information
jyounce committed Jul 25, 2017
1 parent ee65138 commit f12310fd075c770a526cffe68f549366e8d3eb47

Large diffs are not rendered by default.

@@ -47,6 +47,7 @@
},
"dependencies": {
"asyncawait": "1.0.6",
"babel-core": "6.25.0",
"babel-preset-es2015": "6.24.1",
"bluebird": "3.4.7",
"bower": "1.8.0",
@@ -6,6 +6,10 @@ module.exports = (config, options) ->
# init compile
# ============
compile =
htmlScripts:
client:
enable: options.compile.htmlScripts.client.enable

typescript:
client:
enable: options.compile.typescript.client.enable
@@ -4,34 +4,36 @@ module.exports = (config, options) ->
test = require("#{config.req.helpers}/test")()

# init extra.compile
# compile additional files [coffee|es6|less|sass]
# compile additional files [coffee|es6|htmlScripts|less|sass]
# to dist that the build didn't compile
# ===============================================
# ===========================================================
compile =
rb:
client:
coffee: []
es6: []
less: []
sass: []
coffee: []
es6: []
htmlScripts: []
less: []
sass: []
server:
less: []
sass: []
less: []
sass: []
app:
client:
coffee: options.extra.compile.client.coffee or []
es6: options.extra.compile.client.es6 or []
less: options.extra.compile.client.less or []
sass: options.extra.compile.client.sass or []
coffee: options.extra.compile.client.coffee or []
es6: options.extra.compile.client.es6 or []
htmlScripts: options.extra.compile.client.htmlScripts or []
less: options.extra.compile.client.less or []
sass: options.extra.compile.client.sass or []
server:
less: options.extra.compile.server.less or []
sass: options.extra.compile.server.sass or []
less: options.extra.compile.server.less or []
sass: options.extra.compile.server.sass or []

# format compile paths
# ====================
formatCompilePaths = (appOrRb) ->
for loc in ['client','server']
for lang in ['coffee','es6','less','sass']
for lang in ['coffee','es6','htmlScripts','less','sass']
files = compile[appOrRb][loc][lang]
continue unless files
continue unless files.length
@@ -47,7 +49,7 @@ module.exports = (config, options) ->

# logs
# ====
# log.json extra.compile, 'extra.compile ='
# log.json compile, 'extra.compile ='

# tests
# =====
@@ -33,7 +33,7 @@ module.exports = (config, options) ->

# logs
# ====
# log.json extra.copy, 'extra.copy ='
# log.json copy, 'extra.copy ='

# tests
# =====
@@ -37,7 +37,7 @@ module.exports = (config, options) ->

# logs
# ====
# log.json extra.minify, 'extra.minify ='
# log.json minify, 'extra.minify ='

# tests
# =====
@@ -5,6 +5,11 @@ module.exports = (config, options) ->
# ====================
compile = options.compile
compile = {} unless isType.object compile

compile.htmlScripts = {} unless isType.object compile.htmlScripts
compile.htmlScripts.client = {} unless isType.object compile.htmlScripts.client
compile.htmlScripts.client.enable = false unless isType.boolean compile.htmlScripts.client.enable

compile.typescript = {} unless isType.object compile.typescript
compile.typescript.client = {} unless isType.object compile.typescript.client
compile.typescript.server = {} unless isType.object compile.typescript.server
@@ -19,12 +19,13 @@ module.exports = (config, options) ->

# extra compile options
# =====================
extra.compile.client.coffee = null unless isType.array extra.compile.client.coffee
extra.compile.client.es6 = null unless isType.array extra.compile.client.es6
extra.compile.client.less = null unless isType.array extra.compile.client.less
extra.compile.client.sass = null unless isType.array extra.compile.client.sass
extra.compile.server.less = null unless isType.array extra.compile.server.less
extra.compile.server.sass = null unless isType.array extra.compile.server.sass
extra.compile.client.coffee = null unless isType.array extra.compile.client.coffee
extra.compile.client.es6 = null unless isType.array extra.compile.client.es6
extra.compile.client.htmlScripts = null unless isType.array extra.compile.client.htmlScripts
extra.compile.client.less = null unless isType.array extra.compile.client.less
extra.compile.client.sass = null unless isType.array extra.compile.client.sass
extra.compile.server.less = null unless isType.array extra.compile.server.less
extra.compile.server.sass = null unless isType.array extra.compile.server.sass

# extra minify options
# ====================
@@ -74,14 +74,15 @@ module.exports = (gulp, config) ->

# extra
# =====
taskHelp.addTask 'compile-extra-coffee:client', '/extra/compile-extra-coffee', loc: 'client'
taskHelp.addTask 'compile-extra-es6:client', '/extra/compile-extra-es6', loc: 'client'
taskHelp.addTask 'compile-extra-less:client', '/extra/compile-extra-less', loc: 'client'
taskHelp.addTask 'compile-extra-less:server', '/extra/compile-extra-less', loc: 'server'
taskHelp.addTask 'compile-extra-sass:client', '/extra/compile-extra-sass', loc: 'client'
taskHelp.addTask 'compile-extra-sass:server', '/extra/compile-extra-sass', loc: 'server'
taskHelp.addTask 'copy-extra-files:client', '/extra/copy-extra-files', loc: 'client'
taskHelp.addTask 'copy-extra-files:server', '/extra/copy-extra-files', loc: 'server'
taskHelp.addTask 'compile-extra-coffee:client', '/extra/compile-extra-coffee', loc: 'client'
taskHelp.addTask 'compile-extra-es6:client', '/extra/compile-extra-es6', loc: 'client'
taskHelp.addTask 'compile-extra-html-scripts:client', '/extra/compile-extra-html-scripts', loc: 'client'
taskHelp.addTask 'compile-extra-less:client', '/extra/compile-extra-less', loc: 'client'
taskHelp.addTask 'compile-extra-less:server', '/extra/compile-extra-less', loc: 'server'
taskHelp.addTask 'compile-extra-sass:client', '/extra/compile-extra-sass', loc: 'client'
taskHelp.addTask 'compile-extra-sass:server', '/extra/compile-extra-sass', loc: 'server'
taskHelp.addTask 'copy-extra-files:client', '/extra/copy-extra-files', loc: 'client'
taskHelp.addTask 'copy-extra-files:server', '/extra/copy-extra-files', loc: 'server'

# format
# ======
@@ -2,7 +2,7 @@ PLUGIN_NAME = 'gulp-absolute-css-urls'
through = require 'through2'
gutil = require 'gulp-util'
path = require 'path'
PluginError = gutil.PluginErrors
PluginError = gutil.PluginError
# for find and replace - added negative lookahead to not match comments
urlRegX = /url\s*\(\s*['"]?(.*?)['"]?\s*\)(?![^\*]*?\*\/)/g
importNoUrlRegX = /@import\s*?['"]+?(.*?)['"]+?(?![^\*]*?\*\/)/g
@@ -0,0 +1,104 @@
# GULP PLUGIN: gulp-compile-html-scripts
# Plugin level: function(dealing with files)
# Compiles es6 inside html script tags.
# Currently no opts available.
# ==========================================
through = require 'through2'
gutil = require 'gulp-util'
babel = require 'babel-core'
es2015 = require 'babel-preset-es2015'
PLUGIN_NAME = 'gulp-compile-html-scripts'
PluginError = gutil.PluginError

# Regular Expressions
# ===================
regx = {}

regx.str =
all:
# [\s\S]*?
'[\\s\\S]*?'

htmlCmts:
# <!--[\s\S]*?-->
'<!--[\\s\\S]*?-->'

scriptEnd:
# <\s*?\/\s*?script\s*?>
'<\\s*?\\/\\s*?script\\s*?>'

scriptEndTemp:
'</TEMP_SCRIPT_END>'

regx.obj =
jsCmts:
# \/\/.*<\s*?\/\s*?script\s*?>|\/\*[\s\S]*?\*\/
new RegExp "\\/\\/.*#{regx.str.scriptEnd}|\\/\\*#{regx.str.all}\\*\\/", 'gi'

jsCmtsScriptEndTemp:
new RegExp regx.str.scriptEndTemp, 'g'

scripts:
# <!--[\s\S]*?-->|<\s*?script(?:[\s\S](?!src\s*?=\s*\"))*?>([\s\S]*?)<\s*?\/\s*?script\s*?>
new RegExp "#{regx.str.htmlCmts}|<\\s*?script(?:[\\s\\S](?!src\\s*?=\\s*\"))*?>(#{regx.str.all})#{regx.str.scriptEnd}", 'gi'

scriptEnd:
new RegExp regx.str.scriptEnd, 'gi'

# Compiler
# ========
compileScripts =
opts:
babel:
presets: [es2015]

get: (file, opts) -> # :string
@_setOpts file, opts
html = file.contents.toString()
html = html.replace regx.obj.jsCmts, @_jsCmtsScriptEndReplace
html = html.replace regx.obj.scripts, @_scriptReplace
html = html.replace regx.obj.jsCmtsScriptEndTemp, '< /script>' # add space to maintain syntax highlighting in editors
html

_setOpts: (file, opts={}) -> # :void
@opts.babel.filename = file.path
@opts.babel.filenameRelative = file.relative
Object.assign @opts, opts

_compile: (script) -> # :{}
result = babel.transform script, @opts.babel
result.code

# skip if inside html comment, external script or empty script tag
_scriptReplace: (match, codeMatch, offset, html) -> # :string
return match unless typeof codeMatch is 'string'
return match unless codeMatch.trim().length
compiledScript = compileScripts._compile codeMatch
match = match.replace codeMatch, -> compiledScript # callback to disable special replacement patterns, ex: $'
# console.log 'MATCH:', match
match

_jsCmtsScriptEndReplace: (match, offset, html) -> # :string
match = match.replace regx.obj.scriptEnd, regx.str.scriptEndTemp
match

# Gulp Plugin
# ===========
compileHtmlScripts = (opts={}) ->
through.obj (file, enc, cb) ->
return cb null, file unless file
return cb null, file if file.isNull()
return cb new PluginError PLUGIN_NAME, 'streaming not supported' if file.isStream()
return cb null, file unless file.isBuffer()
# console.log file.path
try
compiledHtml = compileScripts.get file, opts
file.contents = new Buffer compiledHtml
catch e
return cb new PluginError PLUGIN_NAME, e

cb null, file

# Export It!
# ==========
module.exports = compileHtmlScripts
@@ -1,7 +1,7 @@
PLUGIN_NAME = 'gulp-ng-formify'
through = require 'through2'
gutil = require 'gulp-util'
PluginError = gutil.PluginErrors
PluginError = gutil.PluginError

# For find and replace
# ====================
@@ -1,7 +1,7 @@
PLUGIN_NAME = 'gulp-update-file-base'
through = require 'through2'
gutil = require 'gulp-util'
PluginError = gutil.PluginErrors
PluginError = gutil.PluginError

# Plugin level function(dealing with files)
# Effects gulp.dest(dest).

0 comments on commit f12310f

Please sign in to comment.
You can’t perform that action at this time.