Add Markdown transformer

.gitignore

@@ -10,3 +10,4 @@ yarn-error.log*
 node_modules/
 .npm
 .eslintcache
+.vscode

packages/optimizer/lib/DomTransformer.js

@@ -27,6 +27,9 @@ const RuntimeVersion = require('@ampproject/toolbox-runtime-version/lib/RuntimeV
 const TRANSFORMATIONS_AMP_FIRST = [
   // Adds missing AMP tags
   'AddMandatoryTags',
+  // Optional Markdown compatibility
+  // needs to run before ServerSideRendering
+  'Markdown',
   // Adds missing AMP extensions
   'AutoExtensionImporter',
   // Applies server-side-rendering optimizations

packages/optimizer/lib/fetchImageDimensions.js

@@ -0,0 +1,63 @@
+/**
+ * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict';
+
+const isDependencyInstalled = require('./isDependencyInstalled');
+
+const MATCH_ABSOLUTE_URL = /^https?:\/\/|^\/\//i;
+
+function fetchImageDimensions(pathOrUrl) {
+  if (MATCH_ABSOLUTE_URL.test(pathOrUrl)) {
+    return fetchImageDimensionsFromUrl(pathOrUrl);
+  }
+  return fetchImageDimensionsFromFile(pathOrUrl);
+}
+
+function fetchImageDimensionsFromUrl(url) {
+  return probe(url);
+}
+
+async function fetchImageDimensionsFromFile(path) {
+  // AMP Optimizer might run in a browser
+  if (!isDependencyInstalled('fs')) {
+    throw new Error('No access to the file system');
+  }
+  const fs = require('fs');
+  if (!fs.existsSync(path)) {
+    throw new Error('Could not resolve file', path);
+  }
+  const stream = fs.createReadStream(path);
+  try {
+    return await probe(stream);
+  } finally {
+    stream.destroy();
+  }
+}
+
+function probe(input) {
+  if (!isDependencyInstalled('probe-image-size')) {
+    throw new Error('Missing optional dependency: probe-image-size');
+  }
+  return require('probe-image-size')(input);
+}
+
+module.exports = {
+  fetchImageDimensions,
+  fetchImageDimensionsFromFile,
+  fetchImageDimensionsFromUrl,
+};
+

packages/optimizer/lib/isDependencyInstalled.js

@@ -0,0 +1,9 @@
+function isDependencyInstalled(dependency) {
+  try {
+    require.resolve(dependency);
+    return true;
+  } catch (err) {
+    return false;
+  }
+}
+module.exports = isDependencyInstalled;

packages/optimizer/lib/transformers/AddBlurryImagePlaceholders.js

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+const isDependencyInstalled = require('../isDependencyInstalled');
+
 const {createElement, appendChild, nextNode, firstChildByTag} = require('../NodeUtils');
 const {URL} = require('url');
 
@@ -38,15 +40,6 @@ function escaper(match) {
   return ESCAPE_TABLE[match];
 }
 
-function isDependencyInstalled(dependency) {
-  try {
-    require.resolve(dependency);
-    return true;
-  } catch (err) {
-    return false;
-  }
-}
-
 /**
  * Adds placeholders for certain amp-img's and posters for amp-videos that are
  * blurry versions of the corresponding original source. The blur will be

packages/optimizer/lib/transformers/Markdown.js

@@ -0,0 +1,114 @@
+/**
+ * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+'use strict';
+
+const PathResolver = require('../PathResolver');
+const {fetchImageDimensions} = require('../fetchImageDimensions');
+const {remove, insertAfter, createElement, firstChildByTag, nextNode} = require('../NodeUtils');
+
+const DEFAULT_LAYOUT = 'intrinsic';
+const LAYOUT_MIN_WIDTH = 320; // minimum mobile device screen width
+
+/**
+ * Markdown - ensures markdown compatibility for input HTML
+ *
+ * This transformer adds out-of-the-box markdown support. This allows
+ * using AMP Optimizer to convert HTML documents created from Markdown
+ * files into valid AMP. A typical conversion flow would be:
+ *
+ * README.md => HTML => AMP Optimizer => valid AMP
+ *
+ * The only thing this transformer does is converting `<img>` tags into
+ * either `amp-img` or `amp-anim` tags. All other Markdown features are
+ * already supported by AMP. The transformer will try to resolve image
+ * dimensions from the actual files. Images larger than 320px will automatically
+ * get an intrinsic layout. For image detection to work, an optional dependency
+ * `probe-image-size` needs to be installed via NPM.
+ *
+ * This transformer supports the following options:
+ *
+ * - `markdown [Boolean]`: enables Markdown HTML support. Default is `false`.
+ * - `imageBasePath`: specifies a base path used to resolve an image during build,
+ *   this can be a file system path or URL prefix.
+ */
+class Markdown {
+  constructor(config) {
+    this.log = config.log;
+    this.enabled = !!config.markdown;
+    // used for resolving image files
+    this.pathResolver = new PathResolver(config.imageBasePath);
+  }
+  async transform(tree) {
+    if (!this.enabled) {
+      return;
+    }
+    const html = firstChildByTag(tree, 'html');
+    if (!html) {
+      return;
+    }
+    const body = firstChildByTag(html, 'body');
+    if (!body) {
+      return;
+    }
+    let node = body;
+    const promises = [];
+    while (node) {
+      if (node.tagName === 'img') {
+        promises.push(this.transformImg(node));
+      }
+      node = nextNode(node);
+    }
+    return Promise.all(promises);
+  }
+
+  async transformImg(imgNode) {
+    const src = imgNode.attribs && imgNode.attribs.src;
+    if (!src) {
+      return;
+    }
+    const resolvedSrc = this.pathResolver.resolve(src);
+    let dimensions;
+    try {
+      dimensions = await fetchImageDimensions(resolvedSrc);
+    } catch (error) {
+      this.log.warn(error.message);
+      // don't convert images we cannot resolve
+      return;
+    }
+    const ampImgOrAmpAnim = this.createAmpImgOrAmpAnim(dimensions, imgNode);
+    insertAfter(imgNode.parent, ampImgOrAmpAnim, imgNode);
+    remove(imgNode);
+  }
+
+  createAmpImgOrAmpAnim(dimensions, imgNode) {
+    const ampType = dimensions.type === 'gif' ? 'amp-anim' : 'amp-img';
+    const ampNode = createElement(ampType, imgNode.attribs);
+    // keep height and width if already specified
+    ampNode.attribs.width = imgNode.attribs.width || String(dimensions.width);
+    ampNode.attribs.height = imgNode.attribs.height || String(dimensions.height);
+    this.addLayout(ampNode, dimensions);
+    return ampNode;
+  }
+
+  addLayout(node, dimensions) {
+    if (dimensions.width < LAYOUT_MIN_WIDTH) {
+      return;
+    }
+    node.attribs.layout = DEFAULT_LAYOUT;
+  }
+}
+
+module.exports = Markdown;

packages/optimizer/package.json

@@ -23,6 +23,9 @@
     },
     "lru-cache": {
       "optional": true
+    },
+    "probe-image-size": {
+      "optional": true
     }
   },
   "dependencies": {

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

@@ -33,6 +33,7 @@ createSpec({
       const ampOptimizer = new DomTransformer({
         fetch,
         log,
+        markdown: true,
         runtimeVersion: {currentVersion: () => Promise.resolve('123456789000000')},
       });
       return ampOptimizer.transformTree(tree, params);
@@ -47,7 +48,6 @@ createSpec({
   transformer: {
     transform: (tree, params) => {
       const ampOptimizer = new DomTransformer({
-        compress: false,
         fetch,
         transformations: TRANSFORMATIONS_PAIRED_AMP,
         runtimeVersion: {currentVersion: () => Promise.resolve('123456789000000')},