diff --git a/docs/advanced-features/amp-support/adding-amp-components.md b/docs/advanced-features/amp-support/adding-amp-components.md index 1c11ffe8c630c28..63305791d544888 100644 --- a/docs/advanced-features/amp-support/adding-amp-components.md +++ b/docs/advanced-features/amp-support/adding-amp-components.md @@ -4,7 +4,35 @@ description: Add components from the AMP community to AMP pages, and make your p # Adding AMP Components -The AMP community provide [many components](https://amp.dev/documentation/components/) to make AMP pages more interactive. You can add these components to your page by using `next/head`, as in the following example: +The AMP community provides [many components](https://amp.dev/documentation/components/) to make AMP pages more interactive. Next.js will automatically import all components used on a page and there is no need to manually import AMP component scripts: + +```jsx +export const config = { amp: true } + +function MyAmpPage() { + const date = new Date() + + return ( +
+

Some time: {date.toJSON()}

+ + . + +
+ ) +} + +export default MyAmpPage +``` + +The above example uses the [`amp-timeago`](https://amp.dev/documentation/components/amp-timeago/?format=websites) component. + +By default, the latest version of a component is always imported. If you want to customize the version, you can use `next/head`, as in the following example: ```jsx import Head from 'next/head' @@ -40,5 +68,3 @@ function MyAmpPage() { export default MyAmpPage ``` - -The above example uses the [`amp-timeago`](https://amp.dev/documentation/components/amp-timeago/?format=websites) component. diff --git a/packages/next/package.json b/packages/next/package.json index faf0bbefa2abc01..8e49e66c676b9fd 100644 --- a/packages/next/package.json +++ b/packages/next/package.json @@ -57,7 +57,7 @@ ] }, "dependencies": { - "@ampproject/toolbox-optimizer": "1.1.1", + "@ampproject/toolbox-optimizer": "2.0.0", "@babel/core": "7.7.2", "@babel/plugin-proposal-class-properties": "7.7.0", "@babel/plugin-proposal-nullish-coalescing-operator": "7.7.4", diff --git a/test/integration/amp-export-validation/pages/cat.js b/test/integration/amp-export-validation/pages/cat.js index 176502a16333098..3fa8f4b72fe4041 100644 --- a/test/integration/amp-export-validation/pages/cat.js +++ b/test/integration/amp-export-validation/pages/cat.js @@ -2,7 +2,7 @@ export const config = { amp: true } export default () => (
- {/* I show a warning since the amp-video script isn't added */} - + {/* I show a warning since the width and height attribute is missing */} +
) diff --git a/test/integration/amp-export-validation/pages/dog-cat.js b/test/integration/amp-export-validation/pages/dog-cat.js index 0a190fb53ab38c3..8388a6e7c040382 100644 --- a/test/integration/amp-export-validation/pages/dog-cat.js +++ b/test/integration/amp-export-validation/pages/dog-cat.js @@ -4,7 +4,5 @@ export default () => (
{/* I throw an error since should be used instead */} - {/* I show a warning since the amp-video script isn't added */} -
) diff --git a/test/integration/amp-export-validation/test/index.test.js b/test/integration/amp-export-validation/test/index.test.js index affda3c55ca8866..361ae8f35350bdf 100644 --- a/test/integration/amp-export-validation/test/index.test.js +++ b/test/integration/amp-export-validation/test/index.test.js @@ -32,9 +32,6 @@ describe('AMP Validation on Export', () => { expect(buildOutput).toMatch( /error.*The parent tag of tag 'IMG-I-AMPHTML-INTRINSIC-SIZER' is 'div', but it can only be 'i-amphtml-sizer-intrinsic'/ ) - expect(buildOutput).toMatch( - /warn.*The tag 'amp-video extension .js script' is missing or incorrect, but required by 'amp-video'/ - ) }) it('should export AMP pages', async () => { @@ -63,7 +60,7 @@ describe('AMP Validation on Export', () => { stderr: true, }) expect(stdout).toMatch( - /warn.*The tag 'amp-video extension \.js script' is missing/ + /error.*The mandatory attribute 'height' is missing in tag 'amp-video'\./ ) await expect(access(join(outDir, 'cat.html'))).resolves.toBe(undefined) await expect(stderr).not.toMatch( @@ -117,7 +114,7 @@ describe('AMP Validation on Export', () => { stderr: true, }) expect(stdout).toMatch( - /warn.*The tag 'amp-video extension .js script' is missing or incorrect, but required by 'amp-video'/ + /error.*The parent tag of tag 'IMG-I-AMPHTML-INTRINSIC-SIZER' is 'div', but it can only be 'i-amphtml-sizer-intrinsic'/ ) expect(stdout).toMatch( /error.*The parent tag of tag 'IMG-I-AMPHTML-INTRINSIC-SIZER' is 'div', but it can only be 'i-amphtml-sizer-intrinsic'/ diff --git a/test/integration/amphtml/pages/auto-import.js b/test/integration/amphtml/pages/auto-import.js new file mode 100644 index 000000000000000..3c143238592a772 --- /dev/null +++ b/test/integration/amphtml/pages/auto-import.js @@ -0,0 +1,10 @@ +export const config = { amp: true } + +export default () => ( + +) diff --git a/test/integration/amphtml/test/index.test.js b/test/integration/amphtml/test/index.test.js index f10f5851f39bd8b..2ef48fee32655ba 100644 --- a/test/integration/amphtml/test/index.test.js +++ b/test/integration/amphtml/test/index.test.js @@ -112,6 +112,11 @@ describe('AMP Usage', () => { const html = await renderViaHTTP(appPort, '/only-amp') await validateAMP(html) }) + + it('should auto import extensions', async () => { + const html = await renderViaHTTP(appPort, '/auto-import') + await validateAMP(html) + }) }) describe('With AMP context', () => { diff --git a/yarn.lock b/yarn.lock index 87e1fcbeaa82d70..4685fc13441d7bf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,36 +2,47 @@ # yarn lockfile v1 -"@ampproject/toolbox-core@^1.1.1": - version "1.1.1" - resolved "https://registry.yarnpkg.com/@ampproject/toolbox-core/-/toolbox-core-1.1.1.tgz#540c8f3ab0f5d1faa1ba35282cd5f5f3f0e16a76" - integrity sha512-jcuVJUnGDRUEJgMYO6QVdf1dBy/oLZX3NjN2hYG48biFcPCvXevuv4xYFZMJsnsHSvXKg8y0qB8rANNyhTUN/A== +"@ampproject/toolbox-core@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@ampproject/toolbox-core/-/toolbox-core-2.0.0.tgz#3329a01eec8f767614385cc56cee8be32ccf7f32" + integrity sha512-xAJOmh6MPS2mdHNsK8mj1t8TLh6mlehirh0fOBsRhKCNCJXgg4Gfd2u5igy8VFq9sYnuWP/npFyjGX36qpXW5Q== dependencies: - node-fetch "2.6.0" + cross-fetch "3.0.4" -"@ampproject/toolbox-optimizer@1.1.1": - version "1.1.1" - resolved "https://registry.yarnpkg.com/@ampproject/toolbox-optimizer/-/toolbox-optimizer-1.1.1.tgz#be66245c966ba9b0f5e3020109f87fea90ea377d" - integrity sha512-LTtTM5FSOrWuTJ6mOwPfZmpUDI6polrNz3tX2EmDmDkjDK+43vSpq1OHtukivIFHafdixJuoeki5dF3PC/ZoWw== +"@ampproject/toolbox-optimizer@2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@ampproject/toolbox-optimizer/-/toolbox-optimizer-2.0.0.tgz#96ea3d26bc7a9f19718a27c721e021a121003601" + integrity sha512-ZYRi7vB4ALC8DnTHQLchAeHMGsFml/Zr4fNWBlTiMGfvWGL0XTV9YyP4s24IDwAlunEgynmz0FTrGMJdRpNf2Q== dependencies: - "@ampproject/toolbox-core" "^1.1.1" - "@ampproject/toolbox-runtime-version" "^1.1.1" - "@ampproject/toolbox-script-csp" "^1.1.1" + "@ampproject/toolbox-core" "^2.0.0" + "@ampproject/toolbox-runtime-version" "^2.0.0" + "@ampproject/toolbox-script-csp" "^2.0.0" + "@ampproject/toolbox-validator-rules" "^2.0.0" css "2.2.4" - parse5 "5.1.0" - parse5-htmlparser2-tree-adapter "5.1.0" + domhandler "3.0.0" + domutils "2.0.0" + htmlparser2 "4.0.0" + normalize-html-whitespace "1.0.0" + terser "4.6.3" -"@ampproject/toolbox-runtime-version@^1.1.1": - version "1.1.1" - resolved "https://registry.yarnpkg.com/@ampproject/toolbox-runtime-version/-/toolbox-runtime-version-1.1.1.tgz#628fe5091db4f90b68960620e22ad64f9f2563bd" - integrity sha512-ibmw5p+0Sz+wingbX/Dyboe8a0+XDkMfFGSM7KFE0h2z3Op9MADup8ZPLeHT54Z7cYKmB6ob60FVHtQQDhEXNw== +"@ampproject/toolbox-runtime-version@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@ampproject/toolbox-runtime-version/-/toolbox-runtime-version-2.0.0.tgz#01202be490ce8baf8654127de35dff5f93e922a0" + integrity sha512-7XDlo7l4Ozpc/XWmJeYNF0ZfXCy7Vdh07spN+xEOst8gF99yaavZRNVkdgyTxLR3BpY9RIqqhSs6OxfkOKlRZQ== dependencies: - "@ampproject/toolbox-core" "^1.1.1" + "@ampproject/toolbox-core" "^2.0.0" -"@ampproject/toolbox-script-csp@^1.1.1": - version "1.1.1" - resolved "https://registry.yarnpkg.com/@ampproject/toolbox-script-csp/-/toolbox-script-csp-1.1.1.tgz#0b049a1c86c99f300162a10e1b9ce83c6e354a45" - integrity sha512-gACGfsVKinCy/977FSrlVgo6jxTZ0lcTCvCnRlNwvSOcxJVm+jJR3sP7/F43fpak9Gsq/EwFaatfnNMbunPc+w== +"@ampproject/toolbox-script-csp@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@ampproject/toolbox-script-csp/-/toolbox-script-csp-2.0.0.tgz#7aa55fb693749e657b63985ebe49e1d3489a8b79" + integrity sha512-9mW3yiKwjORi0ViuayphVZii9MwiPhneZGZWy+kN44xr3SpN7iQC52/WWWTBOZX9z1zaUh8DqGc//VFY5ILSAw== + +"@ampproject/toolbox-validator-rules@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@ampproject/toolbox-validator-rules/-/toolbox-validator-rules-2.0.0.tgz#eefdce2f7f773e4675d72c7a1068c70105a647c3" + integrity sha512-5f2IvT1m/zNtqfNXFE9V4ZtKofIttST65QL1wf4lKjBhJsbZgAAeR/u4DgOvftRVRmgn6IpUiWY1pt9xWaI5yA== + dependencies: + cross-fetch "3.0.4" "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.5.5": version "7.5.5" @@ -5352,6 +5363,14 @@ cross-env@6.0.3: dependencies: cross-spawn "^7.0.0" +cross-fetch@3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.0.4.tgz#7bef7020207e684a7638ef5f2f698e24d9eb283c" + integrity sha512-MSHgpjQqgbT/94D4CyADeNoYh52zMkCX4pcJvPP5WqPsLFMKjr2TCMg381ox5qI0ii2dPwaLx/00477knXqXVw== + dependencies: + node-fetch "2.6.0" + whatwg-fetch "3.0.0" + cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.5: version "6.0.5" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4" @@ -6084,7 +6103,7 @@ doctrine@^3.0.0: dependencies: esutils "^2.0.2" -dom-serializer@0: +dom-serializer@0, dom-serializer@^0.2.1: version "0.2.2" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51" integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g== @@ -6127,6 +6146,13 @@ domexception@^1.0.1: dependencies: webidl-conversions "^4.0.2" +domhandler@3.0.0, domhandler@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-3.0.0.tgz#51cd13efca31da95bbb0c5bee3a48300e333b3e9" + integrity sha512-eKLdI5v9m67kbXQbJSNn1zjh0SDzvzWVWtX+qEI3eMjZw8daH9k8rlj1FZY9memPwjiskQFbe7vHVVJIAqoEhw== + dependencies: + domelementtype "^2.0.1" + domhandler@^2.3.0: version "2.4.2" resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803" @@ -6142,6 +6168,15 @@ domutils@1.5.1: dom-serializer "0" domelementtype "1" +domutils@2.0.0, domutils@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.0.0.tgz#15b8278e37bfa8468d157478c58c367718133c08" + integrity sha512-n5SelJ1axbO636c2yUtOGia/IcJtVtlhQbFiVDBZHKV5ReJO1ViX7sFEemtuyoAnBxk5meNSYgA8V4s0271efg== + dependencies: + dom-serializer "^0.2.1" + domelementtype "^2.0.1" + domhandler "^3.0.0" + domutils@^1.5.1, domutils@^1.7.0: version "1.7.0" resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a" @@ -8093,6 +8128,16 @@ html-entities@^1.2.0: resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f" integrity sha1-DfKTUfByEWNRXfueVUPl9u7VFi8= +htmlparser2@4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-4.0.0.tgz#6034658db65b7713a572a9ebf79f650832dceec8" + integrity sha512-cChwXn5Vam57fyXajDtPXL1wTYc8JtLbr2TN76FYu05itVVVealxLowe2B3IEznJG4p9HAYn/0tJaRlGuEglFQ== + dependencies: + domelementtype "^2.0.1" + domhandler "^3.0.0" + domutils "^2.0.0" + entities "^2.0.0" + htmlparser2@^3.9.1: version "3.10.1" resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f" @@ -11172,6 +11217,11 @@ nopt@^4.0.1: abbrev "1" osenv "^0.1.4" +normalize-html-whitespace@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/normalize-html-whitespace/-/normalize-html-whitespace-1.0.0.tgz#5e3c8e192f1b06c3b9eee4b7e7f28854c7601e34" + integrity sha512-9ui7CGtOOlehQu0t/OhhlmDyc71mKVlv+4vF+me4iZLPrNtRL2xoquEdfZxasC/bdQi/Hr3iTrpyRKIG+ocabA== + normalize-package-data@^2.0.0, normalize-package-data@^2.3.0, normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.3.5, normalize-package-data@^2.4.0: version "2.5.0" resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8" @@ -11949,28 +11999,11 @@ parse-url@^5.0.0: parse-path "^4.0.0" protocols "^1.4.0" -parse5-htmlparser2-tree-adapter@5.1.0: - version "5.1.0" - resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-5.1.0.tgz#a8244ee12bbd6b8937ad2a16ea43fe348aebcc86" - integrity sha512-OrI4DNmghGcwDB3XN8FKKN7g5vBmau91uqj+VYuwuj/r6GhFBMBNymsM+Z9z+Z1p4HHgI0UuQirQRgh3W5d88g== - dependencies: - parse5 "^5.1.0" - parse5@4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608" integrity sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA== -parse5@5.1.0: - version "5.1.0" - resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.0.tgz#c59341c9723f414c452975564c7c00a68d58acd2" - integrity sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ== - -parse5@^5.1.0: - version "5.1.1" - resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178" - integrity sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug== - parseurl@~1.3.3: version "1.3.3" resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4" @@ -15859,6 +15892,15 @@ terser@4.4.2: source-map "~0.6.1" source-map-support "~0.5.12" +terser@4.6.3: + version "4.6.3" + resolved "https://registry.yarnpkg.com/terser/-/terser-4.6.3.tgz#e33aa42461ced5238d352d2df2a67f21921f8d87" + integrity sha512-Lw+ieAXmY69d09IIc/yqeBqXpEQIpDGZqT34ui1QWXIUpR2RjbqEkT8X7Lgex19hslSqcWM5iMN2kM11eMsESQ== + dependencies: + commander "^2.20.0" + source-map "~0.6.1" + source-map-support "~0.5.12" + terser@^3.8.2: version "3.17.0" resolved "https://registry.yarnpkg.com/terser/-/terser-3.17.0.tgz#f88ffbeda0deb5637f9d24b0da66f4e15ab10cb2"