The storybook AMP addon allows rendering of AMP content inside the Storybook environment.
@ampproject/storybook-addon
allows switching between three AMP modes:
Module (v0.js
), No-module (v0.mjs
) and Bento. It also allows switching
between development mode (locally hosted v0.js
) and production mode (CDN
hosted v0.js
).
First, add the @ampproject/storybook-addon
to your project:
yarn add @ampproject/storybook-addon --dev
Second, register the @ampproject/storybook-addon
to your
config (.storybook/main.js
):
module.exports = {
addons: ['@ampproject/storybook-addon'],
};
An AMP story uses withAmp
decorator:
import { h } from 'preact';
import {storiesOf} from '@storybook/preact';
import {withAmp} from '@ampproject/storybook-addon';
storiesOf('amp-carousel', module)
.addDecorator(withAmp)
.addParameters({
extensions: [{name: 'amp-carousel', version: '0.2'}],
})
.add('default', () => {
return (
<amp-base-carousel width="440" height="225">
{['lightcoral', 'peachpuff', 'lavender'].map((color) => (
<div key={color}>{color}</div>
))}
</amp-base-carousel>
);
});
The following parameters can be specified:
extensions: [{name, version}]
- a list of extensions to be installed.experiments: [string]
- a list of experiments to enabled.