bhanditz/hypernova-amp

hypernova-amp

Aphrodite bindings for Hypernova for rendering AMP pages.

Install

npm install hypernova-amp

Usage

Here's how use use it in your module:

import { renderReactAmpWithAphrodite } from 'hypernova-amp';
import MyComponent from './src/MyComponent.jsx';

export default renderReactAmpWithAphrodite(
  'MyComponent.hypernova.js', // this file's name (or really any unique name)
  MyComponent,
  {/* Options */},
);

Options

prependCSS (string)

Inserts css before the generated CSS.

appendCSS (string)

Inserts css after the generated CSS.

enableAmpBind (bool)

Set to true to enable amp-bind. Default: false. This will transform any attribute named amp-bind-x into an attribute named [x]. This is necessary because react does not support [x] prop even in conjunction with is (see next section).

enableRemoveIs (bool)

Utilizes regex to remove is attribute. React has an undocumented is prop that when added to an element, prevents React from transforming/filtering props that you add to the element. Any prop that you add will be added as an attribute with the same name. For example, adding a class prop to a <div> will add a class attribute to the <div>. This also means that adding a className prop will not do what you normally would expect it to do. You'll want to add the is prop when using amp-bind-class together with class, for example. However, the problem arises where the is attribute is also added to the element which causes an AMP validation error. Enabling the enableRemoveIs option will remove the is attribute and thus eliminate the validation error.

Here's an example which utilizes enableAmpBind and enableRemoveIs:

<div
  is
  amp-bind-class={`showThing ? '${thingClass} ${thingOpenClass}' : '${thingClass}'`}
  class={ampSearchBarClass}
>
  ...
</div>

... elsewhere you might have a button like this:

<div
  is
  role="button"
  on="tap:AMP.setState({ showThing: !showThing })"
  tabindex="0"
>
  Toggle Thing Component
</div>

scripts (array)

Each element of the array is an object with any of the following values:

• scripts.customElement (string)
• scripts.customTemplate (string)
• scripts.src (string):

ampExperimentToken (string)

Adds amp-experiment-token meta tag with token.

title (string)

Page title

canonicalUrl (string)

Adds meta tag with canonical URL.

jsonSchema (object)

Adds json schema meta tag.

ampState (object)

Adds amp-state tag.

ampAnalytics (object)

Adds amp-analytics tag

ampGoogleAnalytics (object)

Adds amp-analytics (google type) tag

Publishing a new release

• Add entry to CHANGELOG.md
• Make a commit, directly onto master, that does nothing but adds/updates the changelog and bumps package.json, with a commit message of “vX.Y.Z"
• git tag vX.Y.Z
• git push --tags
• wait for travis to pass
• npm install && npm test && npm publish