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

jalla 1.0.0-4 → 1.0.0-40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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