Merge branch 'main' into shoppingJSONValidation

3p/integration-lib.js

@@ -14,7 +14,7 @@ import {IntegrationAmpContext} from './ampcontext-integration';
 import {installEmbedStateListener, manageWin} from './environment';
 import {getAmpConfig, getEmbedType, getLocation} from './frame-metadata';
 
-import {urls} from '../src/config';
+import * as urls from '../src/config/urls';
 import {getSourceUrl, isProxyOrigin, parseUrlDeprecated} from '../src/url';
 
 /**

ads/alp/handler.js

@@ -3,7 +3,7 @@ import {parseQueryString} from '#core/types/string/url';
 
 import {dev} from '#utils/log';
 
-import {urls} from '../../src/config';
+import * as urls from '../../src/config/urls';
 import {openWindowDialog} from '../../src/open-window-dialog';
 import {
   addParamToUrl,

build-system/babel-config/minified-config.js

@@ -26,6 +26,7 @@ function getMinifiedConfig(buildFor = 'preact') {
 
   const plugins = [
     'optimize-objstr',
+    './build-system/babel-plugins/babel-plugin-deep-pure',
     './build-system/babel-plugins/babel-plugin-mangle-object-values',
     './build-system/babel-plugins/babel-plugin-jsx-style-object',
     getImportResolverPlugin(buildFor),

build-system/babel-plugins/babel-plugin-deep-pure/index.js

@@ -0,0 +1,89 @@
+const pureFnName = 'pure';
+const pureFnImportSourceRe = new RegExp(
+  '(^#|/)core/types/pure(\\.{js,jsx,ts,tsx})?$'
+);
+
+/**
+ * Deeply adds #__PURE__ comments to an expression passed to a function named
+ * `pure()`.
+ * @param {import('@babel/core')} babel
+ * @return {import('@babel/core').PluginObj}
+ */
+module.exports = function (babel) {
+  const {types: t} = babel;
+
+  /**
+   * @param {import('@babel/core').NodePath} path
+   * @return {boolean}
+   */
+  function referencesPureFnImport(path) {
+    if (!path.isIdentifier()) {
+      return false;
+    }
+    const binding = path.scope.getBinding(path.node.name);
+    if (!binding || binding.kind !== 'module') {
+      return false;
+    }
+    const bindingPath = binding.path;
+    const parent = bindingPath.parentPath;
+    if (
+      !parent?.isImportDeclaration() ||
+      !pureFnImportSourceRe.test(parent?.node.source.value)
+    ) {
+      return false;
+    }
+    return (
+      bindingPath.isImportSpecifier() &&
+      t.isIdentifier(bindingPath.node.imported, {name: pureFnName})
+    );
+  }
+
+  /**
+   * @param {import('@babel/core').NodePath<import('@babel/types').CallExpression>} path
+   * @return {boolean}
+   */
+  function isPureFnCallExpression(path) {
+    return (
+      path.node.arguments.length === 1 &&
+      referencesPureFnImport(path.get('callee'))
+    );
+  }
+
+  /** @param {import('@babel/core').NodePath} path */
+  function addPureComment(path) {
+    path.addComment('leading', ' #__PURE__ ');
+  }
+
+  /** @param {import('@babel/core').NodePath<import('@babel/types').CallExpression>} path */
+  function replaceWithFirstArgument(path) {
+    path.replaceWith(path.node.arguments[0]);
+  }
+
+  return {
+    name: 'deep-pure',
+    visitor: {
+      CallExpression(path) {
+        if (isPureFnCallExpression(path)) {
+          path.traverse({
+            NewExpression(path) {
+              addPureComment(path);
+            },
+            CallExpression(path) {
+              if (isPureFnCallExpression(path)) {
+                replaceWithFirstArgument(path);
+              } else {
+                addPureComment(path);
+              }
+            },
+            MemberExpression(path) {
+              throw path.buildCodeFrameError(
+                `${pureFnName}() expressions cannot contain member expressions`
+              );
+            },
+          });
+          replaceWithFirstArgument(path);
+        }
+      },
+    },
+  };
+};

build-system/babel-plugins/babel-plugin-deep-pure/test/fixtures/transform/error-member-expression/input.mjs

@@ -0,0 +1,2 @@
+import {pure} from '#core/types/pure';
+pure(error.memberExpression);

build-system/babel-plugins/babel-plugin-deep-pure/test/fixtures/transform/error-member-expression/options.json

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    "../../../.."
+  ],
+  "throws": "pure() expressions cannot contain member expressions"
+}

build-system/babel-plugins/babel-plugin-deep-pure/test/fixtures/transform/ignored-import-source/input.mjs

@@ -0,0 +1,4 @@
+import {pure} from 'something other than core/types/pure';
+const ignored = pure(
+  foo() || new Bar() || pure(pure(foo('bar', bar(), new Baz())) || 'foo')
+);

build-system/babel-plugins/babel-plugin-deep-pure/test/fixtures/transform/ignored-import-source/options.json

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "../../../.."
+  ]
+}

build-system/babel-plugins/babel-plugin-deep-pure/test/fixtures/transform/ignored-import-source/output.mjs

@@ -0,0 +1,2 @@
+import { pure } from 'something other than core/types/pure';
+const ignored = pure(foo() || new Bar() || pure(pure(foo('bar', bar(), new Baz())) || 'foo'));

build-system/babel-plugins/babel-plugin-deep-pure/test/fixtures/transform/ignored-not-import/input.mjs

@@ -0,0 +1,4 @@
+const pure = (v) => v;
+const ignored = pure(
+  foo() || new Bar() || pure(pure(foo('bar', bar(), new Baz())) || 'foo')
+);

build-system/babel-plugins/babel-plugin-deep-pure/test/fixtures/transform/ignored-not-import/options.json

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "../../../.."
+  ]
+}

build-system/babel-plugins/babel-plugin-deep-pure/test/fixtures/transform/ignored-not-import/output.mjs

@@ -0,0 +1,3 @@
+const pure = v => v;
+
+const ignored = pure(foo() || new Bar() || pure(pure(foo('bar', bar(), new Baz())) || 'foo'));

build-system/babel-plugins/babel-plugin-deep-pure/test/fixtures/transform/transform-aliased-path/input.mjs

@@ -0,0 +1,6 @@
+import {pure} from '#core/types/pure';
+const ignored = foo();
+const a = pure(
+  foo() || new Bar() || pure(pure(foo('bar', bar(), new Baz())) || 'foo')
+);
+const b = pure('foo');

build-system/babel-plugins/babel-plugin-deep-pure/test/fixtures/transform/transform-aliased-path/options.json

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "../../../.."
+  ]
+}

build-system/babel-plugins/babel-plugin-deep-pure/test/fixtures/transform/transform-aliased-path/output.mjs

@@ -0,0 +1,4 @@
+import { pure } from '#core/types/pure';
+const ignored = foo();
+const a = /* #__PURE__ */foo() || /* #__PURE__ */new Bar() || /* #__PURE__ */foo('bar', /* #__PURE__ */bar(), /* #__PURE__ */new Baz()) || 'foo';
+const b = 'foo';

build-system/babel-plugins/babel-plugin-deep-pure/test/fixtures/transform/transform-relative-path/input.mjs

@@ -0,0 +1,6 @@
+import {pure} from '../../../../../../../src/core/types/pure';
+const ignored = foo();
+const a = pure(
+  foo() || new Bar() || pure(pure(foo('bar', bar(), new Baz())) || 'foo')
+);
+const b = pure('foo');

build-system/babel-plugins/babel-plugin-deep-pure/test/fixtures/transform/transform-relative-path/options.json

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "../../../.."
+  ]
+}

build-system/babel-plugins/babel-plugin-deep-pure/test/fixtures/transform/transform-relative-path/output.mjs

@@ -0,0 +1,4 @@
+import { pure } from '../../../../../../../src/core/types/pure';
+const ignored = foo();
+const a = /* #__PURE__ */foo() || /* #__PURE__ */new Bar() || /* #__PURE__ */foo('bar', /* #__PURE__ */bar(), /* #__PURE__ */new Baz()) || 'foo';
+const b = 'foo';

build-system/babel-plugins/babel-plugin-deep-pure/test/index.js

@@ -0,0 +1,3 @@
+const runner = require('@babel/helper-plugin-test-runner').default;
+
+runner(__dirname);

build-system/eslint-rules/no-export-side-effect.js

@@ -11,7 +11,12 @@ module.exports = function (context) {
               return declarator.init;
             })
             .filter(function (init) {
-              return init && /(?:Call|New)Expression/.test(init.type);
+              return (
+                init &&
+                /(?:Call|New)Expression/.test(init.type) &&
+                // Allow pure()
+                init.callee?.name !== 'pure'
+              );
             })
             .forEach(function (init) {
               context.report({

build-system/eslint-rules/no-import-rename.js

@@ -30,6 +30,7 @@ const imports = {
     'setStyles',
   ],
   '#core/types/enum': ['mangleObjectValues'],
+  '#core/types/pure': ['pure'],
   '#experiments': ['isExperimentOn'],
   '#utils/log': ['user', 'dev'],
   '#preact/utils': ['propName', 'tabindexFromProps'],

build-system/server/app-utils.js

@@ -72,7 +72,7 @@ const isRtvMode = (serveMode) => {
  */
 const getCdnUrlRegExp = (pathPattern = '[^\'">]+') =>
   new RegExp(
-    `(https://cdn\\.ampproject\\.org)/${pathPattern}(\\.m?js|\\.css)`,
+    `(https://cdn\\.ampproject\\.org)/${pathPattern}(\\.json|\\.m?js|\\.css)`,
     'g'
   );
 
@@ -116,8 +116,9 @@ function replaceCdnJsUrls(mode, html, hostName, useMaxNames) {
     if (isRtv) {
       return CDNURLToRTVURL(url, mode, pathnames, extension).href;
     }
-    // CSS files are never output as .max.css
-    const useMaxNamesForFile = useMaxNames && extension !== '.css';
+    // Only JS files have "max" files. Even mjs files don't have an equivalent
+    // max file during "amp build".
+    const useMaxNamesForFile = useMaxNames && extension === '.js';
     const href = getHrefWithoutHost(
       replaceCDNURLPath(url, pathnames, extension, useMaxNamesForFile)
     );

build-system/server/app.js

@@ -1400,6 +1400,19 @@ app.get(
   }
 );
 
+/**
+ * Handle amp-story translation file requests with an rtv path.
+ * We need to make sure we only handle the amp-story requests since this
+ * can affect other tests with json requests.
+ */
+app.get('/dist/rtv/*/v0/amp-story*.json', async (req, _res, next) => {
+  const fileName = path.basename(req.path);
+  let filePath = 'https://cdn.ampproject.org/v0/' + fileName;
+  filePath = replaceUrls(SERVE_MODE, filePath);
+  req.url = filePath;
+  next();
+});
+
 if (argv.coverage === 'live') {
   app.get('/dist/amp.js', async (req, res) => {
     const ampJs = await fs.promises.readFile(`${pc.cwd()}${req.path}`);

build-system/test-configs/dep-check-config.js

@@ -79,7 +79,7 @@ exports.rules = [
     allowlist: [
       '3p/**->src/utils/log.js',
       '3p/**->src/url.js',
-      '3p/**->src/config.js',
+      '3p/**->src/config/urls.js',
       '3p/**->src/mode.js',
       '3p/polyfills.js->src/polyfills/math-sign.js',
       '3p/polyfills.js->src/polyfills/object-assign.js',

build-system/test-configs/forbidden-terms.js

@@ -633,7 +633,7 @@ const forbiddenTermsGlobal = {
       'build-system/tasks/build.js',
       'build-system/tasks/default-task.js',
       'build-system/tasks/dist.js',
-      'src/config.js',
+      'src/config/urls.js',
       'src/experiments/index.js',
       'src/mode.js',
       'src/core/mode/test.js',
@@ -922,7 +922,7 @@ const forbiddenTermsSrcInclusive = {
   '(cdn|3p)\\.ampproject\\.': {
     message:
       'The CDN domain should typically not be hardcoded in source ' +
-      'code. Use a property of urls from src/config.js instead.',
+      'code. Use urls from src/config/urls.js instead.',
     allowlist: [
       'ads/_a4a-config.js',
       'build-system/server/amp4test.js',
@@ -936,7 +936,7 @@ const forbiddenTermsSrcInclusive = {
       'build-system/tasks/performance/helpers.js',
       'src/3p-frame.js',
       'src/amp-story-player/amp-story-player-impl.js',
-      'src/config.js',
+      'src/config/urls.js',
       'testing/local-amp-chrome-extension/background.js',
       'tools/experiments/experiments.js',
       'validator/js/engine/htmlparser-interface.js',

examples/amp-story/amp-story-shopping.html

@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>Shopping</title>
+    <link rel="canonical" href="amps.html">
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
     <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>

examples/amp-story/animations-presets.html

@@ -190,8 +190,8 @@ <h1>zoom-out</h1>
     <!-- ## Pan-Left -->
     <amp-story-page id="pan-left">
       <amp-story-grid-layer template="fill">
-        <amp-img animate-in="pan-left" id="img-pan-left" translate-x="600px" animate-in-duration="4s" layout="fixed" src="https://picsum.photos/720/320?image=1026"
-          width="720" height="320">
+        <amp-img animate-in="pan-left" id="img-pan-left" translate-x="200px" animate-in-duration="4s" layout="fixed"  src="https://images.unsplash.com/photo-1648098470019-c103e39aa32b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80"
+        width="192" height="288">
         </amp-img>
       </amp-story-grid-layer>
       <amp-story-grid-layer template="fill">
@@ -202,8 +202,8 @@ <h1>pan-left</h1>
     <!-- ## Pan-Right -->
     <amp-story-page id="pan-right">
       <amp-story-grid-layer template="fill">
-        <amp-img animate-in="pan-right" animate-in-duration="4s" translate-x="200px" layout="fixed" src="https://picsum.photos/720/320?image=1026" width="720"
-          height="320">
+        <amp-img animate-in="pan-right" animate-in-duration="4s" translate-x="200px" layout="fixed" src="https://images.unsplash.com/photo-1644308251427-cd809dc65e4c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"
+        width="1920" height="1280">
         </amp-img>
       </amp-story-grid-layer>
       <amp-story-grid-layer template="fill">
@@ -214,8 +214,8 @@ <h1>pan-right</h1>
     <!-- ## Pan-Up -->
     <amp-story-page id="pan-up">
       <amp-story-grid-layer template="fill">
-        <amp-img animate-in="pan-up" animate-in-duration="4s" translate-y="100px" layout="fixed" src="https://picsum.photos/720/320?image=1026" width="720"
-          height="320">
+        <amp-img animate-in="pan-up" animate-in-duration="4s" translate-y="100px" layout="fixed" src="https://images.unsplash.com/photo-1648098470019-c103e39aa32b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80"
+        width="192" height="288">
         </amp-img>
       </amp-story-grid-layer>
       <amp-story-grid-layer template="fill">
@@ -226,8 +226,8 @@ <h1>pan-up</h1>
     <!-- ## Pan-Down -->
     <amp-story-page id="pan-down">
       <amp-story-grid-layer template="fill">
-        <amp-img animate-in="pan-down" animate-in-duration="4s" translate-y="100px" layout="fixed" src="https://picsum.photos/720/320?image=1026" width="720"
-          height="320">
+        <amp-img animate-in="pan-down" animate-in-duration="4s" translate-y="100px" layout="fixed" src="https://images.unsplash.com/photo-1644308251427-cd809dc65e4c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"
+        width="1920" height="1280">
         </amp-img>
       </amp-story-grid-layer>
       <amp-story-grid-layer template="fill">
@@ -245,8 +245,25 @@ <h1>pan-right</h1>
             animate-in="pan-right" animate-in-timing-function="ease-out"
             pan-scaling-factor=".9"
             translate-x="35px" animate-in-duration="3.5s"
-            id="img-pan-right" layout="responsive" src="https://picsum.photos/720/320?image=1026"
-            width="720" height="320">
+            id="img-pan-right" layout="responsive" src="https://images.unsplash.com/photo-1644308251427-cd809dc65e4c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"
+            width="1920" height="1280">
+          </amp-img>
+        </div>
+      </amp-story-grid-layer>
+    </amp-story-page>
+
+    <!-- ## Pan-Down with pan-scaling-factor attr -->
+    <amp-story-page id="pan-down-with-static-scale">
+      <amp-story-grid-layer template="vertical">
+        <h1>pan-down</h1>
+        <p>with pan-scaling-factor attr</p>
+        <div class="img-container" style="height: 120%">
+          <amp-img
+            animate-in="pan-down" animate-in-timing-function="ease-out"
+            pan-scaling-factor="0.9"
+            translate-y="35px" animate-in-duration="3.5s"
+            id="img-pan-down" layout="responsive" src="https://images.unsplash.com/photo-1644308251427-cd809dc65e4c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"
+            width="1920" height="1280">
           </amp-img>
         </div>
       </amp-story-grid-layer>

examples/visual-tests/amp-story/amp-story-shopping-landscape.html

@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>Shopping</title>
+    <link rel="canonical" href="amps.html">
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
     <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>

examples/visual-tests/amp-story/amp-story-shopping-lang-de.html

@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>Shopping</title>
+    <link rel="canonical" href="amps.html">
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
     <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>

examples/visual-tests/amp-story/amp-story-shopping-rtl.html

@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>Shopping</title>
+    <link rel="canonical" href="amps.html">
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
     <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>
     <script async src="https://cdn.ampproject.org/v0.js"></script>