@prismicio/simulator 0.1.4 → 0.2.0-canary.a0bdcb9

package/src/channel/messages.ts

@@ -1,6 +1,4 @@
-import statuses from "statuses";
-
-import {
+import type {
 	ErrorResponseMessage,
 	RequestMessage,
 	SuccessResponseMessage,
@@ -9,14 +7,21 @@ import {
 	UnknownRequestMessage,
 	UnknownResponseMessage,
 	UnknownSuccessResponseMessage,
-} from "./types";
+} from "./types"
+
+// Adapted from https://github.com/jshttp/statuses/blob/770a97d931c1bb40ebbfefdbb77f0419601890b5/codes.json
+const statuses = {
+	200: "ok",
+	201: "created",
 
-let requestID = 0;
+	400: "bad request",
+	500: "internal server error",
+	501: "not implemented",
+}
 
-export const createRequestMessage = <
-	TType extends string = string,
-	TData = undefined,
->(
+let requestID = 0
+
+export const createRequestMessage = <TType extends string = string, TData = undefined>(
 	type: TType,
 	data: TData,
 	prefix = "",
@@ -25,91 +30,85 @@ export const createRequestMessage = <
 		requestID: `${prefix}${requestID++}`,
 		type,
 		data,
-	};
-};
+	}
+}
 
 export const createSuccessResponseMessage = <TData = undefined>(
 	requestID: string,
 	data: TData,
-	status: keyof typeof statuses.message = 200,
+	status: keyof typeof statuses = 200,
 ): SuccessResponseMessage<TData> => {
 	if (status >= 400) {
 		throw new TypeError(
 			`Invalid success status code, expected status to be within \`[100;400[\`, got \`${status}\``,
-		);
+		)
 	}
 
 	return {
 		requestID,
 		status,
-		msg: statuses.message[status]?.replace(/\.$/, "").toLowerCase() ?? "",
+		msg: statuses[status] ?? "",
 		data,
-	};
-};
+	}
+}
 
 export const createErrorResponseMessage = <TError = undefined>(
 	requestID: string,
 	error: TError,
-	status: keyof typeof statuses.message = 400,
+	status: keyof typeof statuses = 400,
 ): ErrorResponseMessage<TError> => {
 	if (status < 400) {
 		throw new TypeError(
-			`Invalid error status code, expected status to be within \`[500;600[\`, got \`${status}\``,
-		);
+			`Invalid error status code, expected status to be within \`[400;600[\`, got \`${status}\``,
+		)
 	}
 
 	return {
 		requestID,
 		status,
-		msg: statuses.message[status]?.replace(/\.$/, "").toLowerCase() ?? "",
+		msg: statuses[status] ?? "",
 		error,
-	};
-};
+	}
+}
 
 export const validateMessage = (message: unknown): UnknownMessage => {
 	if (typeof message !== "object" || message === null) {
 		throw new TypeError(
 			`Invalid message received, expected message to be of type \`object\`, got \`${typeof message}\``,
-		);
+		)
 	} else if (
 		!Object.keys(message).every((key) =>
 			["requestID", "type", "data", "status", "msg", "error"].includes(key),
 		)
 	) {
-		throw new TypeError(`Invalid message received: ${JSON.stringify(message)}`);
-	} else if (
-		typeof (message as Record<string, unknown>).requestID !== "string"
-	) {
+		throw new TypeError(`Invalid message received: ${JSON.stringify(message)}`)
+	} else if (typeof (message as Record<string, unknown>).requestID !== "string") {
 		throw new TypeError(
 			`Invalid message received, expected \`message.requestID\` to be of type \`string\`, got \`${typeof (
 				message as Record<string, unknown>
 			).id}\``,
-		);
+		)
 	}
 
-	return message as UnknownMessage;
-};
+	return message as UnknownMessage
+}
 
-export const isRequestMessage = (
-	message: UnknownMessage,
-): message is UnknownRequestMessage => {
-	return "type" in message;
-};
+export const isRequestMessage = (message: UnknownMessage): message is UnknownRequestMessage => {
+	return "type" in message
+}
 
-export const isResponseMessage = (
-	message: UnknownMessage,
-): message is UnknownResponseMessage => {
-	return !("type" in message);
-};
+export const isResponseMessage = (message: UnknownMessage): message is UnknownResponseMessage => {
+	return !("type" in message)
+}
 
 export const isSuccessResponseMessage = (
 	message: UnknownMessage,
 ): message is UnknownSuccessResponseMessage => {
-	return isResponseMessage(message) && !("error" in message);
-};
+	return isResponseMessage(message) && !("error" in message)
+}
 
 export const isErrorResponseMessage = (
 	message: UnknownMessage,
 ): message is UnknownErrorResponseMessage => {
-	return isResponseMessage(message) && !("data" in message);
-};
+	return isResponseMessage(message) && !("data" in message)
+}

package/src/channel/types.ts

@@ -1,111 +1,98 @@
 // Messages
 export type MessageBase = {
-	requestID: string;
-};
+	requestID: string
+}
 
 export type RequestMessage<TType extends string = string, TData = void> = {
-	type: TType;
-	data: TData;
-} & MessageBase;
+	type: TType
+	data: TData
+} & MessageBase
 
 export type ResponseMessageBase = {
-	status: number;
-	msg: string;
-} & MessageBase;
+	status: number
+	msg: string
+} & MessageBase
 
 export type SuccessResponseMessage<TData = void> = {
-	data: TData;
-	error?: never;
-} & ResponseMessageBase;
+	data: TData
+	error?: never
+} & ResponseMessageBase
 
 export type ErrorResponseMessage<TError = unknown> = {
-	data?: never;
-	error: unknown | TError;
-} & ResponseMessageBase;
+	data?: never
+	error: unknown | TError
+} & ResponseMessageBase
 
 export type ResponseMessage<TData = void, TError = unknown> =
 	| SuccessResponseMessage<TData>
-	| ErrorResponseMessage<TError>;
+	| ErrorResponseMessage<TError>
 
-export type ExtractSuccessResponseMessage<
-	TResponse extends UnknownResponseMessage,
-> = Extract<TResponse, { error?: never }>;
+export type ExtractSuccessResponseMessage<TResponse extends UnknownResponseMessage> = Extract<
+	TResponse,
+	{ error?: never }
+>
 
-export type ExtractErrorResponseMessage<
-	TResponse extends UnknownResponseMessage,
-> = Extract<TResponse, { data?: never }>;
+export type ExtractErrorResponseMessage<TResponse extends UnknownResponseMessage> = Extract<
+	TResponse,
+	{ data?: never }
+>
 
 // Unknown messages
-export type UnknownRequestMessage = RequestMessage<string, unknown>;
+export type UnknownRequestMessage = RequestMessage<string, unknown>
 
-export type UnknownSuccessResponseMessage = SuccessResponseMessage<unknown>;
+export type UnknownSuccessResponseMessage = SuccessResponseMessage<unknown>
 
-export type UnknownErrorResponseMessage = ErrorResponseMessage<unknown>;
+export type UnknownErrorResponseMessage = ErrorResponseMessage<unknown>
 
-export type UnknownResponseMessage =
-	| UnknownSuccessResponseMessage
-	| UnknownErrorResponseMessage;
+export type UnknownResponseMessage = UnknownSuccessResponseMessage | UnknownErrorResponseMessage
 
-export type UnknownMessage = UnknownRequestMessage | UnknownResponseMessage;
+export type UnknownMessage = UnknownRequestMessage | UnknownResponseMessage
 
 // Transactions
 export type Transaction<
 	TRequest extends UnknownRequestMessage,
 	TResponse extends UnknownResponseMessage = ResponseMessage<void>,
 > = {
-	request: TRequest;
-	response: TResponse;
-};
+	request: TRequest
+	response: TResponse
+}
 
 export type TransactionMethod<
-	TTransaction extends Transaction<
-		UnknownRequestMessage,
-		UnknownResponseMessage
-	>,
+	TTransaction extends Transaction<UnknownRequestMessage, UnknownResponseMessage>,
 > = (
 	data: TTransaction["request"]["data"],
-) => Promise<ExtractSuccessResponseMessage<TTransaction["response"]>>;
+) => Promise<ExtractSuccessResponseMessage<TTransaction["response"]>>
 
 export type TransactionHandler<
-	TTransaction extends Transaction<
-		UnknownRequestMessage,
-		UnknownResponseMessage
-	>,
+	TTransaction extends Transaction<UnknownRequestMessage, UnknownResponseMessage>,
 > = (
 	request: TTransaction["request"],
 	response: {
 		success: (
 			data: ExtractSuccessResponseMessage<TTransaction["response"]>["data"],
 			status?: number,
-		) => ExtractSuccessResponseMessage<TTransaction["response"]>;
+		) => ExtractSuccessResponseMessage<TTransaction["response"]>
 		error: (
 			error: ExtractErrorResponseMessage<TTransaction["response"]>["error"],
 			status?: number,
-		) => ExtractErrorResponseMessage<TTransaction["response"]>;
+		) => ExtractErrorResponseMessage<TTransaction["response"]>
 	},
-) => Promise<TTransaction["response"]> | TTransaction["response"];
+) => Promise<TTransaction["response"]> | TTransaction["response"]
 
-export type TransactionsMethods<
-	TTransactions extends Record<string, UnknownTransaction>,
-> = {
-	[Key in keyof TTransactions]: TransactionMethod<TTransactions[Key]>;
-};
+export type TransactionsMethods<TTransactions extends Record<string, UnknownTransaction>> = {
+	[Key in keyof TTransactions]: TransactionMethod<TTransactions[Key]>
+}
 
-export type TransactionsHandlers<
-	TTransactions extends Record<string, UnknownTransaction>,
-> = {
-	[Key in keyof TTransactions]: TransactionHandler<TTransactions[Key]>;
-};
+export type TransactionsHandlers<TTransactions extends Record<string, UnknownTransaction>> = {
+	[Key in keyof TTransactions]: TransactionHandler<TTransactions[Key]>
+}
 
 // Unknown transactions
-export type UnknownTransaction = Transaction<
-	UnknownRequestMessage,
-	UnknownResponseMessage
->;
+export type UnknownTransaction = Transaction<UnknownRequestMessage, UnknownResponseMessage>
 
-export type UnknownTransactionMethod = TransactionMethod<UnknownTransaction>;
+export type UnknownTransactionMethod = TransactionMethod<UnknownTransaction>
 
-export type UnknownTransactionHandler = TransactionHandler<UnknownTransaction>;
+export type UnknownTransactionHandler = TransactionHandler<UnknownTransaction>
 
 // Emitter
 export enum InternalEmitterRequestType {
@@ -118,13 +105,10 @@ export type InternalEmitterTransactions<
 	[InternalEmitterRequestType.Connect]: Transaction<
 		RequestMessage<
 			InternalEmitterRequestType.Connect,
-			| Partial<
-					Omit<TReceiverOptions, "debug" | "requestIDPrefix" | "readyTimeout">
-			  >
-			| undefined
+			Partial<Omit<TReceiverOptions, "debug" | "requestIDPrefix" | "readyTimeout">> | undefined
 		>
-	>;
-};
+	>
+}
 
 // Receiver
 export enum InternalReceiverRequestType {
@@ -134,5 +118,5 @@ export enum InternalReceiverRequestType {
 export type InternalReceiverTransactions = {
 	[InternalReceiverRequestType.Ready]: Transaction<
 		RequestMessage<InternalReceiverRequestType.Ready>
-	>;
-};
+	>
+}

package/src/globalExtensions.ts

@@ -1,13 +1,13 @@
-import { SimulatorAPI } from "./SimulatorAPI";
-import { SimulatorClient } from "./SimulatorClient";
+import type { SimulatorAPI } from "./SimulatorAPI"
+import type { SimulatorClient } from "./SimulatorClient"
 
 declare global {
 	interface Window {
 		prismic?: {
 			sliceSimulator?: {
-				api?: SimulatorAPI[];
-				client?: SimulatorClient[];
-			};
-		};
+				api?: SimulatorAPI[]
+				client?: SimulatorClient[]
+			}
+		}
 	}
 }

package/src/index.ts

@@ -1,10 +1,7 @@
-export {
-	SimulatorClient,
-	simulatorClientDefaultOptions,
-} from "./SimulatorClient";
+export { SimulatorClient, simulatorClientDefaultOptions } from "./SimulatorClient"
 
-export { SimulatorAPI, simulatorAPIDefaultOptions } from "./SimulatorAPI";
-export type { SimulatorAPIOptions } from "./SimulatorAPI";
+export { SimulatorAPI, simulatorAPIDefaultOptions } from "./SimulatorAPI"
+export type { SimulatorAPIOptions } from "./SimulatorAPI"
 
 export {
 	// Validators
@@ -21,7 +18,7 @@ export {
 	NotReadyError,
 	PortNotSetError,
 	ChannelNotSetError,
-} from "./channel";
+} from "./channel"
 export type {
 	RequestMessage,
 	ResponseMessage,
@@ -29,14 +26,9 @@ export type {
 	SuccessResponseMessage,
 	AllChannelEmitterOptions,
 	AllChannelReceiverOptions,
-} from "./channel";
+} from "./channel"
 
-export { APIRequestType, ClientRequestType } from "./types";
-export type {
-	ActiveSlice,
-	SliceZoneSize,
-	APITransactions,
-	ClientTransactions,
-} from "./types";
+export { APIRequestType, ClientRequestType } from "./types"
+export type { ActiveSlice, SliceZoneSize, APITransactions, ClientTransactions } from "./types"
 
-export * from "./globalExtensions";
+export * from "./globalExtensions"

package/src/kit/SimulatorManager.ts

@@ -1,49 +1,42 @@
-import type { SliceZone } from "@prismicio/client";
+import type { SliceZone } from "@prismicio/client"
 
-import { throttle } from "../lib/throttle";
-
-import { ClientRequestType } from "../types";
-import { StateEventType } from "./types";
-
-import { SimulatorAPI } from "../SimulatorAPI";
-import { ResponseError } from "../channel";
-
-import { State } from "./State";
-import {
-	getSimulatorDOM,
-	getSimulatorRootDOM,
-	getSliceZoneDOM,
-} from "./domHelpers";
-import { sliceSimulatorAccessedDirectly } from "./messages";
+import { ResponseError } from "../channel"
+import { throttle } from "../lib/throttle"
+import { SimulatorAPI } from "../SimulatorAPI"
+import { ClientRequestType } from "../types"
+import { getSimulatorDOM, getSimulatorRootDOM, getSliceZoneDOM } from "./domHelpers"
+import { sliceSimulatorAccessedDirectly } from "./messages"
+import { State } from "./State"
+import { StateEventType } from "./types"
 
 type ManagerConstructorArgs = {
-	slices?: SliceZone;
-};
+	slices?: SliceZone
+}
 
 export class SimulatorManager {
-	public state: State;
-	private _api: SimulatorAPI | null;
-	private _initialized: boolean;
+	public state: State
+	private _api: SimulatorAPI | null
+	private _initialized: boolean
 
 	constructor(args?: ManagerConstructorArgs) {
-		this.state = new State(args);
-		this._api = null;
-		this._initialized = false;
+		this.state = new State(args)
+		this._api = null
+		this._initialized = false
 	}
 
 	async init(): Promise<void> {
 		if (this._initialized) {
-			return;
+			return
 		} else {
-			this._initialized = true;
+			this._initialized = true
 		}
 
 		// Init state manager
-		await this.state.init();
+		await this.state.init()
 
 		// Init API
 		try {
-			await this._initAPI();
+			await this._initAPI()
 		} catch (error) {
 			if (
 				error instanceof Error &&
@@ -51,50 +44,50 @@ export class SimulatorManager {
 				!this.state.slices.length
 			) {
 				// Catch not embedded error and display message
-				this.state.message = sliceSimulatorAccessedDirectly;
+				this.state.message = sliceSimulatorAccessedDirectly
 			}
-			console.error(error);
+			console.error(error)
 
-			return;
+			return
 		}
 
 		// Init listeners
-		this._initListeners();
+		this._initListeners()
 	}
 
 	private async _initAPI(): Promise<void> {
 		// Register SimulatorAPI request handlers
 		this._api = new SimulatorAPI({
 			[ClientRequestType.SetSliceZone]: (req, res) => {
-				this.state.setSliceZone(req.data);
+				this.state.setSliceZone(req.data)
 
-				return res.success();
+				return res.success()
 			},
 			[ClientRequestType.ScrollToSlice]: (req, res) => {
 				// Error if `sliceIndex` is invalid
 				if (req.data.sliceIndex < 0) {
-					return res.error("`sliceIndex` must be > 0", 400);
+					return res.error("`sliceIndex` must be > 0", 400)
 				} else if (req.data.sliceIndex >= this.state.slices.length) {
 					return res.error(
 						`\`sliceIndex\` must be < ${this.state.slices.length} (\`<SliceZone />\` current length)`,
 						400,
-					);
+					)
 				}
 
-				const $sliceZone = getSliceZoneDOM(this.state.slices.length);
+				const $sliceZone = getSliceZoneDOM(this.state.slices.length)
 				if (!$sliceZone) {
-					return res.error("Failed to find `<SliceZone />`", 500);
+					return res.error("Failed to find `<SliceZone />`", 500)
 				}
 
 				// Destroy existing active slice as we're about to scroll
-				this.state.activeSlice = null;
+				this.state.activeSlice = null
 
-				const $slice = $sliceZone.children[req.data.sliceIndex];
+				const $slice = $sliceZone.children[req.data.sliceIndex]
 				if (!$slice) {
 					return res.error(
 						`Failed fo find slice at index $\`{req.data.sliceIndex}\` in \`<SliceZone />\``,
 						500,
-					);
+					)
 				}
 
 				// Scroll to Slice
@@ -102,97 +95,92 @@ export class SimulatorManager {
 					behavior: req.data.behavior,
 					block: req.data.block,
 					inline: req.data.inline,
-				});
+				})
 
 				// Update active slice after scrolling
-				this._api?.options.activeSliceAPI &&
-					setTimeout(this.state.setActiveSlice, 750);
+				if (this._api?.options.activeSliceAPI) {
+					setTimeout(this.state.setActiveSlice, 750)
+				}
 
-				return res.success();
+				return res.success()
 			},
-		});
+		})
 
 		// Mark API as ready
-		await this._api.ready();
+		await this._api.ready()
 	}
 
 	private _initListeners(): void {
 		if (this._api?.options.activeSliceAPI) {
 			// Update active slice on mouse move
 			window.addEventListener("mousemove", () => {
-				this.state.setActiveSlice();
-			});
+				this.state.setActiveSlice()
+			})
 			// Update active slice on events impacting slices rendering
 			window.addEventListener("resize", () => {
-				this.state.setActiveSlice();
-			});
+				this.state.setActiveSlice()
+			})
 			window.addEventListener("mousewheel", () => {
-				setTimeout(this.state.setActiveSlice, 200);
-			});
+				setTimeout(this.state.setActiveSlice, 200)
+			})
 
 			// Update active slice when slices are set
 			this.state.on(StateEventType.Slices, () => {
-				this.state.setActiveSlice();
-			});
+				this.state.setActiveSlice()
+			})
 			// Send active slices to renderer
 			this.state.on(StateEventType.ActiveSlice, async (activeSlice) => {
 				if (this._api) {
 					try {
-						await this._api.setActiveSlice(activeSlice);
+						await this._api.setActiveSlice(activeSlice)
 					} catch (error) {
 						// Just log bad requests, throw everything else
-						if (
-							error instanceof ResponseError &&
-							error.response.status === 400
-						) {
-							console.error(error.response);
+						if (error instanceof ResponseError && error.response.status === 400) {
+							console.error(error.response)
 						} else {
-							throw error;
+							throw error
 						}
 					}
 				}
-			});
+			})
 		}
 
 		if (this._api?.options.sliceZoneSizeAPI) {
 			// Monitor Simulator root node size
 			const resizeObserver = new ResizeObserver(
 				throttle(async (entries) => {
-					const [entry] = entries;
+					const [entry] = entries
 
 					if (this._api && entry) {
 						try {
-							await this._api.setSliceZoneSize({ rect: entry.contentRect });
+							await this._api.setSliceZoneSize({ rect: entry.contentRect })
 						} catch (error) {
 							// Just log bad requests, throw everything else
-							if (
-								error instanceof ResponseError &&
-								error.response.status === 400
-							) {
-								console.error(error.response);
+							if (error instanceof ResponseError && error.response.status === 400) {
+								console.error(error.response)
 							} else {
-								throw error;
+								throw error
 							}
 						}
 					}
 				}, 16),
-			);
+			)
 			const observeSimulatorRoot = () => {
-				const simulatorRootDOM = getSimulatorRootDOM();
-				resizeObserver.disconnect();
+				const simulatorRootDOM = getSimulatorRootDOM()
+				resizeObserver.disconnect()
 				if (simulatorRootDOM) {
-					resizeObserver.observe(simulatorRootDOM);
+					resizeObserver.observe(simulatorRootDOM)
 				}
-			};
+			}
 
 			// Monitor Simulator root node in DOM
-			const mutationObserver = new MutationObserver(observeSimulatorRoot);
+			const mutationObserver = new MutationObserver(observeSimulatorRoot)
 			// We want it to fail if not found
 			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 			mutationObserver.observe(getSimulatorDOM()!, {
 				subtree: false,
 				childList: true,
-			});
+			})
 		}
 	}
 }