Implement discount fingerprinting without webpack (#17337)

2021-01-19 23:00:54 -06:00 · 2021-01-19 23:00:54 -06:00 · 9724f763f5
--- a/includes/head.html
+++ b/includes/head.html
@ -23,7 +23,7 @@
    />
  {% endfor %}

-  <link rel="stylesheet" href="/dist/index.css">
+  <link rel="stylesheet" href="{{ builtAssets.main.css }}">
  <link rel="alternate icon" type="image/png" href="/assets/images/site/favicon.png">
  <link rel="icon" type="image/svg+xml" href="/assets/images/site/favicon.svg">
 </head>
--- a/includes/scripts.html
+++ b/includes/scripts.html
@ -1 +1 @@
-<script src="/dist/index.js"></script>
+<script src="{{ builtAssets.main.js }}"></script>
--- a/layouts/dev-toc.html
+++ b/layouts/dev-toc.html
@ -3,7 +3,7 @@
 <head>
 <meta charset="utf-8" />
 <title>Docs TOC</title>
-<link rel="stylesheet" href="/dist/index.css">
+<link rel="stylesheet" href="{{ builtAssets.main.css }}">
 <link rel="alternate icon" type="image/png" href="/assets/images/site/favicon.png">
 <link rel="icon" type="image/svg+xml" href="/assets/images/site/favicon.svg">
 </head>
--- a/lib/built-asset-urls.js
+++ b/lib/built-asset-urls.js
@ -0,0 +1,23 @@
+const fs = require('fs')
+const path = require('path')
+const crypto = require('crypto')
+
+// Get an MD4 Digest Hex content hash, loosely based on Webpack `[contenthash]`
+function getContentHash (absFilePath) {
+  const buffer = fs.readFileSync(absFilePath)
+  const hash = crypto.createHash('md4')
+  hash.update(buffer)
+  return hash.digest('hex')
+}
+
+function getUrl (relFilePath) {
+  const absFilePath = path.join(process.cwd(), relFilePath)
+  return `/${relFilePath}?hash=${getContentHash(absFilePath)}`
+}
+
+module.exports = {
+  main: {
+    js: getUrl('dist/index.js'),
+    css: getUrl('dist/index.css')
+  }
+}
--- a/middleware/context.js
+++ b/middleware/context.js
@ -7,6 +7,7 @@ const { getVersionStringFromPath, getProductStringFromPath, getPathWithoutLangua
 const productNames = require('../lib/product-names')
 const warmServer = require('../lib/warm-server')
 const featureFlags = Object.keys(require('../feature-flags'))
+const builtAssets = require('../lib/built-asset-urls')

 // Supply all route handlers with a baseline `req.context` object
 // Note that additional middleware in middleware/index.js adds to this context object
@ -42,5 +43,8 @@ module.exports = async function contextualize (req, res, next) {
  req.context.siteTree = siteTree
  req.context.pages = pageMap

+  // JS + CSS asset paths
+  req.context.builtAssets = builtAssets
+
  return next()
 }
--- a/tests/rendering/server.js
+++ b/tests/rendering/server.js
@ -4,6 +4,7 @@ const { get, getDOM, head } = require('../helpers/supertest')
 const { describeViaActionsOnly } = require('../helpers/conditional-runs')
 const path = require('path')
 const { loadPages } = require('../../lib/pages')
+const builtAssets = require('../../lib/built-asset-urls')

 describe('server', () => {
  jest.setTimeout(60 * 1000)
@ -694,7 +695,8 @@ describe('?json query param for context debugging', () => {

 describe('stylesheets', () => {
  it('compiles and sets the right content-type header', async () => {
-    const res = await get('/dist/index.css')
+    const stylesheetUrl = builtAssets.main.css
+    const res = await get(stylesheetUrl)
    expect(res.statusCode).toBe(200)
    expect(res.headers['content-type']).toBe('text/css; charset=UTF-8')
  })
@ -703,7 +705,8 @@ describe('stylesheets', () => {
 describe('client-side JavaScript bundle', () => {
  let res
  beforeAll(async (done) => {
-    res = await get('/dist/index.js')
+    const scriptUrl = builtAssets.main.js
+    res = await get(scriptUrl)
    done()
  })