Fix assets pathing, and add fonts to document tests (#454)

Author: bendik

lib/graph-assets.js

@@ -1,5 +1,6 @@
 var trackDir = require('./track-dir')
 var utils = require('./utils')
+var path = require('path')
 
 var dirs = [
   'assets',
@@ -35,7 +36,9 @@ function node (state, createEdge) {
   })
 
   tracker.on('change', function () {
-    var list = tracker.list()
+    var list = tracker.list().map(function (file) {
+      return path.posix.format(path.parse(path.relative(basedir, file)))
+    })
     createEdge('list', Buffer.from(list.join(',')))
   })
 

test/document.js

@@ -83,6 +83,7 @@ tape('server render choo apps', function (assert) {
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <script src="/__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="preload" as="font" crossorigin href="/assets/font.woff">
         <link rel="manifest" href="/manifest.json">
         <meta name="description" content=>
         <meta name="theme-color" content=#fff>
@@ -110,9 +111,14 @@ tape('server render choo apps', function (assert) {
   var dirname = 'document-pipeline-' + (Math.random() * 1e4).toFixed()
   tmpDirname = path.join(__dirname, '../tmp', dirname)
   var tmpScriptname = path.join(tmpDirname, 'index.js')
+  var assetDirname = path.join(tmpDirname, 'assets')
+  var fontFilename = path.join(assetDirname, 'font.woff')
 
   mkdirp.sync(tmpDirname)
+  mkdirp.sync(assetDirname)
+
   fs.writeFileSync(tmpScriptname, script)
+  fs.writeFileSync(fontFilename, 'binary font data')
 
   var compiler = bankai(tmpScriptname, { watch: false })
   compiler.documents('/', function (err, res) {
@@ -153,6 +159,7 @@ tape('server render choo apps with root set', function (assert) {
         <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="preload" as="font" crossorigin href="some-custom-root/assets/font.woff">
         <link rel="manifest" href="some-custom-root/manifest.json">
         <meta name="description" content=>
         <meta name="theme-color" content=#fff>
@@ -180,9 +187,14 @@ tape('server render choo apps with root set', function (assert) {
   var dirname = 'document-pipeline-' + (Math.random() * 1e4).toFixed()
   tmpDirname = path.join(__dirname, '../tmp', dirname)
   var tmpScriptname = path.join(tmpDirname, 'index.js')
+  var assetDirname = path.join(tmpDirname, 'assets')
+  var fontFilename = path.join(assetDirname, 'font.woff')
 
   mkdirp.sync(tmpDirname)
+  mkdirp.sync(assetDirname)
+
   fs.writeFileSync(tmpScriptname, script)
+  fs.writeFileSync(fontFilename, 'binary font data')
 
   var compiler = bankai(tmpScriptname, { watch: false, base: 'some-custom-root' })
   compiler.documents('/', function (err, res) {