New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Adding GoogleMaps and Youtube embed components #52909
Changes from 61 commits
4beb690
4590570
857a189
ddf4e41
20ba09d
d4933f0
38a8e96
1af8446
16a7bac
8f51c4c
ebc5710
5881260
83e6ff0
0fe1533
ae5ed8c
7e9e0d9
ae7f11a
5e2180b
f5a9b50
7f784cb
2d4cd2c
f1066a1
5e5da7d
93ed720
ca57ab1
d7f8c8e
07b5a4e
1cd8274
912b3ef
aabab89
ba5ea22
ba00c27
bb48cf1
de1a007
621f0a7
c22aa26
9bb65ba
4090fca
e84f165
5e1cf89
f4636fd
8673256
4e4ce54
783849b
d4f6b24
ad7a98e
adbfbfc
556342d
08eb415
2c470f7
b96a0f8
cf5f23e
4de98c4
a30ed35
c97b2f8
0b2dd4f
43a0392
4ef700b
a097f14
8e691a9
216878d
19fa520
79dd2b1
5007ce0
4f5c760
3b23593
b05f5f1
b673935
3d1e694
ac95f83
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
# `@next/third-parties` | ||
|
||
`@next/third-parties` is a collection of components and utilities that can be used to efficiently load third-party libraries into your Next.js application. | ||
|
||
> Note: `@next/third-parties` is still experimental and under active development. | ||
|
||
# Usage | ||
|
||
## Google Third-Parties | ||
|
||
### YouTube Embed | ||
|
||
The `YoutubeEmbed` component is used to load and display a YouTube embed. This component loads faster by using [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed) under the hood. | ||
|
||
```js | ||
import { YoutubeEmbed } from '@next/third-parties/google' | ||
|
||
export default function Page() { | ||
return <YoutubeEmbed videoid="ogfYd705cRs" height={400} /> | ||
} | ||
``` | ||
|
||
### Google Maps Embed | ||
|
||
The `GoogleMapsEmbed` component can be used to add a [Google Maps Embed](https://developers.google.com/maps/documentation/embed/get-started) to your page. By default, it uses the `loading` attribute to lazy-load below the fold. | ||
|
||
```js | ||
import { GoogleMapsEmbed } from '@next/third-parties/google' | ||
|
||
export default function Page() { | ||
return ( | ||
<GoogleMapsEmbed | ||
apiKey="XYZ" | ||
height={200} | ||
width="100%" | ||
mapMode="place" | ||
parameters="q=Brooklyn+Bridge,New+York,NY" | ||
/> | ||
) | ||
} | ||
``` | ||
|
||
To get a better idea of how these components work, take a look at this [demo](https://test-next-script-housseindjirdeh.vercel.app/). <!--- TODO: Replace with a better demo page --> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
/** | ||
* This is an autogenerated file by update-third-parties.js | ||
*/ | ||
import React from 'react' | ||
import Script from 'next/script' | ||
|
||
import ThirdPartyScriptEmbed from '../ThirdPartyScriptEmbed' | ||
import * as Types from '../types/google' | ||
|
||
// Embed a Google Maps embed on your webpage | ||
export function GoogleMapsEmbed(args: Types.GoogleMapsEmbed) { | ||
return ( | ||
<ThirdPartyScriptEmbed | ||
height={args.height || null} | ||
width={args.width || null} | ||
content={`<iframe loading="lazy" src="https://www.google.com/maps/embed/v1/${args.mapMode}?key=${args.apiKey}&${args.parameters}" width=${args.width} height=${args.height} style=${args.style} loading=${args.loading} allowfullscreen=${args.allowfullscreen} referrerpolicy="no-referrer-when-downgrade"></iframe>`} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Looks like there are duplicate There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @janicklas-ralph Yeah this shouldn't be an issue anymore once you've upgraded to 1.0.19. I've separated out all the attributes instead of having everything in one single |
||
dataNtpc="GoogleMapsEmbed" | ||
></ThirdPartyScriptEmbed> | ||
) | ||
} | ||
// Embed a YouTube embed on your webpage. | ||
export function YoutubeEmbed(args: Types.YoutubeEmbed) { | ||
return ( | ||
<ThirdPartyScriptEmbed | ||
height={args.height || null} | ||
width={args.width || null} | ||
content={`<lite-youtube videoid=${args.videoid} playlabel=${args.playlabel}></lite-youtube>`} | ||
dataNtpc="YoutubeEmbed" | ||
> | ||
<Script | ||
src={`https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.js`} | ||
strategy="lazyOnload" | ||
// @ts-ignore | ||
stylesheets={[ | ||
'https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.css', | ||
]} | ||
/> | ||
</ThirdPartyScriptEmbed> | ||
) | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
export type GoogleMapsEmbed = { | ||
height?: number | ||
width?: number | ||
mapMode: 'place' | 'view' | 'directions' | 'streetview' | 'search' | ||
apiKey: string | ||
parameters: string | ||
style: string | ||
allowfullscreen: boolean | ||
loading: string | ||
} | ||
|
||
export type YoutubeEmbed = { | ||
height?: number | ||
width?: number | ||
videoid: string | ||
playlabel?: string | ||
} |
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This file seems not being used and can be deleted? |
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -0,0 +1,18 @@ | ||||||
import { GoogleMapsEmbed } from '@next/third-parties/google' | ||||||
|
||||||
const Page = () => { | ||||||
return ( | ||||||
<div class="container"> | ||||||
<h1>Youtube Embed</h1> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
<GoogleMapsEmbed | ||||||
apiKey="XYZ" | ||||||
height={200} | ||||||
width="100%" | ||||||
mapMode="place" | ||||||
parameters="q=Brooklyn+Bridge,New+York,NY" | ||||||
/> | ||||||
</div> | ||||||
) | ||||||
} | ||||||
|
||||||
export default Page |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
export default function Root({ children }: { children: React.ReactNode }) { | ||
return ( | ||
<html> | ||
<body>{children}</body> | ||
</html> | ||
) | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import { YoutubeEmbed } from '@next/third-parties/google' | ||
|
||
const Page = () => { | ||
return ( | ||
<div class="container"> | ||
<h1>Youtube Embed</h1> | ||
<YoutubeEmbed videoid="ogfYd705cRs" height={400} /> | ||
</div> | ||
) | ||
} | ||
|
||
export default Page |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import { createNextDescribe } from 'e2e-utils' | ||
|
||
createNextDescribe( | ||
'@next/third-parties basic usage', | ||
{ | ||
files: __dirname, | ||
dependencies: { | ||
'@next/third-parties': 'canary', | ||
}, | ||
}, | ||
({ next }) => { | ||
it('renders YoutubeEmbed', async () => { | ||
const $ = await next.render$('/youtube-embed') | ||
|
||
const baseContainer = $('[data-ntpc="YoutubeEmbed"]') | ||
const youtubeContainer = $('lite-youtube') | ||
expect(baseContainer.length).toBe(1) | ||
expect(youtubeContainer.length).toBe(1) | ||
}) | ||
|
||
it('renders GoogleMapsEmbed', async () => { | ||
const $ = await next.render$('/google-maps-embed') | ||
|
||
const baseContainer = $('[data-ntpc="GoogleMapsEmbed"]') | ||
const mapContainer = $( | ||
'[src="https://www.google.com/maps/embed/v1/place?key=XYZ&q=Brooklyn+Bridge,New+York,NY"]' | ||
) | ||
expect(baseContainer.length).toBe(1) | ||
expect(mapContainer.length).toBe(1) | ||
}) | ||
} | ||
) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
/** | ||
* @type {import('next').NextConfig} | ||
*/ | ||
const nextConfig = {} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. we can also skip the next config file as it's using the default config |
||
|
||
module.exports = nextConfig |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import { createNextDescribe } from 'e2e-utils' | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. can we change this test file to typescript like others to avoid potential mistakes in test files |
||
|
||
createNextDescribe( | ||
'@next/third-parties basic usage', | ||
{ | ||
files: __dirname, | ||
dependencies: { | ||
'@next/third-parties': 'canary', | ||
}, | ||
}, | ||
({ next }) => { | ||
it('renders YoutubeEmbed', async () => { | ||
const $ = await next.render$('/youtube-embed') | ||
|
||
const baseContainer = $('[data-ntpc="YoutubeEmbed"]') | ||
const youtubeContainer = $('lite-youtube') | ||
expect(baseContainer.length).toBe(1) | ||
expect(youtubeContainer.length).toBe(1) | ||
}) | ||
|
||
it('renders GoogleMapsEmbed', async () => { | ||
const $ = await next.render$('/google-maps-embed') | ||
|
||
const baseContainer = $('[data-ntpc="GoogleMapsEmbed"]') | ||
const mapContainer = $( | ||
'[src="https://www.google.com/maps/embed/v1/place?key=XYZ&q=Brooklyn+Bridge,New+York,NY"]' | ||
) | ||
expect(baseContainer.length).toBe(1) | ||
expect(mapContainer.length).toBe(1) | ||
}) | ||
} | ||
) |
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -0,0 +1,18 @@ | ||||||
import { GoogleMapsEmbed } from '@next/third-parties/google' | ||||||
|
||||||
const Page = () => { | ||||||
return ( | ||||||
<div class="container"> | ||||||
<h1>Youtube Embed</h1> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
<GoogleMapsEmbed | ||||||
apiKey="XYZ" | ||||||
height={200} | ||||||
width="100%" | ||||||
mapMode="place" | ||||||
parameters="q=Brooklyn+Bridge,New+York,NY" | ||||||
/> | ||||||
</div> | ||||||
) | ||||||
} | ||||||
|
||||||
export default Page |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import { YoutubeEmbed } from '@next/third-parties/google' | ||
|
||
const Page = () => { | ||
return ( | ||
<div class="container"> | ||
<h1>Youtube Embed</h1> | ||
<YoutubeEmbed videoid="ogfYd705cRs" height={400} /> | ||
</div> | ||
) | ||
} | ||
|
||
export default Page |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not super important, and not relevant for this PR, but @janicklas-ralph do you think it would be better to have this component named
<YouTubeEmbed>
instead? If so, I can update Third Party Capital's export and we can submit an additional PR that just runs the build script againThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sure
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since you're using version 1.0.18 now, I think it's easier if we just update the export naming to
YouTubeEmbed
now to match Third Party Capital instead of pushing out a new PRThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@janicklas-ralph Are we planning on changing this in this PR or a follow-up?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It looks like we downgraded back to
1.0.17
in this PR. I think the plan is to do this in a follow-up PR once upgrading to the latest version.