Skip to content

Commit

Permalink
Updating Third party capital version. (#54418)
Browse files Browse the repository at this point in the history
Updated Third-party-capital version. Refactored `next/third-parties` to update the way components are built. Updated tests.

cc: @kara @huozhi @gnoff
  • Loading branch information
janicklas-ralph authored Aug 29, 2023
1 parent 30937ee commit d3a1079
Showing 16 changed files with 94 additions and 193 deletions.
10 changes: 5 additions & 5 deletions packages/third-parties/README.md
Original file line number Diff line number Diff line change
@@ -10,13 +10,13 @@

### 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.
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'
import { YouTubeEmbed } from '@next/third-parties/google'

export default function Page() {
return <YoutubeEmbed videoid="ogfYd705cRs" height={400} />
return <YouTubeEmbed videoid="ogfYd705cRs" height={400} />
}
```

@@ -33,8 +33,8 @@ export default function Page() {
apiKey="XYZ"
height={200}
width="100%"
mapMode="place"
parameters="q=Brooklyn+Bridge,New+York,NY"
mode="place"
q="Brooklyn+Bridge,New+York,NY"
/>
)
}
3 changes: 1 addition & 2 deletions packages/third-parties/package.json
Original file line number Diff line number Diff line change
@@ -16,12 +16,11 @@
"scripts": {
"build": "rm -rf dist && tsc -d -p tsconfig.json",
"prepublishOnly": "cd ../../ && turbo run build",
"update-third-parties": "rm -rf src/**/index.tsx && node scripts/update-third-parties",
"dev": "tsc -d -w -p tsconfig.json",
"typescript": "tsec --noEmit -p tsconfig.json"
},
"dependencies": {
"third-party-capital": "1.0.17"
"third-party-capital": "1.0.20"
},
"devDependencies": {
"next": "13.4.20-canary.12",
118 changes: 0 additions & 118 deletions packages/third-parties/scripts/update-third-parties.js

This file was deleted.

12 changes: 6 additions & 6 deletions packages/third-parties/src/ThirdPartyScriptEmbed.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import React from 'react'

export type ScriptEmbed = {
content?: string
html?: string | null
height?: number | null
width?: number | null
children?: React.ReactElement | React.ReactElement[]
dataNtpc?: string
}

export default function ThirdPartyScriptEmbed({
content,
html,
height = null,
width = null,
children,
@@ -19,17 +19,17 @@ export default function ThirdPartyScriptEmbed({
<>
{/* insert script children */}
{children}
{/* insert content */}
{content && (
{/* insert html */}
{html ? (
<div
style={{
height: height != null ? `${height}px` : 'auto',
width: width != null ? `${width}px` : 'auto',
}}
data-ntpc={dataNtpc}
dangerouslySetInnerHTML={{ __html: content }}
dangerouslySetInnerHTML={{ __html: html }}
/>
)}
) : null}
</>
)
}
20 changes: 20 additions & 0 deletions packages/third-parties/src/google/GoogleMapsEmbed.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React from 'react'
import { GoogleMapsEmbed as TPCGoogleMapEmbed } from 'third-party-capital'

import ThirdPartyScriptEmbed from '../ThirdPartyScriptEmbed'
import { GoogleMapsEmbed as GoogleMapsEmbedTypes } from '../types/google'

export default function GoogleMapsEmbed(props: GoogleMapsEmbedTypes) {
const { apiKey, ...restProps } = props
const formattedProps = { ...restProps, key: apiKey }
const { html } = TPCGoogleMapEmbed(formattedProps)

return (
<ThirdPartyScriptEmbed
height={formattedProps.height || null}
width={formattedProps.width || null}
html={html}
dataNtpc="GoogleMapsEmbed"
></ThirdPartyScriptEmbed>
)
}
34 changes: 34 additions & 0 deletions packages/third-parties/src/google/YouTubeEmbed.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import React from 'react'
import Script, { ScriptProps } from 'next/script'
import { YouTubeEmbed as TPCYouTubeEmbed } from 'third-party-capital'

import ThirdPartyScriptEmbed from '../ThirdPartyScriptEmbed'
import { YouTubeEmbed as YouTubeEmbedTypes } from '../types/google'

const scriptStrategy = {
server: 'beforeInteractive',
client: 'afterInteractive',
idle: 'lazyOnload',
worker: 'worker',
}

export default function YouTubeEmbed(props: YouTubeEmbedTypes) {
const { html, scripts, stylesheets } = TPCYouTubeEmbed(props)

return (
<ThirdPartyScriptEmbed
height={props.height || null}
width={props.width || null}
html={html}
dataNtpc="YouTubeEmbed"
>
{scripts?.map((script) => (
<Script
src={script.url}
strategy={scriptStrategy[script.strategy] as ScriptProps['strategy']}
stylesheets={stylesheets}
/>
))}
</ThirdPartyScriptEmbed>
)
}
41 changes: 2 additions & 39 deletions packages/third-parties/src/google/index.tsx
Original file line number Diff line number Diff line change
@@ -1,39 +1,2 @@
/**
* 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} allowfullscreen=${args.allowfullscreen} referrerpolicy="no-referrer-when-downgrade"></iframe>`}
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"
stylesheets={[
'https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.css',
]}
/>
</ThirdPartyScriptEmbed>
)
}
export { default as GoogleMapsEmbed } from './GoogleMapsEmbed'
export { default as YouTubeEmbed } from './YouTubeEmbed'
4 changes: 0 additions & 4 deletions packages/third-parties/src/google/tpc-config.json

This file was deleted.

11 changes: 8 additions & 3 deletions packages/third-parties/src/types/google.ts
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
export type GoogleMapsEmbed = {
height?: number
width?: number
mapMode: 'place' | 'view' | 'directions' | 'streetview' | 'search'
mode: 'place' | 'view' | 'directions' | 'streetview' | 'search'
apiKey: string
parameters: string
style: string
allowfullscreen: boolean
loading: 'eager' | 'lazy'
q?: string
center?: string
zoom?: string
maptype?: string
language?: string
region?: string
}

export type YoutubeEmbed = {
export type YouTubeEmbed = {
height?: number
width?: number
videoid: string
8 changes: 4 additions & 4 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions test/e2e/app-dir/third-parties/app/google-maps-embed/page.js
Original file line number Diff line number Diff line change
@@ -8,8 +8,9 @@ const Page = () => {
apiKey="XYZ"
height={200}
width="100%"
mapMode="place"
parameters="q=Brooklyn+Bridge,New+York,NY"
mode="place"
id="maps-embed"
q="Brooklyn+Bridge,New+York,NY"
/>
</div>
)
4 changes: 2 additions & 2 deletions test/e2e/app-dir/third-parties/app/youtube-embed/page.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { YoutubeEmbed } from '@next/third-parties/google'
import { YouTubeEmbed } from '@next/third-parties/google'

const Page = () => {
return (
<div class="container">
<h1>Youtube Embed</h1>
<YoutubeEmbed videoid="ogfYd705cRs" height={400} />
<YouTubeEmbed videoid="ogfYd705cRs" height={400} />
</div>
)
}
5 changes: 3 additions & 2 deletions test/e2e/app-dir/third-parties/basic.test.ts
Original file line number Diff line number Diff line change
@@ -12,7 +12,7 @@ createNextDescribe(
it('renders YoutubeEmbed', async () => {
const $ = await next.render$('/youtube-embed')

const baseContainer = $('[data-ntpc="YoutubeEmbed"]')
const baseContainer = $('[data-ntpc="YouTubeEmbed"]')
const youtubeContainer = $('lite-youtube')
expect(baseContainer.length).toBe(1)
expect(youtubeContainer.length).toBe(1)
@@ -22,8 +22,9 @@ createNextDescribe(
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"]'
'[src^="https://www.google.com/maps/embed/v1/place?key=XYZ"]'
)
expect(baseContainer.length).toBe(1)
expect(mapContainer.length).toBe(1)
Loading

0 comments on commit d3a1079

Please sign in to comment.