diff --git a/packages/optimizer/lib/AmpConstants.js b/packages/optimizer/lib/AmpConstants.js index 5240e4b61..9c5334486 100644 --- a/packages/optimizer/lib/AmpConstants.js +++ b/packages/optimizer/lib/AmpConstants.js @@ -37,4 +37,27 @@ module.exports = { } return false; }, + isAmpStory: (head) => { + for (const node of head.children) { + if (isAmpScriptImport(node) && node.attribs['custom-element'] === 'amp-story') { + return true; + } + } + return false; + }, }; + +function isAmpScriptImport(scriptNode) { + if (scriptNode.tagName !== 'script') { + return false; + } + if (!scriptNode.attribs) { + return false; + } + const customElement = + scriptNode.attribs['custom-element'] || scriptNode.attribs['custom-template'] || ''; + if (!customElement.startsWith('amp-')) { + return false; + } + return true; +} diff --git a/packages/optimizer/lib/transformers/PreloadHeroImage.js b/packages/optimizer/lib/transformers/PreloadHeroImage.js index baa0a3656..2c9942874 100644 --- a/packages/optimizer/lib/transformers/PreloadHeroImage.js +++ b/packages/optimizer/lib/transformers/PreloadHeroImage.js @@ -26,7 +26,7 @@ const { } = require('../NodeUtils'); const {findMetaViewport, skipNodeAndChildren} = require('../HtmlDomHelper'); const {isValidImageSrcURL} = require('../URLUtils'); -const {isTemplate} = require('../AmpConstants'); +const amphtml = require('../AmpConstants'); // Images smaller than 150px are considered tiny const TINY_IMG_THRESHOLD = 150; @@ -72,10 +72,15 @@ class PreloadHeroImage { ); heroImageCount = DATA_HERO_MAX; } + const isAmpStory = amphtml.isAmpStory(head); for (let i = 0; i < heroImageCount; i++) { const heroImage = heroImages[i]; this.generatePreload(heroImage, head, referenceNode); - this.generateImg(heroImage.ampImg); + // AMP Stories don't support ssr'd amp-img yet + // See https://github.com/ampproject/amphtml/issues/29850 + if (!isAmpStory) { + this.generateImg(heroImage.ampImg); + } } } @@ -132,7 +137,7 @@ class PreloadHeroImage { if (!heroImageCandidate && heroImages.length === 0) { heroImageCandidate = this.isCandidateHeroImage(node); } - if (isTemplate(root)) { + if (amphtml.isTemplate(root)) { // Ignore images inside templates node = skipNodeAndChildren(node); } else { diff --git a/packages/optimizer/spec/end-to-end/story/expected_output.default.html b/packages/optimizer/spec/end-to-end/story/expected_output.default.html new file mode 100644 index 000000000..b189d2a92 --- /dev/null +++ b/packages/optimizer/spec/end-to-end/story/expected_output.default.html @@ -0,0 +1,37 @@ + + + + + + + + + + My Story + + + + + + +

Hello World

+

This is the cover page of this story.

+ + + + + + + + \ No newline at end of file diff --git a/packages/optimizer/spec/end-to-end/story/expected_output.lts.html b/packages/optimizer/spec/end-to-end/story/expected_output.lts.html new file mode 100644 index 000000000..9a00a9150 --- /dev/null +++ b/packages/optimizer/spec/end-to-end/story/expected_output.lts.html @@ -0,0 +1,37 @@ + + + + + + + + + + My Story + + + + + + +

Hello World

+

This is the cover page of this story.

+ + + + + + + + \ No newline at end of file diff --git a/packages/optimizer/spec/end-to-end/story/expected_output.paired.html b/packages/optimizer/spec/end-to-end/story/expected_output.paired.html new file mode 100644 index 000000000..ac3638ff0 --- /dev/null +++ b/packages/optimizer/spec/end-to-end/story/expected_output.paired.html @@ -0,0 +1,38 @@ + + + + + + + + + + My Story + + + + + + + +

Hello World

+

This is the cover page of this story.

+ + + + + + + + \ No newline at end of file diff --git a/packages/optimizer/spec/end-to-end/story/input.html b/packages/optimizer/spec/end-to-end/story/input.html new file mode 100644 index 000000000..18c4d1017 --- /dev/null +++ b/packages/optimizer/spec/end-to-end/story/input.html @@ -0,0 +1,39 @@ + + + + + + + My Story + + + + + + + + + + + +

Hello World

+

This is the cover page of this story.

+ + + + + + diff --git a/packages/optimizer/spec/helpers/TransformerRunner.js b/packages/optimizer/spec/helpers/TransformerRunner.js index f333584e1..8661740f4 100644 --- a/packages/optimizer/spec/helpers/TransformerRunner.js +++ b/packages/optimizer/spec/helpers/TransformerRunner.js @@ -13,6 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +const validator = require('amphtml-validator'); const {basename, join} = require('path'); const {writeFileContents, getFileContents, getDirectories} = require('../helpers/Utils.js'); @@ -47,6 +48,7 @@ module.exports = function (testConfig) { getDirectories(testConfig.testDir).forEach((testDir) => { it(basename(testDir), async (done) => { let params = TRANSFORMER_PARAMS; + const validatorInstance = await validator.getInstance(); // parse input and extract params let input = getFileContents(join(testDir, 'input.html')); @@ -86,6 +88,12 @@ module.exports = function (testConfig) { } else { expect(actualOutput).toBe(expectedOutput); } + if (testConfig.validAmp) { + const result = validatorInstance.validateString(actualOutput); + if (result.status !== 'PASS') { + fail(`Validation errors:\n\n ${JSON.stringify(result.errors, null, 2)}`); + } + } done(); }); });