Skip to content

Commit e299ab2

Browse files
styflestyfle
committed
Merge branch 'canary' into styfle/next-1688-mark-onloadingcomplete-as-deprecated
2 parents d628338 + 5e474a3 commit e299ab2

File tree

26 files changed

+198
-36
lines changed

26 files changed

+198
-36
lines changed

‎lerna.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,5 @@
1616
"registry": "https://registry.npmjs.org/"
1717
}
1818
},
19-
"version": "13.5.6-canary.2"
19+
"version": "13.5.6-canary.3"
2020
}

‎packages/create-next-app/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "create-next-app",
3-
"version": "13.5.6-canary.2",
3+
"version": "13.5.6-canary.3",
44
"keywords": [
55
"react",
66
"next",

‎packages/eslint-config-next/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "eslint-config-next",
3-
"version": "13.5.6-canary.2",
3+
"version": "13.5.6-canary.3",
44
"description": "ESLint configuration used by Next.js.",
55
"main": "index.js",
66
"license": "MIT",
@@ -10,7 +10,7 @@
1010
},
1111
"homepage": "https://nextjs.org/docs/app/building-your-application/configuring/eslint#eslint-config",
1212
"dependencies": {
13-
"@next/eslint-plugin-next": "13.5.6-canary.2",
13+
"@next/eslint-plugin-next": "13.5.6-canary.3",
1414
"@rushstack/eslint-patch": "^1.3.3",
1515
"@typescript-eslint/parser": "^5.4.2 || ^6.0.0",
1616
"eslint-import-resolver-node": "^0.3.6",

‎packages/eslint-plugin-next/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@next/eslint-plugin-next",
3-
"version": "13.5.6-canary.2",
3+
"version": "13.5.6-canary.3",
44
"description": "ESLint plugin for Next.js.",
55
"main": "dist/index.js",
66
"license": "MIT",

‎packages/font/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@next/font",
3-
"version": "13.5.6-canary.2",
3+
"version": "13.5.6-canary.3",
44
"repository": {
55
"url": "vercel/next.js",
66
"directory": "packages/font"

‎packages/next-bundle-analyzer/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@next/bundle-analyzer",
3-
"version": "13.5.6-canary.2",
3+
"version": "13.5.6-canary.3",
44
"main": "index.js",
55
"types": "index.d.ts",
66
"license": "MIT",

‎packages/next-codemod/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@next/codemod",
3-
"version": "13.5.6-canary.2",
3+
"version": "13.5.6-canary.3",
44
"license": "MIT",
55
"repository": {
66
"type": "git",

‎packages/next-env/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@next/env",
3-
"version": "13.5.6-canary.2",
3+
"version": "13.5.6-canary.3",
44
"keywords": [
55
"react",
66
"next",

‎packages/next-mdx/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@next/mdx",
3-
"version": "13.5.6-canary.2",
3+
"version": "13.5.6-canary.3",
44
"main": "index.js",
55
"license": "MIT",
66
"repository": {

‎packages/next-plugin-storybook/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@next/plugin-storybook",
3-
"version": "13.5.6-canary.2",
3+
"version": "13.5.6-canary.3",
44
"repository": {
55
"url": "vercel/next.js",
66
"directory": "packages/next-plugin-storybook"

‎packages/next-polyfill-module/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@next/polyfill-module",
3-
"version": "13.5.6-canary.2",
3+
"version": "13.5.6-canary.3",
44
"description": "A standard library polyfill for ES Modules supporting browsers (Edge 16+, Firefox 60+, Chrome 61+, Safari 10.1+)",
55
"main": "dist/polyfill-module.js",
66
"license": "MIT",

‎packages/next-polyfill-nomodule/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@next/polyfill-nomodule",
3-
"version": "13.5.6-canary.2",
3+
"version": "13.5.6-canary.3",
44
"description": "A polyfill for non-dead, nomodule browsers.",
55
"main": "dist/polyfill-nomodule.js",
66
"license": "MIT",

‎packages/next-swc/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@next/swc",
3-
"version": "13.5.6-canary.2",
3+
"version": "13.5.6-canary.3",
44
"private": true,
55
"scripts": {
66
"clean": "node ../../scripts/rm.mjs native",

‎packages/next/package.json

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "next",
3-
"version": "13.5.6-canary.2",
3+
"version": "13.5.6-canary.3",
44
"description": "The React Framework",
55
"main": "./dist/server/next.js",
66
"license": "MIT",
@@ -90,7 +90,7 @@
9090
]
9191
},
9292
"dependencies": {
93-
"@next/env": "13.5.6-canary.2",
93+
"@next/env": "13.5.6-canary.3",
9494
"@swc/helpers": "0.5.2",
9595
"busboy": "1.6.0",
9696
"caniuse-lite": "^1.0.30001406",
@@ -144,11 +144,11 @@
144144
"@mswjs/interceptors": "0.23.0",
145145
"@napi-rs/cli": "2.16.2",
146146
"@napi-rs/triples": "1.1.0",
147-
"@next/polyfill-module": "13.5.6-canary.2",
148-
"@next/polyfill-nomodule": "13.5.6-canary.2",
149-
"@next/react-dev-overlay": "13.5.6-canary.2",
150-
"@next/react-refresh-utils": "13.5.6-canary.2",
151-
"@next/swc": "13.5.6-canary.2",
147+
"@next/polyfill-module": "13.5.6-canary.3",
148+
"@next/polyfill-nomodule": "13.5.6-canary.3",
149+
"@next/react-dev-overlay": "13.5.6-canary.3",
150+
"@next/react-refresh-utils": "13.5.6-canary.3",
151+
"@next/swc": "13.5.6-canary.3",
152152
"@opentelemetry/api": "1.4.1",
153153
"@playwright/test": "^1.35.1",
154154
"@taskr/clear": "1.1.0",

‎packages/react-dev-overlay/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@next/react-dev-overlay",
3-
"version": "13.5.6-canary.2",
3+
"version": "13.5.6-canary.3",
44
"description": "A development-only overlay for developing React applications.",
55
"repository": {
66
"url": "vercel/next.js",

‎packages/react-refresh-utils/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@next/react-refresh-utils",
3-
"version": "13.5.6-canary.2",
3+
"version": "13.5.6-canary.3",
44
"description": "An experimental package providing utilities for React Refresh.",
55
"repository": {
66
"url": "vercel/next.js",

‎packages/third-parties/package.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
{
22
"name": "@next/third-parties",
3-
"version": "13.5.6-canary.2",
4-
"private": true,
3+
"version": "13.5.6-canary.3",
54
"repository": {
65
"url": "vercel/next.js",
76
"directory": "packages/third-parties"
@@ -23,7 +22,7 @@
2322
"third-party-capital": "1.0.20"
2423
},
2524
"devDependencies": {
26-
"next": "13.5.6-canary.2",
25+
"next": "13.5.6-canary.3",
2726
"outdent": "0.8.0",
2827
"prettier": "2.5.1"
2928
},

‎packages/third-parties/src/google/GoogleMapsEmbed.tsx renamed to ‎packages/third-parties/src/google/google-maps-embed.tsx

File renamed without changes.

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

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
'use client'
2+
// TODO: Evaluate import 'client only'
3+
import React from 'react'
4+
import Script from 'next/script'
5+
6+
declare global {
7+
interface Window {
8+
dataLayer?: Object[]
9+
[key: string]: any
10+
}
11+
}
12+
13+
type GTMParams = {
14+
gtmId: string
15+
dataLayer: string[]
16+
dataLayerName: string
17+
auth: string
18+
preview: string
19+
}
20+
21+
let currDataLayerName: string | undefined = undefined
22+
23+
export function GoogleTagManager(props: GTMParams) {
24+
const { gtmId, dataLayerName = 'dataLayer', auth, preview, dataLayer } = props
25+
26+
if (currDataLayerName === undefined) {
27+
currDataLayerName = dataLayerName
28+
}
29+
30+
const gtmLayer = dataLayerName !== 'dataLayer' ? `$l=${dataLayerName}` : ''
31+
const gtmAuth = auth ? `&gtm_auth=${auth}` : ''
32+
const gtmPreview = preview ? `&gtm_preview=${preview}&gtm_cookies_win=x` : ''
33+
34+
return (
35+
<>
36+
<Script
37+
id="_next-gtm-init"
38+
dangerouslySetInnerHTML={{
39+
__html: `
40+
(function(w,l){
41+
w[l]=w[l]||[];
42+
w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
43+
${dataLayer ? `w[l].push(${JSON.stringify(dataLayer)})` : ''}
44+
})(window,'${dataLayerName}');`,
45+
}}
46+
/>
47+
<Script
48+
id="_next-gtm"
49+
src={`https://www.googletagmanager.com/gtm.js?id=${gtmId}${gtmLayer}${gtmAuth}${gtmPreview}`}
50+
/>
51+
</>
52+
)
53+
}
54+
55+
export const sendGTMEvent = (data: Object) => {
56+
if (currDataLayerName === undefined) {
57+
console.warn(`@next/third-parties: GTM has not been initialized`)
58+
return
59+
}
60+
61+
if (window[currDataLayerName]) {
62+
window[currDataLayerName].push(data)
63+
} else {
64+
console.warn(
65+
`@next/third-parties: GTM dataLayer ${currDataLayerName} does not exist`
66+
)
67+
}
68+
}

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1-
export { default as GoogleMapsEmbed } from './GoogleMapsEmbed'
2-
export { default as YouTubeEmbed } from './YouTubeEmbed'
1+
export { default as GoogleMapsEmbed } from './google-maps-embed'
2+
export { default as YouTubeEmbed } from './youtube-embed'
3+
export { GoogleTagManager, sendGTMEvent } from './gtm'

‎packages/third-parties/src/google/YouTubeEmbed.tsx renamed to ‎packages/third-parties/src/google/youtube-embed.tsx

File renamed without changes.

‎pnpm-lock.yaml

Lines changed: 8 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
'use client'
2+
3+
import React from 'react'
4+
import { GoogleTagManager, sendGTMEvent } from '@next/third-parties/google'
5+
6+
const Page = () => {
7+
const onClick = () => {
8+
sendGTMEvent({ event: 'buttonClicked', value: 'xyz' })
9+
}
10+
11+
return (
12+
<div class="container">
13+
<GoogleTagManager gtmId="GTM-XYZ" />
14+
<h1>GTM</h1>
15+
<button id="gtm-send" onClick={onClick}>
16+
Click
17+
</button>
18+
<GoogleTagManager gtmId="GTM-XYZ" />
19+
</div>
20+
)
21+
}
22+
23+
export default Page

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { createNextDescribe } from 'e2e-utils'
2+
import { waitFor } from 'next-test-utils'
23

34
createNextDescribe(
45
'@next/third-parties basic usage',
@@ -29,5 +30,29 @@ createNextDescribe(
2930
expect(baseContainer.length).toBe(1)
3031
expect(mapContainer.length).toBe(1)
3132
})
33+
34+
it('renders GTM', async () => {
35+
const browser = await next.browser('/gtm')
36+
37+
await browser.waitForElementByCss('#_next-gtm')
38+
await waitFor(1000)
39+
40+
const gtmInlineScript = await browser.elementsByCss('#_next-gtm-init')
41+
expect(gtmInlineScript.length).toBe(1)
42+
43+
const gtmScript = await browser.elementsByCss(
44+
'[src^="https://www.googletagmanager.com/gtm.js?id=GTM-XYZ"]'
45+
)
46+
47+
expect(gtmScript.length).toBe(1)
48+
49+
const dataLayer = await browser.eval('window.dataLayer')
50+
expect(dataLayer.length).toBe(1)
51+
52+
await browser.elementByCss('#gtm-send').click()
53+
54+
const dataLayer2 = await browser.eval('window.dataLayer')
55+
expect(dataLayer2.length).toBe(2)
56+
})
3257
}
3358
)

0 commit comments

Comments
 (0)