@next/third-parties 14.0.5-canary.2 → 14.0.5-canary.20

package/dist/ThirdPartyScriptEmbed.d.ts

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

package/dist/ThirdPartyScriptEmbed.js

@@ -1,30 +1,8 @@
 "use strict";
 'use client';
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 function ThirdPartyScriptEmbed({ html, height = null, width = null, children, dataNtpc = '', }) {
     (0, react_1.useEffect)(() => {
         if (dataNtpc) {
@@ -38,11 +16,9 @@ function ThirdPartyScriptEmbed({ html, height = null, width = null, children, da
             });
         }
     }, [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));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, html ? ((0, jsx_runtime_1.jsx)("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/ga.d.ts

@@ -0,0 +1,8 @@
+import type { GAParams } from '../types/google';
+declare global {
+    interface Window {
+        dataLayer?: Object[];
+    }
+}
+export declare function GoogleAnalytics(props: GAParams): import("react/jsx-runtime").JSX.Element;
+export declare const sendGAEvent: (...args: Object[]) => void;

package/dist/google/ga.js

@@ -0,0 +1,51 @@
+"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.sendGAEvent = exports.GoogleAnalytics = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// TODO: Evaluate import 'client only'
+const react_1 = require("react");
+const script_1 = __importDefault(require("next/script"));
+let currDataLayerName = undefined;
+function GoogleAnalytics(props) {
+    const { gaId, dataLayerName = 'dataLayer' } = props;
+    if (currDataLayerName === undefined) {
+        currDataLayerName = dataLayerName;
+    }
+    (0, react_1.useEffect)(() => {
+        // performance.mark is being used as a feature use signal. While it is traditionally used for performance
+        // benchmarking it is low overhead and thus considered safe to use in production and it is a widely available
+        // existing API.
+        // The performance measurement will be handled by Chrome Aurora
+        performance.mark('mark_feature_usage', {
+            detail: {
+                feature: 'next-third-parties-ga',
+            },
+        });
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(script_1.default, { id: "_next-ga-init", dangerouslySetInnerHTML: {
+                    __html: `
+          window['${dataLayerName}'] = window['${dataLayerName}'] || [];
+          function gtag(){window['${dataLayerName}'].push(arguments);}
+          gtag('js', new Date());
+
+          gtag('config', '${gaId}');`,
+                } }), (0, jsx_runtime_1.jsx)(script_1.default, { id: "_next-ga", src: `https://www.googletagmanager.com/gtag/js?id=${gaId}` })] }));
+}
+exports.GoogleAnalytics = GoogleAnalytics;
+const sendGAEvent = (...args) => {
+    if (currDataLayerName === undefined) {
+        console.warn(`@next/third-parties: GA has not been initialized`);
+        return;
+    }
+    if (window[currDataLayerName]) {
+        window[currDataLayerName].push(...args);
+    }
+    else {
+        console.warn(`@next/third-parties: GA dataLayer ${currDataLayerName} does not exist`);
+    }
+};
+exports.sendGAEvent = sendGAEvent;

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

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

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

@@ -3,13 +3,13 @@ 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 jsx_runtime_1 = require("react/jsx-runtime");
 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" }));
+    return ((0, jsx_runtime_1.jsx)(ThirdPartyScriptEmbed_1.default, { height: formattedProps.height || null, width: formattedProps.width || null, html: html, dataNtpc: "GoogleMapsEmbed" }));
 }
 exports.default = GoogleMapsEmbed;

package/dist/google/gtm.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { GTMParams } from '../types/google';
-export declare function GoogleTagManager(props: GTMParams): React.JSX.Element;
+export declare function GoogleTagManager(props: GTMParams): import("react/jsx-runtime").JSX.Element;
 export declare const sendGTMEvent: (data: Object) => void;

package/dist/google/gtm.js

@@ -1,35 +1,13 @@
 "use strict";
 'use client';
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 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;
+const jsx_runtime_1 = require("react/jsx-runtime");
 // TODO: Evaluate import 'client only'
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const script_1 = __importDefault(require("next/script"));
 let currDataLayerName = undefined;
 function GoogleTagManager(props) {
@@ -44,22 +22,21 @@ function GoogleTagManager(props) {
         // performance.mark is being used as a feature use signal. While it is traditionally used for performance
         // benchmarking it is low overhead and thus considered safe to use in production and it is a widely available
         // existing API.
+        // The performance measurement will be handled by Chrome Aurora
         performance.mark('mark_feature_usage', {
             detail: {
                 feature: 'next-third-parties-gtm',
             },
         });
     }, []);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(script_1.default, { id: "_next-gtm-init", dangerouslySetInnerHTML: {
-                __html: `
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(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", "data-ntpc": "GTM", src: `https://www.googletagmanager.com/gtm.js?id=${gtmId}${gtmLayer}${gtmAuth}${gtmPreview}` })));
+                } }), (0, jsx_runtime_1.jsx)(script_1.default, { id: "_next-gtm", "data-ntpc": "GTM", src: `https://www.googletagmanager.com/gtm.js?id=${gtmId}${gtmLayer}${gtmAuth}${gtmPreview}` })] }));
 }
 exports.GoogleTagManager = GoogleTagManager;
 const sendGTMEvent = (data) => {

package/dist/google/index.d.ts

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

package/dist/google/index.js

@@ -3,7 +3,7 @@ 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;
+exports.sendGAEvent = exports.GoogleAnalytics = 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");
@@ -11,3 +11,6 @@ Object.defineProperty(exports, "YouTubeEmbed", { enumerable: true, get: function
 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; } });
+var ga_1 = require("./ga");
+Object.defineProperty(exports, "GoogleAnalytics", { enumerable: true, get: function () { return ga_1.GoogleAnalytics; } });
+Object.defineProperty(exports, "sendGAEvent", { enumerable: true, get: function () { return ga_1.sendGAEvent; } });

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

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

package/dist/google/youtube-embed.js

@@ -3,7 +3,7 @@ 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 jsx_runtime_1 = require("react/jsx-runtime");
 const script_1 = __importDefault(require("next/script"));
 const third_party_capital_1 = require("third-party-capital");
 const ThirdPartyScriptEmbed_1 = __importDefault(require("../ThirdPartyScriptEmbed"));
@@ -15,6 +15,6 @@ const scriptStrategy = {
 };
 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, { key: script.url, src: script.url, strategy: scriptStrategy[script.strategy], stylesheets: stylesheets })))));
+    return ((0, jsx_runtime_1.jsx)(ThirdPartyScriptEmbed_1.default, { height: props.height || null, width: props.width || null, html: html, dataNtpc: "YouTubeEmbed", children: scripts === null || scripts === void 0 ? void 0 : scripts.map((script) => ((0, jsx_runtime_1.jsx)(script_1.default, { src: script.url, strategy: scriptStrategy[script.strategy], stylesheets: stylesheets }, script.url))) }));
 }
 exports.default = YouTubeEmbed;

package/dist/types/google.d.ts

@@ -11,15 +11,20 @@ export type GTMParams = {
     auth?: string;
     preview?: string;
 };
+export type GAParams = {
+    gaId: string;
+    dataLayerName?: string;
+};
 export type GoogleMapsEmbed = {
-    height?: number;
-    width?: number;
+    height?: number | string;
+    width?: number | string;
     mode: 'place' | 'view' | 'directions' | 'streetview' | 'search';
     apiKey: string;
-    style: string;
-    allowfullscreen: boolean;
-    loading: 'eager' | 'lazy';
+    style?: string;
+    allowfullscreen?: boolean;
+    loading?: 'eager' | 'lazy';
     q?: string;
+    id?: string;
     center?: string;
     zoom?: string;
     maptype?: string;

package/google.d.ts

@@ -0,0 +1 @@
+export * from './dist/google/index'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/third-parties",
-  "version": "14.0.5-canary.2",
+  "version": "14.0.5-canary.20",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/third-parties"
@@ -12,7 +12,8 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "google.d.ts"
   ],
   "license": "MIT",
   "scripts": {
@@ -25,7 +26,7 @@
     "third-party-capital": "1.0.20"
   },
   "devDependencies": {
-    "next": "14.0.5-canary.2",
+    "next": "14.0.5-canary.20",
     "outdent": "0.8.0",
     "prettier": "2.5.1"
   },