Change Jade to Pug

Yep Pug is the new Jade and lets use that.

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## 4.0.0-alpha3 - 2016-06-09
 -------------------------
+
 ### Fixed
 * Enable the coach by default.
 * Fixed broken default plugin loading.

lib/plugins/html/renderer.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const jade = require('jade'),
+const pug = require('pug'),
   fs = require('fs'),
   Promise = require('bluebird'),
   path = require('path');
@@ -12,8 +12,8 @@ const basePath = path.resolve(__dirname, 'templates');
 const templateCache = {};
 
 function getTemplate(templateName) {
-  if (!templateName.endsWith('.jade'))
-    templateName = templateName + '.jade';
+  if (!templateName.endsWith('.pug'))
+    templateName = templateName + '.pug';
 
   const template = templateCache[templateName];
 
@@ -24,9 +24,9 @@ function getTemplate(templateName) {
   const filename = path.resolve(basePath, templateName);
   return fs.readFileAsync(filename, 'utf-8')
     .then((source) => {
-      const template = jade.compile(source, {filename});
-      templateCache[templateName] = template;
-      return template;
+      const renderedTemplate = pug.compile(source, {'filename': filename});
+      templateCache[templateName] = renderedTemplate;
+      return renderedTemplate;
     });
 }
 

lib/plugins/html/templates/_tableMixins.pug

@@ -8,13 +8,13 @@ mixin numberCell(title, number)
   td.number(data-title=title)= number
 
 mixin durationCell(title, duration)
-  td.number(data-title=title, data-value='#{duration}')= h.time.duration(duration)
+  td.number(data-title=title, data-value= duration)= h.time.duration(duration)
 
 mixin kbSizeCell(title, size)
-  td.number(data-title=title, data-value='#{size}')= h.size.asKb(size)
+  td.number(data-title=title, data-value= size)= h.size.asKb(size)
 
 mixin sizeCell(title, size)
-  td.number(data-title=title, data-value='#{size}')= h.size.format(size)
+  td.number(data-title=title, data-value= size)= h.size.format(size)
 
 mixin statsCell(stats, name, stat)
   - stat = stat ? stat : 'median'

lib/plugins/html/templates/assets.pug

@@ -1,4 +1,4 @@
-extends ./layout.jade
+extends ./layout.pug
 include _tableMixins
 
 mixin rows(assets)

lib/plugins/html/templates/domains.pug

@@ -1,4 +1,4 @@
-extends ./layout.jade
+extends ./layout.pug
 include _tableMixins
 
 mixin rows(domainStats)

lib/plugins/html/templates/errors.pug

@@ -1,4 +1,4 @@
-extends ./layout.jade
+extends ./layout.pug
 include _tableMixins
 
 mixin row(errors)

lib/plugins/html/templates/header.pug

@@ -2,13 +2,13 @@ mixin headerLink(id, name)
   if (headers[id])
     li
       - active = menu===id ? 'active' : ''
-      a(href='#{rootPath}/#{id}.html', class=active)= name
+      a(href= rootPath + '/' + id + '.html', class=active)= name
 
 .darkblue.nav
   .navgrid
     .logo
         a(href='https://www.sitespeed.io')
-          img.navbar-brand(src='#{rootPath}/img/sitespeed.io-logo.png', width='162', height='50', alt='sitespeed.io logo')
+          img.navbar-brand(src= rootPath + '/img/sitespeed.io-logo.png', width='162', height='50', alt='sitespeed.io logo')
     ul
       +headerLink('index', 'Summary')
       +headerLink('domains', 'Domains')

lib/plugins/html/templates/index.pug

@@ -1,4 +1,4 @@
-extends ./layout.jade
+extends ./layout.pug
 
 mixin box(name, node, func)
   - median= node.median

lib/plugins/html/templates/layout.pug

@@ -4,15 +4,15 @@ html(lang='en')
         meta(charset='utf-8')
         meta(name='viewport', content='width=device-width, initial-scale=1')
         title= pageTitle
-        meta(name='description', content='#{pageDescription}')
-        link(rel='stylesheet', href='#{rootPath}/css/index.min.css')
+        meta(name='description', content=pageDescription)
+        link(rel='stylesheet', href=rootPath + '/css/index.min.css')
         block inlineStyles
 
     body
-      include ./header.jade
+      include ./header.pug
       .container
 
         block content
 
-        include ./footer.jade
-      script(src='#{rootPath}/js/sortable.min.js')
+        include ./footer.pug
+      script(src= rootPath + '/js/sortable.min.js')

lib/plugins/html/templates/pages.pug

@@ -1,4 +1,4 @@
-extends ./layout.jade
+extends ./layout.pug
 include _tableMixins
 
 mixin rows(pages)
@@ -7,7 +7,7 @@ mixin rows(pages)
     - t = p.contentTypes || {javascript: {transferSize: ''}, css: {transferSize: ''}, image: {transferSize: ''}}
     tr
       td.url.pagesurl(data-title='URL')
-        a(href='#{pageInfo.path}/index.html')= url
+        a(href= pageInfo.path + '/index.html')= url
       +kbSizeCell('Javascript size', h.get(t.javascript, 'transferSize'))
       +kbSizeCell('CSS size', h.get(t.css, 'transferSize'))
       +kbSizeCell('Image size', h.get(t.image, 'transferSize'))
@@ -15,7 +15,7 @@ mixin rows(pages)
       +numberCell('Requests', p.requests)
       if pageInfo.data.coach
         - score = pageInfo.data.coach.pageSummary.advice.performance.score
-        td.number(data-title='Performance score', data-value='#{score}')
+        td.number(data-title='Performance score', data-value= score)
           - label = 'label ' +  h.scoreLabel(score)
           span(class=label) #{score}
       else

lib/plugins/html/templates/url/browsertime/index.pug

@@ -1,9 +1,9 @@
 a#timings
 h3 Timings
 
-- const browsertime = pageInfo.data.browsertime.run || pageInfo.data.browsertime.pageSummary.browserScripts[run]
-- const timings = browsertime.timings;
-- const visualMetrics = browsertime.visualMetrics;
+- var browsertime = pageInfo.data.browsertime.run || pageInfo.data.browsertime.pageSummary.browserScripts[run]
+- var timings = browsertime.timings;
+- var visualMetrics = browsertime.visualMetrics;
 
 table
   tr

lib/plugins/html/templates/url/coach/index.pug

@@ -27,7 +27,7 @@ mixin adviceInfo(name, perfectScore, node)
   else
     p #{perfectScore}
 
-- const advice = pageInfo.data.coach.run ? pageInfo.data.coach.run.advice : pageInfo.data.coach.pageSummary.advice;
+- var advice = pageInfo.data.coach.run ? pageInfo.data.coach.run.advice : pageInfo.data.coach.pageSummary.advice;
 
 a#coach
 h2 Coach
@@ -46,7 +46,7 @@ script(type='text/javascript').
   .column
     .row
       .four.columns
-        img.u-max-full-width(src='#{rootPath}/img/coach.png', alt='I am the coach')
+        img.u-max-full-width(src= rootPath + '/img/coach.png', alt='I am the coach')
       .eight.columns
         h3 Coach score
         ul

lib/plugins/html/templates/url/index.pug

@@ -1,16 +1,16 @@
-extends ./layout.jade
+extends ./layout.pug
 
 block content
   h1 Page summary
   h5 #{url}
   p Tested using #{h.cap(options.browsertime.browser)} #{h.plural(options.browsertime.iterations, 'time')}.
 
-  include ./summaryBox.jade
+  include ./summaryBox.pug
 
   .large All runs: 
     each val, index in runPages
       - value = Number(index) + 1
-      a(href='./#{index}.html') #{value}
+      a(href='./' + index + '.html') #{value}
       if (value !== Object.keys(runPages).length)
         |  - 
 
@@ -21,7 +21,7 @@ block content
   - run = 0
   h3 Statistics from run #{run + 1}
 
-  - const d = pageInfo.data
+  - var d = pageInfo.data
   ul
     if d.coach && d.coach.pageSummary
       li: a(href='#coach') Coach
@@ -33,13 +33,13 @@ block content
       li: a(href='#webpagetest') WebPageTest
 
   if d.coach && d.coach.pageSummary
-    include ./coach/index.jade
+    include ./coach/index.pug
 
   if d.browsertime && d.browsertime.pageSummary
-    include ./browsertime/index.jade
+    include ./browsertime/index.pug
 
   if d.pagexray && d.pagexray.pageSummary
-    include ./pagexray/index.jade
+    include ./pagexray/index.pug
 
   if d.webpagetest
-    include ./webpagetest/index.jade
+    include ./webpagetest/index.pug

lib/plugins/html/templates/url/layout.jade

@@ -1 +0,0 @@
-extends ../layout.jade

lib/plugins/html/templates/url/layout.pug

@@ -0,0 +1 @@
+extends ../layout.pug

lib/plugins/html/templates/url/pagexray/index.pug

@@ -3,7 +3,7 @@ include ../../_tableMixins
 a#pagexray
 h2 Page summary
 
-- const pagexray = pageInfo.data.pagexray.run || pageInfo.data.pagexray.pageSummary;
+- var pagexray = pageInfo.data.pagexray.run || pageInfo.data.pagexray.pageSummary;
 
 p The page uses #{pagexray.httpVersion}
 

lib/plugins/html/templates/url/run.pug

@@ -1,4 +1,4 @@
-extends ./layout.jade
+extends ./layout.pug
 
 block content
   - runNumber = Number(runIndex)+1
@@ -23,16 +23,16 @@ block content
       li: a(href='#webpagetest') WebPageTest
 
     if d.pagexray && d.pagexray.run
-      include ./pagexray/index.jade
+      include ./pagexray/index.pug
 
     if d.coach && d.coach.run
-      include ./coach/index.jade
+      include ./coach/index.pug
 
     if d.browsertime && d.browsertime.run
-      include ./browsertime/index.jade
+      include ./browsertime/index.pug
 
     if d.webpagetest && d.webpagetest.run
-      include ./webpagetest/run.jade
+      include ./webpagetest/run.pug
 
     .index-link
       a.button.button--primary(href=urlLink) Back to summary

lib/plugins/html/templates/url/summaryBox.pug

@@ -1,5 +1,5 @@
 if pageInfo.data.browsertime
-  - const btStatistics = pageInfo.data.browsertime.pageSummary.statistics
+  - var btStatistics = pageInfo.data.browsertime.pageSummary.statistics
   h2 Summary
   - timingMetrics = ['firstPaint', 'fullyLoaded', 'rumSpeedIndex']
   .responsive
@@ -23,7 +23,7 @@ if pageInfo.data.browsertime
         if btStatistics.timings.userTimings.marks
           each userTimings, name in btStatistics.timings.userTimings.marks
             tr
-              td(data-title='#{name}') #{name}
+              td(data-title= name) #{name}
               td.number(data-title='min') #{userTimings.min}
               td.number(data-title='median') #{userTimings.median}
               td.number(data-title='mean') #{userTimings.mean}
@@ -31,7 +31,7 @@ if pageInfo.data.browsertime
       if btStatistics.visualMetrics
         each visualMetric, name in btStatistics.visualMetrics
           tr
-            td(data-title='#{name}') #{name} (visual metric)
+            td(data-title= name) #{name} (visual metric)
             td.number(data-title='min') #{visualMetric.min}
             td.number(data-title='median') #{visualMetric.median} 
             td.number(data-title='mean') #{visualMetric.mean}

lib/plugins/html/templates/url/webpagetest/index.pug

@@ -1,11 +1,11 @@
 a#webpagetest
 h2 WebPageTest
 
-- const data = pageInfo.data.webpagetest.pageSummary.data
-- const medianRun = data.median
+- var data = pageInfo.data.webpagetest.pageSummary.data
+- var medianRun = data.median
 
 p Test run from !{data.from} using #{medianRun.firstView.browser_name} - #{medianRun.firstView.browser_version}. Check the
-  a(href='#{data.summary}') result page on WebPageTest
+  a(href= data.summary) result page on WebPageTest
   | .
 each view in ['firstView', 'repeatView']
   - var median = medianRun[view];
@@ -33,6 +33,6 @@ each view in ['firstView', 'repeatView']
           each value, key in median.userTimes
             +numberCell(key, value)
     h5 Waterfall
-    img.u-max-full-width(src='#{median.images.waterfall}', alt='Waterfall view')
+    img.u-max-full-width(src= median.images.waterfall, alt='Waterfall view')
     h5 Connection view
-    img.u-max-full-width(src='#{median.images.connectionView}', alt='Connnection view')
+    img.u-max-full-width(src= median.images.connectionView, alt='Connnection view')

lib/plugins/html/templates/url/webpagetest/run.pug

@@ -1,7 +1,7 @@
 a#webpagetest
 h2 WebPageTest
 
-- const wpt = pageInfo.data.webpagetest.run;
+- var wpt = pageInfo.data.webpagetest.run;
 
 each view in ['firstView', 'repeatView']
   - var data = wpt[view];
@@ -34,8 +34,8 @@ each view in ['firstView', 'repeatView']
             th #{key}
           tr
           each value, key in data.userTimes
-            td.number(data-title='#{key}') #{value}
+            td.number(data-title= key) #{value}
     h5 Waterfall
-    img.u-max-full-width(src='#{data.images.waterfall}', alt='Waterfall view')
+    img.u-max-full-width(src= data.images.waterfall, alt='Waterfall view')
     h5 Connection view
-    img.u-max-full-width(src='#{data.images.connectionView}', alt='Connnection view')
+    img.u-max-full-width(src= data.images.connectionView, alt='Connnection view')

package.json

@@ -61,8 +61,8 @@
     "license-checker": "^5.1.2",
     "mocha": "^2.4.4",
     "node-sass": "^3.7.0",
-    "pug-lint": "^2.2.0",
-    "pug-lint-config-clock": "^1.1.1"
+    "pug-lint": "^2.2.2",
+    "pug-lint-config-clock": "^2.0.0"
   },
   "main": "./lib/sitespeed.js",
   "dependencies": {
@@ -74,7 +74,6 @@
     "gpagespeed": "3.0.0",
     "influx": "4.2.0",
     "intel": "1.1.0",
-    "jade": "1.11.0",
     "line-reader": "0.4.0",
     "lodash.clonedeep": "4.3.2",
     "lodash.difference": "4.3.0",
@@ -89,6 +88,7 @@
     "node-slack": "0.0.7",
     "node-uuid": "1.4.7",
     "pagexray": "0.9.0",
+    "pug": "^2.0.0-beta2",
     "simplecrawler": "0.7.0",
     "webcoach": "0.23.0",
     "webpagetest": "0.3.4",

tools/loc.sh

@@ -9,7 +9,7 @@ echo 'Total LOC js'
 find lib -name "*.js" -not -name yslow-3.1.8-sitespeed.js | xargs wc -l | sort -r
 
 echo 'Unique LOC jade'
-find lib -name "*.jade" | xargs cat | sort | uniq | wc -l
+find lib -name "*.pug" | xargs cat | sort | uniq | wc -l
 
 echo 'Total LOC jade'
-find lib -name "*.jade" | xargs wc -l | sort -r
+find lib -name "*.pug" | xargs wc -l | sort -r