amphora-html 6.0.1-dev.0 → 7.0.0

package/README.md

@@ -5,6 +5,8 @@ The HTML renderer for Clay components that use [Handlebars](http://handlebarsjs.
 ## Install
 `$ npm install --save amphora-html`
 
+Requires Node 26.12.1 or later. Templates are rendered with [clayhandlebars](https://github.com/clay/handlebars) 6, which comes with amphora-html: you don't need to install it or Handlebars yourself.
+
 ## The Why
 
 HTML rendering was controlled entirely by [Amphora](https://github.com/nymag/amphora) in v2.x, which meant that Amphora was responsible for a lot of heavy lifting. Furthermore, rendering was handled by a module called [Multiplex Templates](https://www.npmjs.com/package/multiplex-templates) which did some :crystal_ball: dark magic :sparkles: to synchronously render component templates. This required some affordances from Amphora which added to the weight of the middleware. By separating renderers out into separate modules which can be plugged into Amphora >v2.x we can create renderers for specific requirements (XML, Amp, etc.) _and_ the rendering process can be moved to separate machines to create more maintainable systems.
@@ -45,6 +47,21 @@ const helpers = {
 amphoraHtml.addHelpers(helpers);
 ```
 
+### The Handlebars environment
+
+`amphoraHtml.handlebars` is the Handlebars environment amphora-html renders with: clayhandlebars' helpers and partials, the helpers given to `addHelpers`, and a partial for every component and layout (registered when amphora-html is first required). `amphoraHtml.wrapPartial(name, template)` is what each component and layout template is wrapped in before it is registered.
+
+Use them when you compile templates outside of a page render, in a test for instance, so that they run with exactly the helpers the pages get, instead of requiring your own copy of clayhandlebars:
+
+```javascript
+const { handlebars, wrapPartial } = require('amphora-html');
+
+handlebars.registerPartial('my-partial', handlebars.compile(wrapPartial('my-partial', source), { preventIndent: true }));
+const html = handlebars.compile(template, { preventIndent: true })(data);
+```
+
+It is the `handlebars` module that clayhandlebars requires, so whatever you register on it is seen by the pages too.
+
 ### Amphora HTML Plugins
 
 

package/index.js

@@ -9,3 +9,5 @@ module.exports.addResolveMedia = setup.addResolveMedia;
 module.exports.addHelpers = setup.addHelpers;
 module.exports.addPlugins = setup.addPlugins;
 module.exports.configureRender = setup.configureRender;
+module.exports.handlebars = setup.handlebars;
+module.exports.wrapPartial = setup.wrapPartial;

package/lib/clone-deep.js

@@ -0,0 +1,181 @@
+'use strict';
+
+const { types } = require('util'),
+  { isObject, assignValue } = require('./utils'),
+  toString = Object.prototype.toString,
+  // what gets copied; anything else (functions, errors, promises, weak maps...)
+  // stays the same object, or becomes {} when it is the value given
+  CLONEABLE = new Set([
+    '[object Arguments]', '[object Array]', '[object ArrayBuffer]', '[object Boolean]',
+    '[object DataView]', '[object Date]', '[object Float32Array]', '[object Float64Array]',
+    '[object Int8Array]', '[object Int16Array]', '[object Int32Array]', '[object Map]',
+    '[object Number]', '[object Object]', '[object RegExp]', '[object Set]', '[object String]',
+    '[object Symbol]', '[object Uint8Array]', '[object Uint8ClampedArray]', '[object Uint16Array]',
+    '[object Uint32Array]'
+  ]);
+
+/**
+ * @param {ArrayBuffer} buffer
+ * @returns {ArrayBuffer}
+ */
+function cloneArrayBuffer(buffer) {
+  const result = new buffer.constructor(buffer.byteLength);
+
+  new Uint8Array(result).set(new Uint8Array(buffer));
+  return result;
+}
+
+/**
+ * An empty object of the same kind, for the kinds that are not plain objects or arrays
+ *
+ * @param {Object} value
+ * @param {string} tag
+ * @returns {Object}
+ */
+function initCloneByTag(value, tag) { // eslint-disable-line complexity
+  const Ctor = value.constructor;
+
+  switch (tag) {
+    case '[object ArrayBuffer]':
+      return cloneArrayBuffer(value);
+    case '[object Boolean]':
+    case '[object Date]':
+      return new Ctor(+value);
+    case '[object DataView]':
+      return new Ctor(cloneArrayBuffer(value.buffer), value.byteOffset, value.byteLength);
+    case '[object Number]':
+    case '[object String]':
+      return new Ctor(value);
+    case '[object RegExp]': {
+      const result = new Ctor(value.source, /\w*$/.exec(value));
+
+      result.lastIndex = value.lastIndex;
+      return result;
+    }
+    case '[object Map]':
+    case '[object Set]':
+      return new Ctor();
+    case '[object Symbol]':
+      return Object(Symbol.prototype.valueOf.call(value));
+    default:
+      // typed arrays
+      return new Ctor(cloneArrayBuffer(value.buffer), value.byteOffset, value.length);
+  }
+}
+
+/**
+ * An empty object with the prototype of `value`, unless `value` is a prototype
+ * itself or its constructor is not a function
+ *
+ * @param {Object} value
+ * @returns {Object}
+ */
+function initCloneObject(value) {
+  const Ctor = value.constructor,
+    proto = Object.getPrototypeOf(value),
+    isPrototype = value === (typeof Ctor === 'function' && Ctor.prototype || Object.prototype);
+
+  return typeof Ctor === 'function' && !isPrototype && isObject(proto) ? Object.create(proto) : {};
+}
+
+/**
+ * An array of the same kind and length, with what RegExp#exec adds to its results
+ *
+ * @param {Array} array
+ * @returns {Array}
+ */
+function initCloneArray(array) {
+  const result = new array.constructor(array.length);
+
+  if (array.length && typeof array[0] === 'string' && Object.hasOwn(array, 'index')) {
+    result.index = array.index;
+    result.input = array.input;
+  }
+
+  return result;
+}
+
+/**
+ * Own enumerable keys, symbols included
+ *
+ * @param {Object} value
+ * @returns {Array}
+ */
+function ownKeys(value) {
+  return Object.keys(value).concat(Object.getOwnPropertySymbols(value).filter((symbol) => Object.prototype.propertyIsEnumerable.call(value, symbol)));
+}
+
+/**
+ * @param {*} value
+ * @param {Object} [parent]  the object `value` was read from
+ * @param {Map} copies  the copy of every object copied so far
+ * @returns {*}
+ */
+function baseClone(value, parent, copies) { // eslint-disable-line complexity
+  if (!isObject(value)) {
+    return value;
+  }
+
+  const isArray = Array.isArray(value);
+  let result;
+
+  if (isArray) {
+    result = initCloneArray(value);
+  } else {
+    const tag = toString.call(value),
+      isFunction = tag === '[object Function]' || tag === '[object GeneratorFunction]';
+
+    if (Buffer.isBuffer(value)) {
+      // a view of the same memory, as lodash's cloneDeep gave
+      return value.subarray();
+    }
+
+    if (tag === '[object Object]' || tag === '[object Arguments]' || isFunction && !parent) {
+      result = isFunction ? {} : initCloneObject(value);
+    } else if (CLONEABLE.has(tag)) {
+      result = initCloneByTag(value, tag);
+    } else {
+      return parent ? value : {};
+    }
+  }
+
+  // an object met before (shared or circular) gets the same copy
+  if (copies.has(value)) {
+    return copies.get(value);
+  }
+  copies.set(value, result);
+
+  if (types.isSet(value)) {
+    value.forEach((item) => result.add(baseClone(item, value, copies)));
+  } else if (types.isMap(value)) {
+    value.forEach((item, key) => result.set(key, baseClone(item, value, copies)));
+  }
+
+  if (isArray) {
+    // every index, holes included
+    for (let index = 0; index < value.length; index++) {
+      assignValue(result, index, baseClone(value[index], value, copies));
+    }
+  } else {
+    for (const key of ownKeys(value)) {
+      assignValue(result, key, baseClone(value[key], value, copies));
+    }
+  }
+
+  return result;
+}
+
+/**
+ * A deep copy, made the way lodash's cloneDeep made it: objects keep their
+ * prototype, a shared or circular object is copied once, Dates, RegExps, Maps,
+ * Sets, typed arrays and boxed values are copied, and functions, errors and
+ * other objects that can't be copied are kept as they are.
+ *
+ * @param {*} value
+ * @returns {*}
+ */
+function cloneDeep(value) {
+  return baseClone(value, undefined, new Map());
+}
+
+module.exports = cloneDeep;

package/lib/files.js

@@ -0,0 +1,66 @@
+'use strict';
+
+// What the renderer asks the file system. Every answer is remembered for the
+// life of the process, as with nymag-fs: a file added later is not seen, and
+// each file is read once.
+
+const fs = require('fs'),
+  path = require('path'),
+  { memoize } = require('./utils');
+
+/**
+ * @param {string} filename
+ * @returns {boolean}
+ */
+function fileExists(filename) {
+  try {
+    return !!fs.statSync(filename);
+  } catch (e) {
+    return false;
+  }
+}
+
+/**
+ * @param {string} file
+ * @returns {boolean}
+ */
+function isDirectory(file) {
+  try {
+    return fs.statSync(file).isDirectory();
+  } catch (e) {
+    return false;
+  }
+}
+
+/**
+ * The files of a folder, without folders, tests and documentation
+ *
+ * @param {string} dir
+ * @returns {string[]}
+ */
+function getFiles(dir) {
+  try {
+    return fs.readdirSync(dir)
+      .filter((file) => !isDirectory(path.join(dir, file)) &&
+        file.indexOf('.test.') === -1 && // ignore test files
+        file.indexOf('.md') === -1); // ignore documentation files
+  } catch (e) {
+    return [];
+  }
+}
+
+/**
+ * The contents of a file
+ *
+ * @param {string} file
+ * @returns {Promise<string>}
+ */
+function readFilePromise(file) {
+  return new Promise((resolve, reject) => {
+    fs.readFile(file, 'utf8', (err, data) => err ? reject(err) : resolve(data));
+  });
+}
+
+module.exports.fileExists = memoize(fileExists);
+module.exports.getFiles = memoize(getFiles);
+module.exports.readFilePromise = memoize(readFilePromise);

package/lib/media.js

@@ -1,17 +1,14 @@
 'use strict';
 
-const _ = require('lodash'),
-  path = require('path'),
-  files = require('nymag-fs'),
-  bluebird = require('bluebird'),
+const path = require('path'),
+  files = require('./files'),
   setup = require('./setup'),
   styleguide = require('./styleguide'),
-  url = require('url'),
+  { isObject, toList } = require('./utils'),
   STYLE_TAG = 'style',
   SCRIPT_TAG = 'scripts',
-  ASYNC_SCRIPT_TAG = 'async',
-  DEFER_SCRIPT_TAG = 'defer',
-  ASYNC_DEFER_SCRIPT_TAG = 'async-defer',
+  MODULE_SCRIPT_TAG = 'module',
+  MODULEPRELOAD_TAG = 'modulepreload',
   MEDIA_DIRECTORY = path.join(process.cwd(), 'public');
 
 /**
@@ -150,47 +147,49 @@ function appendMediaToBottom(scripts, html) {
   return splice(html, index, scripts);
 }
 
-function injectTags(fileArray, site, tag) {
+/**
+ * Build inline <link>/<script> tags for an array of asset paths. Used by edit
+ * mode (where assets are loaded individually rather than bundled) and by the
+ * Vite ESM pipeline (module / modulepreload).
+ *
+ * @param {string[]} fileArray  asset paths
+ * @param {string} tag  one of STYLE_TAG, SCRIPT_TAG, MODULE_SCRIPT_TAG, MODULEPRELOAD_TAG
+ * @returns {Promise<string>}  newline-joined tag string
+ */
+function injectTags(fileArray, tag) {
   var buster = module.exports.cacheBuster ? `?version=${module.exports.cacheBuster}` : '';
+  // When omitCacheBusterOnModules is enabled, content-hashed ESM files omit the
+  // ?version= query string — the hash in the filename already provides cache busting.
+  // Defaults to false so existing deployments are unaffected.
+  var moduleBuster = module.exports.omitCacheBusterOnModules ? '' : buster;
 
-  return bluebird.resolve(_.map(fileArray, function (file) {
+  return Promise.resolve(toList(fileArray).map(function (file) {
     if (tag === STYLE_TAG) {
       return `<link rel="stylesheet" type="text/css" href="${file}${buster}">`;
-    } else if (tag === ASYNC_SCRIPT_TAG) {
-      return `<script async src="${file}" type="text/javascript"></script>`;
-    } else if (tag === DEFER_SCRIPT_TAG) {
-      return `<script defer src="${file}" type="text/javascript"></script>`;
-    } else if (tag === ASYNC_DEFER_SCRIPT_TAG) {
-      return `<script async defer src="${file}" type="text/javascript"></script>`;
-    } else {
-      return `<script type="text/javascript" src="${file}${buster}"></script>`;
+    } else if (tag === MODULE_SCRIPT_TAG) {
+      return `<script type="module" src="${file}${moduleBuster}"></script>`;
+    } else if (tag === MODULEPRELOAD_TAG) {
+      // <link rel="modulepreload"> tells the browser to fetch ESM scripts early,
+      // during HTML parsing, before reaching the <script> tags at </body>.
+      return `<link rel="modulepreload" href="${file}${moduleBuster}">`;
     }
+
+    // Default: classic <script src=...> for SCRIPT_TAG and any other value.
+    return `<script type="text/javascript" src="${file}${buster}"></script>`;
   }).join('\n'));
 }
 
 /**
- * Filter the components rendered in this request, removing Webpack-managed
- * assets so that we can fall back on Browserify.
+ * Wait for the values of an object, the way Bluebird's props did
  *
- * @param {Object} state - Amphora render state.
- * @returns {string[]} - A list of components not available through Webpack.
+ * @param {Object} obj  values or promises for them
+ * @returns {Promise<Object>}  the same keys with the values
  */
-function filterManifestComponents(state) {
-  const site = state.locals.site,
-    assetDir = site && site.assetDir || MEDIA_DIRECTORY,
-    manifestName = site && site.manifestName || 'assets-manifest.json',
-    manifestFile = path.resolve(path.join(assetDir, manifestName));
-  let manifest;
-
-  try {
-    manifest = files.tryRequire(manifestFile);
-  } catch (err) {
-    return state._components;
-  }
-
+function props(obj) {
+  const keys = Object.keys(obj);
 
-  return state._components
-    .filter(componentName => !manifest.hasOwnProperty(`${ componentName }.js`));
+  return Promise.all(keys.map((key) => obj[key]))
+    .then((values) => Object.fromEntries(keys.map((key, i) => [key, values[i]])));
 }
 
 /**
@@ -202,7 +201,6 @@ function getMediaMap(state) {
   return {
     styles: module.exports.getStyleFiles(state),
     scripts: module.exports.getScriptFiles(state),
-    manifestAssets: module.exports.getManifestAssets(state)
   };
 }
 
@@ -220,7 +218,7 @@ function getStyleFiles(state) {
     assetPath = site && site.assetPath || '',
     assetHost = site && site.assetHost || '',
     siteStyleguide = site && site.styleguide,
-    layoutName = _.get(state, '_layoutData.name');
+    layoutName = state._layoutData?.name;
   let cssFilePaths = [], layoutBasePath;
 
   // legacy behavior: load <component>.css and <component>.<site>.css
@@ -303,7 +301,7 @@ function getScriptFiles(state) {
     assetPath = site && site.assetPath || '',
     assetHost = site && site.assetHost || '';
 
-  return filterManifestComponents(state)
+  return state._components
     .reduce((prev, name) => {
       prev.push(
         path.join(assetDir, 'js', `${name}.js`),
@@ -316,36 +314,6 @@ function getScriptFiles(state) {
     .map(pathJoin(assetHost, assetPath, assetDir));
 }
 
-/**
- * Read the asset manifest generated by the `clay pack` bundling command and
- * check for scripts which match the rendered component names. The manifest for
- * each asset lists its complete set of dependencies, so we dedupe them.
- * Webpack's runtime is added to the beginning of the list, downstream legacy
- * globals and Clay CLI's init script to the end.
- *
- * @param {Object} state - Amphora's render state.
- * @return {string[]} A list of component assets.
- */
-function getManifestAssets(state) {
-  const site = state.locals.site,
-    assetDir = site && site.assetDir || MEDIA_DIRECTORY,
-    assetHost = site && site.assetHost || '/',
-    manifestName = site && site.manifestName || 'assets-manifest.json',
-    manifestFile = path.resolve(path.join(assetDir, manifestName));
-  let manifest;
-
-  try {
-    manifest = files.tryRequire(manifestFile);
-  } catch (err) {
-    return [];
-  }
-
-  const entrypoints = _.get(manifest, 'entrypoints', []);
-  const scriptFiles = _.flatMap(entrypoints, entrypoint => _.get(entrypoint, 'assets.js', []));
-
-  return scriptFiles.map(script => url.resolve(assetHost, script));
-}
-
 /**
  * Trim the path on the file system bythe link of the
  * asset directory and then join it with either the assetHost
@@ -375,9 +343,17 @@ function pathJoin(assetHost, assetPath, assetDir) {
  * @param {string} [cacheBuster]
  */
 function configure(options, cacheBuster = '') {
-  if (options && _.isObject(options)) {
+  if (options && isObject(options)) {
     module.exports.editStylesTags = options.styles || false;
     module.exports.editScriptsTags = options.scripts || false;
+    // modulepreload: when true, <link rel="modulepreload"> hints are injected
+    // into <head> for ESM scripts, and ?version= is omitted from module URLs
+    // since content-hashed filenames already provide cache busting.
+    // Opt-in only — defaults to false for backwards compatibility.
+    if (options.modulepreload !== undefined) {
+      module.exports.modulepreload = !!options.modulepreload;
+      module.exports.omitCacheBusterOnModules = !!options.modulepreload;
+    }
   } else {
     module.exports.editStylesTags = options;
     module.exports.editScriptsTags = options;
@@ -397,11 +373,12 @@ function configure(options, cacheBuster = '') {
  * @param  {Object} state
  * @return {Function}
  */
+/* eslint-disable complexity */
 function injectScriptsAndStyles(state) {
   const { locals } = state;
 
   return function (html) {
-    var mediaMap = {};
+    var mediaMap;
 
     // Check that HTML is string
     if (typeof html !== 'string') {
@@ -412,26 +389,50 @@ function injectScriptsAndStyles(state) {
     mediaMap = module.exports.getMediaMap(state);
 
     // allow site to change the media map before applying it
+    // Expose rendered component names so resolveMedia can do per-component script resolution
+    // (e.g. pack-next manifest lookup) without needing a reference to the full state object.
+    locals._components = state._components;
     if (setup.resolveMedia) mediaMap = setup.resolveMedia(mediaMap, locals) || mediaMap;
 
+    // moduleScripts: ESM scripts (e.g. from esbuild pack-next) that need type="module"
+    const moduleScriptFiles = mediaMap.moduleScripts || [];
+
+    mediaMap.moduleScripts = moduleScriptFiles.length
+      ? injectTags(moduleScriptFiles, MODULE_SCRIPT_TAG)
+      : Promise.resolve(false);
+
+    // modulePreloads: <link rel="modulepreload"> hints for <head>.
+    // Only active when configure({ modulepreload: true }) has been called — opt-in so
+    // sites not using the clay build pipeline are completely unaffected.
+    const modulePreloadFiles = module.exports.modulepreload
+      ? mediaMap.modulePreloads || []
+      : [];
+
+    mediaMap.modulePreloads = modulePreloadFiles.length
+      ? injectTags(modulePreloadFiles, MODULEPRELOAD_TAG)
+      : Promise.resolve(false);
+
     if (!locals.edit) {
       mediaMap.styles = combineFileContents(mediaMap.styles, 'public/css', '/css/', STYLE_TAG);
-      mediaMap.scripts = !!mediaMap.manifestAssets && mediaMap.manifestAssets.length > 0
-        ? injectTags(mediaMap.manifestAssets, locals.site, SCRIPT_TAG)
-        : combineFileContents(mediaMap.scripts, 'public/js', '/js/', SCRIPT_TAG);
+      mediaMap.scripts = combineFileContents(mediaMap.scripts, 'public/js', '/js/', SCRIPT_TAG);
     } else {
-      mediaMap.styles = module.exports.editStylesTags ? injectTags(mediaMap.styles, locals.site, STYLE_TAG) : combineFileContents(mediaMap.styles, 'public/css', '/css/', STYLE_TAG);
-      mediaMap.scripts = module.exports.editScriptsTags ? injectTags(mediaMap.scripts, locals.site, SCRIPT_TAG) : combineFileContents(mediaMap.scripts, 'public/js', '/js/', SCRIPT_TAG);
+      mediaMap.styles = module.exports.editStylesTags ? injectTags(mediaMap.styles, STYLE_TAG) : combineFileContents(mediaMap.styles, 'public/css', '/css/', STYLE_TAG);
+      mediaMap.scripts = module.exports.editScriptsTags ? injectTags(mediaMap.scripts, SCRIPT_TAG) : combineFileContents(mediaMap.scripts, 'public/js', '/js/', SCRIPT_TAG);
     }
 
-    return bluebird.props(mediaMap)
+    return props(mediaMap)
       .then(combinedFiles => {
+        // modulepreload hints go first in <head>, before CSS, so the browser can
+        // start fetching ESM scripts at the earliest possible moment.
+        html = combinedFiles.modulePreloads ? appendMediaToTop(combinedFiles.modulePreloads, html) : html;
         html = combinedFiles.styles ? appendMediaToTop(combinedFiles.styles, html) : html; // If there are styles, append them
+        html = combinedFiles.moduleScripts ? appendMediaToBottom(combinedFiles.moduleScripts, html) : html; // ESM module scripts (type="module")
         html = combinedFiles.scripts ? appendMediaToBottom(combinedFiles.scripts, html) : html; // If there are scripts, append them
         return html; // Return the compiled HTML
       });
   };
 }
+/* eslint-enable complexity */
 
 module.exports.injectScriptsAndStyles = injectScriptsAndStyles;
 module.exports.getMediaMap = getMediaMap;
@@ -439,8 +440,11 @@ module.exports.cacheBuster = '';
 module.exports.configure = configure;
 module.exports.editStylesTags = false;
 module.exports.editScriptsTags = false;
+// Opt-in flags for the clay build (esbuild) pipeline.
+// Enable via configure({ modulepreload: true }).
+module.exports.modulepreload = false;
+module.exports.omitCacheBusterOnModules = false;
 
 // For testing
-module.exports.getManifestAssets = getManifestAssets;
 module.exports.getScriptFiles = getScriptFiles;
 module.exports.getStyleFiles = getStyleFiles;

package/lib/render.js

@@ -1,11 +1,11 @@
 'use strict';
 
-const _ = require('lodash'),
-  mediaService = require('./media'),
+const mediaService = require('./media'),
   clayUtils = require('clayutils'),
-  bluebird = require('bluebird'),
   styleguide = require('./styleguide'),
-  setup = require('./setup');
+  setup = require('./setup'),
+  cloneDeep = require('./clone-deep'),
+  { assign, pick, toList } = require('./utils');
 
 let { getIndices, getSchemaPath, getComponentPath, getLayoutPath } = require('amphora-fs'),
   log = require('./log').setup({ file: __filename }),
@@ -18,18 +18,24 @@ let { getIndices, getSchemaPath, getComponentPath, getLayoutPath } = require('am
  * @param {String} ref
  * @param {Object} data
  * @param {Object} locals
- * @returns {Object} data
+ * @returns {Promise<Object>} data
  */
-function applyRenderHooks(ref, data, locals) {
+async function applyRenderHooks(ref, data, locals) {
   // skip render hooks in edit mode
   if (locals.edit) {
-    return bluebird.resolve(data);
+    return data;
   }
 
-  return bluebird.filter(setup.plugins, (plugin) => plugin.render)
-    .reduce((val, plugin) => {
-      return plugin.render(ref, val, locals);
-    }, data);
+  const plugins = setup.plugins.filter((plugin) => plugin.render);
+  // with no data, the first plugin stands in for it and its hook is skipped,
+  // as Bluebird's reduce did (a model.js `render` that returns nothing gets here)
+  let val = data === undefined ? await plugins.shift() : await data;
+
+  for (const plugin of plugins) {
+    val = await plugin.render(ref, val, locals);
+  }
+
+  return val;
 }
 
 /**
@@ -38,6 +44,9 @@ function applyRenderHooks(ref, data, locals) {
  *
  * @param {String} ref
  * @param {Object} locals
+ * @param {Object} res
+ * @param {String} self  Clay ref of the component being rendered, e.g.
+ *   "site.com/_components/article/instances/foo"
  * @returns {Function}
  */
 function applyPostRenderHooks(ref, locals, res, self) {
@@ -76,17 +85,29 @@ function makeHtml(state) {
 
     // At the final stage of rendering we need to smoosh
     // all the data together with the state.
-    _.assign(state, _data);
+    assign(state, _data);
 
     // send clone of state/data to be used by kiln so kiln doesn't load component data that was mutated by hbs templates
     if (state.locals.edit) {
-      _.assign(state, { _componentData: _.cloneDeep(_data) });
+      state._componentData = cloneDeep(_data);
     }
 
     return rootPartial(state);
   };
 }
 
+/**
+ * The styleguide of the site, `_default` when it has none
+ *
+ * @param  {Object} meta
+ * @return {String}
+ */
+function getStyleguideName(meta) {
+  const name = meta.locals?.site?.styleguide;
+
+  return name === undefined ? '_default' : name;
+}
+
 /**
  * Construct the object that is needed by Kiln for rendering in
  * edit mode. Requires reading from the file system.
@@ -117,16 +138,16 @@ function makeState(data, meta) {
 
   // grab the component variations and make available via the state
   // note: if styleguide isn't set, this gets variations from the '_default' styleguide
-  initialState._componentVariations = styleguide.getVariations(_.get(meta, 'locals.site.styleguide', '_default'));
+  initialState._componentVariations = styleguide.getVariations(getStyleguideName(meta));
 
   if (meta.locals.edit) {
     initialState._envVars = ENV_VARS;
-    initialState._componentSchemas = _.map(componentList, (name) => {
+    initialState._componentSchemas = toList(componentList).map((name) => {
       return { name, schema: getSchemaPath(getComponentPath(name)) };
     });
   }
 
-  return  _.assign(initialState, _.pick(meta, ['locals', '_layoutRef']));
+  return Object.assign(initialState, pick(meta, ['locals', '_layoutRef']));
 }
 
 /**
@@ -182,8 +203,12 @@ function logTime(hrStart, msg, route) {
   };
 }
 
-function configure({ editAssetTags, cacheBuster }) {
-  mediaService.configure(editAssetTags, cacheBuster);
+function configure({ editAssetTags, cacheBuster, modulepreload }) {
+  const mediaOptions = editAssetTags && typeof editAssetTags === 'object'
+    ? Object.assign({}, editAssetTags, modulepreload !== undefined ? { modulepreload } : {})
+    : editAssetTags;
+
+  mediaService.configure(mediaOptions, cacheBuster);
 }
 
 /**
@@ -193,7 +218,7 @@ function configure({ editAssetTags, cacheBuster }) {
  * @param {Array} vars
  */
 function addEnvVars(vars) {
-  ENV_VARS = _.pick(process.env, vars);
+  ENV_VARS = pick(process.env, vars);
   log('info', 'env vars registered with amphora html');
 }