@quintype/framework 7.30.2-update-amp-optimizer.3 → 7.30.2

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [7.30.2](https://github.com/quintype/quintype-node-framework/compare/v7.30.1...v7.30.2) (2024-09-13)
+
+
+### Bug Fixes
+
+* **Amp story:** pass amp optimizer toggle to preload hero image ([#439](https://github.com/quintype/quintype-node-framework/issues/439)) ([c943095](https://github.com/quintype/quintype-node-framework/commit/c943095a25000377f94b709df1b75ccfed3983df))
+
 ### [7.30.1](https://github.com/quintype/quintype-node-framework/compare/v7.30.0...v7.30.1) (2024-08-14)
 
 ## [7.30.0](https://github.com/quintype/quintype-node-framework/compare/v7.29.1...v7.30.0) (2024-07-30)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/framework",
-  "version": "7.30.2-update-amp-optimizer.3",
+  "version": "7.30.2",
   "description": "Libraries to help build Quintype Node.js apps",
   "main": "index.js",
   "engines": {
@@ -30,8 +30,8 @@
   },
   "homepage": "https://github.com/quintype/quintype-node-framework#readme",
   "dependencies": {
-    "@ampproject/toolbox-optimizer": "^2.10.1",
-    "@quintype/amp": "^2.19.1",
+    "@ampproject/toolbox-optimizer": "2.8.3",
+    "@quintype/amp": "^2.19.2",
     "@quintype/backend": "2.5.1",
     "@quintype/components": "^3.5.0",
     "@quintype/prerender-node": "^3.2.26",

package/server/amp/handlers/story-page.js

@@ -1,15 +1,15 @@
-const urlLib = require('url')
-const set = require('lodash/set')
-const get = require('lodash/get')
-const isEmpty = require('lodash/isEmpty')
-const cloneDeep = require('lodash/cloneDeep')
-const merge = require('lodash/merge')
-const { Story, AmpConfig } = require('../../impl/api-client-impl')
-const { optimize, getDomainSpecificOpts } = require('../helpers')
-const { storyToCacheKey } = require('../../caching')
-const { addCacheHeadersToResult } = require('../../handlers/cdn-caching')
-const { getRedirectUrl } = require('../../../server/redirect-url-helper')
-const { getAmpPageBasePath } = require('../helpers/get-amp-page-base-path')
+const urlLib = require("url");
+const set = require("lodash/set");
+const get = require("lodash/get");
+const isEmpty = require("lodash/isEmpty");
+const cloneDeep = require("lodash/cloneDeep");
+const merge = require("lodash/merge");
+const { Story, AmpConfig } = require("../../impl/api-client-impl");
+const { optimize, getDomainSpecificOpts } = require("../helpers");
+const { storyToCacheKey } = require("../../caching");
+const { addCacheHeadersToResult } = require("../../handlers/cdn-caching");
+const { getRedirectUrl } = require("../../../server/redirect-url-helper");
+const { getAmpPageBasePath } = require("../helpers/get-amp-page-base-path");
 
 /**
  * ampStoryPageHandler gets all the things needed and calls "ampifyStory" function (which comes from ampLib)
@@ -22,7 +22,7 @@ const { getAmpPageBasePath } = require('../helpers/get-amp-page-base-path')
  * @category AmpHandler
  */
 
-async function ampStoryPageHandler (
+async function ampStoryPageHandler(
   req,
   res,
   next,
@@ -30,86 +30,86 @@ async function ampStoryPageHandler (
     client,
     config,
     domainSlug,
-    seo = '',
+    seo = "",
     cdnProvider = null,
-    ampLibrary = require('@quintype/amp'),
-    additionalConfig = require('../../publisher-config'),
-    InfiniteScrollAmp = require('../helpers/infinite-scroll'),
+    ampLibrary = require("@quintype/amp"),
+    additionalConfig = require("../../publisher-config"),
+    InfiniteScrollAmp = require("../helpers/infinite-scroll"),
     isVisualStory = false,
     ...rest
   }
 ) {
   try {
-    const opts = cloneDeep(rest)
+    const opts = cloneDeep(rest);
     const isCorrectAmpPath = isVisualStory
       ? req.path.startsWith(`/ampstories`)
-      : req.path.startsWith(`${getAmpPageBasePath(opts, config)}/`)
+      : req.path.startsWith(`${getAmpPageBasePath(opts, config)}/`);
 
-    if (!isCorrectAmpPath) return next()
-    const redirectUrls = opts && opts.redirectUrls
-    const getEnableAmp = get(opts, ['enableAmp'], true)
-    const enableAmp = typeof getEnableAmp === 'function' ? opts.enableAmp(config) : getEnableAmp
+    if (!isCorrectAmpPath) return next();
+    const redirectUrls = opts && opts.redirectUrls;
+    const getEnableAmp = get(opts, ["enableAmp"], true);
+    const enableAmp = typeof getEnableAmp === "function" ? opts.enableAmp(config) : getEnableAmp;
 
-    if (typeof redirectUrls === 'function' || (redirectUrls && Object.keys(redirectUrls).length > 0)) {
-      await getRedirectUrl(req, res, next, { redirectUrls, config })
+    if (typeof redirectUrls === "function" || (redirectUrls && Object.keys(redirectUrls).length > 0)) {
+      await getRedirectUrl(req, res, next, { redirectUrls, config });
     }
 
-    const story = await Story.getStoryBySlug(client, req.params['0'])
-    const isAmpDisabled = get(story, ['metadata', 'story-attributes', 'disable-amp-for-single-story', '0'], 'false')
+    const story = await Story.getStoryBySlug(client, req.params["0"]);
+    const isAmpDisabled = get(story, ["metadata", "story-attributes", "disable-amp-for-single-story", "0"], "false");
 
-    if (!isVisualStory && (!enableAmp || isAmpDisabled === 'true')) {
-      const ampPageBasePath = getAmpPageBasePath(opts, config)
+    if (!isVisualStory && (!enableAmp || isAmpDisabled === "true")) {
+      const ampPageBasePath = getAmpPageBasePath(opts, config);
       const redirectUrl = `/${req.params[0]}`.startsWith(ampPageBasePath)
-        ? `/${req.params[0]}`.replace(ampPageBasePath, '')
-        : `/${req.params[0]}`
+        ? `/${req.params[0]}`.replace(ampPageBasePath, "")
+        : `/${req.params[0]}`;
 
-      return res.redirect(301, redirectUrl)
+      return res.redirect(301, redirectUrl);
     }
 
-    const domainSpecificOpts = getDomainSpecificOpts(opts, domainSlug)
-    const url = urlLib.parse(req.url, true)
-    const { ampifyStory, unsupportedStoryElementsPresent } = ampLibrary
+    const domainSpecificOpts = getDomainSpecificOpts(opts, domainSlug);
+    const url = urlLib.parse(req.url, true);
+    const { ampifyStory, unsupportedStoryElementsPresent } = ampLibrary;
     // eslint-disable-next-line no-return-await
-    const ampConfig = await config.memoizeAsync('amp-config', async () => await AmpConfig.getAmpConfig(client))
-    let relatedStoriesCollection
-    let relatedStories = []
+    const ampConfig = await config.memoizeAsync("amp-config", async () => await AmpConfig.getAmpConfig(client));
+    let relatedStoriesCollection;
+    let relatedStories = [];
 
-    if (!story) return next()
-    if (ampConfig['related-collection-id'])
-      relatedStoriesCollection = await client.getCollectionBySlug(ampConfig['related-collection-id'])
+    if (!story) return next();
+    if (ampConfig["related-collection-id"])
+      relatedStoriesCollection = await client.getCollectionBySlug(ampConfig["related-collection-id"]);
     if (relatedStoriesCollection && relatedStoriesCollection.items) {
-      const storiesToTake = get(domainSpecificOpts, ['featureConfig', 'relatedStories', 'storiesToTake'], 5)
+      const storiesToTake = get(domainSpecificOpts, ["featureConfig", "relatedStories", "storiesToTake"], 5);
       relatedStories = relatedStoriesCollection.items
-        .filter(item => item.type === 'story' && item.id !== story['story-content-id'])
+        .filter((item) => item.type === "story" && item.id !== story["story-content-id"])
         .slice(0, storiesToTake)
-        .map(item => item.story)
+        .map((item) => item.story);
     }
     if (relatedStories.length) {
-      set(domainSpecificOpts, ['featureConfig', 'relatedStories', 'stories'], relatedStories)
+      set(domainSpecificOpts, ["featureConfig", "relatedStories", "stories"], relatedStories);
     }
 
     if (
       unsupportedStoryElementsPresent(story) &&
-      ampConfig.ampConfig['invalid-elements-strategy'] === 'redirect-to-web-version'
+      ampConfig.ampConfig["invalid-elements-strategy"] === "redirect-to-web-version"
     )
-      return res.redirect(story.url)
+      return res.redirect(story.url);
 
-    const timezone = get(additionalConfig, ['publisher', 'timezone'], null)
-    const seoInstance = typeof seo === 'function' ? seo(config, 'story-page-amp') : seo
+    const timezone = get(additionalConfig, ["publisher", "timezone"], null);
+    const seoInstance = typeof seo === "function" ? seo(config, "story-page-amp") : seo;
     const seoTags =
-      seoInstance && seoInstance.getMetaTags(config, 'story-page-amp', { data: { story, timezone }, config }, { url })
+      seoInstance && seoInstance.getMetaTags(config, "story-page-amp", { data: { story, timezone }, config }, { url });
 
-    const infiniteScrollConfig = get(opts, ['featureConfig', 'infiniteScroll'], '')
-    const infiniteScrollSource = get(infiniteScrollConfig, ['source'], 'collection')
-    const inlineConfig = get(infiniteScrollConfig, ['inlineConfig'], '')
-    const remoteConfigEndpoint = get(infiniteScrollConfig, ['remoteConfigEndpoint'], '')
+    const infiniteScrollConfig = get(opts, ["featureConfig", "infiniteScroll"], "");
+    const infiniteScrollSource = get(infiniteScrollConfig, ["source"], "collection");
+    const inlineConfig = get(infiniteScrollConfig, ["inlineConfig"], "");
+    const remoteConfigEndpoint = get(infiniteScrollConfig, ["remoteConfigEndpoint"], "");
 
-    let infiniteScrollInlineConfig = []
+    let infiniteScrollInlineConfig = [];
 
-    if (infiniteScrollSource === 'custom') {
+    if (infiniteScrollSource === "custom") {
       if (!inlineConfig || !remoteConfigEndpoint)
-        throw new Error("Required params of 'custom' source (inlineConfig /remoteConfigEndpoint) is missing!!")
-      infiniteScrollInlineConfig = await inlineConfig()
+        throw new Error("Required params of 'custom' source (inlineConfig /remoteConfigEndpoint) is missing!!");
+      infiniteScrollInlineConfig = await inlineConfig();
     } else {
       const infiniteScrollAmp = new InfiniteScrollAmp({
         opts,
@@ -117,67 +117,56 @@ async function ampStoryPageHandler (
         ampConfig,
         publisherConfig: config,
         client,
-        infiniteScrollSource
-      })
+        infiniteScrollSource,
+      });
       infiniteScrollInlineConfig = await infiniteScrollAmp.getInitialInlineConfig({
-        storyId: story['story-content-id']
-      })
+        storyId: story["story-content-id"],
+      });
     }
-    if (infiniteScrollInlineConfig instanceof Error) return next(infiniteScrollInlineConfig)
+    if (infiniteScrollInlineConfig instanceof Error) return next(infiniteScrollInlineConfig);
     if (infiniteScrollInlineConfig) {
       set(
         domainSpecificOpts,
-        ['featureConfig', 'infiniteScroll', 'infiniteScrollInlineConfig'],
+        ["featureConfig", "infiniteScroll", "infiniteScrollInlineConfig"],
         infiniteScrollInlineConfig
-      )
+      );
     }
-    const mergedAdditionalConfig = {}
+    const mergedAdditionalConfig = {};
     if (opts.getAdditionalConfig && opts.getAdditionalConfig instanceof Function) {
       const fetchedAdditionalConfig = await opts.getAdditionalConfig({
         story,
         apiConfig: config.config,
         ampApiConfig: ampConfig.ampConfig,
-        publisherConfig: additionalConfig
-      })
-      merge(mergedAdditionalConfig, additionalConfig, fetchedAdditionalConfig)
+        publisherConfig: additionalConfig,
+      });
+      merge(mergedAdditionalConfig, additionalConfig, fetchedAdditionalConfig);
     }
-
+    const optimizeAmpHtml = get(domainSpecificOpts, ["featureConfig", "optimizeAmpHtml"], true);
     const ampHtml = ampifyStory({
       story,
       publisherConfig: config.config,
       ampConfig: ampConfig.ampConfig,
       additionalConfig: isEmpty(mergedAdditionalConfig) ? additionalConfig : mergedAdditionalConfig,
-      opts: { ...domainSpecificOpts, domainSlug },
-      seo: seoTags ? seoTags.toString() : ''
-    })
-    if (ampHtml instanceof Error) return next(ampHtml)
+      opts: { ...domainSpecificOpts, domainSlug, optimizeAmpHtml },
+      seo: seoTags ? seoTags.toString() : "",
+    });
+    if (ampHtml instanceof Error) return next(ampHtml);
 
-    res.set('Content-Type', 'text/html')
+    res.set("Content-Type", "text/html");
     addCacheHeadersToResult({
       res,
-      cacheKeys: storyToCacheKey(config['publisher-id'], story),
+      cacheKeys: storyToCacheKey(config["publisher-id"], story),
       cdnProvider,
-      config
-    })
-
-    const optimizeAmpHtml = get(domainSpecificOpts, ['featureConfig', 'optimizeAmpHtml'], true)
-    let finalResponse
-    if (optimizeAmpHtml) {
-      const startTime = performance.now()
-      finalResponse = await optimize(ampHtml)
-      const endTime = performance.now()
-      console.log(`aa--Time taken: ${endTime - startTime} milliseconds`)
-    } else {
-      const startTime = performance.now()
-      finalResponse = ampHtml
-      const endTime = performance.now()
-      console.log(`aa--Time taken: ${endTime - startTime} milliseconds`)
-    }
+      config,
+    });
+
+
+    const finalResponse = optimizeAmpHtml ? await optimize(ampHtml) : ampHtml;
 
-    return res.send(finalResponse)
+    return res.send(finalResponse);
   } catch (e) {
-    return next(e)
+    return next(e);
   }
 }
 
-module.exports = { ampStoryPageHandler }
+module.exports = { ampStoryPageHandler };

package/server/amp/helpers/optimize-amp-html.js

@@ -1,11 +1,15 @@
-const AmpOptimizer = require('@ampproject/toolbox-optimizer')
+const AmpOptimizer = require("@ampproject/toolbox-optimizer");
 
-const ampOptimizer = AmpOptimizer.create()
+const ampOptimizer = AmpOptimizer.create({
+  autoAddMandatoryTags: false,
+  autoExtensionImport: false,
+  preloadHeroImage: false,
+});
 
-async function optimize (ampHtml) {
-  const optimizedAmp = ampOptimizer.transformHtml(ampHtml)
+async function optimize(ampHtml) {
+  const optimizedAmp = ampOptimizer.transformHtml(ampHtml);
 
-  return optimizedAmp
+  return optimizedAmp;
 }
 
-module.exports = { optimize }
+module.exports = { optimize };