From a6d4b1e71907cf509028c9f0fc8533dbcf43cd00 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 30 Aug 2021 09:57:41 +0200 Subject: [PATCH 1/8] fix(deps): update starters and examples to v0.11.1 (#32955) Co-authored-by: Renovate Bot --- .../package-lock.json | 84 +++++++++---------- .../gatsby-starter-blog-theme/package.json | 2 +- 2 files changed, 43 insertions(+), 43 deletions(-) diff --git a/starters/gatsby-starter-blog-theme/package-lock.json b/starters/gatsby-starter-blog-theme/package-lock.json index 112b1d62a4bbe..4f23896c30460 100644 --- a/starters/gatsby-starter-blog-theme/package-lock.json +++ b/starters/gatsby-starter-blog-theme/package-lock.json @@ -21533,94 +21533,94 @@ "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=" }, "theme-ui": { - "version": "0.10.0", - "resolved": "https://registry.npmjs.org/theme-ui/-/theme-ui-0.10.0.tgz", - "integrity": "sha512-6uj9/4n6gZrlhrfQKt+QoLdtVc46ETJZv42iqedCatXaaTA5tHN1j7TJDmvYD9ooD/CT0+hsvOrx2d2etb/kYg==", + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/theme-ui/-/theme-ui-0.11.1.tgz", + "integrity": "sha512-9A7PmcfO70gKGJuvFbDF3OkHwLPEsLdkwN9kOqo99nYH4U+ThRfWq6GJduQEUvKWsYfPNt+zVOlxJa1/NU8RuQ==", "requires": { - "@theme-ui/color-modes": "0.10.0", - "@theme-ui/components": "0.10.0", - "@theme-ui/core": "0.10.0", - "@theme-ui/css": "0.10.0", - "@theme-ui/mdx": "0.10.0", - "@theme-ui/theme-provider": "0.10.0" + "@theme-ui/color-modes": "0.11.1", + "@theme-ui/components": "0.11.1", + "@theme-ui/core": "0.11.1", + "@theme-ui/css": "0.11.1", + "@theme-ui/mdx": "0.11.1", + "@theme-ui/theme-provider": "0.11.1" }, "dependencies": { "@theme-ui/color-modes": { - "version": "0.10.0", - "resolved": "https://registry.npmjs.org/@theme-ui/color-modes/-/color-modes-0.10.0.tgz", - "integrity": "sha512-6sZaagCFK48p2YjecLljFwPkiB3/R9dMNKUQC3+fnaH3N9FcsflNWpjKAYhtQ5QLKvYacFdqczT4YaMtGwKb/Q==", + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/@theme-ui/color-modes/-/color-modes-0.11.1.tgz", + "integrity": "sha512-u0RjpVE03mvEixHiT//JF21Fqc/XT0Idgr5VmAEJnjiKb++JJhowKLRCVUMaOiURs29FdIWdU7Q45TAu0h0Plg==", "requires": { "@emotion/react": "^11.1.1", - "@theme-ui/core": "0.10.0", - "@theme-ui/css": "0.10.0", + "@theme-ui/core": "0.11.1", + "@theme-ui/css": "0.11.1", "deepmerge": "^4.2.2" } }, "@theme-ui/components": { - "version": "0.10.0", - "resolved": "https://registry.npmjs.org/@theme-ui/components/-/components-0.10.0.tgz", - "integrity": "sha512-zPA+16fP+R140kns+3FBhybsPzNjcCWHgXcwIPjww1dfDnlXRa7al9Nz4Y8zyWvk1wNiGqUa09Y1sabK6EYspQ==", + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/@theme-ui/components/-/components-0.11.1.tgz", + "integrity": "sha512-fWLTJe9zF045WS7Hhanj2PYRz0t6k883KCGHITES70rrTGZ7bL/+ooX34oZ5do9JrrVx/+80Tf7EtLQfzw9BFw==", "requires": { "@emotion/react": "^11.1.1", "@emotion/styled": "^11.0.0", "@styled-system/color": "^5.1.2", "@styled-system/should-forward-prop": "^5.1.2", "@styled-system/space": "^5.1.2", - "@theme-ui/css": "0.10.0", + "@theme-ui/css": "0.11.1", "@types/styled-system": "^5.1.10" } }, "@theme-ui/core": { - "version": "0.10.0", - "resolved": "https://registry.npmjs.org/@theme-ui/core/-/core-0.10.0.tgz", - "integrity": "sha512-3DeTHGqyqIi05JCsJ+G+fqW6YsX/oGJiaAvMgLfd86tGdJOnDseEBQG41oDFHSWtQSJDpBcoFgAWMGITmYdH+g==", + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/@theme-ui/core/-/core-0.11.1.tgz", + "integrity": "sha512-8TRblBlVdFfcGwm6xluaglY4VasHfvHFFXRJhiQe0wUriNto6jpWaLQnw+y9mQZ/cffLbX68Vo8i4pAauM8U2g==", "requires": { "@emotion/react": "^11.1.1", - "@theme-ui/css": "0.10.0", - "@theme-ui/parse-props": "0.10.0", + "@theme-ui/css": "0.11.1", + "@theme-ui/parse-props": "0.11.1", "deepmerge": "^4.2.2" } }, "@theme-ui/css": { - "version": "0.10.0", - "resolved": "https://registry.npmjs.org/@theme-ui/css/-/css-0.10.0.tgz", - "integrity": "sha512-Up3HqXoy2ERn/9gVxApCSl2n9vwtHBwPrYlMyEjX0YPs/rxmo+Aqe3kAxO+SG9idMw08mtdaDfMIFaPsBE5ovA==", + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/@theme-ui/css/-/css-0.11.1.tgz", + "integrity": "sha512-b3M9EJ6EaUeJolQ5jMySGVqcliYgpMliSJmvTUPWogW43J+7chb6h/bZLymXDDhPHt+SVAtGIkR7n8aIvjFbcQ==", "requires": { "@emotion/react": "^11.1.1", "csstype": "^3.0.5" } }, "@theme-ui/mdx": { - "version": "0.10.0", - "resolved": "https://registry.npmjs.org/@theme-ui/mdx/-/mdx-0.10.0.tgz", - "integrity": "sha512-IcDrQONVrOFQFCFdyrlNoTTKmhw7ELtrLktRYmmWtCEz+KHpBiEVdxNo2yvz/05zF2BPGKOqu4wkMpUR13wNSQ==", + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/@theme-ui/mdx/-/mdx-0.11.1.tgz", + "integrity": "sha512-PiYXA3swuRI55pdt+vgVVOQzoosaph5+baqOWdrfKiX3UodoER0H+FkHllnTEv5IdBPKryCKy6ZTjdAZ6OR5zQ==", "requires": { "@emotion/react": "^11.1.1", "@emotion/styled": "^11.0.0", "@mdx-js/react": "^1.6.22", - "@theme-ui/core": "0.10.0", - "@theme-ui/css": "0.10.0" + "@theme-ui/core": "0.11.1", + "@theme-ui/css": "0.11.1" } }, "@theme-ui/parse-props": { - "version": "0.10.0", - "resolved": "https://registry.npmjs.org/@theme-ui/parse-props/-/parse-props-0.10.0.tgz", - "integrity": "sha512-UfcLyThXYsB9azc8qbsZVgbF7xf+GLF2Hhy+suyjwQ3XSVOx97B5ZsuzCNUGbggtBw4dXayJgRmMz0FHyp0L8Q==", + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/@theme-ui/parse-props/-/parse-props-0.11.1.tgz", + "integrity": "sha512-0BHLVLiueLkH9jbT7TBuoIhqxKkgdmFFP6j/xe4V6bGfD33C4Qn/71nVwryecMFOI8AygvERhvzYu9fq1e3VNg==", "requires": { "@emotion/react": "^11.1.1", - "@theme-ui/css": "0.10.0" + "@theme-ui/css": "0.11.1" } }, "@theme-ui/theme-provider": { - "version": "0.10.0", - "resolved": "https://registry.npmjs.org/@theme-ui/theme-provider/-/theme-provider-0.10.0.tgz", - "integrity": "sha512-1AVsegjEAw7uidr0/qJMoKktKbdXuXRjfukI9712GZleft3dzoHhkQUO7IefXjbafyu/plzo/WTXkbz0A4uhmA==", + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/@theme-ui/theme-provider/-/theme-provider-0.11.1.tgz", + "integrity": "sha512-bAg3lyRV0zes+UZgsRJupDnhVe9XJ8YjkQyuXvIKE01Bd9tF1cVLmTNoCDiexWnq0VtJBZnJM2TIS9eusL2FDQ==", "requires": { "@emotion/react": "^11.1.1", - "@theme-ui/color-modes": "0.10.0", - "@theme-ui/core": "0.10.0", - "@theme-ui/css": "0.10.0", - "@theme-ui/mdx": "0.10.0" + "@theme-ui/color-modes": "0.11.1", + "@theme-ui/core": "0.11.1", + "@theme-ui/css": "0.11.1", + "@theme-ui/mdx": "0.11.1" } } } diff --git a/starters/gatsby-starter-blog-theme/package.json b/starters/gatsby-starter-blog-theme/package.json index f7715e77e73b5..5c759d9cc86d4 100644 --- a/starters/gatsby-starter-blog-theme/package.json +++ b/starters/gatsby-starter-blog-theme/package.json @@ -14,6 +14,6 @@ "gatsby-theme-blog": "^3.0.0", "react": "^17.0.2", "react-dom": "^17.0.2", - "theme-ui": "0.10.0" + "theme-ui": "0.11.1" } } From ed72e68c42da68eaeb0dd7a5ba5404f2f6133a44 Mon Sep 17 00:00:00 2001 From: Brett Tackaberry Date: Mon, 30 Aug 2021 06:03:40 -0400 Subject: [PATCH 2/8] feat(gatsby-plugin-google-tagmanager): add option for selfHostedOrigin (#32733) In the gatsby-plugin-google-tagmanager, this change supports variable selfHostedOrigin, defaulting to googletagmanager.com. With the advent of Server Side Tagging, we have the ability to serve gtm.js from "self-hosted" tagging server. See: developers.google.com/tag-manager/serverside And: developers.google.com/tag-manager/serverside/send-data#update_the_gtmjs_source_domain Co-authored-by: Ward Peeters --- .../gatsby-plugin-google-tagmanager/README.md | 2 + .../src/__tests__/gatsby-node.js | 1 + .../src/__tests__/gatsby-ssr.js | 48 +++++++++++++++++++ .../src/gatsby-node.js | 3 ++ .../src/gatsby-ssr.js | 29 ++++++++--- 5 files changed, 77 insertions(+), 6 deletions(-) diff --git a/packages/gatsby-plugin-google-tagmanager/README.md b/packages/gatsby-plugin-google-tagmanager/README.md index 572c5bb910be0..cb44776f46a60 100644 --- a/packages/gatsby-plugin-google-tagmanager/README.md +++ b/packages/gatsby-plugin-google-tagmanager/README.md @@ -39,6 +39,8 @@ plugins: [ routeChangeEventName: "YOUR_ROUTE_CHANGE_EVENT_NAME", // Defaults to false enableWebVitalsTracking: true, + // Defaults to https://www.googletagmanager.com + selfHostedOrigin: "YOUR_SELF_HOSTED_ORIGIN", }, }, ] diff --git a/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-node.js b/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-node.js index 7b5cdac64e2f0..e89a60fe7011e 100644 --- a/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-node.js +++ b/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-node.js @@ -12,6 +12,7 @@ describe(`pluginOptionsSchema`, () => { dataLayerName: `YOUR_DATA_LAYER_NAME`, routeChangeEventName: `YOUR_ROUTE_CHANGE_EVENT_NAME`, enableWebVitalsTracking: true, + selfHostedOrigin: `YOUR_SELF_HOSTED_ORIGIN`, }) expect(isValid).toEqual(true) diff --git a/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-ssr.js b/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-ssr.js index 12993d918b4f3..d041ecd29661b 100644 --- a/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-ssr.js +++ b/packages/gatsby-plugin-google-tagmanager/src/__tests__/gatsby-ssr.js @@ -180,5 +180,53 @@ describe(`gatsby-plugin-google-tagmanager`, () => { expect(mocks.setHeadComponents.mock.calls[0].length).toBe(1) expect(headConfig.key).toBe(`plugin-google-tagmanager`) }) + + it(`should set selfHostedOrigin as googletagmanager.com by default`, () => { + const mocks = { + setHeadComponents: jest.fn(), + setPreBodyComponents: jest.fn(), + } + const pluginOptions = { + id: `123`, + includeInDevelopment: true, + } + + onRenderBody(mocks, pluginOptions) + const [headConfig] = mocks.setHeadComponents.mock.calls[0][0] + const [preBodyConfig] = mocks.setPreBodyComponents.mock.calls[0][0] + + // eslint-disable-next-line no-useless-escape + expect(headConfig.props.dangerouslySetInnerHTML.__html).toContain( + `https://www.googletagmanager.com/gtm.js` + ) + expect(preBodyConfig.props.dangerouslySetInnerHTML.__html).toContain( + `https://www.googletagmanager.com/ns.html` + ) + }) + + it(`should set selfHostedOrigin`, () => { + const selfHostedOrigin = `YOUR_SELF_HOSTED_ORIGIN` + const mocks = { + setHeadComponents: jest.fn(), + setPreBodyComponents: jest.fn(), + } + const pluginOptions = { + id: `123`, + includeInDevelopment: true, + selfHostedOrigin: selfHostedOrigin, + } + + onRenderBody(mocks, pluginOptions) + const [headConfig] = mocks.setHeadComponents.mock.calls[0][0] + const [preBodyConfig] = mocks.setPreBodyComponents.mock.calls[0][0] + + // eslint-disable-next-line no-useless-escape + expect(headConfig.props.dangerouslySetInnerHTML.__html).toContain( + `${selfHostedOrigin}/gtm.js` + ) + expect(preBodyConfig.props.dangerouslySetInnerHTML.__html).toContain( + `${selfHostedOrigin}/ns.html` + ) + }) }) }) diff --git a/packages/gatsby-plugin-google-tagmanager/src/gatsby-node.js b/packages/gatsby-plugin-google-tagmanager/src/gatsby-node.js index c50f724858709..7140dd3ab82f5 100644 --- a/packages/gatsby-plugin-google-tagmanager/src/gatsby-node.js +++ b/packages/gatsby-plugin-google-tagmanager/src/gatsby-node.js @@ -41,4 +41,7 @@ exports.pluginOptionsSchema = ({ Joi }) => `Name of the event that is triggered on every Gatsby route change.` ), enableWebVitalsTracking: Joi.boolean().default(false), + selfHostedOrigin: Joi.string() + .default(`https://www.googletagmanager.com`) + .description(`The origin where GTM is hosted.`), }) diff --git a/packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js b/packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js index 41c7febd9bd80..52001c7449b1f 100644 --- a/packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js +++ b/packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js @@ -1,15 +1,20 @@ import React from "react" import { oneLine, stripIndent } from "common-tags" -const generateGTM = ({ id, environmentParamStr, dataLayerName }) => stripIndent` +const generateGTM = ({ + id, + environmentParamStr, + dataLayerName, + selfHostedOrigin, +}) => stripIndent` (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= - 'https://www.googletagmanager.com/gtm.js?id='+i+dl+'${environmentParamStr}';f.parentNode.insertBefore(j,f); + '${selfHostedOrigin}/gtm.js?id='+i+dl+'${environmentParamStr}';f.parentNode.insertBefore(j,f); })(window,document,'script','${dataLayerName}', '${id}');` -const generateGTMIframe = ({ id, environmentParamStr }) => - oneLine`` +const generateGTMIframe = ({ id, environmentParamStr, selfHostedOrigin }) => + oneLine`` const generateDefaultDataLayer = (dataLayer, reporter, dataLayerName) => { let result = `window.${dataLayerName} = window.${dataLayerName} || [];` @@ -41,6 +46,7 @@ exports.onRenderBody = ( defaultDataLayer, dataLayerName = `dataLayer`, enableWebVitalsTracking = false, + selfHostedOrigin = `https://www.googletagmanager.com`, } ) => { if (process.env.NODE_ENV === `production` || includeInDevelopment) { @@ -60,6 +66,8 @@ exports.onRenderBody = ( ) } + selfHostedOrigin = selfHostedOrigin.replace(/\/$/, ``) + const inlineScripts = [] if (enableWebVitalsTracking) { // web-vitals/polyfill (necessary for non chromium browsers) @@ -83,7 +91,12 @@ exports.onRenderBody = ( dangerouslySetInnerHTML={{ __html: oneLine` ${defaultDataLayerCode} - ${generateGTM({ id, environmentParamStr, dataLayerName })}`, + ${generateGTM({ + id, + environmentParamStr, + dataLayerName, + selfHostedOrigin, + })}`, }} /> ) @@ -94,7 +107,11 @@ exports.onRenderBody = (