archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updating Third party capital version. (#54418)

Browse source 
Updated Third-party-capital version. Refactored `next/third-parties` to update the way components are built. Updated tests.

cc: @kara @huozhi @gnoff
This commit is contained in:
Janicklas Ralph 2023-08-29 16:13:35 -07:00 committed by GitHub
parent 30937eebc2
commit d3a107991c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 94 additions and 193 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/third-parties/README.md
View file

@ -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
packages/third-parties/package.json
View file

@ -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
packages/third-parties/scripts/update-third-parties.js
View file

@ -1,118 +0,0 @@
const fs = require('fs/promises')
const path = require('path')
const AllThirdParties = require('third-party-capital')
// eslint-disable-next-line import/no-extraneous-dependencies
const prettier = require('prettier')
// eslint-disable-next-line import/no-extraneous-dependencies
const { outdent } = require('outdent')
const scriptStrategy = {
server: 'beforeInteractive',
client: 'afterInteractive',
idle: 'lazyOnload',
worker: 'worker',
}
const SRC = path.join(__dirname, '../src')
const CONFIG_FILE_NAME = 'tpc-config.json'
function generateComponent(thirdParty) {
let thirdPartyFunctions = ''
const insertScripts = (id, scripts, stylesheets) => {
let props = ''
if (stylesheets?.length > 0) {
props += `
stylesheets={${JSON.stringify(stylesheets)}}`
}
return scripts
.map((script) => {
if (typeof script === 'string') {
// External script with only URL
return `<Script src="${script}"${props} />`
} else if (script.url) {
// External script with additional properties
// TODO: Validate the strategy. Set fallback if an inpnpvalid strategy is passed
const { url, strategy } = script
return `<Script src={\`${url}\`} strategy="${scriptStrategy[strategy]}"${props} />`
} else if (script.code) {
// Inline script with additional properties
const { code, strategy } = script
return outdent`<Script
id="${id}"
strategy="${scriptStrategy[strategy]}"
dangerouslySetInnerHTML={{
__html: \`${code}\`,
}}${props}
/>`
}
return ''
})
.join('')
}
const { id, description, content, scripts, stylesheets } =
AllThirdParties[thirdParty]
thirdPartyFunctions += outdent`
// ${description}
export function ${thirdParty}(args: Types.${thirdParty}) {
return (
<ThirdPartyScriptEmbed
${content ? 'height={args.height || null}' : ''}
${content ? 'width={args.width || null}' : ''}
${content ? `content={\`${content}\`}` : ''}
dataNtpc="${thirdParty}"
>
${scripts?.length > 0 ? insertScripts(id, scripts, stylesheets) : ''}
</ThirdPartyScriptEmbed>
)
}
`
return thirdPartyFunctions
}
;(async () => {
const dirs = (await fs.readdir(SRC, { withFileTypes: true }))
.filter((dirent) => dirent.isDirectory())
.map((dirent) => dirent.name)
for (let dir of dirs) {
// Fetch the list of third-parties from tpc-config.json
// Then retrieve its loading instructions from Third Party Capital
const dirPath = path.join(SRC, dir)
const configFile = (await fs.readdir(dirPath)).find(
(file) => file === CONFIG_FILE_NAME
)
if (!configFile) continue
const config = JSON.parse(await fs.readFile(path.join(dirPath, configFile)))
let thirdPartyFunctions = `/**
* 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/${dir}'
`
for (const thirdParty of Object.values(config)) {
thirdPartyFunctions += generateComponent(thirdParty)
}
await Promise.all([
fs.writeFile(
path.join(dirPath, 'index.tsx'),
prettier.format(thirdPartyFunctions, { semi: false, parser: 'babel' })
),
])
}
})()

12
packages/third-parties/src/ThirdPartyScriptEmbed.tsx
View file

@ -1,7 +1,7 @@
import React from 'react'
export type ScriptEmbed = {
content?: string
html?: string | null
height?: number | null
width?: number | null
children?: React.ReactElement | React.ReactElement[]
@ -9,7 +9,7 @@ export type ScriptEmbed = {
}
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
packages/third-parties/src/google/GoogleMapsEmbed.tsx Normal file
View file

@ -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
packages/third-parties/src/google/YouTubeEmbed.tsx Normal file
View file

@ -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
packages/third-parties/src/google/index.tsx
View file

@ -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
packages/third-parties/src/google/tpc-config.json
View file

@ -1,4 +0,0 @@
{
"google-maps-embed": "GoogleMapsEmbed",
"youtube-embed": "YoutubeEmbed"
}

11
packages/third-parties/src/types/google.ts
View file

@ -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
pnpm-lock.yaml
View file

@ -1678,8 +1678,8 @@ importers:
specifier: ^18.2.0
version: 18.2.0
third-party-capital:
specifier: 1.0.17
version: 1.0.17
specifier: 1.0.20
version: 1.0.20
devDependencies:
next:
specifier: 13.4.20-canary.12
@ -25414,8 +25414,8 @@ packages:
/text-table@0.2.0:
resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
/third-party-capital@1.0.17:
resolution: {integrity: sha512-TOoAmaUg1sYZNErMrsEdEp8BSgtnnJL9nhHwisv3kZ2d1Ze0Cjj4zdv/qgwhVPqMvecTI3ZNxhrKSvkYEY2qtg==}
/third-party-capital@1.0.20:
resolution: {integrity: sha512-oB7yIimd8SuGptespDAZnNkzIz+NWaJCu2RMsbs4Wmp9zSDUM8Nhi3s2OOcqYuv3mN4hitXc8DVx+LyUmbUDiA==}
dev: false
/throat@6.0.1:

5
test/e2e/app-dir/third-parties/app/google-maps-embed/page.js
View file

@ -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
test/e2e/app-dir/third-parties/app/youtube-embed/page.js
View file

@ -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
test/e2e/app-dir/third-parties/basic.test.ts
View file

@ -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)

4
test/e2e/third-parties/index.test.ts
View file

@ -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)
@ -23,7 +23,7 @@ createNextDescribe(
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)

4
test/e2e/third-parties/pages/google-maps-embed.js
View file

@ -8,8 +8,8 @@ const Page = () => {
apiKey="XYZ"
height={200}
width="100%"
mapMode="place"
parameters="q=Brooklyn+Bridge,New+York,NY"
mode="place"
q="Brooklyn+Bridge,New+York,NY"
/>
</div>
)

4
test/e2e/third-parties/pages/youtube-embed.js
View file

@ -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>
)
}