1d5dd1bad3
Converted AMP Story example over to TypeScript to align with the Examples guide. Note: Requires `v12.1.7-canary.41` or newer to build https://github.com/vercel/next.js/pull/37744#issuecomment-1159573754 ## Documentation / Examples - [X] Make sure the linting passes by running `pnpm lint` - [X] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
75 lines
1.7 KiB
TypeScript
75 lines
1.7 KiB
TypeScript
// Allow AMP elements to be a property on JSX.IntrinsicElements
|
|
|
|
// Only the intrinsic elements defined here will be accepted, and only with the attributes defined here
|
|
declare namespace JSX {
|
|
interface AmpImg {
|
|
alt: string
|
|
src: string
|
|
width?: string
|
|
height?: string
|
|
layout: string
|
|
}
|
|
interface AmpVideo {
|
|
width: string
|
|
height: string
|
|
layout: string
|
|
poster: string
|
|
children: React.ReactNode
|
|
autoplay: string
|
|
loop?: string
|
|
}
|
|
interface AmpStory {
|
|
standalone: string
|
|
title: string
|
|
publisher: string
|
|
'publisher-logo-src': string
|
|
'poster-portrait-src': string
|
|
children: React.ReactNode
|
|
}
|
|
interface AmpStoryPage {
|
|
id: string
|
|
children: React.ReactNode
|
|
}
|
|
interface AmpStoryGridLayer {
|
|
template: 'fill' | 'vertical' | 'horizontal' | 'thirds'
|
|
children: React.ReactNode
|
|
}
|
|
interface AmpStoryBookend {
|
|
src: string
|
|
layout?:
|
|
| 'fill'
|
|
| 'fixed'
|
|
| 'fixed-height'
|
|
| 'flex-item'
|
|
| 'intrinsic'
|
|
| 'nodisplay'
|
|
| 'responsive'
|
|
}
|
|
interface IntrinsicElements {
|
|
'amp-img': AmpImg
|
|
'amp-video': AmpVideo
|
|
'amp-story': AmpStory
|
|
'amp-story-grid-layer': AmpStoryGridLayer
|
|
'amp-story-page': AmpStoryPage
|
|
'amp-story-bookend': AmpStoryBookend
|
|
}
|
|
}
|
|
|
|
// Only the intrinsic elements defined here will be accepted, attributes don't matter
|
|
// declare namespace JSX {
|
|
// interface IntrinsicElements {
|
|
// 'amp-img': any
|
|
// 'amp-video': any
|
|
// 'amp-story': any
|
|
// 'amp-story-grid-layer': any
|
|
// 'amp-story-page': any
|
|
// 'amp-story-bookend': any
|
|
// }
|
|
// }
|
|
|
|
// All intrinsic elements will be accepted
|
|
// declare namespace JSX {
|
|
// interface IntrinsicElements {
|
|
// [elemName: string]: any
|
|
// }
|
|
// }
|