Add base option (#399)

emilbayes · goto-bus-stop · commit 4e8484036f2d · 2018-02-16T12:54:02.000+01:00
* Add baseHref option

* base-href -&gt; base
diff --git a/bin.js b/bin.js
@@ -57,7 +57,8 @@ var argv = minimist(process.argv.slice(2), {
   alias: {
     help: 'h',
     quiet: 'q',
-    version: 'v'
+    version: 'v',
+    'base': 'base'
   },
   boolean: [
     'help',
diff --git a/lib/cmd-build.js b/lib/cmd-build.js
@@ -17,7 +17,8 @@ module.exports = build
 function build (entry, outdir, opts) {
   var bankaiOpts = {
     logStream: pumpify(pinoColada(), process.stdout),
-    watch: false
+    watch: false,
+    base: opts.base
   }
   var compiler = bankai(entry, bankaiOpts)
   var log = compiler.log
diff --git a/lib/graph-document.js b/lib/graph-document.js
@@ -64,21 +64,23 @@ function node (state, createEdge) {
       var language = res.language
       var title = res.title
       var body = res.body
+      var base = state.metadata.opts.base
 
       var hasDynamicScripts = state.scripts.list.buffer.length > 0
 
       var html = head(body, language)
       var d = documentify(entry, html)
       var header = [
         viewportTag(),
-        scriptTag({ hash: state.scripts.bundle.hash }),
+        scriptTag({ hash: state.scripts.bundle.hash, base: base }),
         hasDynamicScripts && dynamicScriptsTag({
           bundleNames: String(state.scripts.list.buffer).split(','),
-          scripts: state.scripts
+          scripts: state.scripts,
+          base: base
         }),
         preloadTag(),
-        loadFontsTag({ fonts: fonts }),
-        manifestTag(),
+        loadFontsTag({ fonts: fonts, base: base }),
+        manifestTag({ base: base }),
         descriptionTag({ description: String(state.manifest.description.buffer) }),
         themeColorTag({ color: String(state.manifest.color.buffer) }),
         titleTag({ title: title })
@@ -98,7 +100,7 @@ function node (state, createEdge) {
         d.transform(criticalTransform, { css: state.styles.bundle.buffer })
       }
 
-      d.transform(addToHead, styleTag({ hash: state.styles.bundle.hash }))
+      d.transform(addToHead, styleTag({ hash: state.styles.bundle.hash, base: base }))
 
       function complete (buf) { done(null, buf) }
 
@@ -124,7 +126,7 @@ function preloadTag () {
 function scriptTag (opts) {
   var hex = opts.hash.toString('hex').slice(0, 16)
   var base64 = 'sha512-' + opts.hash.toString('base64')
-  var link = `/${hex}/bundle.js`
+  var link = `${opts.base || ''}/${hex}/bundle.js`
   return `<script src="${link}" defer integrity="${base64}"></script>`
 }
 
@@ -133,7 +135,7 @@ function dynamicScriptsTag (opts) {
     name = name.replace(/\.js$/, '')
     var hash = opts.scripts[name].hash
     var hex = hash.toString('hex').slice(0, 16)
-    var link = `/${hex}/${name}.js`
+    var link = `${opts.base || ''}/${hex}/${name}.js`
     return `<link rel="prefetch" href="${link}">`
   }).join('')
 }
@@ -144,20 +146,20 @@ function dynamicScriptsTag (opts) {
 // https://twitter.com/yoshuawuyts/status/920794607314759681
 function styleTag (opts) {
   var hex = opts.hash.toString('hex').slice(0, 16)
-  var link = `/${hex}/bundle.css`
+  var link = `${opts.base || ''}/${hex}/bundle.css`
   return `<link rel="preload" as="style" href="${link}" onload="this.rel='stylesheet'">`
 }
 
 function loadFontsTag (opts) {
   return opts.fonts.reduce(function (html, font) {
-    if (!path.isAbsolute(font)) font = '/' + font
+    if (!path.isAbsolute(font)) font = (opts.base || '') + '/' + font
     return html + `<link rel="preload" as="font" crossorigin href="${font}">`
   }, '')
 }
 
-function manifestTag () {
+function manifestTag (opts) {
   return `
-    <link rel="manifest" href="/manifest.json">
+    <link rel="manifest" href="${opts.base || ''}/manifest.json">
   `.replace(/\n +/g, '')
 }
 
diff --git a/test/document.js b/test/document.js
@@ -141,3 +141,71 @@ tape('server render choo apps', function (assert) {
     })
   })
 })
+
+tape('server render choo apps with root set', function (assert) {
+  var expected = `
+    <!DOCTYPE html>
+    <html lang="en-US" dir="ltr">
+      <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <script src="some-custom-root/__SCRIPTS_HASH__/bundle.js" integrity="sha512-__SCRIPTS_INTEGRITY__" defer></script>
+        <script>;(function(a){"use strict";var b=function(b,c,d){function e(a){return h.body?a():void setTimeout(function(){e(a)})}function f(){i.addEventListener&&i.removeEventListener("load",f),i.media=d||"all"}var g,h=a.document,i=h.createElement("link");if(c)g=c;else{var j=(h.body||h.getElementsByTagName("head")[0]).childNodes;g=j[j.length-1]}var k=h.styleSheets;i.rel="stylesheet",i.href=b,i.media="only x",e(function(){g.parentNode.insertBefore(i,c?g:g.nextSibling)});var l=function(a){for(var b=i.href,c=k.length;c--;)if(k[c].href===b)return a();setTimeout(function(){l(a)})};return i.addEventListener&&i.addEventListener("load",f),i.onloadcssdefined=l,l(f),i};"undefined"!=typeof exports?exports.loadCSS=b:a.loadCSS=b})("undefined"!=typeof global?global:this);;(function(a){if(a.loadCSS){var b=loadCSS.relpreload={};if(b.support=function(){try{return a.document.createElement("link").relList.supports("preload")}catch(b){return!1}},b.poly=function(){for(var b=a.document.getElementsByTagName("link"),c=0;c<b.length;c++){var d=b[c];"preload"===d.rel&&"style"===d.getAttribute("as")&&(a.loadCSS(d.href,d,d.getAttribute("media")),d.rel=null)}},!b.support()){b.poly();var c=a.setInterval(b.poly,300);a.addEventListener&&a.addEventListener("load",function(){b.poly(),a.clearInterval(c)}),a.attachEvent&&a.attachEvent("onload",function(){a.clearInterval(c)})}}})(this);</script>
+        <link rel="manifest" href="some-custom-root/manifest.json">
+        <meta name="description" content=>
+        <meta name="theme-color" content=#fff>
+        <title></title>
+        <link rel="preload" as="style" href="some-custom-root/__STYLE_HASH__/bundle.css" onload="this.rel='stylesheet'">
+      </head>
+      <body>
+        meow
+      </body>
+    </html>
+  `.replace(/\n +/g, '')
+
+  var script = dedent`
+    var html = require('choo/html')
+    var choo = require('choo')
+
+    var app = choo()
+    app.route('/', function () {
+      return html\`<body>meow</body>\`
+    })
+    if (module.parent) module.exports = app
+    else app.mount('body')
+  `
+
+  var dirname = 'document-pipeline-' + (Math.random() * 1e4).toFixed()
+  tmpDirname = path.join(__dirname, '../tmp', dirname)
+  var tmpScriptname = path.join(tmpDirname, 'index.js')
+
+  mkdirp.sync(tmpDirname)
+  fs.writeFileSync(tmpScriptname, script)
+
+  var compiler = bankai(tmpScriptname, { watch: false, base: 'some-custom-root' })
+  compiler.documents('/', function (err, res) {
+    assert.error(err, 'no error writing document')
+    assertHtml(assert, String(res.buffer), expected)
+  })
+
+  compiler.on('change', function (nodeName, second) {
+    if (nodeName !== 'documents' || second !== 'list') return
+    assert.end()
+  })
+
+  compiler.on('error', function () {
+    // assert.error(err, 'no error')
+  })
+
+  compiler.scripts('bundle.js', function (err, res) {
+    assert.ifError(err, 'no err bundling scripts')
+    expected = expected.replace('__SCRIPTS_HASH__', res.hash.toString('hex').slice(0, 16))
+    expected = expected.replace('__SCRIPTS_INTEGRITY__', res.hash.toString('base64'))
+    compiler.styles('bundle.css', function (err, res) {
+      assert.ifError(err, 'no err bundling style')
+      assert.ifError(err)
+      expected = expected.replace('__STYLE_HASH__', res.hash.toString('hex').slice(0, 16))
+      expected = expected.replace('__STYLE_INTEGRITY__', res.hash.toString('base64'))
+    })
+  })
+})
