Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simplify AmpMustache API #894

Open
wants to merge 2 commits into
base: ampstart-2.0
Choose a base branch
from
Open

Simplify AmpMustache API #894

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8998871
Simplify AmpMustache API
sebastianbenz Jan 10, 2020
392ce04
Further improvements:
sebastianbenz Jan 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 16 additions & 17 deletions lib/next-amp-demo/pages/components/AmpMustache.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,30 +21,27 @@ 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<{}> = () => {
const {clientSideTemplate, serverSideTemplate} = AmpMustache.universal(
const template = (
<AmpMustache>
{`{{#items}}`}
<div>
<a href='{{url}}'>{`{{name}}`}</a>
</div>
{`{{/items}}`}
</AmpMustache>,
initialItems
</AmpMustache>
);

return (
Expand All @@ -58,9 +55,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: {
Expand Down
56 changes: 40 additions & 16 deletions lib/next-amp/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
33 changes: 4 additions & 29 deletions lib/next-amp/src/components/AmpMustache.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,24 +28,11 @@ 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;
Expand Down Expand Up @@ -84,16 +71,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;