1ccf894501
Converted AMP example over to TypeScript to match the Contribution guidelines, updated all dependencies, and made some necessary changes to allow AMP apps to build in TypeScript. I added an additional .d.ts file, and referenced it in the tsconfig.json include array, as per the [Next.js docs](https://nextjs.org/docs/basic-features/typescript#existing-projects). These additional types are required to allow lowercase AMP elements to be a property on JSX.IntrinsicElements. Fixes: > Property 'amp-img' does not exist on type 'JSX.IntrinsicElements'.ts I also replaced all occurrences of styled JSX with [@ijjk's workaround](https://github.com/vercel/next.js/issues/7584#issuecomment-503376412) to get styles in the head at build time for AMP-only pages, hybrid AMP pages, and normal pages (non-AMP). I tried using the useAmp hook first with multiple `<style jsx>` like this [Next.js discussion](https://github.com/vercel/next.js/discussions/16755), however AMP expects a [single `<style amp-custom>` tag in the head](https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#stylesheets). Fixes: > The parent tag of tag 'style amp-custom' is 'body', but it can only be 'head' ## 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) Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
31 lines
792 B
TypeScript
31 lines
792 B
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 | number
|
|
height?: string | number
|
|
layout?: string
|
|
fallback?: string
|
|
children?: React.ReactNode
|
|
}
|
|
interface IntrinsicElements {
|
|
'amp-img': AmpImg
|
|
}
|
|
}
|
|
|
|
// Only the intrinsic elements defined here will be accepted, attributes don't matter
|
|
// declare namespace JSX {
|
|
// interface IntrinsicElements {
|
|
// 'amp-img': any;
|
|
// }
|
|
// }
|
|
|
|
// All intrinsic elements will be accepted
|
|
// declare namespace JSX {
|
|
// interface IntrinsicElements {
|
|
// [elemName: string]: any;
|
|
// }
|
|
// }
|