Updating Third party capital version.

packages/third-parties/README.md

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

packages/third-parties/package.json

@@ -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",

packages/third-parties/src/ThirdPartyScriptEmbed.tsx

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

packages/third-parties/src/google/GoogleMapsEmbed.tsx

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

packages/third-parties/src/google/YouTubeEmbed.tsx

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

packages/third-parties/src/google/index.tsx

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

packages/third-parties/src/types/google.ts

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

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

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

test/e2e/app-dir/third-parties/app/youtube-embed/page.js

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

test/e2e/app-dir/third-parties/basic.test.ts

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