SSR template rendering #3 - re-format requests (#18189)

* fix AmpComponent format * lint * fix * add more * add /*review*/ for .innerHTML * comments * comments round 2 * comments round 3 * comments round 4 * revert one more * FIX TYPE
ampproject · Sep 25, 2018 · 5e46cc4 · 5e46cc4
1 parent bb88be6
commit 5e46cc4
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 35 deletions.
diff --git a/extensions/amp-form/0.1/amp-form.js b/extensions/amp-form/0.1/amp-form.js
@@ -53,6 +53,7 @@ import {installStylesForDoc} from '../../../src/style-installer';
 import {
   setupAMPCors,
   setupInit,
+  setupInput,
 } from '../../../src/utils/xhr-utils';
 import {toArray, toWin} from '../../../src/types';
 import {triggerAnalyticsEvent} from '../../../src/analytics';
@@ -526,8 +527,11 @@ export class AmpForm {
         }).then(() => {
           request = this.requestForFormFetch(
               dev().assertString(this.xhrAction_), this.method_);
-          setupInit(request.fetchOpt);
-          setupAMPCors(this.win_, request.xhrUrl, request.fetchOpt);
+          request.fetchOpt = setupInit(request.fetchOpt);
+          request.fetchOpt = setupAMPCors(
+              this.win_, request.xhrUrl, request.fetchOpt);
+          request.xhrUrl = setupInput(
+              this.win_, request.xhrUrl, request.fetchOpt);
           return this.ssrTemplateHelper_.fetchAndRenderTemplate(
               this.form_,
               request,

diff --git a/extensions/amp-list/0.1/amp-list.js b/extensions/amp-list/0.1/amp-list.js
@@ -322,7 +322,7 @@ export class AmpList extends AMP.BaseElement {
       const attributes = dict({
         'ampListAttributes': {
           'items': this.element.getAttribute('items') || 'items',
-          'singleItem': this.element.getAttribute('single-item'),
+          'singleItem': this.element.hasAttribute('single-item'),
           'maxItems': this.element.getAttribute('max-items'),
         },
       });

diff --git a/src/ssr-template-helper.js b/src/ssr-template-helper.js
@@ -47,9 +47,6 @@ export class SsrTemplateHelper {
     /** @private @const */
     this.templates_ = templates;
 
-    /** @private @const {!XMLSerializer} */
-    this.xmls_ = new XMLSerializer();
-
     /** @private @const */
     this.sourceComponent_ = sourceComponent;
   }
@@ -85,13 +82,7 @@ export class SsrTemplateHelper {
     element, request, opt_templates = null, opt_attributes = {}) {
     let mustacheTemplate;
     if (!opt_templates) {
-      const template = this.templates_.maybeFindTemplate(element);
-      if (template) {
-        // The document fragment can't be used in the message channel API thus
-        // serializeToString for a string representation of the dom tree.
-        mustacheTemplate = this.xmls_.serializeToString(
-            this.templates_.findTemplate(element));
-      }
+      mustacheTemplate = this.templates_.maybeFindTemplate(element);
     }
     return this.viewer_.sendMessageAwaitResponse(
         'viewerRenderTemplate',
@@ -105,42 +96,48 @@ export class SsrTemplateHelper {
 
   /**
    * @param {!FetchRequestDef} request
-   * @param {string|undefined} mustacheTemplate
+   * @param {?Element|undefined} mustacheTemplate
    * @param {?SsrTemplateDef=} opt_templates
    * @param {!Object=} opt_attributes
    * @return {!JsonObject}
    * @private
    */
   buildPayload_(
     request, mustacheTemplate, opt_templates, opt_attributes = {}) {
-    const ampComponent = dict({
-      'type': this.sourceComponent_,
-      'successTemplate': {
+    const ampComponent = dict({'type': this.sourceComponent_});
+
+    const successTemplateKey = 'successTemplate';
+    const successTemplate =
+      (opt_templates && opt_templates[successTemplateKey])
+        ? opt_templates[successTemplateKey] : mustacheTemplate;
+    if (successTemplate) {
+      ampComponent[successTemplateKey] = {
         'type': 'amp-mustache',
-        'payload': opt_templates
-          ? this.xmls_.serializeToString(opt_templates['successTemplate'])
-          : mustacheTemplate,
-      },
-      'errorTemplate': {
+        'payload': successTemplate./*REVIEW*/innerHTML,
+      };
+    }
+
+    const errorTemplateKey = 'errorTemplate';
+    const errorTemplate =
+      (opt_templates && opt_templates[errorTemplateKey])
+        ? opt_templates[errorTemplateKey] : null;
+    if (errorTemplate) {
+      ampComponent[errorTemplateKey] = {
         'type': 'amp-mustache',
-        'payload': opt_templates
-          ? this.xmls_.serializeToString(
-              opt_templates['errorTemplate']) : null,
-      },
-    });
+        'payload': errorTemplate./*REVIEW*/innerHTML,
+      };
+    }
+
+    if (opt_attributes) {
+      Object.assign(ampComponent, opt_attributes);
+    }
+
     const data = dict({
       'originalRequest':
-          toStructuredCloneable(request.xhrUrl, request.fetchOpt),
+        toStructuredCloneable(request.xhrUrl, request.fetchOpt),
       'ampComponent': ampComponent,
     });
 
-    const additionalAttr = opt_attributes && Object.keys(opt_attributes);
-    if (additionalAttr) {
-      Object.keys(opt_attributes).forEach(key => {
-        data[key] = opt_attributes[key];
-      });
-    }
-
     return data;
   }