jalla 1.0.0-4 → 1.0.0-41

package/README.md

@@ -28,7 +28,7 @@ compiled using [Documentify][documentify]. And it's all configured for you.
     - [`ctx.assets`](#ctxassets)
   - [Assets](#assets)
   - [Manifest](#manifest)
-    - [Service Workers](#service-workers)
+  - [Service Workers](#service-workers)
   - [Advanced Usage](#advanced-usage)
   - [Configuration](#configuration)
     - [JavaScript](#javascript)
@@ -70,6 +70,7 @@ $ NODE_ENV=production jalla index.js
 - __`--css`__ explicitly include a css file in the build
 - __`--service-worker, --sw`__ entry point for a service worker
 - __`--base, -b`__ base path where app will be served
+- __`--skip, -s`__ skip transform for file/glob (excluding optimizations)
 - __`--watch, -w`__ watch files for changes (default in `development`)
 - __`--dir, -d`__ output directory, use with [build](#build) and [serve](#serve)
 - __`--quiet, -q`__ disable printing to console
@@ -178,11 +179,13 @@ before issuing another render pass using the state generated the first time.
 
 ```javascript
 // store.js
+var fetch = require('node-fetch')
+
 module.exports = function (state, emitter) {
   state.data = state.data || null
 
   emitter.on('fetch', function () {
-    var request = window.fetch('/my/api')
+    var request = fetch('/my/api')
       .then((res) => res.json())
       .then(function (data) {
         state.data = data
@@ -258,7 +261,7 @@ A bare-bones application manifest is generated based on the projects
 `package.json`. You can either place a custom `manifest.json` in the
 [assets](#assets) folder or you can generate one using a custom middleware.
 
-### Service Workers
+## Service Workers
 By supplying the path to a service worker entry file with the `sw` option, jalla
 will build and serve it's bundle from that path.
 
@@ -313,7 +316,13 @@ self.addEventListener('install', function oninstall (event) {
 
 self.addEventListener('activate', function onactivate (event) {
   // clear old caches on activate
-  event.waitUntil(clear().then(() => self.clients.claim()))
+  event.waitUntil(clear().then(function () {
+    if (!self.registration.navigationPreload) return self.clients.claim()
+    // enable navigation preload
+    return self.registration.navigationPreload.enable().then(function () {
+      return self.clients.claim()
+    })
+  }))
 })
 
 self.addEventListener('fetch', function onfetch (event) {
@@ -321,14 +330,14 @@ self.addEventListener('fetch', function onfetch (event) {
   event.respondWith(caches.open(CACHE_KEY).then(async function (cache) {
     try {
       var cached = await cache.match(req)
-      var response = self.fetch(event.request)
-      if (req.method.toUpperCase() === 'GET') {
+      var response = await (event.preloadResponse || self.fetch(event.request))
+      if (response.ok && req.method.toUpperCase() === 'GET') {
         await cache.put(req, response.clone())
       }
       return response
     } catch (err) {
       if (cached) return cached
-      throw err
+      return err
     }
   }))
 })
@@ -369,24 +378,32 @@ is compiling the app. The pipline steps are called in series, and have access
 to the assets and dependencies of all prior steps.
 
 ```javascript
-var fs = require('fs')
+var path = require('path')
 var jalla = require('jalla')
+var csv = require('csvtojson')
 var app = jalla('index.js')
 
-// include data.csv as an asset
+// convert and include data.csv as a JSON file
 app.pipeline.get('assets').push(function (state, emit) {
-  return function (cb) {
-    emit('progress', 'data.csv')
-
-    fs.readFile('data.csv', function (err, buffer) {
-      if (err) return cb(err)
-      emit('asset', 'data.json', buffer)
-      cb()
+  return async function (cb) {
+    if (state.assets.has('data.json')) return cb()
+    emit('progress', 'data.json')
+    var json = await csv.fromFile(path.resolve(state.entry, 'data.csv'))
+    emit('asset', 'data.json', Buffer.from(JSON.stringify(json)), {
+      mime: 'application/json
     })
+    cb()
   }
 })
 
-app.listen(8080)
+if (process.env.BUILD) {
+  app.build(path.resolve(__dirname, 'dist'), function (err) {
+    if (err) console.error(err)
+    process.exit(err ? 1 : 0)
+  })
+} else {
+  app.listen(8080)
+}
 ```
 
 ## Configuration

package/bin.js

@@ -8,7 +8,6 @@ var assert = require('assert')
 var dedent = require('dedent')
 var getPort = require('get-port')
 var minimist = require('minimist')
-var App = require('./lib/app')
 var jalla = require('./index')
 
 var COMMANDS = ['start', 'build', 'serve']
@@ -16,14 +15,15 @@ var COMMANDS = ['start', 'build', 'serve']
 var argv = minimist(process.argv.slice(2), {
   alias: {
     'service-worker': 'sw',
-    'dir': 'd',
-    'quiet': 'q',
-    'inspect': 'i',
-    'base': 'b',
-    'watch': 'w',
-    'port': 'p',
-    'help': 'h',
-    'version': 'v'
+    dir: 'd',
+    quiet: 'q',
+    inspect: 'i',
+    skip: 's',
+    base: 'b',
+    watch: 'w',
+    port: 'p',
+    help: 'h',
+    version: 'v'
   },
   default: {
     port: process.env.PORT || 8080
@@ -49,6 +49,7 @@ if (argv.help) {
       --css                   entry point for CSS
       --service-worker, --sw  entry point for service worker
       --base, -b              base path where app will be mounted
+      --skip, -s              skip transform for file/glob (excluding optimizations)
       --watch, -w             enable watch mode (default in development)
       --dir, -d               output directory, use with ${chalk.bold('build')} and ${chalk.bold('serve')}
       --quiet, -q             disable printing to console
@@ -95,14 +96,16 @@ if (typeof argv.watch !== 'undefined') opts.watch = Boolean(argv.watch)
 
 if (command === 'build') {
   opts.watch = false
-  let app = new App(path.resolve(process.cwd(), entry), opts)
-  let dir = typeof argv.dir === 'string' ? argv.dir : 'dist'
-  app.build(path.resolve(process.cwd(), dir), function (err) {
-    process.exit(err ? 1 : 0)
+  const app = jalla(path.resolve(process.cwd(), entry), opts)
+  const dir = typeof argv.dir === 'string' ? argv.dir : 'dist'
+  app.build(path.resolve(process.cwd(), dir)).then(function () {
+    process.exit(0)
+  }, function () {
+    process.exit(1)
   })
 } else {
-  let app = jalla(path.resolve(process.cwd(), entry), opts)
-  getPort({ port: argv.port }).then(function (port) {
+  const app = jalla(path.resolve(process.cwd(), entry), opts)
+  getPort({ port: argv.port || 8080 }).then(function (port) {
     app.listen(port)
   })
 }

package/index.js

@@ -1,6 +1,7 @@
 var path = require('path')
 var assert = require('assert')
 var serve = require('koa-static')
+var { Minimatch } = require('minimatch')
 var App = require('./lib/app')
 var render = require('./lib/render')
 
@@ -14,11 +15,24 @@ function start (entry, opts = {}) {
   var dist = opts.dist
   if (!dist) dist = typeof opts.serve === 'string' ? opts.serve : 'dist'
 
+  var swPath = opts.sw
+    ? path.resolve(dir, dist, 'public', path.relative(dir, opts.sw))
+    : null
+
+  if (opts.skip) {
+    const input = Array.isArray(opts.skip) ? opts.skip : [opts.skip]
+    var skip = input.map(normalizeSkip)
+  }
+
   opts = Object.assign({}, opts, {
     dist: absolute(dist, dir),
     serve: Boolean(opts.serve),
     sw: opts.sw && absolute(opts.sw, dir),
-    css: opts.css && absolute(opts.css, dir)
+    css: opts.css && absolute(opts.css, dir),
+    skip (file) {
+      if (!skip) return false
+      return skip.reduce((res, test) => res || test(file), false)
+    }
   })
 
   var app = new App(entry, opts)
@@ -29,45 +43,44 @@ function start (entry, opts = {}) {
     app.emit('timing', Date.now() - start, ctx)
   })
 
-  if (opts.serve) {
-    let pub = path.resolve(opts.dist, 'public')
-    app.use(serve(pub, { setHeaders }))
-  } else {
-    let state = Object.assign({
-      env: app.env,
-      base: opts.base || '',
-      watch: typeof opts.watch === 'undefined'
-        ? app.env === 'development'
-        : opts.watch
-    }, opts)
-    let init = new Promise(function (resolve, reject) {
-      app.pipeline.bundle(entry, state, resolve)
-    })
-
-    app.use((ctx, next) => init.then(next))
-    app.use(app.pipeline.middleware())
-    app.use(function (ctx, next) {
-      if (ctx.body) {
-        let cache = state.env !== 'development' && !state.watch
-        let maxAge = cache ? 60 * 60 * 24 * 365 : 0
-        let value = `${cache ? 'public, ' : ''}max-age=${maxAge}`
-        ctx.set('Cache-Control', value)
-      }
-      return next()
-    })
-  }
-
   app.use(require('koa-conditional-get')())
   app.use(require('koa-etag')())
   app.use(render(app))
 
+  if (opts.serve) {
+    app.use(serve(path.resolve(opts.dist, 'public'), { setHeaders }))
+  } else {
+    app.use(app.pipeline.middleware(app.state))
+  }
+
   return app
+
+  // set static asset headers
+  // (obj, str, obj) -> void
+  function setHeaders (res, filepath, stats) {
+    if (filepath === swPath) {
+      res.setHeader('Cache-Control', 'max-age=0')
+    } else {
+      res.setHeader('Cache-Control', `public, max-age=${60 * 60 * 24 * 365}`)
+    }
+  }
 }
 
-// set static asset headers
-// (obj, str, obj) -> void
-function setHeaders (res, path, stats) {
-  res.setHeader('Cache-Control', `public, maxage=${60 * 60 * 24 * 365}`)
+// ensure skip input is a function
+// any -> fn
+function normalizeSkip (val) {
+  if (val instanceof RegExp) {
+    return val.test.bind(val)
+  } else if (typeof val === 'function') {
+    return val
+  } else if (typeof val === 'string') {
+    var minimatch = new Minimatch(val)
+    return function (str) {
+      return str.includes(val) || minimatch.match(str)
+    }
+  } else {
+    throw new Error('jalla: skip should be either RegExp, function or string')
+  }
 }
 
 // resolve file path (relative to dir) to absolute path

package/lib/app.js

@@ -1,7 +1,8 @@
+var fs = require('fs')
 var Koa = require('koa')
 var path = require('path')
 var assert = require('assert')
-var mkdirp = require('mkdirp')
+var browserslist = require('browserslist')
 var ui = require('./ui')
 var build = require('./build')
 var style = require('./style')
@@ -12,28 +13,37 @@ var manifest = require('./manifest')
 var Pipeline = require('./pipeline')
 var serviceWorker = require('./service-worker')
 
+var DEFAULT_BROWSERS = [
+  'last 2 Chrome versions',
+  'last 2 Firefox versions',
+  'last 2 Safari versions',
+  'last 2 Edge versions',
+  '> 1%'
+]
+
 module.exports = class App extends Koa {
   constructor (entry, opts) {
     super()
 
-    this.base = opts.base || ''
-
     var bundled = []
     if (opts.serve) {
       try {
         // pick up stat of existing build
-        let stat = require(path.resolve(opts.dist, 'stat.json'))
+        const stat = require(path.resolve(opts.dist, 'stat.json'))
         bundled = stat.assets.map(function (asset) {
           return Object.assign({}, asset, {
             hash: Buffer.from(asset.hash, 'hex'),
             file: path.resolve(opts.dist, 'public', asset.file)
           })
         })
-        // use bundled entry for faster startup time
-        entry = path.resolve(opts.dist, path.basename(entry))
+        this.browsers = stat.browsers
       } catch (err) {
         this.emit('error', Error('Failed to load stat from serve directory'))
       }
+    } else {
+      const dir = path.dirname(entry)
+      const browsers = browserslist.loadConfig({ path: dir, env: this.env })
+      this.browsers = browsers || DEFAULT_BROWSERS
     }
 
     var pipeline = new Pipeline([
@@ -45,6 +55,8 @@ module.exports = class App extends Koa {
       ['build']
     ], bundled)
 
+    this.bundled = false
+    this.base = opts.base || ''
     this.entry = entry
     this._opts = opts
     this.pipeline = pipeline
@@ -62,20 +74,26 @@ module.exports = class App extends Koa {
     else this.silent = true
   }
 
+  get state () {
+    return Object.assign({
+      browsers: this.browsers,
+      base: this.base,
+      env: this.env,
+      watch: this.env === 'development'
+    }, this._opts)
+  }
+
   // write assets to disk
   // (str, fn) -> void
   build (dir, state) {
     assert(typeof dir === 'string', 'jalla:build dir should be type string')
 
-    state = Object.assign({
-      base: this.base,
-      env: this.env,
-      watch: false,
-      dist: dir
-    }, this._opts, state)
+    if (!path.isAbsolute(dir)) dir = path.resolve(dir)
+
+    state = Object.assign({}, this.state, state, { dist: dir, watch: false })
 
     return new Promise((resolve, reject) => {
-      mkdirp(dir, (err) => {
+      fs.mkdir(dir, { recursive: true }, (err) => {
         if (err) return reject(err)
         var index = this.pipeline.get('build').push(build)
         this.pipeline.bundle(this.entry, state, (err) => {
@@ -87,12 +105,24 @@ module.exports = class App extends Koa {
     })
   }
 
-  // start server
-  // (num, fn) -> void
-  listen (port, cb) {
-    super.listen(port, () => {
-      this.emit('start', port)
-      if (typeof cb === 'function') cb()
+  bundle () {
+    this.bundled = true
+    var init = new Promise((resolve, reject) => {
+      this.pipeline.bundle(this.entry, this.state, function (err) {
+        if (err) return reject(err)
+        resolve()
+      })
+    })
+    this.middleware.unshift((ctx, next) => init.then(next))
+    return init
+  }
+
+  listen (port = 8080, cb) {
+    var self = this
+    if (!this.state.serve && !this.bundled) this.bundle()
+    return super.listen(port, function () {
+      self.emit('start', port)
+      if (typeof cb === 'function') return cb.apply(this, arguments)
     })
   }
 }

package/lib/build.js

@@ -1,86 +1,14 @@
 var fs = require('fs')
 var util = require('util')
 var path = require('path')
-var brfs = require('brfs')
-var mkdirp = require('mkdirp')
-var crypto = require('crypto')
-var tfilter = require('tfilter')
-var through = require('through2')
-var babelify = require('babelify')
-var exorcist = require('exorcist')
-var uglifyify = require('uglifyify')
-var browserify = require('browserify')
-var unassertify = require('unassertify')
-var shakeify = require('common-shakeify')
-var splitRequire = require('split-require')
-var babelPresetEnv = require('@babel/preset-env')
-var inject = require('./inject')
 
-var createDir = util.promisify(mkdirp)
+var createDir = util.promisify(fs.mkdir)
 var writeFile = util.promisify(fs.writeFile)
 
-module.exports = ssr
-
-function ssr (state, emit) {
-  var name = path.basename(state.entry)
-  var b = browserify(state.entry, {
-    node: true,
-    debug: true,
-    ignoreMissing: true,
-    // preserve paths for split-require to resolve during runtime
-    fullPaths: true,
-    standalone: name
-  })
-
-  capture()
-  b.on('reset', capture)
-
-  b.plugin(splitRequire, {
-    public: state.dist,
-    filename: dynamicBundleName,
-    output: bundleDynamicBundle
-  })
-
-  b.on('split.pipeline', function (pipeline, entry, name) {
-    var map = path.resolve(state.dist, name + '.map')
-    pipeline.get('wrap').push(exorcist(map))
-  })
-
-  b.transform(tfilter(babelify, { exclude: /node_modules/ }), {
-    plugins: ['dynamic-import-split-require'],
-    babelrc: false,
-    presets: [
-      [babelPresetEnv, {
-        targets: { node: 'current' }
-      }]
-    ]
-  })
-
-  b.transform(brfs)
-  b.transform(inject('source-map-support/register', state.entry))
-
-  if (state.env !== 'development') {
-    b.transform(unassertify, { global: true })
-    b.transform(uglifyify, { global: true })
-    b.plugin(shakeify)
-  }
-
-  b.on('reset', function restart () {
-    emit('progress', name, 0)
-  })
+module.exports = build
 
+function build (state, emit) {
   return function bundle (cb) {
-    var map = path.resolve(state.dist, name + '.map')
-    var ssr = new Promise(function (resolve, reject) {
-      b.bundle().on('error', reject)
-        // can't run terser in tandem due it generating octal escaped sequences
-        // in template strings which it then can't parse
-        // .pipe(state.env !== 'development' ? minify() : through())
-        .pipe(state.env !== 'development' ? exorcist(map) : through())
-        .pipe(fs.createWriteStream(path.resolve(state.dist, name), 'utf8'))
-        .on('close', resolve)
-    })
-
     var re = new RegExp(`^(?:${state.base.replace(/\//g, '\\/')})?\\/`)
     var assets = Array.from(state.assets.values(), function (asset) {
       asset.file = asset.url.replace(re, '')
@@ -88,70 +16,26 @@ function ssr (state, emit) {
     })
 
     var stat = JSON.stringify({
-      entry: name,
+      browsers: state.browsers,
       assets: assets
     }, stringify, 2)
 
     emit('progress', 'stat.json', 0)
 
     Promise.all([
-      ssr,
-      template(),
-      ...assets.map(async function (asset) {
-        var dest = path.resolve(state.dist, 'public', asset.file)
+      Promise.all(assets.map(async function (asset) {
+        var file = path.resolve(state.dist, 'public', asset.file)
         emit('progress', asset.id, 0)
-        await createDir(path.dirname(dest))
-        return writeFile(dest, asset.buffer)
-      }),
+        try {
+          await createDir(path.dirname(file), { recursive: true })
+        } catch (err) {
+          // Ignore failed `mkdir` and try writing file anyway
+        }
+        return writeFile(file, asset.buffer)
+      })),
       writeFile(path.resolve(state.dist, 'stat.json'), stat)
     ]).then(cb.bind(undefined, null), cb)
   }
-
-  // copy template file to dist
-  // () -> Promise
-  function template () {
-    return new Promise(function (resolve, reject) {
-      var dir = path.join(path.dirname(state.entry), 'index')
-      resolve('.', { basedir: dir, extensions: ['.html'] }, function (err, file) {
-        if (err) return resolve()
-        emit('progress', file, 0)
-        fs.readFile(file, function (err, buf) {
-          if (err) return reject(err)
-          resolve(writeFile(path.resolve(state.dist, 'index.html'), buf))
-        })
-      })
-    })
-  }
-
-  // capture bundle dependencies from pipeline
-  // () -> void
-  function capture () {
-    emit('reset')
-    b.pipeline.get('deps').push(through.obj(function (row, enc, next) {
-      var file = row.expose ? b._expose[row.id] : row.file
-      emit('dep', file)
-      this.push(row)
-      next()
-    }))
-  }
-
-  // generate name for dýnamic bundle
-  // obj -> str
-  function dynamicBundleName (record) {
-    var basename = path.basename(record.sourceFile, '.js')
-    var isIndex = basename === 'index'
-    var id = basename
-    if (isIndex) id = path.dirname(record.sourceFile).split('/').slice(-1)[0]
-    var buff = Buffer.from(record.source)
-    var hash = crypto.createHash('sha512').update(buff).digest('buffer')
-    return `${id}-${hash.toString('hex').slice(0, 16)}.js`
-  }
-
-  // handle dynamic bundle
-  // str -> stream.Writable
-  function bundleDynamicBundle (name) {
-    return fs.createWriteStream(path.resolve(state.dist, name), 'utf8')
-  }
 }
 
 // JSON.stringify replacer

package/lib/compile.js

@@ -3,6 +3,7 @@ var { addHook } = require('pirates')
 var clearModule = require('clear-module')
 
 var SCRIPT = /\.js$/
+var NODE_MODULES = /node_modules/
 
 module.exports = compile
 
@@ -10,14 +11,16 @@ function compile (state, emit) {
   addHook(hook, { matcher })
 
   return function (cb) {
-    for (let dep of state.deps) {
-      if (SCRIPT.test(dep)) clearModule(dep)
+    for (const dep of state.deps) {
+      if (SCRIPT.test(dep) && !NODE_MODULES.test(dep) && !state.skip(dep)) {
+        clearModule(dep)
+      }
     }
     cb()
   }
 
   function matcher (file) {
-    if (/node_modules/.test(file)) return false
+    if (NODE_MODULES.test(file) || state.skip(file)) return false
     return state.deps.has(file)
   }