From 8998871b59697bded95571a1935da4a85b6c06b9 Mon Sep 17 00:00:00 2001
From: Sebastian Benz <sbenz@google.com>
Date: Fri, 10 Jan 2020 14:00:52 +0100
Subject: [PATCH 1/2] Simplify AmpMustache API

* Remove mustache directive abstraction (Section, ...) to keep the API
simple
* Simplify server-side template rendering

```
<div data-amp-bind-hidden='context != undefined'>
  {AmpMustache.render(template, initialItems)}
</div>
```
---
 .../pages/components/AmpMustache.tsx          | 11 ++++---
 lib/next-amp/src/components/AmpMustache.tsx   | 31 ++-----------------
 2 files changed, 8 insertions(+), 34 deletions(-)

diff --git a/lib/next-amp-demo/pages/components/AmpMustache.tsx b/lib/next-amp-demo/pages/components/AmpMustache.tsx
index 28b4b0638..ecd9aeb91 100644
--- a/lib/next-amp-demo/pages/components/AmpMustache.tsx
+++ b/lib/next-amp-demo/pages/components/AmpMustache.tsx
@@ -36,15 +36,14 @@ const initialItems = {
 };
 
 const AmpMustacheSample: NextPage<{}> = () => {
-  const {clientSideTemplate, serverSideTemplate} = AmpMustache.universal(
+  const template = (
     <AmpMustache>
       {`{{#items}}`}
       <div>
         <a href='{{url}}'>{`{{name}}`}</a>
       </div>
       {`{{/items}}`}
-    </AmpMustache>,
-    initialItems
+    </AmpMustache>
   );
 
   return (
@@ -58,9 +57,11 @@ const AmpMustacheSample: NextPage<{}> = () => {
         items='.'
         data-amp-bind-src='context'
       >
-        {clientSideTemplate}
+        {template}
       </AmpList>
-      <div data-amp-bind-hidden='context != undefined'>{serverSideTemplate}</div>
+      <div data-amp-bind-hidden='context != undefined'>
+        {AmpMustache.render(template, initialItems)}
+      </div>
       <button
         on="tap:AMP.setState({
           context: {
diff --git a/lib/next-amp/src/components/AmpMustache.tsx b/lib/next-amp/src/components/AmpMustache.tsx
index fd38930a3..a6c648e4f 100644
--- a/lib/next-amp/src/components/AmpMustache.tsx
+++ b/lib/next-amp/src/components/AmpMustache.tsx
@@ -28,24 +28,9 @@ class AmpMustache extends React.Component<
     context?: any;
   }
 > {
-  static universal(element: JSX.Element, context: any) {
-    return {
-      clientSideTemplate: element,
-      serverSideTemplate: React.cloneElement(element, context),
-    };
+  static render(element: JSX.Element, context: any) {
+    return React.cloneElement(element, context);
   }
-  static Section: React.FunctionComponent<SectionProps> = ({children, id, inverted}) => (
-    <>
-      {`{{${inverted ? '^' : '#'}${id}}}`}
-      {children}
-      {`{{/${id}}}`}
-    </>
-  );
-  static Variable: React.FunctionComponent<VariableProps> = ({id, unescape}) => (
-    <>{`{{${unescape ? '{' : ''}${id}${unescape ? '}' : ''}}}`}</>
-  );
-
-  static Comment: React.FunctionComponent<CommentProps> = ({text}) => <>{`{{!${text}}`}</>;
 
   render() {
     const {children, context, ...rest} = this.props;
@@ -84,16 +69,4 @@ function renderToString(element: JSX.Element) {
   return ReactDOMServer.renderToStaticMarkup(element);
 }
 
-type SectionProps = {
-  id: string;
-  inverted?: boolean;
-};
-type VariableProps = {
-  id: string;
-  unescape?: boolean;
-};
-type CommentProps = {
-  text: string;
-};
-
 export default AmpMustache;

From 392ce04c68b4b645295943fb8fb8518ff9af8e64 Mon Sep 17 00:00:00 2001
From: Sebastian Benz <sbenz@google.com>
Date: Fri, 10 Jan 2020 14:24:11 +0100
Subject: [PATCH 2/2] Further improvements:

* fix context indirection
* update readme
---
 .../pages/components/AmpMustache.tsx          | 22 ++++----
 lib/next-amp/README.md                        | 56 +++++++++++++------
 lib/next-amp/src/components/AmpMustache.tsx   |  4 +-
 3 files changed, 53 insertions(+), 29 deletions(-)

diff --git a/lib/next-amp-demo/pages/components/AmpMustache.tsx b/lib/next-amp-demo/pages/components/AmpMustache.tsx
index ecd9aeb91..aeef65ee4 100644
--- a/lib/next-amp-demo/pages/components/AmpMustache.tsx
+++ b/lib/next-amp-demo/pages/components/AmpMustache.tsx
@@ -21,18 +21,16 @@ import {AmpMustache, AmpList, AmpIncludeCustomElement} from '@ampproject/toolbox
 export const config = {amp: true};
 
 const initialItems = {
-  context: {
-    items: [
-      {
-        name: 'amp.dev',
-        url: 'https://amp.dev',
-      },
-      {
-        name: 'Next.js',
-        url: 'https://nextjs.org',
-      },
-    ],
-  },
+  items: [
+    {
+      name: 'amp.dev',
+      url: 'https://amp.dev',
+    },
+    {
+      name: 'Next.js',
+      url: 'https://nextjs.org',
+    },
+  ],
 };
 
 const AmpMustacheSample: NextPage<{}> = () => {
diff --git a/lib/next-amp/README.md b/lib/next-amp/README.md
index 2eec7af0b..870e28dc1 100644
--- a/lib/next-amp/README.md
+++ b/lib/next-amp/README.md
@@ -125,22 +125,46 @@ The `AmpMustache` component simplifies AMP’s template syntax from `<template t
 </AmpMustache>
 ```
 
-**Alternative approach:** wrap mustache directives in components. This has the positive side-effect of making it possible to render the same template server-side and client-side:
-
-```
-<AmpMustache>
-  <h1>Seats</h1>
-  <Loop id="seats">
-    <p><Token id="name"/>
-    <If id="disabled">
-      Disabled Seat
-    </If>
-    <IfNot id="disabled">
-      Normal Seat
-    </IfNot>
-    </p>
-  </Loop>
-</AmpMustache>
+Nice: AmpMustache templates can be rendered client-side _and server-side_. For example, for generating `amp-list` placeholders:
+
+```
+const template = (
+  <AmpMustache>
+    {`{{#items}}`}
+    <div>
+      <a href='{{url}}'>{`{{name}}`}</a>
+    </div>
+    {`{{/items}}`}
+  </AmpMustache>
+);
+
+return (
+  <AmpList
+    layout='fixed-height'
+    data-amp-bind-is-layout-container='context'
+    height='0'
+    single-item=''
+    items='.'
+    data-amp-bind-src='context'
+  >
+    {template}
+    <div placeholder>
+      {AmpMustache.render(template, {
+        items: [
+          {
+            name: 'amp.dev',
+            url: 'https://amp.dev',
+          },
+          {
+            name: 'Next.js',
+            url: 'https://nextjs.org',
+          },
+        ]
+      }
+    )}
+    </div>
+  </AmpList>
+)
 ```
 
 ### amp-access
diff --git a/lib/next-amp/src/components/AmpMustache.tsx b/lib/next-amp/src/components/AmpMustache.tsx
index a6c648e4f..f40d6e8a0 100644
--- a/lib/next-amp/src/components/AmpMustache.tsx
+++ b/lib/next-amp/src/components/AmpMustache.tsx
@@ -29,7 +29,9 @@ class AmpMustache extends React.Component<
   }
 > {
   static render(element: JSX.Element, context: any) {
-    return React.cloneElement(element, context);
+    return React.cloneElement(element, {
+      context,
+    });
   }
 
   render() {