Skip to content

Commit f5728c5

Browse files
erwinmombaysebastianbenz
erwinmombay
and
sebastianbenz
authored
follow up to the addition of AmpStoryCssTransformer (#1271)
* add lts test and make sure optimizeAmpStory is off by default * ttemp * temp * add amp-story optimized lts test * fix LTS path * add amp story sample to "valid-amp" specs * remove amp-story.html for now since validator is not updated yet * Update packages/optimizer/README.md Co-authored-by: Sebastian Benz <[email protected]> * remove amp-story.html for now since validator is not updated yet Co-authored-by: Sebastian Benz <[email protected]>
1 parent bcb4259 commit f5728c5

File tree

11 files changed

+188
-47
lines changed

11 files changed

+188
-47
lines changed

‎packages/optimizer/README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,7 @@ Available options are:
147147
- [markdown](#markdown)
148148
- [minify](#minify)
149149
- [optimizeAmpBind](#optimizeampbind)
150+
- [optimizeAmpStory](#optimizeampstory)
150151
- [optimizeHeroImages](#optimizeheroimages)
151152
- [preloadHeroImage](#preloadheroimage)
152153
- [separateKeyframes](#separateKeyframes)
@@ -314,6 +315,16 @@ Enables a considerably faster scanning method in `amp-bind`, by injecting a `i-a
314315
- default: `true`
315316
- used by: [OptimizeAmpBind](lib/transformers/OptimizeAmpBind.js)
316317

318+
### `optimizeAmpStory`
319+
320+
Enables AMP Story optimizations such as linking to the amp-story-1.0.css, and server side rendering
321+
attributes.
322+
323+
- name: `optimizeAmpStory`
324+
- valid options: `[true|false]`
325+
- default: `false`
326+
- used by: [AmpStoryCssTransformer](lib/transformers/AmpStoryCssTransformer.js)
327+
317328
#### `optimizeHeroImages`
318329

319330
Enables hero image optimization. Hero images will either be auto detected or you can explicitly mark these by adding the `data-hero` attribute:

‎packages/optimizer/lib/DomTransformer.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,10 @@ const TRANSFORMATIONS_AMP_FIRST = [
4040
// Inject a querySelectorAll query-able i-amphtml-binding attribute on elements with bindings.
4141
// This needs to run after AutoExtensionImporter.
4242
'OptimizeAmpBind',
43+
// Applies amp-story related optimizations such as appending a link[rel=stylesheet]
44+
// to the amp-story css, server side rendering attributes, and adding css polyfills
45+
// and fixes.
46+
'AmpStoryCssTransformer',
4347
// Applies server-side-rendering optimizations
4448
'ServerSideRendering',
4549
// Removes the boilerplate
@@ -129,6 +133,7 @@ const CONFIG_DEFAULT = {
129133
markdown: true,
130134
minify: true,
131135
optimizeAmpBind: true,
136+
optimizeAmpStory: false,
132137
optimizeHeroImages: true,
133138
separateKeyframes: true,
134139
};
@@ -140,6 +145,7 @@ const CONFIG_BUILD = Object.assign({}, CONFIG_DEFAULT, {
140145
markdown: true,
141146
minify: true,
142147
optimizeAmpBind: true,
148+
optimizeAmpStory: false,
143149
optimizeHeroImages: true,
144150
separateKeyframes: true,
145151
});
@@ -151,6 +157,7 @@ const CONFIG_RUNTIME = Object.assign({}, CONFIG_DEFAULT, {
151157
markdown: false,
152158
minify: false,
153159
optimizeAmpBind: true,
160+
optimizeAmpStory: false,
154161
optimizeHeroImages: true,
155162
separateKeyframes: false,
156163
});

‎packages/optimizer/lib/transformers/AmpStoryCssTransformer.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ const {
44
AMP_STORY_DVH_POLYFILL_ATTR,
55
isAmpStoryDvhPolyfillScript,
66
} = require('../AmpConstants');
7-
const {calculateHost} = require('../RuntimeHostHelper');
87
const {
98
insertText,
109
hasAttribute,
@@ -14,26 +13,27 @@ const {
1413
firstChildByTag,
1514
appendChild,
1615
} = require('../NodeUtils');
16+
const {AMP_CACHE_HOST} = require('../AmpConstants.js');
1717

1818
// This string should not be modified, even slightly. This string is strictly
1919
// checked by the validator.
2020
const AMP_STORY_DVH_POLYFILL_CONTENT =
21-
'"use strict";if(!self.CSS||!CSS.supports||!CSS.supports("height:1dvh")){function e(){document.documentElement.style.setProperty("--story-dvh",innerHeight/100+"px","important")}addEventListener("resize",e,{passive:!0}),e()})';
21+
'"use strict";if(!self.CSS||!CSS.supports||!CSS.supports("height:1dvh")){function e(){document.documentElement.style.setProperty("--story-dvh",innerHeight/100+"px","important")}addEventListener("resize",e,{passive:!0}),e()}';
2222

2323
const ASPECT_RATIO_ATTR = 'aspect-ratio';
2424

2525
class AmpStoryCssTransformer {
2626
constructor(config) {
2727
this.log_ = config.log.tag('AmpStoryCssTransformer');
2828

29-
this.enabled_ = !!config.optimizeAmpStory;
29+
this.enabled_ = config.optimizeAmpStory === true;
3030

3131
if (!this.enabled_) {
3232
this.log_.debug('disabled');
3333
}
3434
}
3535

36-
transform(root, params) {
36+
transform(root) {
3737
if (!this.enabled_) return;
3838

3939
const html = firstChildByTag(root, 'html');
@@ -69,9 +69,7 @@ class AmpStoryCssTransformer {
6969
// We can return early if no amp-story script is found.
7070
if (!hasAmpStoryScript) return;
7171

72-
const host = calculateHost(params);
73-
74-
appendAmpStoryCssLink(host, head);
72+
appendAmpStoryCssLink(head);
7573

7674
if (styleAmpCustom) {
7775
modifyAmpCustomCSS(styleAmpCustom);
@@ -135,11 +133,13 @@ function aspectRatioSSR(body) {
135133
}
136134
}
137135

138-
function appendAmpStoryCssLink(host, head) {
136+
function appendAmpStoryCssLink(head) {
139137
const ampStoryCssLink = createElement('link', {
140138
'rel': 'stylesheet',
141139
'amp-extension': 'amp-story',
142-
'href': `${host}/v0/amp-story-1.0.css`,
140+
// We rely on the `RewriteAmpUrls` transformer to modify this to
141+
// the correct LTS or correct rtv path.
142+
'href': `${AMP_CACHE_HOST}/v0/amp-story-1.0.css`,
143143
});
144144
appendChild(head, ampStoryCssLink);
145145
}

‎packages/optimizer/spec/end-to-end/EndToEndSpec.js

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ createSpec({
3434
name: 'End-to-End: Build Time Config',
3535
testDir: __dirname,
3636
tag: 'full',
37+
ignore: ['story-optimized'],
3738
validAmp: true,
3839
transformer: {
3940
transform: (tree, params) => {
@@ -53,7 +54,7 @@ createSpec({
5354
testDir: __dirname,
5455
tag: 'fast',
5556
validAmp: true,
56-
ignore: ['markdown', 'body-only'],
57+
ignore: ['markdown', 'body-only', 'story-optimized'],
5758
transformer: {
5859
transform: (tree, params) => {
5960
const ampOptimizer = new DomTransformer({
@@ -72,6 +73,7 @@ createSpec({
7273
name: 'End-to-End: LTS',
7374
testDir: __dirname,
7475
tag: 'lts',
76+
ignore: ['story-optimized'],
7577
validAmp: true,
7678
transformer: {
7779
transform: (tree, params) => {
@@ -92,6 +94,7 @@ createSpec({
9294
name: 'End-to-End: Paired AMP',
9395
testDir: __dirname,
9496
tag: 'paired',
97+
ignore: ['story-optimized'],
9598
transformer: {
9699
transform: (tree, params) => {
97100
const ampOptimizer = new DomTransformer({
@@ -104,3 +107,44 @@ createSpec({
104107
},
105108
},
106109
});
110+
111+
createSpec({
112+
name: 'End-to-End: AMP Story Optimized',
113+
testDir: __dirname,
114+
tag: 'amp-story-optimized',
115+
ignore: ['body-only', 'hello-world', 'markdown', 'story', 'trailing-template'],
116+
transformer: {
117+
transform: (tree, params) => {
118+
const ampOptimizer = new DomTransformer({
119+
...CONFIG_BUILD,
120+
cache: false,
121+
fetch,
122+
log,
123+
optimizeAmpStory: true,
124+
runtimeVersion: {currentVersion: () => Promise.resolve('123456789000000')},
125+
});
126+
return ampOptimizer.transformTree(tree, params);
127+
},
128+
},
129+
});
130+
131+
createSpec({
132+
name: 'End-to-End: AMP Story Optimized LTS',
133+
testDir: __dirname,
134+
tag: 'amp-story-optimized-lts',
135+
ignore: ['body-only', 'hello-world', 'markdown', 'story', 'trailing-template'],
136+
transformer: {
137+
transform: (tree, params) => {
138+
const ampOptimizer = new DomTransformer({
139+
...CONFIG_BUILD,
140+
cache: false,
141+
lts: true,
142+
fetch,
143+
log,
144+
optimizeAmpStory: true,
145+
runtimeVersion: {currentVersion: () => Promise.resolve('123456789000000')},
146+
});
147+
return ampOptimizer.transformTree(tree, params);
148+
},
149+
},
150+
});

‎packages/optimizer/spec/end-to-end/story-optimized/expected_output.amp-story-optimized-lts.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!doctype html>
2+
<html amp lang="en" i-amphtml-layout transformed="self;v=1">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
6+
<link as="script" crossorigin="anonymous" href="https://cdn.ampproject.org/lts/v0.mjs" rel="modulepreload"><style amp-runtime i-amphtml-version="123456789000000">/* ampproject.org/rtv v0.css */amp-img[i-amphtml-ssr]:not(.i-amphtml-element):not([layout=container])>*{display: block;}</style>
7+
<link rel="stylesheet" amp-extension="amp-story" href="https://cdn.ampproject.org/lts/v0/amp-story-1.0.css"><script async src="https://cdn.ampproject.org/lts/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/lts/v0.js" crossorigin="anonymous"></script><script amp-story-dvh-polyfill>"use strict";if(!self.CSS||!CSS.supports||!CSS.supports("height:1dvh")){function e(){document.documentElement.style.setProperty("--story-dvh",innerHeight/100+"px","important")}addEventListener("resize",e,{passive:!0}),e()}</script><script async custom-element="amp-story" src="https://cdn.ampproject.org/lts/v0/amp-story-1.0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/lts/v0/amp-story-1.0.js" crossorigin="anonymous" custom-element="amp-story"></script><style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
8+
<title>My Story</title>
9+
<link rel="canonical" href="helloworld.html"><style amp-custom>body {
10+
font-family: 'Roboto', sans-serif;
11+
}
12+
amp-story-page {
13+
background: white;
14+
}
15+
h1 {
16+
font-size: 2.875em;
17+
font-weight: normal;
18+
line-height: 1.174;
19+
text-transform: uppercase;
20+
}</style><script amp-onerror>[].slice.call(document.querySelectorAll("script[src*='/v0.js'],script[src*='/v0.mjs']")).forEach(function(s){s.onerror=function(){document.querySelector('style[amp-boilerplate]').textContent=''}})</script>
21+
</head>
22+
<body>
23+
<amp-story title="test" publisher="test" poster-portrait-src="test" publisher-logo-src="img.jpg" standalone class="i-amphtml-layout-container" i-amphtml-layout="container">
24+
<amp-story-page id="cover" class="i-amphtml-layout-container" i-amphtml-layout="container">
25+
<amp-story-grid-layer template="vertical" class="i-amphtml-layout-container" i-amphtml-layout="container">
26+
<h1>Hello World</h1>
27+
<p>This is the cover page of this story.</p>
28+
<amp-img data-hero src="https://amp.dev/static/samples/img/story_dog2.jpg" width="300" height="300" layout="responsive" alt class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
29+
<i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:100%"></i-amphtml-sizer>
30+
</amp-img>
31+
</amp-story-grid-layer>
32+
</amp-story-page>
33+
</amp-story>
34+
</body>
35+
</html>

‎packages/optimizer/spec/end-to-end/story-optimized/expected_output.amp-story-optimized.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!doctype html>
2+
<html amp lang="en" i-amphtml-layout transformed="self;v=1">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
6+
<link as="script" crossorigin="anonymous" href="https://cdn.ampproject.org/v0.mjs" rel="modulepreload"><style amp-runtime i-amphtml-version="123456789000000">/* ampproject.org/rtv v0.css */amp-img[i-amphtml-ssr]:not(.i-amphtml-element):not([layout=container])>*{display: block;}</style>
7+
<link rel="stylesheet" amp-extension="amp-story" href="https://cdn.ampproject.org/v0/amp-story-1.0.css"><script async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0.js" crossorigin="anonymous"></script><script amp-story-dvh-polyfill>"use strict";if(!self.CSS||!CSS.supports||!CSS.supports("height:1dvh")){function e(){document.documentElement.style.setProperty("--story-dvh",innerHeight/100+"px","important")}addEventListener("resize",e,{passive:!0}),e()}</script><script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-story-1.0.js" crossorigin="anonymous" custom-element="amp-story"></script><style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
8+
<title>My Story</title>
9+
<link rel="canonical" href="helloworld.html"><style amp-custom>body {
10+
font-family: 'Roboto', sans-serif;
11+
}
12+
amp-story-page {
13+
background: white;
14+
}
15+
h1 {
16+
font-size: 2.875em;
17+
font-weight: normal;
18+
line-height: 1.174;
19+
text-transform: uppercase;
20+
}</style><script amp-onerror>[].slice.call(document.querySelectorAll("script[src*='/v0.js'],script[src*='/v0.mjs']")).forEach(function(s){s.onerror=function(){document.querySelector('style[amp-boilerplate]').textContent=''}})</script>
21+
</head>
22+
<body>
23+
<amp-story title="test" publisher="test" poster-portrait-src="test" publisher-logo-src="img.jpg" standalone class="i-amphtml-layout-container" i-amphtml-layout="container">
24+
<amp-story-page id="cover" class="i-amphtml-layout-container" i-amphtml-layout="container">
25+
<amp-story-grid-layer template="vertical" class="i-amphtml-layout-container" i-amphtml-layout="container">
26+
<h1>Hello World</h1>
27+
<p>This is the cover page of this story.</p>
28+
<amp-img data-hero src="https://amp.dev/static/samples/img/story_dog2.jpg" width="300" height="300" layout="responsive" alt class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
29+
<i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:100%"></i-amphtml-sizer>
30+
</amp-img>
31+
</amp-story-grid-layer>
32+
</amp-story-page>
33+
</amp-story>
34+
</body>
35+
</html>

‎packages/optimizer/spec/end-to-end/story-optimized/input.html

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!--
2+
{
3+
"optimizeAmpStory": true
4+
}
5+
-->
6+
<!doctype html>
7+
<html amp lang="en">
8+
<head>
9+
<meta charset="utf-8">
10+
<script async src="https://cdn.ampproject.org/v0.js"></script>
11+
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
12+
<title>My Story</title>
13+
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
14+
<link rel="canonical" href="helloworld.html">
15+
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
16+
<style amp-custom>
17+
body {
18+
font-family: 'Roboto', sans-serif;
19+
}
20+
amp-story-page {
21+
background: white;
22+
}
23+
h1 {
24+
font-size: 2.875em;
25+
font-weight: normal;
26+
line-height: 1.174;
27+
text-transform: uppercase;
28+
}
29+
</style>
30+
</head>
31+
32+
<body>
33+
34+
<amp-story title="test" publisher="test" poster-portrait-src="test" publisher-logo-src="img.jpg" standalone>
35+
<amp-story-page id="cover">
36+
<amp-story-grid-layer template="vertical">
37+
<h1>Hello World</h1>
38+
<p>This is the cover page of this story.</p>
39+
<amp-img data-hero src="https://amp.dev/static/samples/img/story_dog2.jpg" width="300" height="300" layout="responsive" alt="" />
40+
</amp-story-grid-layer>
41+
</amp-story-page>
42+
</amp-story>
43+
</body>
44+
</html>

‎packages/optimizer/spec/transformers/experimental/AmpStoryCssTransformer/add_amp_story_dvh_polyfill_script/expected_output.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
66
<link href="https://example.com/favicon.ico" rel="icon">
77
<style amp-custom></style>
8-
<link rel="stylesheet" amp-extension="amp-story" href="https://cdn.ampproject.org/v0/amp-story-1.0.css"><script amp-story-dvh-polyfill>"use strict";if(!self.CSS||!CSS.supports||!CSS.supports("height:1dvh")){function e(){document.documentElement.style.setProperty("--story-dvh",innerHeight/100+"px","important")}addEventListener("resize",e,{passive:!0}),e()})</script>
8+
<link rel="stylesheet" amp-extension="amp-story" href="https://cdn.ampproject.org/v0/amp-story-1.0.css"><script amp-story-dvh-polyfill>"use strict";if(!self.CSS||!CSS.supports||!CSS.supports("height:1dvh")){function e(){document.documentElement.style.setProperty("--story-dvh",innerHeight/100+"px","important")}addEventListener("resize",e,{passive:!0}),e()}</script>
99
</head>
1010
<body>
1111
<amp-story standalone poster-portrait-src="http://url.example/" publisher-logo-src="http://url.example/" publisher title>

‎packages/optimizer/spec/transformers/experimental/AmpStoryCssTransformer/add_amp_story_link_stylesheet_lts/expected_output.html

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎packages/optimizer/spec/transformers/experimental/AmpStoryCssTransformer/add_amp_story_link_stylesheet_lts/input.html

Lines changed: 0 additions & 17 deletions
This file was deleted.

0 commit comments

Comments
 (0)