@prismicio/simulator 0.1.0

package/src/kit/State.ts

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

package/src/kit/domHelpers.ts

@@ -0,0 +1,75 @@
+export const simulatorClass = "slice-simulator";
+export const simulatorRootClass = "slice-simulator--root";
+
+export const getSimulatorDOM = (): Element | null => {
+	return document.querySelector(`.${simulatorClass}`);
+};
+
+export const getSimulatorRootDOM = (): Element | null => {
+	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]`);
+	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;
+	}
+
+	// Start searching
+	node = document.querySelector(`.${simulatorClass} .${simulatorRootClass}`);
+
+	if (!node) {
+		return null;
+	}
+
+	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;
+		} else if (node.children.length) {
+			// Continue searching if current node has children
+			node = node.children[0];
+		} else {
+			// Stop searching if current node has no children
+			break;
+		}
+	}
+
+	// Failed to find SliceZone
+	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();
+
+	// Find SliceZone in raycast
+	const sliceZoneIndex = raycast.indexOf($sliceZone);
+
+	// SliceZone is not part of raycast
+	if (sliceZoneIndex === -1) {
+		return null;
+	}
+
+	const $slice = raycast[sliceZoneIndex + 1];
+
+	// Slice is not part of raycast
+	if (!$slice) {
+		return null;
+	}
+
+	return $slice;
+};

package/src/kit/eventHandlers.ts

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

package/src/kit/getDefault.ts

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

package/src/kit/index.ts

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

package/src/kit/messages.ts

@@ -0,0 +1,25 @@
+const div = (content: string) =>
+	`<div style="word-spacing: initial; white-space: pre; line-height: initial; font-family: monospace; color: #ffffff; mix-blend-mode: difference; padding: 1rem; font-size: 1rem;">${content}</div>`;
+
+const a = (href: string, label?: string) =>
+	`<a href="${href}" style="text-decoration: underline;">${label || href}<a>`;
+
+const header =
+	"   _____ ___          _____ _                 __      __            \n  / ___// (_)_______ / ___/(_)___ ___  __  __/ /___ _/ /_____  _____\n  \\__ \\/ / / ___/ _ \\\\__ \\/ / __ `__ \\/ / / / / __ `/ __/ __ \\/ ___/\n ___/ / / / /__/  __/__/ / / / / / / / /_/ / / /_/ / /_/ /_/ / /    \n/____/_/_/\\___/\\___/____/_/_/ /_/ /_/\\__,_/_/\\__,_/\\__/\\____/_/     \n                  / /_  __  __   / __ \\_____(_)________ ___  (_)____\n                 / __ \\/ / / /  / /_/ / ___/ / ___/ __ `__ \\/ / ___/\n                / /_/ / /_/ /  / ____/ /  / (__  ) / / / / / / /__  \n               /_.___/\\__, /  /_/   /_/  /_/____/_/ /_/ /_/_/\\___/  \n                     /____/\n\n";
+
+const footer =
+	"\n\n\n\n\n\n                                                - The Prismic team";
+
+export const sliceSimulatorAccessedDirectly = div(
+	[
+		header,
+		`You're seeing this page because you're accessing Slice Simulator\ndirectly, e.g:\n\n  - ${a(
+			"http://localhost:3000/slice-simulator",
+		)}\n\n\n\nSlice Simulator is not meant to be accessed this way, to preview your\nslices, head over to Slice Machine UI:\n\n  - ${a(
+			"http://localhost:9999",
+		)}\n\n\n\nIf you believe this is an error, please reach out to us:\n\n  - ${a(
+			"https://github.com/prismicio/slice-machine/issues/new/choose",
+		)}`,
+		footer,
+	].join(""),
+);

package/src/kit/types.ts

@@ -0,0 +1,30 @@
+import type { SliceZone } from "@prismicio/client";
+
+import type { ActiveSlice } from "../types";
+
+import type { SimulatorManager } from "./SimulatorManager";
+
+export enum StateEventType {
+	Slices = "slices",
+	ActiveSlice = "activeSlice",
+	Message = "message",
+}
+
+export type StateEvents = {
+	[StateEventType.Slices]: SliceZone;
+	[StateEventType.ActiveSlice]: ActiveSlice | null;
+	[StateEventType.Message]: string;
+};
+
+export interface SliceSimulatorProps {
+	zIndex?: number;
+	background?: string;
+}
+
+export interface SliceSimulatorState {
+	manager: SimulatorManager;
+	slices: SliceZone;
+	message: string;
+}
+
+export type SliceSimulatorOptions = SliceSimulatorProps & SliceSimulatorState;

package/src/lib/EventEmitter.ts

@@ -0,0 +1,41 @@
+export type Listener<T> = (event: T) => void;
+
+export type EventMap = {
+	[K in string]: unknown;
+};
+
+export abstract class EventEmitter<TEventMap = EventMap> {
+	private _listeners: {
+		[K in keyof TEventMap]?: [Listener<TEventMap[K]>, string | null][];
+	} = {};
+
+	on<TEventType extends keyof TEventMap>(
+		event: TEventType,
+		listener: Listener<TEventMap[TEventType]>,
+		key: string | null = null,
+	): void {
+		this._listeners[event] = [
+			...(this._listeners[event] ?? []),
+			[listener, key],
+		];
+	}
+
+	off<TEventType extends keyof TEventMap>(
+		event: TEventType,
+		listenerOrKey: Listener<TEventMap[TEventType]> | string,
+	): void {
+		this._listeners[event] = (this._listeners[event] ?? []).filter(
+			([listener, key]) =>
+				typeof listenerOrKey === "function"
+					? listener !== listenerOrKey
+					: key !== listenerOrKey,
+		);
+	}
+
+	emit<TEventType extends keyof TEventMap>(
+		event: TEventType,
+		payload: TEventMap[TEventType],
+	): void {
+		(this._listeners[event] ?? []).forEach((listener) => listener[0](payload));
+	}
+}

package/src/lib/__PRODUCTION__.ts

@@ -0,0 +1,12 @@
+// We need to polyfill process if it doesn't exist, such as in the browser.
+if (typeof process === "undefined") {
+	globalThis.process = { env: {} } as typeof process;
+}
+
+/**
+ * `true` if in the production environment, `false` otherwise.
+ *
+ * This boolean can be used to perform actions only in development environments,
+ * such as logging.
+ */
+export const __PRODUCTION__ = process.env.NODE_ENV === "production";

package/src/lib/throttle.ts

@@ -0,0 +1,26 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const throttle = <TFn extends (...args: any[]) => any>(
+	fn: TFn,
+	delay = 16,
+): ((...args: Parameters<TFn>) => void) => {
+	let lastExec = 0;
+	let timer: NodeJS.Timeout | null = null;
+
+	return function (this: unknown, ...args: Parameters<TFn>) {
+		const now = Date.now();
+		const delta = now - lastExec;
+
+		if (delta >= delay) {
+			fn.apply(this, args);
+			lastExec = now;
+		} else {
+			if (timer) {
+				clearTimeout(timer);
+			}
+			timer = setTimeout(() => {
+				fn.apply(this, args);
+				lastExec = Date.now();
+			}, delay - delta);
+		}
+	};
+};

package/src/types.ts

@@ -0,0 +1,57 @@
+import { SliceZone } from "@prismicio/types";
+
+import { RequestMessage, ResponseMessage, Transaction } from "./channel";
+
+export type ActiveSlice = {
+	rect: DOMRect;
+	sliceID: string;
+	variationID: string;
+	index: number;
+};
+
+export type SliceZoneSize = {
+	rect: DOMRect;
+};
+
+export enum APIRequestType {
+	SetActiveSlice = "setActiveSlice",
+	SetSliceZoneSize = "setSliceZoneSize",
+}
+
+export type APITransactions = {
+	[APIRequestType.SetActiveSlice]: Transaction<
+		RequestMessage<APIRequestType.SetActiveSlice, ActiveSlice | null>
+	>;
+	[APIRequestType.SetSliceZoneSize]: Transaction<
+		RequestMessage<APIRequestType.SetSliceZoneSize, SliceZoneSize | null>
+	>;
+};
+
+export enum ClientRequestType {
+	Ping = "ping",
+	SetSliceZone = "setSliceZone",
+	ScrollToSlice = "scrollToSlice",
+}
+
+export type ClientTransactions = {
+	[ClientRequestType.Ping]: Transaction<
+		RequestMessage<ClientRequestType.Ping>,
+		ResponseMessage<"pong">
+	>;
+
+	[ClientRequestType.SetSliceZone]: Transaction<
+		RequestMessage<ClientRequestType.SetSliceZone, SliceZone>
+	>;
+
+	[ClientRequestType.ScrollToSlice]: Transaction<
+		RequestMessage<
+			ClientRequestType.ScrollToSlice,
+			{
+				sliceIndex: number;
+				behavior?: "auto" | "smooth";
+				block?: "start" | "center" | "end" | "nearest";
+				inline?: "start" | "center" | "end" | "nearest";
+			}
+		>
+	>;
+};