🚀 HTML Template Tag Transform to eliminate poor transpilation issues

build-system/babel-plugins/babel-plugin-transform-html-template/index.js

@@ -0,0 +1,68 @@
+/**
+ * Copyright 2018 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.
+ */
+
+const {minify} = require('html-minifier');
+
+function optimizeLiteralOutput(templateLiteral) {
+  if (templateLiteral.quasis.length !== 1) {
+    console/* OK */.log('Improperly formatted `html` tagged template literal' +
+      ', more than one template element present.');
+    return null;
+  }
+  return minify(templateLiteral.quasis[0].value.cooked, {
+    removeComments: true,
+    collapseWhitespace: true,
+    removeAttributeQuotes: true,
+  });
+}
+
+module.exports = function(babel) {
+  const {types: t} = babel;
+
+  return {
+    name: 'transform-html-templates',
+    visitor: {
+      TaggedTemplateExpression(path) {
+        if (t.isIdentifier(path.node.tag, {name: 'html'})) {
+          const template = optimizeLiteralOutput(path.node.quasi);
+
+          if (template !== null) {
+            const outputArguments = [
+              t.arrayExpression([t.stringLiteral(template)]),
+            ];
+            path.replaceWith(
+                t.callExpression(t.identifier('html'), outputArguments)
+            );
+          }
+        } else if (t.isCallExpression(path.node.tag) &&
+                   t.isIdentifier(path.node.tag.callee, {name: 'htmlFor'})) {
+          const template = optimizeLiteralOutput(path.node.quasi);
+
+          if (template !== null) {
+            const wrapperMethodArguments = path.node.tag.arguments;
+            const wrapperMethod = t.callExpression(
+                t.identifier('htmlFor'), wrapperMethodArguments
+            );
+            const outputArguments = [
+              t.arrayExpression([t.stringLiteral(template)]),
+            ];
+            path.replaceWith(t.callExpression(wrapperMethod, outputArguments));
+          }
+        }
+      },
+    },
+  };
+};

build-system/babel-plugins/babel-plugin-transform-html-template/test/fixtures/transform-assertions/direct/input.js

@@ -0,0 +1,86 @@
+/**
+ * Copyright 2018 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.
+ */
+
+console.log(html`html usage`);
+console.log(html`html usage
+multiline`);
+console.log(html`<p active="true">Attribute Quote Removal</p>`);
+console.log(html`<p data-order-state="new 'thing'">Impossible to Remove Quotes</p>`);
+console.log(html`<p>
+  <span>html usage</span>
+  <span>more spans</span>
+</p>`);
+console.log(html` <p>
+  <span>html usage</span>
+  <span>whitespace before entry tag</span>
+</p>`);
+console.log(html`<p>
+  <span>html usage</span>
+  <span>whitespace after entry tag</span>
+</p>  `);
+console.log(html` <p>
+  <span>html usage</span>
+  <span>whitespace before and after entry tag</span>
+</p>  `);
+console.log(html`<!-- Test Comment to Remove -->
+<p>
+  <span>html usage</span>
+  <span>comment before entry tag</span>
+</p>`);
+console.log(html`<p>
+  <span>html usage</span>
+  <span>comment after entry tag</span>
+</p><!-- Test Comment to Remove -->`);
+console.log(html`<p>
+  <!-- Test Comment to Remove -->
+  <span>html usage</span>
+  <span>with comment sibling</span>
+</p>`);
+console.log(htmlFor(element)`html usage`);
+console.log(htmlFor(element)`html usage
+multiline`);
+console.log(htmlFor(element)`<p active="true">Attribute Quote Removal</p>`);
+console.log(htmlFor(element)`<p data-order-state="new 'thing'">Impossible to Remove Quotes</p>`);
+console.log(htmlFor(element)`<p>
+  <span>html usage</span>
+  <span>more spans</span>
+</p>`);
+console.log(htmlFor(element)` <p>
+  <span>html usage</span>
+  <span>whitespace before entry tag</span>
+</p>`);
+console.log(htmlFor(element)`<p>
+  <span>html usage</span>
+  <span>whitespace after entry tag</span>
+</p>  `);
+console.log(htmlFor(element)` <p>
+  <span>html usage</span>
+  <span>whitespace before and after entry tag</span>
+</p>  `);
+console.log(htmlFor(element)`<!-- Test Comment to Remove -->
+<p>
+  <span>html usage</span>
+  <span>comment before entry tag</span>
+</p>`);
+console.log(htmlFor(element)`<p>
+  <span>html usage</span>
+  <span>comment after entry tag</span>
+</p><!-- Test Comment to Remove -->`);
+console.log(htmlFor(element)`<p>
+  <!-- Test Comment to Remove -->
+  <span>html usage</span>
+  <span>with comment sibling</span>
+</p>`);

build-system/babel-plugins/babel-plugin-transform-html-template/test/fixtures/transform-assertions/direct/options.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["../../../../../babel-plugin-transform-html-template"]
+}

build-system/babel-plugins/babel-plugin-transform-html-template/test/fixtures/transform-assertions/direct/output.js

@@ -0,0 +1,37 @@
+/**
+ * Copyright 2018 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.
+ */
+console.log(html(["html usage"]));
+console.log(html(["html usage multiline"]));
+console.log(html(["<p active=true>Attribute Quote Removal</p>"]));
+console.log(html(["<p data-order-state=\"new 'thing'\">Impossible to Remove Quotes</p>"]));
+console.log(html(["<p><span>html usage</span> <span>more spans</span></p>"]));
+console.log(html(["<p><span>html usage</span> <span>whitespace before entry tag</span></p>"]));
+console.log(html(["<p><span>html usage</span> <span>whitespace after entry tag</span></p>"]));
+console.log(html(["<p><span>html usage</span> <span>whitespace before and after entry tag</span></p>"]));
+console.log(html(["<p><span>html usage</span> <span>comment before entry tag</span></p>"]));
+console.log(html(["<p><span>html usage</span> <span>comment after entry tag</span></p>"]));
+console.log(html(["<p><span>html usage</span> <span>with comment sibling</span></p>"]));
+console.log(htmlFor(element)(["html usage"]));
+console.log(htmlFor(element)(["html usage multiline"]));
+console.log(htmlFor(element)(["<p active=true>Attribute Quote Removal</p>"]));
+console.log(htmlFor(element)(["<p data-order-state=\"new 'thing'\">Impossible to Remove Quotes</p>"]));
+console.log(htmlFor(element)(["<p><span>html usage</span> <span>more spans</span></p>"]));
+console.log(htmlFor(element)(["<p><span>html usage</span> <span>whitespace before entry tag</span></p>"]));
+console.log(htmlFor(element)(["<p><span>html usage</span> <span>whitespace after entry tag</span></p>"]));
+console.log(htmlFor(element)(["<p><span>html usage</span> <span>whitespace before and after entry tag</span></p>"]));
+console.log(htmlFor(element)(["<p><span>html usage</span> <span>comment before entry tag</span></p>"]));
+console.log(htmlFor(element)(["<p><span>html usage</span> <span>comment after entry tag</span></p>"]));
+console.log(htmlFor(element)(["<p><span>html usage</span> <span>with comment sibling</span></p>"]));

build-system/babel-plugins/babel-plugin-transform-html-template/test/fixtures/transform-assertions/indirect/input.js

@@ -0,0 +1,20 @@
+/**
+ * Copyright 2018 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.
+ */
+
+const x = html;
+console.log(x`html usage`);
+const html = htmlFor(element);
+console.log(html`html usage`);

build-system/babel-plugins/babel-plugin-transform-html-template/test/fixtures/transform-assertions/indirect/options.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["../../../../../babel-plugin-transform-html-template"]
+}

build-system/babel-plugins/babel-plugin-transform-html-template/test/fixtures/transform-assertions/indirect/output.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright 2018 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.
+ */
+const x = html;
+console.log(x`html usage`);
+const html = htmlFor(element);
+console.log(html(["html usage"]));

build-system/babel-plugins/babel-plugin-transform-html-template/test/fixtures/transform-assertions/invalid/input.js

@@ -0,0 +1,22 @@
+/**
+ * Copyright 2018 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.
+ */
+
+console.log(html`html ${foo}`);
+console.log(html`html ${foo} another`);
+console.log(html`html ${foo} another ${bar} thing`);
+console.log(htmlFor(element)`htmlFor ${foo}`);
+console.log(htmlFor(element)`html ${foo} another`);
+console.log(htmlFor(element)`html ${foo} another ${bar} thing`);

build-system/babel-plugins/babel-plugin-transform-html-template/test/fixtures/transform-assertions/invalid/options.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["../../../../../babel-plugin-transform-html-template"]
+}

build-system/babel-plugins/babel-plugin-transform-html-template/test/fixtures/transform-assertions/invalid/output.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright 2018 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.
+ */
+console.log(html`html ${foo}`);
+console.log(html`html ${foo} another`);
+console.log(html`html ${foo} another ${bar} thing`);
+console.log(htmlFor(element)`htmlFor ${foo}`);
+console.log(htmlFor(element)`html ${foo} another`);
+console.log(htmlFor(element)`html ${foo} another ${bar} thing`);

build-system/babel-plugins/babel-plugin-transform-html-template/test/fixtures/transform-assertions/other-template-literals/input.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright 2018 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.
+ */
+
+console.log(`template literal`);
+const stringReplacement = 'yo';
+console.log(`template (${stringReplacement}) literal`);
+const numericReplacement = 1;
+console.log(`template (${numericReplacement}) literal`);
+function test(string) {
+  return string;
+}
+console.log(test`string`);

build-system/babel-plugins/babel-plugin-transform-html-template/test/fixtures/transform-assertions/other-template-literals/options.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["../../../../../babel-plugin-transform-html-template"]
+}

build-system/babel-plugins/babel-plugin-transform-html-template/test/fixtures/transform-assertions/other-template-literals/output.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright 2018 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.
+ */
+console.log(`template literal`);
+const stringReplacement = 'yo';
+console.log(`template (${stringReplacement}) literal`);
+const numericReplacement = 1;
+console.log(`template (${numericReplacement}) literal`);
+
+function test(string) {
+  return string;
+}
+
+console.log(test`string`);

build-system/babel-plugins/babel-plugin-transform-html-template/test/index.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright 2018 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.
+ */
+
+const runner = require('@babel/helper-plugin-test-runner').default;
+
+runner(__dirname);

build-system/build.conf.js

@@ -17,6 +17,8 @@
 const defaultPlugins = [
   require.resolve(
       './babel-plugins/babel-plugin-transform-amp-asserts'),
+  require.resolve(
+      './babel-plugins/babel-plugin-transform-html-template'),
   require.resolve(
       './babel-plugins/babel-plugin-transform-parenthesize-expression'),
 ];

package.json

@@ -110,6 +110,7 @@
     "gulp-watch": "5.0.1",
     "gulp-webserver": "0.9.1",
     "gzip-size": "5.0.0",
+    "html-minifier": "3.5.21",
     "is-running": "2.1.0",
     "jest": "23.6.0",
     "jest-dot-reporter": "1.0.7",