@prismicio/simulator 0.1.4 → 0.2.0

package/src/index.ts

@@ -1,10 +1,10 @@
 export {
 	SimulatorClient,
 	simulatorClientDefaultOptions,
-} from "./SimulatorClient";
+} 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 +21,7 @@ export {
 	NotReadyError,
 	PortNotSetError,
 	ChannelNotSetError,
-} from "./channel";
+} from "./channel"
 export type {
 	RequestMessage,
 	ResponseMessage,
@@ -29,14 +29,14 @@ export type {
 	SuccessResponseMessage,
 	AllChannelEmitterOptions,
 	AllChannelReceiverOptions,
-} from "./channel";
+} from "./channel"
 
-export { APIRequestType, ClientRequestType } from "./types";
+export { APIRequestType, ClientRequestType } from "./types"
 export type {
 	ActiveSlice,
 	SliceZoneSize,
 	APITransactions,
 	ClientTransactions,
-} from "./types";
+} from "./types"
 
-export * from "./globalExtensions";
+export * from "./globalExtensions"

package/src/kit/SimulatorManager.ts

@@ -1,49 +1,49 @@
-import type { SliceZone } from "@prismicio/client";
+import type { SliceZone } from "@prismicio/client"
 
-import { throttle } from "../lib/throttle";
+import { throttle } from "../lib/throttle"
 
-import { ClientRequestType } from "../types";
-import { StateEventType } from "./types";
+import { ClientRequestType } from "../types"
+import { StateEventType } from "./types"
 
-import { SimulatorAPI } from "../SimulatorAPI";
-import { ResponseError } from "../channel";
+import { SimulatorAPI } from "../SimulatorAPI"
+import { ResponseError } from "../channel"
 
-import { State } from "./State";
+import { State } from "./State"
 import {
 	getSimulatorDOM,
 	getSimulatorRootDOM,
 	getSliceZoneDOM,
-} from "./domHelpers";
-import { sliceSimulatorAccessedDirectly } from "./messages";
+} from "./domHelpers"
+import { sliceSimulatorAccessedDirectly } from "./messages"
 
 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 +51,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 +102,98 @@ 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);
+							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);
+								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,
-			});
+			})
 		}
 	}
 }

package/src/kit/State.ts

@@ -1,100 +1,101 @@
-import type { SharedSlice, SliceZone } from "@prismicio/client";
+import type { SharedSlice, SliceZone } from "@prismicio/client"
 
-import { EventEmitter } from "../lib/EventEmitter";
-import { __PRODUCTION__ } from "../lib/__PRODUCTION__";
-import { throttle } from "../lib/throttle";
+import { EventEmitter } from "../lib/EventEmitter"
+import { __PRODUCTION__ } from "../lib/__PRODUCTION__"
+import { throttle } from "../lib/throttle"
 
-import type { ActiveSlice } from "../types";
-import { StateEventType, StateEvents } from "./types";
+import type { ActiveSlice } from "../types"
+import type { StateEvents } from "./types";
+import { StateEventType } from "./types"
 
-import { getActiveSliceDOM, getSliceZoneDOM } from "./domHelpers";
-import { getDefaultSlices } from "./getDefault";
+import { getActiveSliceDOM, getSliceZoneDOM } from "./domHelpers"
+import { getDefaultSlices } from "./getDefault"
 
 type StateConstructorArgs = {
-	slices?: SliceZone;
-};
+	slices?: SliceZone
+}
 
 export class State extends EventEmitter<StateEvents> {
-	private _slices: SliceZone;
+	private _slices: SliceZone
 	public set slices(slices: SliceZone) {
-		this._slices = slices;
+		this._slices = slices
 		// Clean up message
-		this.message = "";
+		this.message = ""
 		// Dispatch event
-		this.emit(StateEventType.Slices, slices);
+		this.emit(StateEventType.Slices, slices)
 	}
 	public get slices(): SliceZone {
-		return this._slices;
+		return this._slices
 	}
 
-	private _activeSlice: ActiveSlice | null;
+	private _activeSlice: ActiveSlice | null
 	public set activeSlice(activeSlice: ActiveSlice | null) {
-		this._activeSlice = activeSlice;
-		this.emit(StateEventType.ActiveSlice, activeSlice);
+		this._activeSlice = activeSlice
+		this.emit(StateEventType.ActiveSlice, activeSlice)
 	}
 	public get activeSlice(): ActiveSlice | null {
-		return this._activeSlice;
+		return this._activeSlice
 	}
 
-	private _message: string;
+	private _message: string
 	public set message(message: string) {
-		this._message = message;
-		this.emit(StateEventType.Message, message);
+		this._message = message
+		this.emit(StateEventType.Message, message)
 	}
 	public get message(): string {
-		return this._message;
+		return this._message
 	}
 
-	private _mouse: { x: number; y: number };
+	private _mouse: { x: number; y: number }
 
 	constructor(args?: StateConstructorArgs) {
-		super();
+		super()
 
-		this._slices = args?.slices || getDefaultSlices();
-		this._activeSlice = null;
-		this._message = "";
+		this._slices = args?.slices || getDefaultSlices()
+		this._activeSlice = null
+		this._message = ""
 
 		// StateManager needs to keep track of mouse position for the active slice
-		this._mouse = { x: 0, y: 0 };
+		this._mouse = { x: 0, y: 0 }
 	}
 
 	async init(): Promise<void> {
 		// Init listener
 		window.addEventListener("mousemove", (event) => {
-			this._mouse = { x: event.clientX, y: event.clientY };
-		});
+			this._mouse = { x: event.clientX, y: event.clientY }
+		})
 	}
 
 	private _setActiveSlice = (): void => {
 		// There can't be an active slice if there's no slice displayed
 		if (this.slices.length === 0) {
-			this.activeSlice = null;
+			this.activeSlice = null
 
-			return;
+			return
 		}
 
-		const $sliceZone = getSliceZoneDOM(this.slices.length);
+		const $sliceZone = getSliceZoneDOM(this.slices.length)
 
 		// SliceZone has not been found, therefore active slice cannot be found
 		if (!$sliceZone) {
-			this.activeSlice = null;
+			this.activeSlice = null
 
-			return;
+			return
 		}
 
-		const $activeSlice = getActiveSliceDOM($sliceZone, this._mouse);
+		const $activeSlice = getActiveSliceDOM($sliceZone, this._mouse)
 
 		// Active slice has not been found
 		if (!$activeSlice) {
-			this.activeSlice = null;
+			this.activeSlice = null
 
-			return;
+			return
 		}
 
 		const activeSliceIndex = Array.prototype.indexOf.call(
 			$sliceZone.children,
 			$activeSlice,
-		);
+		)
 
 		// Active slice has been found
 		this.activeSlice = {
@@ -102,12 +103,12 @@ export class State extends EventEmitter<StateEvents> {
 			sliceID: this.slices[activeSliceIndex].slice_type,
 			variationID: (this.slices[activeSliceIndex] as SharedSlice).variation,
 			index: activeSliceIndex,
-		};
-	};
-	setActiveSlice = throttle(this._setActiveSlice, 16);
+		}
+	}
+	setActiveSlice = throttle(this._setActiveSlice, 16)
 
 	setSliceZone(slices: SliceZone): void {
 		// Set slices
-		this.slices = slices;
+		this.slices = slices
 	}
 }

package/src/kit/domHelpers.ts

@@ -1,75 +1,75 @@
-export const simulatorClass = "slice-simulator";
-export const simulatorRootClass = "slice-simulator--root";
+export const simulatorClass = "slice-simulator"
+export const simulatorRootClass = "slice-simulator--root"
 
 export const getSimulatorDOM = (): Element | null => {
-	return document.querySelector(`.${simulatorClass}`);
-};
+	return document.querySelector(`.${simulatorClass}`)
+}
 
 export const getSimulatorRootDOM = (): Element | null => {
-	return document.querySelector(`.${simulatorRootClass}`);
-};
+	return document.querySelector(`.${simulatorRootClass}`)
+}
 
 export const getSliceZoneDOM = (
 	expectedNumberOfChildren: number,
 ): Element | null => {
 	// If SliceZone has been tagged (#5)
-	let node = document.querySelector(`.${simulatorClass} [data-slice-zone]`);
+	let node = document.querySelector(`.${simulatorClass} [data-slice-zone]`)
 	if (node) {
 		if (node.children.length !== expectedNumberOfChildren) {
 			console.warn(
 				`Flagged SliceZone has an unexpected number of children, found ${node.children.length} but expected ${expectedNumberOfChildren}. This might lead to unexpected behaviors. Are you sure you tagged the right element?`,
-			);
+			)
 		}
 
-		return node;
+		return node
 	}
 
 	// Start searching
-	node = document.querySelector(`.${simulatorClass} .${simulatorRootClass}`);
+	node = document.querySelector(`.${simulatorClass} .${simulatorRootClass}`)
 
 	if (!node) {
-		return null;
+		return null
 	}
 
-	const searchDepth = 5;
+	const searchDepth = 5
 	for (let i = 0; i < searchDepth; i++) {
 		if (node.children.length === expectedNumberOfChildren) {
 			// Return the first node that matches the expected number of children
-			return node;
+			return node
 		} else if (node.children.length) {
 			// Continue searching if current node has children
-			node = node.children[0];
+			node = node.children[0]
 		} else {
 			// Stop searching if current node has no children
-			break;
+			break
 		}
 	}
 
 	// Failed to find SliceZone
-	return null;
-};
+	return null
+}
 
 export const getActiveSliceDOM = (
 	$sliceZone: Element,
 	mouse: { x: number; y: number },
 ): Element | null => {
 	// Raycast cursor position on DOM
-	const raycast = document.elementsFromPoint(mouse.x, mouse.y).reverse();
+	const raycast = document.elementsFromPoint(mouse.x, mouse.y).reverse()
 
 	// Find SliceZone in raycast
-	const sliceZoneIndex = raycast.indexOf($sliceZone);
+	const sliceZoneIndex = raycast.indexOf($sliceZone)
 
 	// SliceZone is not part of raycast
 	if (sliceZoneIndex === -1) {
-		return null;
+		return null
 	}
 
-	const $slice = raycast[sliceZoneIndex + 1];
+	const $slice = raycast[sliceZoneIndex + 1]
 
 	// Slice is not part of raycast
 	if (!$slice) {
-		return null;
+		return null
 	}
 
-	return $slice;
-};
+	return $slice
+}

package/src/kit/eventHandlers.ts

@@ -1,7 +1,7 @@
 export const disableEventHandler = (event: Event): void => {
-	event.preventDefault();
-	event.stopPropagation();
-};
+	event.preventDefault()
+	event.stopPropagation()
+}
 
 export const onClickHandler = (
 	event: MouseEvent & { path?: HTMLElement[] },
@@ -10,7 +10,7 @@ export const onClickHandler = (
 		event.path &&
 		event.path.slice(0, 5).some((el) => el instanceof HTMLAnchorElement)
 	) {
-		event.preventDefault();
-		event.stopPropagation();
+		event.preventDefault()
+		event.stopPropagation()
 	}
-};
+}

package/src/kit/getDefault.ts

@@ -1,18 +1,18 @@
-import type { SliceZone } from "@prismicio/client";
+import type { SliceZone } from "@prismicio/client"
 
-import { SliceSimulatorProps } from "./types";
+import type { SliceSimulatorProps } from "./types"
 
 export const getDefaultProps = (): Required<{
-	[K in keyof SliceSimulatorProps]: NonNullable<SliceSimulatorProps[K]>;
+	[K in keyof SliceSimulatorProps]: NonNullable<SliceSimulatorProps[K]>
 }> => ({
 	zIndex: 100,
 	background: "#ffffff",
-});
+})
 
 export const getDefaultSlices = (): SliceZone => {
-	return [];
-};
+	return []
+}
 
 export const getDefaultMessage = (): string => {
-	return "";
-};
+	return ""
+}

package/src/kit/index.ts

@@ -1,13 +1,13 @@
 // Main
-export { SimulatorManager } from "./SimulatorManager";
-export { State } from "./State";
+export { SimulatorManager } from "./SimulatorManager"
+export { State } from "./State"
 
 // Defaults
 export {
 	getDefaultProps,
 	getDefaultSlices,
 	getDefaultMessage,
-} from "./getDefault";
+} from "./getDefault"
 
 // DOM helpers
 export {
@@ -15,19 +15,19 @@ export {
 	simulatorRootClass,
 	getSliceZoneDOM,
 	getActiveSliceDOM,
-} from "./domHelpers";
+} from "./domHelpers"
 
 // Events
-export { disableEventHandler, onClickHandler } from "./eventHandlers";
+export { disableEventHandler, onClickHandler } from "./eventHandlers"
 
 // Messages
-export { sliceSimulatorAccessedDirectly } from "./messages";
+export { sliceSimulatorAccessedDirectly } from "./messages"
 
 // Types
-export { StateEventType } from "./types";
+export { StateEventType } from "./types"
 export type {
 	StateEvents,
 	SliceSimulatorProps,
 	SliceSimulatorState,
 	SliceSimulatorOptions,
-} from "./types";
+} from "./types"