Merge pull request dev-next-release - 1.21.1 (#1222)

dev-next-release - 1.21.1

e2e-projects/next-upgrade/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-upgrade",
-  "version": "1.21.0",
+  "version": "1.21.1-dev-next-release.2",
   "private": true,
   "scripts": {
     "dev": "next dev",

e2e-projects/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cimsirp",
-  "version": "1.21.0",
+  "version": "1.21.1-dev-next-release.2",
   "private": true,
   "scripts": {
     "dev": "next dev",

e2e-projects/sveltekit/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltekit",
-	"version": "1.21.0",
+	"version": "1.21.1-dev-next-release.2",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",

packages/adapter-next/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@slicemachine/adapter-next",
-	"version": "0.3.26",
+	"version": "0.3.27-dev-next-release.2",
 	"description": "Slice Machine adapter for Next.js.",
 	"keywords": [
 		"typescript",

packages/adapter-next/src/hooks/project-init.ts

@@ -179,8 +179,7 @@ const createPrismicIOFile = async ({
 			 * The project's Prismic repository name.
 			 */
 			export const repositoryName =
-				process.env.${PRISMIC_ENVIRONMENT_ENVIRONMENT_VARIABLE_NAME} ||
-				config.repositoryName;
+				process.env.${PRISMIC_ENVIRONMENT_ENVIRONMENT_VARIABLE_NAME} || config.repositoryName;
 
 			/**
 			 * A list of Route Resolver objects that define how a document's \`url\` field is resolved.
@@ -211,7 +210,8 @@ const createPrismicIOFile = async ({
 			/**
 			 * The project's Prismic repository name.
 			 */
-			export const repositoryName = config.repositoryName;
+			export const repositoryName =
+				process.env.${PRISMIC_ENVIRONMENT_ENVIRONMENT_VARIABLE_NAME} || config.repositoryName;
 
 			/**
 			 * A list of Route Resolver objects that define how a document's \`url\` field is resolved.

packages/adapter-next/test/plugin-project-init.test.ts

@@ -257,7 +257,8 @@ describe("prismicio.js file", () => {
 				/**
 				 * The project's Prismic repository name.
 				 */
-				export const repositoryName = config.repositoryName;
+				export const repositoryName =
+				  process.env.NEXT_PUBLIC_PRISMIC_ENVIRONMENT || config.repositoryName;
 
 				/**
 				 * A list of Route Resolver objects that define how a document's \`url\` field is resolved.
@@ -331,7 +332,8 @@ describe("prismicio.js file", () => {
 				/**
 				 * The project's Prismic repository name.
 				 */
-				export const repositoryName = config.repositoryName;
+				export const repositoryName =
+				  process.env.NEXT_PUBLIC_PRISMIC_ENVIRONMENT || config.repositoryName;
 
 				/**
 				 * A list of Route Resolver objects that define how a document's \`url\` field is resolved.
@@ -554,7 +556,8 @@ describe("prismicio.js file", () => {
 				/**
 				 * The project's Prismic repository name.
 				 */
-				export const repositoryName = config.repositoryName;
+				export const repositoryName =
+				  process.env.NEXT_PUBLIC_PRISMIC_ENVIRONMENT || config.repositoryName;
 
 				/**
 				 * A list of Route Resolver objects that define how a document's \`url\` field is resolved.
@@ -624,7 +627,8 @@ describe("prismicio.js file", () => {
 				/**
 				 * The project's Prismic repository name.
 				 */
-				export const repositoryName = config.repositoryName;
+				export const repositoryName =
+				  process.env.NEXT_PUBLIC_PRISMIC_ENVIRONMENT || config.repositoryName;
 
 				/**
 				 * A list of Route Resolver objects that define how a document's \`url\` field is resolved.

packages/adapter-nuxt/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@slicemachine/adapter-nuxt",
-	"version": "0.3.26",
+	"version": "0.3.27-dev-next-release.2",
 	"description": "Slice Machine adapter for Nuxt 3.",
 	"keywords": [
 		"typescript",

packages/adapter-nuxt2/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@slicemachine/adapter-nuxt2",
-	"version": "0.3.26",
+	"version": "0.3.27-dev-next-release.2",
 	"description": "Slice Machine adapter for Nuxt 2.",
 	"keywords": [
 		"typescript",

packages/adapter-sveltekit/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@slicemachine/adapter-sveltekit",
-	"version": "0.3.26",
+	"version": "0.3.27-dev-next-release.2",
 	"description": "Slice Machine adapter for SvelteKit.",
 	"keywords": [
 		"typescript",

packages/adapter-sveltekit/src/hooks/project-init.ts

@@ -62,8 +62,7 @@ const createPrismicIOFile = async ({
 			 * The project's Prismic repository name.
 			 */
 			export const repositoryName =
-				import.meta.env.${PRISMIC_ENVIRONMENT_ENVIRONMENT_VARIABLE_NAME} ||
-				config.repositoryName;
+				import${"."}meta${"."}env.${PRISMIC_ENVIRONMENT_ENVIRONMENT_VARIABLE_NAME} || config.repositoryName;
 
 			/**
 			 * A list of Route Resolver objects that define how a document's \`url\` field is resolved.
@@ -109,7 +108,8 @@ const createPrismicIOFile = async ({
 			/**
 			 * The project's Prismic repository name.
 			 */
-			export const repositoryName = config.repositoryName;
+			export const repositoryName =
+				import${"."}meta${"."}env.${PRISMIC_ENVIRONMENT_ENVIRONMENT_VARIABLE_NAME} || config.repositoryName;
 
 			/**
 			 * A list of Route Resolver objects that define how a document's \`url\` field is resolved.

packages/adapter-sveltekit/test/plugin-project-init.test.ts

@@ -264,7 +264,8 @@ describe("prismicio.js file", () => {
 			/**
 			 * The project's Prismic repository name.
 			 */
-			export const repositoryName = config.repositoryName;
+			export const repositoryName =
+			  import.meta.env.VITE_PRISMIC_ENVIRONMENT || config.repositoryName;
 
 			/**
 			 * A list of Route Resolver objects that define how a document's \`url\` field is resolved.

packages/init/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@slicemachine/init",
-	"version": "2.9.4",
+	"version": "2.9.5-dev-next-release.2",
 	"description": "Init Prismic Slice Machine in your project",
 	"keywords": [
 		"typescript",

packages/init/test/__setup__.ts

@@ -55,27 +55,29 @@ vi.mock("fs/promises", async () => {
 	};
 });
 
-vi.mock("analytics-node", () => {
+vi.mock("@segment/analytics-node", () => {
 	const MockSegmentClient = vi.fn();
 
 	MockSegmentClient.prototype.identify = vi.fn(
-		(_message: unknown, callback?: (error?: Error) => void) => {
+		(_message: unknown, callback?: (error?: unknown) => void) => {
 			if (callback) {
 				callback();
 			}
 		},
 	);
 
 	MockSegmentClient.prototype.track = vi.fn(
-		(_message: unknown, callback?: (error?: Error) => void) => {
+		(_message: unknown, callback?: (error?: unknown) => void) => {
 			if (callback) {
 				callback();
 			}
 		},
 	);
 
+	MockSegmentClient.prototype.on = vi.fn();
+
 	return {
-		default: MockSegmentClient,
+		Analytics: MockSegmentClient,
 	};
 });
 

packages/manager/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@slicemachine/manager",
-	"version": "0.17.0",
+	"version": "0.17.1-dev-next-release.2",
 	"description": "Manage all aspects of a Slice Machine project.",
 	"repository": {
 		"type": "git",
@@ -68,9 +68,9 @@
 		"@prismicio/custom-types-client": "1.2.0-alpha.0",
 		"@prismicio/mocks": "2.0.0",
 		"@prismicio/types-internal": "^2.2.0",
+		"@segment/analytics-node": "1.1.3",
 		"@slicemachine/plugin-kit": "workspace:^",
 		"@wooorm/starry-night": "^1.6.0",
-		"analytics-node": "^6.2.0",
 		"cookie": "^0.5.0",
 		"cors": "^2.8.5",
 		"execa": "^7.1.1",
@@ -99,7 +99,6 @@
 	"devDependencies": {
 		"@prismicio/mock": "0.2.0",
 		"@size-limit/preset-small-lib": "8.2.4",
-		"@types/analytics-node": "3.1.11",
 		"@types/cookie": "0.5.1",
 		"@types/express": "4.17.17",
 		"@types/semver": "7.3.13",

packages/manager/src/managers/telemetry/TelemetryManager.ts

@@ -1,6 +1,6 @@
 import { randomUUID } from "node:crypto";
 
-import SegmentClient from "analytics-node";
+import { Analytics, GroupParams, TrackParams } from "@segment/analytics-node";
 
 import { readPrismicrc } from "../../lib/prismicrc";
 
@@ -41,39 +41,44 @@ type TelemetryManagerContext = {
 };
 
 function assertTelemetryInitialized(
-	segmentClient: SegmentClient | undefined,
+	segmentClient: (() => Analytics) | undefined,
 ): asserts segmentClient is NonNullable<typeof segmentClient> {
-	if (segmentClient == undefined) {
+	if (segmentClient === undefined) {
 		throw new Error(
 			"Telemetry has not been initialized. Run `SliceMachineManager.telemetry.prototype.initTelemetry()` before re-calling this method.",
 		);
 	}
 }
 
 export class TelemetryManager extends BaseManager {
-	private _segmentClient: SegmentClient | undefined = undefined;
+	private _segmentClient: (() => Analytics) | undefined = undefined;
 	private _anonymousID: string | undefined = undefined;
 	private _userID: string | undefined = undefined;
 	private _context: TelemetryManagerContext | undefined = undefined;
 
 	async initTelemetry(args: TelemetryManagerInitTelemetryArgs): Promise<void> {
-		if (this._segmentClient) {
-			// Prevent subsequent initializations.
-			return;
-		}
+		const isTelemetryEnabled = await this.checkIsTelemetryEnabled();
+
+		this._segmentClient = () => {
+			const analytics = new Analytics({
+				writeKey: API_TOKENS.SegmentKey,
+				// Since it's a local app, we do not benefit from event batching the way a server would normally do, all tracking event will be awaited.
+				maxEventsInBatch: 1,
+				// TODO: Verify that this actually does not send data to Segment when false.
+				disable: !isTelemetryEnabled,
+			});
 
-		this._segmentClient = new SegmentClient(API_TOKENS.SegmentKey, {
-			// Since it's a local app, we do not benefit from event batching the way a server would normally do, all tracking event will be awaited.
-			flushAt: 1,
-			// TODO: Verify that this actually does not send data to Segment when false.
-			enable: await this.checkIsTelemetryEnabled(),
-			errorHandler: () => {
+			analytics.on("error", (error) => {
 				// noop - We don't care if the tracking event
 				// failed. Some users or networks intentionally
 				// block Segment, so we can't block the app if
 				// a tracking event is unsuccessful.
-			},
-		});
+				console.error(`An error occurred with Segment`, error);
+			});
+
+			return analytics;
+		};
+
 		this._anonymousID = randomUUID();
 		this._context = { app: { name: args.appName, version: args.appVersion } };
 	}
@@ -127,9 +132,9 @@ export class TelemetryManager extends BaseManager {
 			assertTelemetryInitialized(this._segmentClient);
 
 			// TODO: Make sure client fails gracefully when no internet connection
-			this._segmentClient.track(
-				payload as Parameters<typeof this._segmentClient.track>[0],
-				(maybeError?: Error) => {
+			this._segmentClient().track(
+				payload as TrackParams,
+				(maybeError?: unknown) => {
 					if (maybeError && import.meta.env.DEV) {
 						// TODO: Not sure how we want to deal with that
 						console.warn(
@@ -165,7 +170,7 @@ export class TelemetryManager extends BaseManager {
 			assertTelemetryInitialized(this._segmentClient);
 
 			// TODO: Make sure client fails gracefully when no internet connection
-			this._segmentClient.identify(payload, (maybeError?: Error) => {
+			this._segmentClient().identify(payload, (maybeError?: unknown) => {
 				if (maybeError && import.meta.env.DEV) {
 					// TODO: Not sure how we want to deal with that
 					console.warn(`An error occurred during Segment identify`, maybeError);
@@ -216,9 +221,9 @@ export class TelemetryManager extends BaseManager {
 		return new Promise((resolve) => {
 			assertTelemetryInitialized(this._segmentClient);
 
-			this._segmentClient.group(
-				payload as Parameters<typeof this._segmentClient.group>[0],
-				(maybeError?: Error) => {
+			this._segmentClient().group(
+				payload as GroupParams,
+				(maybeError?: unknown) => {
 					if (maybeError && import.meta.env.DEV) {
 						// TODO: Not sure how we want to deal with that
 						console.warn(`An error occurred during Segment group`, maybeError);

packages/manager/src/managers/telemetry/types.ts

@@ -25,6 +25,7 @@ export const SegmentEventType = {
 	editor_widgetUsed: "editor:widget-used",
 	open_page_snippet: "page-type:open-snippet",
 	copy_page_snippet: "page-type:copy-snippet",
+	switch_environment: "environment:switch",
 } as const;
 type SegmentEventTypes =
 	(typeof SegmentEventType)[keyof typeof SegmentEventType];
@@ -61,6 +62,7 @@ export const HumanSegmentEventType = {
 		"SliceMachine Opens Page Type Snippet Dialog",
 	[SegmentEventType.copy_page_snippet]:
 		"Slice Machine page code snippet copied",
+	[SegmentEventType.switch_environment]: "SliceMachine environment switch",
 } as const;
 export type HumanSegmentEventTypes =
 	(typeof HumanSegmentEventType)[keyof typeof HumanSegmentEventType];
@@ -122,6 +124,18 @@ type PageViewSegmentEvent = SegmentEvent<
 		title: string;
 		referrer: string;
 		adapter: string;
+		/*
+		 * We are tracking outer sizes instead of inner sizes as with the latter, we
+		 * can't differentiate between users with a high-density screen and those
+		 * zooming in/out with ⌘ + / ⌘ -. Indeed, when users zoom in/out, some
+		 * browsers (like Google Chrome) will update `window.devicePixelRatio` while
+		 * others (like Safari) will keep it unchanged so that it always reflects
+		 * the ratio of physical pixels to CSS pixels.
+		 */
+		outerWidth: number;
+		outerHeight: number;
+		screenWidth: number;
+		screenHeight: number;
 	}
 >;
 
@@ -135,6 +149,11 @@ type CopyPageSnippetSegmentEvent = SegmentEvent<
 	{ framework: string }
 >;
 
+type SwitchEnvironmentSegmentEvent = SegmentEvent<
+	typeof SegmentEventType.switch_environment,
+	{ domain: string }
+>;
+
 type UsersInviteButtonClickedSegmentEvent = SegmentEvent<
 	typeof SegmentEventType.users_invite_button_clicked
 >;
@@ -260,4 +279,5 @@ export type SegmentEvents =
 	| EditorWidgetUsedSegmentEvent
 	| OpenPageSnippetSegmentEvent
 	| CopyPageSnippetSegmentEvent
-	| UsersInviteButtonClickedSegmentEvent;
+	| UsersInviteButtonClickedSegmentEvent
+	| SwitchEnvironmentSegmentEvent;