🏗 Enable AMP Storybook on PR deploys (#30996)

### This change

Enables `examples/storybook/amp` on PR build deploys.

https://storage.googleapis.com/amp-test-website-1/amp_dist_83181/examples/storybook/amp/index.html?path=/story/amp-video-1-0--default

### Later

Slightly awkward that the binary source for the PR's build has to be picked manually. The Storybook addon could default to the custom URL instead.

build-system/tasks/pr-deploy-bot-utils.js

@@ -41,9 +41,13 @@ async function walk(dest) {
   return filelist;
 }
 
+function getBaseUrl() {
+  return `${hostNamePrefix}/amp_dist_${travisBuildNumber()}`;
+}
+
 async function replace(filePath) {
   const data = await fs.readFile(filePath, 'utf8');
-  const hostName = `${hostNamePrefix}/amp_dist_${travisBuildNumber()}`;
+  const hostName = getBaseUrl();
   const inabox = false;
   const storyV1 = true;
   const result = replaceUrlsAppUtil(
@@ -81,6 +85,7 @@ async function signalDistUpload(result) {
 }
 
 module.exports = {
+  getBaseUrl,
   replaceUrls,
   signalDistUpload,
 };

build-system/tasks/storybook/index.js

@@ -16,45 +16,51 @@
 'use strict';
 
 const argv = require('minimist')(process.argv.slice(2));
-const log = require('fancy-log');
+const path = require('path');
 const {createCtrlcHandler} = require('../../common/ctrlcHandler');
 const {defaultTask: runAmpDevBuildServer} = require('../default-task');
 const {execScriptAsync} = require('../../common/exec');
+const {getBaseUrl} = require('../pr-deploy-bot-utils');
 const {installPackages} = require('../../common/utils');
-const {yellow} = require('ansi-colors');
+const {isTravisPullRequestBuild} = require('../../common/travis');
+const {writeFileSync} = require('fs-extra');
 
 const ENV_PORTS = {
   amp: 9001,
   preact: 9002,
 };
 
+const repoDir = path.join(__dirname, '../../..');
+
 /**
- * @param {string} bin
  * @param {string} env 'amp' or 'preact'
+ * @return {string}
+ */
+const envConfigDir = (env) => path.join(__dirname, `${env}-env`);
+
+/**
+ * @param {string} bin
  * @param {...string} args
  * @return {!ChildProcess}
  */
-const execStorybookScriptAsync = (bin, env, ...args) =>
-  execScriptAsync(
-    `./node_modules/.bin/${bin} --config-dir ./${env}-env ${args.join(' ')}`,
-    {
-      stdio: [null, process.stdout, process.stderr],
-      cwd: __dirname,
-      env: process.env,
-    }
-  );
+const execLocalNodeBinAsync = (bin, ...args) =>
+  execScriptAsync(`./node_modules/.bin/${bin} ${args.join(' ')}`, {
+    stdio: [null, process.stdout, process.stderr],
+    cwd: __dirname,
+    env: process.env,
+  });
 
 /**
  * @param {string} env 'amp' or 'preact'
  * @return {!ChildProcess}
  */
 function launchEnv(env) {
   const {ci, 'storybook_port': storybookPort = ENV_PORTS[env]} = argv;
-  return execStorybookScriptAsync(
+  return execLocalNodeBinAsync(
     'start-storybook',
-    env,
+    `--config-dir ${envConfigDir(env)}`,
     '--quiet',
-    '--static-dir ../../../',
+    `--static-dir ${repoDir}/`,
     `--port ${storybookPort}`,
     ci ? '--ci' : ''
   );
@@ -65,19 +71,27 @@ function launchEnv(env) {
  * @return {?ChildProcess}
  */
 function buildEnv(env) {
-  if (env === 'amp') {
-    log(
-      yellow(
-        'WARNING: --build does not work with the `storybook/amp` environment.'
-      )
+  const configDir = envConfigDir(env);
+
+  if (env === 'amp' && isTravisPullRequestBuild()) {
+    // Allows PR deploys to reference built binaries.
+    writeFileSync(
+      `${configDir}/preview.js`,
+      // If you change this JS template, make sure to JSON.stringify every
+      // dynamic value. This prevents XSS and other types of garbling.
+      `// DO NOT${' '}SUBMIT.
+       // This preview.js file was generated for a specific PR build.
+       import {addParameters} from '@storybook/preact';
+       addParameters(${JSON.stringify({
+         ampBaseUrlOptions: [`${getBaseUrl()}/dist`],
+       })});`
     );
-    return null;
   }
-  log(yellow('Building `storybook/preact` only.'));
-  return execStorybookScriptAsync(
+
+  return execLocalNodeBinAsync(
     'build-storybook',
-    env,
-    `--output-dir ../../../examples/storybook/${env}`
+    `--config-dir ${configDir}`,
+    `--output-dir ${repoDir}/examples/storybook/${env}`
   );
 }
 

build-system/tasks/storybook/package.json

@@ -4,7 +4,7 @@
   "description": "Gulp storybook tasks",
   "main": "index.js",
   "dependencies": {
-    "@ampproject/storybook-addon": "1.1.4",
+    "@ampproject/storybook-addon": "1.1.5",
     "@babel/core": "7.9.0",
     "@babel/preset-react": "7.9.4",
     "@babel/runtime-corejs3": "7.9.2",