FT Bundle Splitting Strategy Helper

examples/express-app/package.json

@@ -16,6 +16,7 @@
     "@financial-times/anvil-middleware-ft-edition": "file:../../packages/anvil-middleware-ft-edition",
     "@financial-times/anvil-middleware-ft-navigation": "file:../../packages/anvil-middleware-ft-navigation",
     "@financial-times/anvil-server-ft-handlebars": "file:../../packages/anvil-server-ft-handlebars",
+    "@financial-times/anvil-server-ft-preset": "file:../../packages/anvil-server-ft-preset",
     "@financial-times/anvil-plugin-sass": "file:../../packages/anvil-plugin-sass",
     "@financial-times/anvil-plugin-ft-js": "file:../../packages/anvil-plugin-ft-js",
     "express": "^4.16.2"

examples/express-app/server/controllers/home.js

@@ -1,11 +1,14 @@
+const { getFTBundleAssetUrls } = require('@financial-times/anvil-server-ft-preset')
+
 module.exports = async (request, response) => {
+  const assetLoader = response.locals.assets.loader
   const options = {
     pageTitle: 'Home',
     foo: 'foo',
     bar: 'bar',
     baz: 'baz',
     layout: 'main',
-    scripts: [response.locals.assets.loader.getPublicURL('main.js')]
+    scripts: [getFTBundleAssetUrls(assetLoader), assetLoader.getPublicURL('main.js')]
   }
 
   options.scripts.forEach((script) => {

packages/anvil-server-ft-preset/.npmignore

@@ -0,0 +1 @@
+__test__/

packages/anvil-server-ft-preset/.npmrc

@@ -0,0 +1,2 @@
+package-lock=false
+shrinkwrap=false

packages/anvil-server-ft-preset/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@financial-times/anvil-server-ft-preset",
+  "version": "0.0.0",
+  "description": "",
+  "main": "dist/cjs/index.js",
+  "types": "src/index.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "tsc": "../../node_modules/.bin/tsc",
+    "clean": "npm run clean:dist && npm run clean:node_modules",
+    "clean:dist": "rm -rf dist",
+    "clean:node_modules": "rm -rf node_modules",
+    "build:cjs": "npm run tsc -- --outDir ./dist/cjs",
+    "build": "npm run clean:dist && npm run build:cjs",
+    "dev": "npm run clean:dist && npm run build:cjs -- --watch"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@financial-times/anvil-server-asset-loader": "file:../../packages/anvil-server-asset-loader"
+  }
+}

packages/anvil-server-ft-preset/src/__test__/getFTBundleAssetUrls.spec.ts

@@ -0,0 +1,46 @@
+import { getFTBundleAssetUrls } from '../getFTBundleAssetUrls'
+import { AssetLoader, AssetLoaderOptions } from '@financial-times/anvil-server-asset-loader'
+
+const $manifest = {
+  'main.js': 'main.bundle.js',
+  'vendor.js': 'vendor.bundle.js',
+  'runtime.js': 'runtime.bundle.js',
+  'o-ads.js': 'o-ads.bundle.js',
+  'o-date.js': 'o-date.bundle.js',
+  'shared.stable.js': 'shared.stable.bundle.js',
+  'shared.volatile.js': 'shared.volatile.bundle.js',
+  'anvil-ui-ft-footer.js': 'anvil-ui-ft-footer.bundle.js',
+  'anvil-ui-ft-header.js': 'anvil-ui-ft-header.bundle.js'
+}
+
+function createAssetLoader({
+  manifest = $manifest,
+  publicPath = 'public/assets',
+  fileSystemPath = '/internal/path/to/assets',
+  ...otherOptions
+}: AssetLoaderOptions = {}) {
+  return new AssetLoader({ manifest, publicPath, fileSystemPath, ...otherOptions })
+}
+
+describe('getFTBundleAssetUrls(assetUrl)', () => {
+  it('should return the vendor asset urls', () => {
+    const assetLoader = createAssetLoader()
+    const result = getFTBundleAssetUrls(assetLoader)
+    expect(result).toEqual([
+      'public/assets/runtime.bundle.js',
+      'public/assets/vendor.bundle.js',
+      'public/assets/shared.stable.bundle.js',
+      'public/assets/shared.volatile.bundle.js',
+      'public/assets/o-ads.bundle.js',
+      'public/assets/o-date.bundle.js',
+      'public/assets/anvil-ui-ft-footer.bundle.js',
+      'public/assets/anvil-ui-ft-header.bundle.js'
+    ])
+  })
+
+  it('should not error if an asset url cannot be found', () => {
+    const assetLoader = createAssetLoader({ manifest: {} })
+    const result = getFTBundleAssetUrls(assetLoader)
+    expect(result).toEqual([])
+  })
+})

packages/anvil-server-ft-preset/src/getFTBundleAssetUrls.ts

@@ -0,0 +1,30 @@
+import AssetLoader from '@financial-times/anvil-server-asset-loader'
+
+/**
+ * Returns an array of public asset urls that are specific to the FT app bundle splitting strategy
+ */
+export function getFTBundleAssetUrls(assetLoader: AssetLoader) {
+  return []
+    .concat(concatablySilent(() => assetLoader.getPublicURL('runtime.js')))
+    .concat(concatablySilent(() => assetLoader.getPublicURL('vendor.js')))
+    .concat(concatablySilent(() => assetLoader.getPublicURL('shared.stable.js')))
+    .concat(concatablySilent(() => assetLoader.getPublicURL('shared.volatile.js')))
+    .concat(concatablySilent(() => assetLoader.getPublicURLOfHashedAssetsMatching(/o-(.*)\.js/)))
+    .concat(concatablySilent(() => assetLoader.getPublicURLOfHashedAssetsMatching(/anvil-ui-(.*)\.js/)))
+}
+
+function concatablySilent(invoke: Function) {
+  return asArray(silently(invoke))
+}
+
+function asArray(value: any) {
+  if (value === undefined) return []
+  if (Array.isArray(value)) return value
+  return [value]
+}
+
+function silently(action: Function) {
+  try {
+    return action()
+  } catch (e) {}
+}

packages/anvil-server-ft-preset/src/index.ts

@@ -0,0 +1 @@
+export * from './getFTBundleAssetUrls'

packages/anvil-server-ft-preset/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "rootDir": "./src/",
+  "extends": "../../tsconfig.json"
+}