@next/third-parties 13.5.6-canary.4

package/README.md

@@ -0,0 +1,43 @@
+# Experimental `@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%"
+      mode="place"
+      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 -->

package/dist/ThirdPartyScriptEmbed.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type ScriptEmbed = {
+    html?: string | null;
+    height?: number | null;
+    width?: number | null;
+    children?: React.ReactElement | React.ReactElement[];
+    dataNtpc?: string;
+};
+export default function ThirdPartyScriptEmbed({ html, height, width, children, dataNtpc, }: ScriptEmbed): React.JSX.Element;

package/dist/ThirdPartyScriptEmbed.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+function ThirdPartyScriptEmbed({ html, height = null, width = null, children, dataNtpc = '', }) {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        children,
+        html ? (react_1.default.createElement("div", { style: {
+                height: height != null ? `${height}px` : 'auto',
+                width: width != null ? `${width}px` : 'auto',
+            }, "data-ntpc": dataNtpc, dangerouslySetInnerHTML: { __html: html } })) : null));
+}
+exports.default = ThirdPartyScriptEmbed;

package/dist/google/google-maps-embed.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { GoogleMapsEmbed as GoogleMapsEmbedTypes } from '../types/google';
+export default function GoogleMapsEmbed(props: GoogleMapsEmbedTypes): React.JSX.Element;

package/dist/google/google-maps-embed.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const third_party_capital_1 = require("third-party-capital");
+const ThirdPartyScriptEmbed_1 = __importDefault(require("../ThirdPartyScriptEmbed"));
+function GoogleMapsEmbed(props) {
+    const { apiKey, ...restProps } = props;
+    const formattedProps = { ...restProps, key: apiKey };
+    const { html } = (0, third_party_capital_1.GoogleMapsEmbed)(formattedProps);
+    return (react_1.default.createElement(ThirdPartyScriptEmbed_1.default, { height: formattedProps.height || null, width: formattedProps.width || null, html: html, dataNtpc: "GoogleMapsEmbed" }));
+}
+exports.default = GoogleMapsEmbed;

package/dist/google/gtm.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+declare global {
+    interface Window {
+        dataLayer?: Object[];
+        [key: string]: any;
+    }
+}
+type GTMParams = {
+    gtmId: string;
+    dataLayer: string[];
+    dataLayerName: string;
+    auth: string;
+    preview: string;
+};
+export declare function GoogleTagManager(props: GTMParams): React.JSX.Element;
+export declare const sendGTMEvent: (data: Object) => void;
+export {};

package/dist/google/gtm.js

@@ -0,0 +1,44 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sendGTMEvent = exports.GoogleTagManager = void 0;
+// TODO: Evaluate import 'client only'
+const react_1 = __importDefault(require("react"));
+const script_1 = __importDefault(require("next/script"));
+let currDataLayerName = undefined;
+function GoogleTagManager(props) {
+    const { gtmId, dataLayerName = 'dataLayer', auth, preview, dataLayer } = props;
+    if (currDataLayerName === undefined) {
+        currDataLayerName = dataLayerName;
+    }
+    const gtmLayer = dataLayerName !== 'dataLayer' ? `$l=${dataLayerName}` : '';
+    const gtmAuth = auth ? `&gtm_auth=${auth}` : '';
+    const gtmPreview = preview ? `&gtm_preview=${preview}&gtm_cookies_win=x` : '';
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(script_1.default, { id: "_next-gtm-init", dangerouslySetInnerHTML: {
+                __html: `
+      (function(w,l){
+        w[l]=w[l]||[];
+        w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
+        ${dataLayer ? `w[l].push(${JSON.stringify(dataLayer)})` : ''}
+      })(window,'${dataLayerName}');`,
+            } }),
+        react_1.default.createElement(script_1.default, { id: "_next-gtm", src: `https://www.googletagmanager.com/gtm.js?id=${gtmId}${gtmLayer}${gtmAuth}${gtmPreview}` })));
+}
+exports.GoogleTagManager = GoogleTagManager;
+const sendGTMEvent = (data) => {
+    if (currDataLayerName === undefined) {
+        console.warn(`@next/third-parties: GTM has not been initialized`);
+        return;
+    }
+    if (window[currDataLayerName]) {
+        window[currDataLayerName].push(data);
+    }
+    else {
+        console.warn(`@next/third-parties: GTM dataLayer ${currDataLayerName} does not exist`);
+    }
+};
+exports.sendGTMEvent = sendGTMEvent;

package/dist/google/index.d.ts

@@ -0,0 +1,3 @@
+export { default as GoogleMapsEmbed } from './google-maps-embed';
+export { default as YouTubeEmbed } from './youtube-embed';
+export { GoogleTagManager, sendGTMEvent } from './gtm';

package/dist/google/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sendGTMEvent = exports.GoogleTagManager = exports.YouTubeEmbed = exports.GoogleMapsEmbed = void 0;
+var google_maps_embed_1 = require("./google-maps-embed");
+Object.defineProperty(exports, "GoogleMapsEmbed", { enumerable: true, get: function () { return __importDefault(google_maps_embed_1).default; } });
+var youtube_embed_1 = require("./youtube-embed");
+Object.defineProperty(exports, "YouTubeEmbed", { enumerable: true, get: function () { return __importDefault(youtube_embed_1).default; } });
+var gtm_1 = require("./gtm");
+Object.defineProperty(exports, "GoogleTagManager", { enumerable: true, get: function () { return gtm_1.GoogleTagManager; } });
+Object.defineProperty(exports, "sendGTMEvent", { enumerable: true, get: function () { return gtm_1.sendGTMEvent; } });

package/dist/google/youtube-embed.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { YouTubeEmbed as YouTubeEmbedTypes } from '../types/google';
+export default function YouTubeEmbed(props: YouTubeEmbedTypes): React.JSX.Element;

package/dist/google/youtube-embed.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const script_1 = __importDefault(require("next/script"));
+const third_party_capital_1 = require("third-party-capital");
+const ThirdPartyScriptEmbed_1 = __importDefault(require("../ThirdPartyScriptEmbed"));
+const scriptStrategy = {
+    server: 'beforeInteractive',
+    client: 'afterInteractive',
+    idle: 'lazyOnload',
+    worker: 'worker',
+};
+function YouTubeEmbed(props) {
+    const { html, scripts, stylesheets } = (0, third_party_capital_1.YouTubeEmbed)(props);
+    return (react_1.default.createElement(ThirdPartyScriptEmbed_1.default, { height: props.height || null, width: props.width || null, html: html, dataNtpc: "YouTubeEmbed" }, scripts === null || scripts === void 0 ? void 0 : scripts.map((script) => (react_1.default.createElement(script_1.default, { src: script.url, strategy: scriptStrategy[script.strategy], stylesheets: stylesheets })))));
+}
+exports.default = YouTubeEmbed;

package/dist/types/google.d.ts

@@ -0,0 +1,21 @@
+export type GoogleMapsEmbed = {
+    height?: number;
+    width?: number;
+    mode: 'place' | 'view' | 'directions' | 'streetview' | 'search';
+    apiKey: string;
+    style: string;
+    allowfullscreen: boolean;
+    loading: 'eager' | 'lazy';
+    q?: string;
+    center?: string;
+    zoom?: string;
+    maptype?: string;
+    language?: string;
+    region?: string;
+};
+export type YouTubeEmbed = {
+    height?: number;
+    width?: number;
+    videoid: string;
+    playlabel?: string;
+};

package/dist/types/google.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@next/third-parties",
+  "version": "13.5.6-canary.4",
+  "repository": {
+    "url": "vercel/next.js",
+    "directory": "packages/third-parties"
+  },
+  "exports": {
+    "./google": "./dist/google/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "node ../../scripts/rm.mjs dist && tsc -d -p tsconfig.json",
+    "prepublishOnly": "cd ../../ && turbo run build",
+    "dev": "tsc -d -w -p tsconfig.json",
+    "typescript": "tsec --noEmit -p tsconfig.json"
+  },
+  "dependencies": {
+    "third-party-capital": "1.0.20"
+  },
+  "devDependencies": {
+    "next": "13.5.6-canary.4",
+    "outdent": "0.8.0",
+    "prettier": "2.5.1"
+  },
+  "peerDependencies": {
+    "next": "^13.0.0",
+    "react": "^18.2.0"
+  }
+}