adds State

README.md

@@ -107,12 +107,10 @@ const finalHTML = `
 
 #### [amp-accordion](https://www.ampproject.org/docs/reference/components/amp-accordion)
 
-#### [amp-bind](https://www.ampproject.org/docs/reference/components/amp-bind)
+#### [amp-ad](https://www.ampproject.org/docs/reference/components/amp-ad)
 
 #### [amp-install-serviceworker](https://www.ampproject.org/docs/reference/components/amp-install-serviceworker)
 
-#### [amp-ad](https://www.ampproject.org/docs/reference/components/amp-ad)
-
 Example usage:
 
 ```jsx
@@ -129,6 +127,24 @@ Props:
 - dataNoServiceWorkerFallbackUrlMatch (optional)
 - dataNoServiceWorkerFallbackShellUrl (optional)
 
+### [amp-bind](https://www.ampproject.org/docs/reference/components/amp-bind)
+Example usage:
+```jsx
+<Bind text="'Hello ' + foo" className="bar">
+  <p>I will get the [text] and [class] attributes</p>
+</Bind>
+```
+### [amp-state](https://www.ampproject.org/docs/reference/components/amp-bind)
+Example usage:
+```jsx
+<State id="animals">
+  {{
+    dog: 10,
+    cat: 90
+  }}
+</State>
+```
+
 ## Todo
 
 - [ ] Define all the AMP components with their properties and scripts in a JSON file and use that to generate them.

src/__tests__/components/State-test.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import State from '../../components/State'
+import Helmet from '../../utils/Helmet'
+import { renderComponent } from '../test-utils'
+
+describe('State', () => {
+  it('works', () => {
+    const res = renderComponent(
+      <State id="animals">
+        {{
+          lion: 'mammal'
+        }}
+      </State>
+    )
+    expect(res.toJSON()).toMatchSnapshot()
+  })
+
+  it('injects the right script tag', () => {
+    renderComponent(
+      <State>
+        {{}}
+      </State>
+    )
+    Helmet.canUseDOM = false
+    const staticHead = Helmet.renderStatic()
+    expect(staticHead.scriptTags).toMatchSnapshot()
+  })
+})
+

src/__tests__/components/__snapshots__/State-test.js.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`State injects the right script tag 1`] = `
+Array [
+  Object {
+    "async": true,
+    "custom-element": "amp-bind",
+    "src": "https://cdn.ampproject.org/v0/amp-bind-0.1.js",
+  },
+]
+`;
+
+exports[`State works 1`] = `
+<amp-state
+  id="animals"
+>
+  <script
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "{\\"lion\\":\\"mammal\\"}",
+      }
+    }
+    type="application/json"
+  />
+</amp-state>
+`;

src/components/State.js

@@ -0,0 +1,38 @@
+/* eslint-disable react/no-danger */
+import React, { Component, Fragment } from 'react'
+import { shape, string } from 'prop-types'
+import { Helmet } from 'react-helmet'
+
+class State extends Component {
+  static propTypes = {
+    children: shape({}),
+    id: string
+  }
+
+  static defaultProps = {
+    children: {},
+    id: null
+  }
+
+  render() {
+    const { children, id } = this.props
+
+    return (
+      <Fragment>
+        <Helmet key="helmet">
+          <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" />
+        </Helmet>
+        <amp-state id={id}>
+          <script
+            type="application/json"
+            dangerouslySetInnerHTML={{
+              __html: JSON.stringify(children)
+            }}
+          />
+        </amp-state>
+      </Fragment>
+    )
+  }
+}
+
+export default State

src/index.js

@@ -8,4 +8,6 @@ export { default as Ad } from './components/Ad'
 export { default as Form } from './components/Form'
 export { default as Bind } from './components/Bind'
 export { default as InstallServiceworker } from './components/InstallServiceworker'
+export { default as State } from './components/State'
+
 export { default as Helmet } from './utils/Helmet'