npm - jalla - Versions diffs - 1.0.0-4 → 1.0.0-40 - Mend

jalla 1.0.0-4 → 1.0.0-40

Files changed (15) hide show

package/lib/document.js CHANGED Viewed

@@ -3,15 +3,16 @@ var posthtmlify = require('posthtmlify')
 var documentify = require('documentify')
 var { Readable } = require('stream')
 var hyperstream = require('hstream')
+var caniuse = require('caniuse-api')
+var purgecss = require('purgecss')
 var through = require('through2')
 var resolve = require('resolve')
-var dropcss = require('dropcss')
-var dedent = require('dedent')
+var jsesc = require('jsesc')
 var path = require('path')
 module.exports = document
-var TEMPLATE = dedent`
+var TEMPLATE = `
   <!doctype html>
   <html>
   <head></head>
@@ -20,65 +21,80 @@ var TEMPLATE = dedent`
 `
 function document (body, state, app, cb) {
-  var dir = path.join(path.dirname(app.entry), 'index')
-  resolve('.', { basedir: dir, extensions: ['.html'] }, function (err, file) {
-    if (err) cb(null, render(null, TEMPLATE))
-    else cb(null, render(file, null))
+  resolve('./index', {
+    basedir: path.dirname(app.entry),
+    extensions: ['.html']
+  }, function (err, file) {
+    try {
+      if (err) cb(null, render(null, TEMPLATE))
+      else cb(null, render(file, null))
+    } catch (err) {
+      cb(err)
+    }
   })
   function render (template, html) {
-    var selector = require(app.entry).selector || 'body'
+    var selector = require(app.entry).selector
     var d = documentify(template, html)
     d.transform(function () {
-      return hyperstream({
-        html: { lang: state.language || 'en' },
-        [selector]: { _replaceHtml: body }
-      })
+      var opts = { html: { lang: state.language || 'en' } }
+      if (selector && body) opts[selector] = { _replaceHtml: body }
+      return hyperstream(opts)
     })
     d.transform((str) => hyperstream({ body: { _appendHtml: str } }), `
-      <script>window.initialState = ${stringify(state)}</script>
+      <script>window.initialState = JSON.parse(${stringify(state)})</script>
     `)
+    /**
+     * The following transforms are prepended in reverse order to ensure that
+     * they come _before_ possible custom html head elements
+     */
     if (app.env === 'development') {
       d.transform(prependToHead, `
-      <script src="${app.context.assets.get('bundle.js').url}" defer></script>
-      <link rel="stylesheet" href="${app.context.assets.get('bundle.css').url}">
+        <script src="${app.context.assets.get('bundle.js').url}" defer></script>
+        <link rel="stylesheet" href="${app.context.assets.get('bundle.css').url}">
       `)
     } else {
-      let script = app.context.assets.get('bundle.js')
-      let styles = app.context.assets.get('bundle.css')
-      d.transform(inlineCriticalCSS(styles.read.bind(styles)))
+      const script = app.context.assets.get('bundle.js')
+      const styles = app.context.assets.get('bundle.css')
+      const features = process.env.POLYFILL_FEATURES
+      if (!caniuse.isSupported('link-rel-preload', app.browsers.join(','))) {
+        d.transform(prependToHead, `
+          <script>
+            (function (tokens) {
+              try {
+                var supports = tokens.supports('preload');
+              } catch (e) {}
+              if (supports) return;
+              var links = document.querySelectorAll('link[rel=preload][as=style]');
+              for (var i = 0, len = links.length; i < len; i++) {
+                var link = document.createElement('link');
+                link.rel = 'stylesheet';
+                link.href = links[i].href;
+                document.head.append(link);
+              }
+            }(document.createElement('link').relList))
+          </script>
+        `)
+      }
-      let features = process.env.POLYFILL_FEATURES
       d.transform(prependToHead, `
         <link rel="preload" as="style" href="${styles.url}" onload="this.rel='stylesheet'">
         <script src="https://polyfill.io/v3/polyfill.min.js${features ? `?features=${features}` : ''}"></script>
         <script src="${script.url}" defer></script>
-        <script>
-          (function (tokens) {
-            try {
-              var supports = tokens.supports('preload');
-            } catch (e) {}
-            if (supports) return;
-            var links = document.querySelectorAll('link[rel=preload][as=style]');
-            for (var i = 0, len = links.length; i < len; i++) {
-              var link = document.createElement('link');
-              link.rel = 'stylesheet';
-              link.href = links[i].href;
-              document.head.append(link);
-            }
-          }(document.createElement('link').relList))
-        </script>
       `)
+      d.transform(prependCriticalCSS(styles.read.bind(styles)))
     }
     if (state.meta) {
-      let keys = Object.keys(state.meta)
+      const keys = Object.keys(state.meta)
       if (keys.length) {
-        let tags = keys.map(function (key) {
+        const tags = keys.map(function (key) {
           if (key === 'title') return
           var type = key.indexOf('og:') !== -1 ? 'property' : 'name'
           var value = state.meta[key]
@@ -98,7 +114,7 @@ function document (body, state, app, cb) {
     `)
     if (state.title) {
-      let title = state.title.trim().replace(/\n/g, '')
+      const title = state.title.trim().replace(/\n/g, '')
       d.transform(prependToHead, `<title>${title}</title>`)
     }
@@ -122,13 +138,13 @@ function document (body, state, app, cb) {
   }
 }
-// stringify with JSON encoded with JavaScript safe unicode characters
-// see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#Issue_with_plain_JSON.stringify_for_use_as_JavaScript
+// stringify data as safely escaped JSON
 // obj -> str
-function stringify (obj) {
-  return JSON.stringify(obj)
-    .replace(/\u2028/g, '\\u2028')
-    .replace(/\u2029/g, '\\u2029')
+function stringify (data) {
+  return jsesc(JSON.stringify(data), {
+    json: true,
+    isScriptContext: true
+  })
 }
 // create documentify transform adding content to `head`
@@ -139,7 +155,7 @@ function prependToHead (str) {
 // create documentify transform inlining critical CSS
 // str -> Stream
-function inlineCriticalCSS (getStyles) {
+function prependCriticalCSS (getStyles) {
   var html = ''
   return function () {
@@ -160,20 +176,31 @@ function inlineCriticalCSS (getStyles) {
     var self = this
     getStyles().then(function (css) {
-      var critical = dropcss({ html: html, css: css.toString() })
-      var append = hyperstream({
+      css = css.toString().replace(/\/\*#\s*sourceMappingURL=.+?\s*\*\//g, '')
+      return new purgecss.PurgeCSS().purge({
+        content: [{ raw: html, extension: 'html' }],
+        css: [{ raw: css }]
+      }).then(function (result) {
+        return result.reduce((acc, { css }) => acc + css, '')
+      })
+    }).then(function (css) {
+      var prepend = hyperstream({
         head: {
-          _appendHtml: `<style>${critical.css}</style>`
+          _prependHtml: `<style>${css}</style>`
         }
       })
       var stream = new Readable()
       stream._read = Function.prototype
       // pipe the collected html through hyperstream forwarding to self
-      stream.pipe(append).pipe(through(write, end))
+      stream.pipe(prepend).pipe(through(write, end))
       stream.push(html)
       stream.push(null)
-    }, cb)
+    }).catch(function () {
+      // fail silently and skip inline styles
+      self.push(html)
+      return cb()
+    })
     // collect the resulting html with inlined CSS
     // (str, str, fn) -> void

package/lib/manifest.js CHANGED Viewed

@@ -10,14 +10,12 @@ function manifest (state, emit) {
     try {
       emit('progress', 'manifest.json', 0)
-      var { pkg } = await readPkgUp(path.dirname(state.entry))
-      var name = pkg.name.split('-').map(function (str) {
-        return str[0].toUpperCase() + str.substr(1)
-      }).join(' ')
+      var res = await readPkgUp({ cwd: path.dirname(state.entry) })
+      var { name } = res.packageJson
       var buff = Buffer.from(JSON.stringify({
         name: name,
-        short_name: name.length > 12 ? name.replace(/[^A-Z]+/g, '') : name,
+        short_name: name.length > 12 ? name.substr(0, 12) + '…' : name,
         start_url: '/',
         display: 'minimal-ui',
         background_color: '#fff',

package/lib/pipeline.js CHANGED Viewed

@@ -43,7 +43,7 @@ module.exports = class Pipeline extends Nanobus {
           state.deps.add(dep)
         })
         emitter.on('reset', function () {
-          for (let dep of deps) state.deps.delete(dep)
+          for (const dep of deps) state.deps.delete(dep)
         })
         emitter.on('remove', function (id) {
           self.assets.delete(id)
@@ -57,15 +57,15 @@ module.exports = class Pipeline extends Nanobus {
           if (meta.map) {
             // create an asset for the source map
-            let mapAsset = add(id + '.map', meta.map, {
+            const mapAsset = add(id + '.map', meta.map, {
               mime: 'application/json'
             })
             // add map comment to buffer
-            let map = sourcemap.generateMapFileComment(mapAsset.url, {
+            const map = sourcemap.generateMapFileComment(mapAsset.url, {
               multiline: /\.css$/.test(id)
             })
-            let src = buff.toString()
+            const src = buff.toString()
             buff = Buffer.from(src.replace(/\n?$/, '\n' + map))
           }
@@ -80,7 +80,7 @@ module.exports = class Pipeline extends Nanobus {
           }
           if (!meta.static && state.env !== 'development') {
-            let hex = hash.toString('hex')
+            const hex = hash.toString('hex')
             asset.url = base + hex.slice(0, 16) + '.' + path.basename(id)
           } else {
             asset.url = base + id
@@ -129,8 +129,7 @@ module.exports = class Pipeline extends Nanobus {
     async function read () {
       if (busy.has(this.id)) {
         // wait for bundling to finish
-        let defer = util.promisify(self.once.bind(self))
-        await defer(`${this.label}:end`)
+        await new Promise((resolve) => self.once(`${this.label}:end`, resolve))
       }
       if (this.buffer) return this.buffer
@@ -144,16 +143,20 @@ module.exports = class Pipeline extends Nanobus {
     if (step) return step.hooks
   }
-  middleware () {
+  middleware (state) {
     var self = this
     return async function (ctx, next) {
       if (ctx.body) return next()
-      for (let asset of self.assets.values()) {
+      for (const asset of self.assets.values()) {
         if (asset.url === ctx.path) {
           ctx.body = await asset.read()
           ctx.type = asset.mime || mime.getType(asset.url)
+          const cache = state.env !== 'development' && !state.watch
+          const maxAge = cache ? 60 * 60 * 24 * 365 : 0
+          const value = `${cache ? 'public, ' : ''}max-age=${maxAge}`
+          ctx.set('Cache-Control', value)
           return
         }
       }
@@ -181,7 +184,7 @@ module.exports = class Pipeline extends Nanobus {
   }
   * [Symbol.iterator] () {
-    for (let asset of this.assets.values()) {
+    for (const asset of this.assets.values()) {
       yield asset
     }
   }

package/lib/render.js CHANGED Viewed

@@ -1,50 +1,70 @@
 var path = require('path')
+var concat = require('concat-stream')
 var document = require('./document')
+var FONT = /\.(woff2?|eot|ttf)$/
 module.exports = render
 function render (app) {
   return async function render (ctx, next) {
     try {
       await next()
-      if (!ctx.body && ctx.accepts('html') && !ctx.response.get('Location')) {
-        let href = path.join(app.base, ctx.url).replace(/\/$/, '') || '/'
-        let client = require(app.entry)
-        let state = Object.assign({
-          prefetch: [],
-          req: ctx.req,
-          res: ctx.res
-        }, ctx.state)
-        // first render pass, collect prefetch operations
-        client.toString(href, state)
-        await Promise.all(state.prefetch)
-        delete state.prefetch
-        delete state.req
-        delete state.res
-        // second render pass
-        let html = client.toString(href, state)
-        ctx.type = 'text/html'
-        ctx.status = isNaN(+state.status) ? 200 : state.status
-        ctx.body = await new Promise(function (resolve, reject) {
-          document(html, state, app, function (err, stream) {
-            if (err) return reject(err)
-            resolve(stream)
-          })
+      if (ctx.body || !ctx.accepts('html') || ctx.response.get('Location')) {
+        return
+      }
+      const href = path.join(app.base, ctx.url).replace(/\/$/, '') || '/'
+      const client = require(app.entry)
+      const state = Object.assign({
+        prefetch: [],
+        req: ctx.req,
+        res: ctx.res
+      }, ctx.state)
+      // first render pass, collect prefetch operations
+      client.toString(href, state)
+      await Promise.all(state.prefetch.map(function (p) {
+        return p.catch(function (err) {
+          if (err.status) state.status = err.status
         })
+      }))
+      delete state.prefetch
+      delete state.req
+      delete state.res
+      // second render pass
+      const html = client.toString(href, state)
-        if (app.env !== 'development') {
-          ctx.append('Link', [
-            `<${ctx.assets.get('bundle.js').url}>; rel=preload; as=script`,
-            `<${ctx.assets.get('bundle.css').url}>; rel=preload; as=style`
-          ])
+      if (app.env !== 'development') {
+        const fonts = []
+        for (const [id, asset] of ctx.assets) {
+          if (FONT.test(id)) {
+            fonts.push(`<${asset.url}>; rel=preload; crossorigin=anonymous; as=font`)
+          }
         }
+        // push primary bundles and font files
+        ctx.append('Link', [
+          `<${ctx.assets.get('bundle.js').url}>; rel=preload; as=script`,
+          `<${ctx.assets.get('bundle.css').url}>; rel=preload; as=style`
+        ].concat(fonts))
       }
+      ctx.type = 'text/html'
+      ctx.status = isNaN(+state.status) ? 200 : state.status
+      ctx.body = await new Promise(function (resolve, reject) {
+        document(html, state, app, function (err, stream) {
+          if (err) return reject(err)
+          stream.pipe(concat({ encoding: 'buffer' }, function (buff) {
+            resolve(buff)
+          }))
+        })
+      })
     } catch (err) {
-      ctx.throw(err.status || 404, err)
+      ctx.throw(err.status || 500, err)
     }
   }
 }

package/lib/script.js CHANGED Viewed

@@ -1,28 +1,20 @@
 var path = require('path')
 var brfs = require('brfs')
 var tinyify = require('tinyify')
+var tfilter = require('tfilter')
 var through = require('through2')
 var nanohtml = require('nanohtml')
 var babelify = require('babelify')
 var watchify = require('watchify')
 var caniuse = require('caniuse-api')
-var envify = require('envify/custom')
 var concat = require('concat-stream')
 var browserify = require('browserify')
-var browserslist = require('browserslist')
 var splitRequire = require('split-require')
 var sourcemap = require('convert-source-map')
+var envify = require('@goto-bus-stop/envify')
 var babelPresetEnv = require('@babel/preset-env')
 var inject = require('./inject')
-var DEFAULT_BROWSERS = [
-  'last 2 Chrome versions',
-  'last 2 Firefox versions',
-  'last 2 Safari versions',
-  'last 2 Edge versions',
-  '> 1%'
-]
 module.exports = script
 function script (state, emit) {
@@ -38,11 +30,12 @@ function script (state, emit) {
   b.plugin(splitRequire, {
     filename: function (record) {
-      var basename = path.basename(record.sourceFile, '.js')
+      var extension = path.extname(record.sourceFile)
+      var basename = path.basename(record.sourceFile, extension)
       var isIndex = basename === 'index'
       var id = basename
       if (isIndex) id = path.dirname(record.sourceFile).split('/').slice(-1)[0]
-      return `bundle-${record.index}-${id}.js`
+      return `bundle-${record.index}-${id}${extension}`
     },
     public: state.base + '/',
     output: bundleDynamicBundle
@@ -55,33 +48,55 @@ function script (state, emit) {
   var env = Object.assign({ NODE_ENV: state.env }, process.env)
   if (state.env === 'development') {
-    b.transform(babelify, { plugins: ['dynamic-import-split-require'] })
+    b.transform(tfilter(babelify, { filter: include }), {
+      plugins: ['dynamic-import-split-require']
+    })
     b.transform(inject('source-map-support/register', state.entry))
-    b.transform(brfs)
-    b.transform(envify(env))
+    b.transform(tfilter(brfs, {
+      filter (file) {
+        return !file.includes('source-map-support') && include(file)
+      }
+    }), { global: true })
+    b.transform(tfilter(envify, { filter: include }), env)
   } else {
-    let dir = path.dirname(state.entry)
-    let browsers = browserslist.loadConfig({ path: dir, env: env.NODE_ENV })
-    if (!browsers) browsers = DEFAULT_BROWSERS
     // compile dynamic imports but nothing else to preserve template literals
-    b.transform(babelify, { plugins: ['dynamic-import-split-require'] })
+    b.transform(tfilter(babelify, { filter: include }), {
+      plugins: ['dynamic-import-split-require']
+    })
     // include regenerator runtime to support transpiled async/await
-    if (!caniuse.isSupported('async-functions', browsers.join(','))) {
-      let regenerator = require.resolve('regenerator-runtime/runtime')
+    if (!caniuse.isSupported('async-functions', state.browsers.join(','))) {
+      const regenerator = require.resolve('regenerator-runtime/runtime')
       b.transform(inject(regenerator, state.entry))
     }
-    b.transform(nanohtml)
-    b.transform(babelify, {
+    b.transform(tfilter(nanohtml, { filter: include }))
+    b.transform(tfilter(nanohtml, {
+      filter (file) {
+        return file.includes('node_modules') && include(file)
+      }
+    }), { global: true })
+    b.transform(tfilter(babelify, {
+      filter (file) {
+        return file.includes('node_modules') && include(file)
+      }
+    }), {
+      global: true,
+      babelrc: false,
       presets: [
         [babelPresetEnv, {
-          targets: { browsers: browsers }
+          targets: { browsers: state.browsers }
         }]
       ]
     })
-    b.transform(brfs)
+    b.transform(tfilter(babelify, { filter: include }), {
+      presets: [
+        [babelPresetEnv, {
+          targets: { browsers: state.browsers }
+        }]
+      ]
+    })
+    b.transform(tfilter(brfs, { filter: include }), { global: true })
     b.plugin(tinyify, { env })
   }
@@ -104,6 +119,12 @@ function script (state, emit) {
     }))
   }
+  // test if file should be included in transform
+  // str -> bool
+  function include (file) {
+    return !state.skip(file)
+  }
   // emit progress on pipeline reset/pending
   // () -> void
   function onreset () {
@@ -125,7 +146,7 @@ function script (state, emit) {
   // handle dynamic bundle
   // str -> stream.Writable
   function bundleDynamicBundle (name) {
-    let stream = concat({ encoding: 'buffer' }, function (bundle) {
+    const stream = concat({ encoding: 'buffer' }, function (bundle) {
       onbundle(bundle, name)
       var asset = state.assets.get(name)
       stream.emit('name', asset.url)
@@ -141,9 +162,9 @@ function script (state, emit) {
         mime: 'application/javascript'
       })
     } else {
-      let src = bundle.toString()
-      let map = sourcemap.fromSource(src)
-      let buff = Buffer.from(sourcemap.removeComments(src))
+      const src = bundle.toString()
+      const map = sourcemap.fromSource(src)
+      const buff = Buffer.from(sourcemap.removeComments(src))
       emit('asset', name, buff, {
         mime: 'application/javascript',
         map: Buffer.from(map.toJSON())

package/lib/service-worker.js CHANGED Viewed

@@ -1,12 +1,13 @@
 var path = require('path')
 var brfs = require('brfs')
+var tfilter = require('tfilter')
 var tinyify = require('tinyify')
 var through = require('through2')
 var watchify = require('watchify')
 var concat = require('concat-stream')
-var envify = require('envify/custom')
 var browserify = require('browserify')
 var sourcemap = require('convert-source-map')
+var envify = require('@goto-bus-stop/envify')
 var inject = require('./inject')
 module.exports = serviceWorker
@@ -28,8 +29,8 @@ function serviceWorker (state, emit) {
   b.on('reset', capture)
   // run envify regardless due to tinyify loosing the reference to env
-  b.transform(envify(env))
-  b.transform(brfs)
+  b.transform(tfilter(envify, { filter: include }), env)
+  b.transform(tfilter(brfs, { filter: include }))
   if (state.env === 'development') {
     b.transform(inject('source-map-support/register', state.sw))
@@ -56,6 +57,12 @@ function serviceWorker (state, emit) {
     }))
   }
+  // test if file should be included in transform
+  // str -> bool
+  function include (file) {
+    return !state.skip(file)
+  }
   // emit progress on pipeline reset/pending
   // () -> void
   function onreset () {
@@ -83,9 +90,9 @@ function serviceWorker (state, emit) {
         mime: 'application/javascript'
       })
     } else {
-      let src = bundle.toString()
-      let map = sourcemap.fromSource(src)
-      let buff = Buffer.from(sourcemap.removeComments(src))
+      const src = bundle.toString()
+      const map = sourcemap.fromSource(src)
+      const buff = Buffer.from(sourcemap.removeComments(src))
       emit('asset', id, buff, {
         static: true,
         mime: 'application/javascript',
@@ -99,7 +106,7 @@ function serviceWorker (state, emit) {
   function getEnv () {
     var env = { NODE_ENV: state.env }
     env.ASSET_LIST = []
-    for (let [key, asset] of state.assets) {
+    for (const [key, asset] of state.assets) {
       if (key !== id) env.ASSET_LIST.push(asset.url)
     }
     return env

package/lib/style.js CHANGED Viewed

@@ -59,7 +59,7 @@ function style (state, emit) {
     var deps = []
     var reg = /\.js$/
-    for (let dep of state.deps) {
+    for (const dep of state.deps) {
       if (reg.test(dep)) deps.push(dep)
     }
@@ -135,7 +135,12 @@ function style (state, emit) {
       })
       .then(function (result) {
         // add optimizations
-        if (state.env !== 'development') result.plugins.push(autoprefixer, csso)
+        if (state.env !== 'development') {
+          result.plugins.push(
+            autoprefixer({ overrideBrowserslist: state.browsers }),
+            csso
+          )
+        }
         // hook up watcher plugin
         if (state.watch) result.plugins.push(watcher.plugin())
         return result