Skip to content

Commit bee9b4b

Browse files
Ariel-RodriguezAriel-Rodriguez
authored
RAMPT - v4.0 (#9)
* Full demo example * POC v4.0.0 * Update README.md * fix npm publish * v4.0.0-alpha.1 * fix minor bug for custom Tag creation. * enhance Title element. * update examples. * fix validation errors for AMP example * add coverage badge * v4.0.0 * fix travis
1 parent 28eab1a commit bee9b4b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+11634
-6970
lines changed

‎.npmignore

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
.travis.yml
2+
examples
3+
.nyc_output
14
src
25
.editorconfig
36
yarn-error.log

‎.travis.yml

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
language: node_js
22
node_js:
3-
- 6
3+
- "stable"
44
cache:
5-
yarn: true
5+
yarn: false
6+
script:
7+
- npm install
8+
- npm test
9+
after_script:
10+
- npm install -g codecov
11+
- npm run report-coverage

‎README.md

+71-179
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div align="center">
2-
<h1><strong>RAMPT 3</strong></h1>
3-
<div align="center">Server side rendering using Preact + ModularCSS/JSCSS + AMP-custom-elements.</div>
2+
<h1><strong>RAMPT v4</strong></h1>
3+
<div align="center"><p>AMP components aliases and shims for React SSR 16+ & styled-components v3</p></div>
44
</div>
55

66
<br />
@@ -30,185 +30,117 @@ Write AMP pages using React syntaxt right the way and style with your preferred
3030
## Contents
3131

3232
- [Usage](#usage)
33+
- [Demo](#demo)
3334
- [API](#api)
3435
- [Configuration](#configuration)
3536
- [Contribute](#contributing)
3637

3738

3839
## Usage
3940

40-
### Install from NPM
41+
### Install
4142

42-
- `yarn add react-amp-template`
43+
- `npm i react-amp-template`
4344

4445
### Static Render
4546

4647
```javascript
47-
import { h } from 'preact'
48-
import render from 'react-amp-template'
49-
50-
const metaContent = {
51-
'http-equiv': "origin-trial",
52-
'data-expires': '2020-01-01',
53-
'data-feature': "Web Share",
54-
'content': "Ajcrk411RcpUCQ3ovgC8le4e7Te/1kARZsW5Hd/OCnW6vIHTs5Kcq1PaABs7SzcrtfvT0TIlFh9Vdb5xWi9LiQsAAABSeyJvcmlnaW4iOiJodHRwczovL2FtcGJ5ZXhhbXBsZS5jb206NDQzIiwiZmVhdHVyZSI6IldlYlNoYXJlIiwiZXhwaXJ5IjoxNDkxMzM3MDEwfQ=="
55-
}
56-
57-
const SocialShare = (props, { head }) => {
58-
head.append('amp-social-share')
59-
return <amp-social-share {...props} />
60-
}
48+
import React, { Fragment } from 'react'
49+
import styled from 'styled-components'
50+
import { renderToString, AMP } from 'react-amp-template'
6151

62-
const Body = (props, { head }) => {
63-
// Add required meta tags to head at any moment.
64-
head.append('meta', metaContent)
65-
head.append('link', {rel: 'amphtml', 'href': "https://www.example.com/url/to/amp/document.html"})
66-
return(
67-
<body>
68-
<h1>Preact for AMP is welcome as well!</h1>
69-
<SocialShare width="40" height="40" type="email"/>
70-
<SocialShare width="40" height="40" type="facebook"
71-
data-param-app_id="254325784911610" />
72-
<SocialShare width="40" height="40" type="gplus"/>
73-
<SocialShare width="40" height="40" type="linkedin"/>
74-
<SocialShare width="40" height="40" type="whatsapp"/>
75-
<SocialShare width="40" height="40" type="twitter"/>
76-
</body>
77-
)
78-
}
52+
const { Title, Link, Carousel } = AMP
7953

80-
81-
render(<Body />, {
82-
title: 'Rendering AMP with preact',
83-
canonical: 'https://my-website.com',
84-
})
85-
```
86-
87-
## Styled components
88-
89-
```javascript
90-
import React from 'react'
91-
import render from 'react-amp-template'
92-
93-
const Body = ({ children, ...props }, { head }) =>
94-
<body {...props}>
95-
<Button>Normal</Button>
96-
<ThemeProvider theme={theme}>
97-
<Button>Themed</Button>
98-
</ThemeProvider>
99-
{children}
100-
</body>
101-
102-
103-
const StyledBody = styled(Body)`
104-
background: papayawhip;
105-
@media (max-width: 700px) {
106-
background: palevioletred;
107-
}
54+
const Body = styled.body`
55+
margin: 0 1rem;
10856
`
10957

110-
render(<StyledBody />, {
111-
title: 'Styling AMP with StyledComponents',
112-
canonical: 'https://canonical.com',
113-
styleManager: 'styled-components',
114-
})
58+
const App = ({ title }) => (
59+
<Fragment>
60+
<Title>{title}</Title>
61+
<Link rel="canonical" href="http://localhost" />
62+
<Body>
63+
<h1>Hello World</h1>
64+
<Carousel lightbox width="400" height="300" layout="responsive" type="slides">
65+
<amp-img src="/img/image1.jpg" width="400" height="300" layout="responsive"></amp-img>
66+
<amp-img src="/img/image2.jpg" width="400" height="300" layout="responsive"></amp-img>
67+
<amp-img src="/img/image3.jpg" width="400" height="300" layout="responsive"></amp-img>
68+
</Carousel>
69+
</Body>
70+
</Fragment>
71+
)
72+
73+
export default props => renderToString(<App title="AMP demo" />)
11574
```
11675

117-
[See more here](https://github.com/Ariel-Rodriguez/react-amp-template/tree/master/examples)
76+
77+
## Demo [here](https://github.com/Ariel-Rodriguez/react-amp-template/tree/master/examples)
11878

11979

12080
## API
12181

122-
### Template
82+
### renderToString
12383

12484
```javascript
125-
import { Template } from 'react-amp-template'
126-
const template = new Template({ title, canonical, styleManager })
85+
/**
86+
* Transform React component into HTML AMP format.
87+
*
88+
* @returns {String} html
89+
* @param {Class|Object} body React component to render
90+
* @param {Object} options Settings
91+
* @property {string} options.cdnURI absolute URL to AMP CDN
92+
* @property {string} options.boilerplate HTML string which contains AMP boilerplate styles
93+
* @property {object} options.extensions Key map of references to specify an extension version
94+
* @property {object} options.extensions.default default version for all amp-extensions e.g '0.1'
95+
* @property {object} options.extensions.extension [extension-name]
96+
** specify custom version for derived extension e.g: 'amp-sticky-ad': '1.0'
97+
import { renderToString } from 'react-amp-template'
12798
```
12899
129-
### Options
130-
131-
- *title* | Add meta title with [_title_]
132-
- *canonical* | Add link canonical with href to [_canonical_]
133-
- *styleManager* | {string | function}. Allowed `aphrodite` `styled-components` `undefined` `function` 
134-
135-
136-
### Context
137-
138-
Every children element receives the high order `context`.
139-
It allows components to add custom content to Head.
100+
#### AMP components
140101
102+
```javascript
103+
import { AMP } from 'react-amp-template'
141104
142-
#### AMP component
105+
const AdUnit = () => <AMP.AdUnit />
106+
```
107+
- RAMPT provides shorthands for amp-custom-elements. A \[ get \] operation on { AMP } module returns Node element and automatically registers the `<script />` tag required by AMP.
143108
144-
Ensure to add the amp-custom script required.
145-
RAMPT prevents duplicated scripts automatically.
109+
- The following components could be used in case of need to ad elements into `<head>` element
146110
147111
```javascript
148-
const Element = (props, context) => {
149-
context.head.append('amp-sidebar')
150-
context.head.append('amp-sidebar') // <- it won't be added
151-
return ...
152-
}
112+
<Link /> <Meta /> <Title /> <Script /> <Tag _name="custom-tag" />
153113
```
154114
155-
`<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>`
156-
157-
By default every amp-script address to version 0.1. However it can be customized.
115+
- By default every amp-script address to version 0.1. However it can be customized.
158116
159117
```javascript
160-
const Element = (props, context) => {
161-
context.head.append('amp-sticky-ad', { version: '1.0' })
162-
return ...
163-
}
118+
renderToString(<App />, {
119+
extensions: {
120+
  default: 0.2,
121+
  'amp-sticky-unit': 1.0,
122+
 }
123+
})
164124
```
165125
166-
`<script async custom-element="amp-sticky-ad" src="https://cdn.ampproject.org/v0/amp-sticky-ad-0.1.js"></script>`
167-
168-
169126
#### LD+JSON
170127
171128
```javascript
172-
const Element = (props, context) => {
173-
context.head.append('ldjson', { id: 'myjson', content: {foo: 'bar' }})
174-
return ...
175-
}
129+
<AMP.Script
130+
type="application/ld+json"
131+
dangerouslySetInnerHTML={{ __html: JSON.stringify(json) }}
132+
/>
176133
```
177134
178-
`<script type="application/json" id="myjson">{foo:bar}</script>`
179-
180-
181-
#### Mustache
182-
183-
```javascript
184-
const Element = (props, { head }) => {
185-
head.append('amp-list')
186-
head.append('amp-mustache')
187-
188-
return (
189-
<amp-list src="https://ampbyexample.com/json/cart.json"
190-
layout="fixed-height"
191-
height="56">
192-
<template type="amp-mustache"
193-
dangerousllySetInnerHTML={{ __html: "Hi {{fullname}}!" }}>
194-
</template>
195-
</amp-list>
196-
)
197-
}
198-
```
199135
200136
## Configuration
201137
202-
RAMPT renders to string thanks to [preact-render-to-string](https://github.com/developit/preact-render-to-string)
203-
204-
A system bundler is recommended in order to make it work with React and Styled components.
205-
Take a look for [this webpack configuration for RAMPT examples](https://github.com/Ariel-Rodriguez/react-amp-template/blob/master/config/webpack.config.babel.js)
206-
207-
### Babel & Webpack
138+
### Babel
139+
- Setup the environment as recomends React and Styled-Components server rendering.
208140
209141
#### React | Styled Components
210142
211-
`yarn add --dev babel-plugin-styled-components babel-preset-react babel-plugin-module-resolver`
143+
`npm i -D babel-plugin-styled-components babel-preset-react`
212144
213145
```json
214146
{
@@ -218,62 +150,22 @@ Take a look for [this webpack configuration for RAMPT examples](https://github.c
218150
],
219151
"plugins": [
220152
["babel-plugin-styled-components", { "ssr": true }]
221-
["module-resolver", {
222-
"root": ["."],
223-
"alias": {
224-
"react": "preact-compat",
225-
"react-dom": "preact-compat"
226-
}
227-
}]
228153
]
229154
}
230155
```
231156
232-
- Add Webpack alias
233-
234-
```javascript
235-
resolve: {
236-
extensions: ['.jsx', '.js'],
237-
modules: [
238-
path.resolve(__dirname, "src"),
239-
path.resolve(__dirname, 'node_modules')
240-
],
241-
alias: {
242-
'react': 'preact-compat',
243-
'react-dom': 'preact-compat',
244-
}
245-
}
246-
...
247-
```
248-
249-
- Include styled-component in the bundle in order to bypass React alias into Preact
250-
251-
```javascript
252-
externals: [ nodeExternals({
253-
whitelist: ['styled-components']
254-
})]
255-
```
256-
257-
## Preact
258-
259-
```json
260-
{
261-
"presets": [
262-
"stage-0",
263-
"preact"
264-
]
265-
}
266-
```
267157
268158
## Contributing
269159
270-
- `$git clone git@github.com:Ariel-Rodriguez/react-amp-template.git`
271-
- `yarn`
272-
- `yarn dev`
160+
- Fork the repository
161+
- `npm install`
162+
- `npm run dev`
163+
- Create pull request
273164
274165
### Build examples
275166
276-
- `yarn examples`
167+
- `cd examples/simple-server`
168+
- `npm install && npm start`
277169
278170
## License
279171

‎config/.babelrc

+3-19
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,17 @@
11
{
22
"presets": [
3+
"react",
34
["env", {
45
"targets": {
56
"node": "current"
67
}
7-
}],
8-
"stage-0"
8+
}]
99
],
1010
"plugins": [
11-
["babel-plugin-styled-components", { "ssr": true }]
11+
"transform-object-rest-spread"
1212
],
1313
"env": {
14-
"react": {
15-
"presets": [ "react" ],
16-
"plugins": [
17-
["module-resolver", {
18-
"root": ["."],
19-
"alias": {
20-
"react": "preact-compat",
21-
"react-dom": "preact-compat"
22-
}
23-
}]
24-
]
25-
},
26-
"preact": {
27-
"presets": [ "preact" ]
28-
},
2914
"test": {
30-
"presets": [ "preact" ],
3115
"plugins": ["istanbul"]
3216
}
3317
}

‎config/.eslintrc.json

-6
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,5 @@
3333
]
3434
}
3535
}]
36-
},
37-
38-
"settings": {
39-
"react": {
40-
"pragma": "h"
41-
}
4236
}
4337
}

0 commit comments

Comments
 (0)