Merge branch 'canary' into styfle/next-1688-mark-onloadingcomplete-as…

…-deprecated

lerna.json

@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "13.5.6-canary.2"
+  "version": "13.5.6-canary.3"
 }

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "13.5.6-canary.2",
+  "version": "13.5.6-canary.3",
   "keywords": [
     "react",
     "next",

packages/eslint-config-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "13.5.6-canary.2",
+  "version": "13.5.6-canary.3",
   "description": "ESLint configuration used by Next.js.",
   "main": "index.js",
   "license": "MIT",
@@ -10,7 +10,7 @@
   },
   "homepage": "https://nextjs.org/docs/app/building-your-application/configuring/eslint#eslint-config",
   "dependencies": {
-    "@next/eslint-plugin-next": "13.5.6-canary.2",
+    "@next/eslint-plugin-next": "13.5.6-canary.3",
     "@rushstack/eslint-patch": "^1.3.3",
     "@typescript-eslint/parser": "^5.4.2 || ^6.0.0",
     "eslint-import-resolver-node": "^0.3.6",

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "13.5.6-canary.2",
+  "version": "13.5.6-canary.3",
   "description": "ESLint plugin for Next.js.",
   "main": "dist/index.js",
   "license": "MIT",

packages/font/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/font",
-  "version": "13.5.6-canary.2",
+  "version": "13.5.6-canary.3",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/font"

packages/next-bundle-analyzer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "13.5.6-canary.2",
+  "version": "13.5.6-canary.3",
   "main": "index.js",
   "types": "index.d.ts",
   "license": "MIT",

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "13.5.6-canary.2",
+  "version": "13.5.6-canary.3",
   "license": "MIT",
   "repository": {
     "type": "git",

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "13.5.6-canary.2",
+  "version": "13.5.6-canary.3",
   "keywords": [
     "react",
     "next",

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "13.5.6-canary.2",
+  "version": "13.5.6-canary.3",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-plugin-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "13.5.6-canary.2",
+  "version": "13.5.6-canary.3",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"

packages/next-polyfill-module/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "13.5.6-canary.2",
+  "version": "13.5.6-canary.3",
   "description": "A standard library polyfill for ES Modules supporting browsers (Edge 16+, Firefox 60+, Chrome 61+, Safari 10.1+)",
   "main": "dist/polyfill-module.js",
   "license": "MIT",

packages/next-polyfill-nomodule/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "13.5.6-canary.2",
+  "version": "13.5.6-canary.3",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",

packages/next-swc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/swc",
-  "version": "13.5.6-canary.2",
+  "version": "13.5.6-canary.3",
   "private": true,
   "scripts": {
     "clean": "node ../../scripts/rm.mjs native",

packages/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next",
-  "version": "13.5.6-canary.2",
+  "version": "13.5.6-canary.3",
   "description": "The React Framework",
   "main": "./dist/server/next.js",
   "license": "MIT",
@@ -90,7 +90,7 @@
     ]
   },
   "dependencies": {
-    "@next/env": "13.5.6-canary.2",
+    "@next/env": "13.5.6-canary.3",
     "@swc/helpers": "0.5.2",
     "busboy": "1.6.0",
     "caniuse-lite": "^1.0.30001406",
@@ -144,11 +144,11 @@
     "@mswjs/interceptors": "0.23.0",
     "@napi-rs/cli": "2.16.2",
     "@napi-rs/triples": "1.1.0",
-    "@next/polyfill-module": "13.5.6-canary.2",
-    "@next/polyfill-nomodule": "13.5.6-canary.2",
-    "@next/react-dev-overlay": "13.5.6-canary.2",
-    "@next/react-refresh-utils": "13.5.6-canary.2",
-    "@next/swc": "13.5.6-canary.2",
+    "@next/polyfill-module": "13.5.6-canary.3",
+    "@next/polyfill-nomodule": "13.5.6-canary.3",
+    "@next/react-dev-overlay": "13.5.6-canary.3",
+    "@next/react-refresh-utils": "13.5.6-canary.3",
+    "@next/swc": "13.5.6-canary.3",
     "@opentelemetry/api": "1.4.1",
     "@playwright/test": "^1.35.1",
     "@taskr/clear": "1.1.0",

packages/react-dev-overlay/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/react-dev-overlay",
-  "version": "13.5.6-canary.2",
+  "version": "13.5.6-canary.3",
   "description": "A development-only overlay for developing React applications.",
   "repository": {
     "url": "vercel/next.js",

packages/react-refresh-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/react-refresh-utils",
-  "version": "13.5.6-canary.2",
+  "version": "13.5.6-canary.3",
   "description": "An experimental package providing utilities for React Refresh.",
   "repository": {
     "url": "vercel/next.js",

packages/third-parties/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@next/third-parties",
-  "version": "13.5.6-canary.2",
-  "private": true,
+  "version": "13.5.6-canary.3",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/third-parties"
@@ -23,7 +22,7 @@
     "third-party-capital": "1.0.20"
   },
   "devDependencies": {
-    "next": "13.5.6-canary.2",
+    "next": "13.5.6-canary.3",
     "outdent": "0.8.0",
     "prettier": "2.5.1"
   },

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

@@ -0,0 +1,68 @@
+'use client'
+// TODO: Evaluate import 'client only'
+import React from 'react'
+import Script from 'next/script'
+
+declare global {
+  interface Window {
+    dataLayer?: Object[]
+    [key: string]: any
+  }
+}
+
+type GTMParams = {
+  gtmId: string
+  dataLayer: string[]
+  dataLayerName: string
+  auth: string
+  preview: string
+}
+
+let currDataLayerName: string | undefined = undefined
+
+export function GoogleTagManager(props: GTMParams) {
+  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 (
+    <>
+      <Script
+        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}');`,
+        }}
+      />
+      <Script
+        id="_next-gtm"
+        src={`https://www.googletagmanager.com/gtm.js?id=${gtmId}${gtmLayer}${gtmAuth}${gtmPreview}`}
+      />
+    </>
+  )
+}
+
+export const sendGTMEvent = (data: Object) => {
+  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`
+    )
+  }
+}

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

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

test/e2e/app-dir/third-parties/app/gtm/page.js

@@ -0,0 +1,23 @@
+'use client'
+
+import React from 'react'
+import { GoogleTagManager, sendGTMEvent } from '@next/third-parties/google'
+
+const Page = () => {
+  const onClick = () => {
+    sendGTMEvent({ event: 'buttonClicked', value: 'xyz' })
+  }
+
+  return (
+    <div class="container">
+      <GoogleTagManager gtmId="GTM-XYZ" />
+      <h1>GTM</h1>
+      <button id="gtm-send" onClick={onClick}>
+        Click
+      </button>
+      <GoogleTagManager gtmId="GTM-XYZ" />
+    </div>
+  )
+}
+
+export default Page

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

@@ -1,4 +1,5 @@
 import { createNextDescribe } from 'e2e-utils'
+import { waitFor } from 'next-test-utils'
 
 createNextDescribe(
   '@next/third-parties basic usage',
@@ -29,5 +30,29 @@ createNextDescribe(
       expect(baseContainer.length).toBe(1)
       expect(mapContainer.length).toBe(1)
     })
+
+    it('renders GTM', async () => {
+      const browser = await next.browser('/gtm')
+
+      await browser.waitForElementByCss('#_next-gtm')
+      await waitFor(1000)
+
+      const gtmInlineScript = await browser.elementsByCss('#_next-gtm-init')
+      expect(gtmInlineScript.length).toBe(1)
+
+      const gtmScript = await browser.elementsByCss(
+        '[src^="https://www.googletagmanager.com/gtm.js?id=GTM-XYZ"]'
+      )
+
+      expect(gtmScript.length).toBe(1)
+
+      const dataLayer = await browser.eval('window.dataLayer')
+      expect(dataLayer.length).toBe(1)
+
+      await browser.elementByCss('#gtm-send').click()
+
+      const dataLayer2 = await browser.eval('window.dataLayer')
+      expect(dataLayer2.length).toBe(2)
+    })
   }
 )