@prismicio/next/dist/SliceSimulator.js

Helpers to integrate Prismic into Next.js apps

"use client";
import { getSlices } from "./getSlices.js";
import { SliceSimulatorWrapper } from "./SliceSimulatorWrapper.js";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { jsx } from "react/jsx-runtime";
import { SimulatorManager, StateEventType, getDefaultMessage } from "@prismicio/simulator/kit";
import { compressToEncodedURIComponent } from "lz-string";
//#region src/SliceSimulator.tsx
const STATE_PARAMS_KEY = "state";
const simulatorManager = new SimulatorManager();
/**
* Simulate slices in isolation. The slice simulator enables live slice development in Slice Machine
* and live previews in the Page Builder.
*/
const SliceSimulator = ({ children, background, zIndex, className }) => {
	const [message, setMessage] = useState(() => getDefaultMessage());
	const router = useRouter();
	const hasSlices = getSlices(typeof window !== "undefined" ? new URL(window.location.href).searchParams.get(STATE_PARAMS_KEY) : void 0).length > 0;
	useEffect(() => {
		simulatorManager.state.on(StateEventType.Slices, (newSlices) => {
			const url = new URL(window.location.href);
			url.searchParams.set(STATE_PARAMS_KEY, compressToEncodedURIComponent(JSON.stringify(newSlices)));
			window.history.replaceState(null, "", url);
			setTimeout(() => router.refresh(), 0);
		}, "simulator-slices");
		simulatorManager.state.on(StateEventType.Message, (newMessage) => setMessage(newMessage), "simulator-message");
		simulatorManager.init();
		return () => {
			simulatorManager.state.off(StateEventType.Slices, "simulator-slices");
			simulatorManager.state.off(StateEventType.Message, "simulator-message");
		};
	}, [router]);
	return /* @__PURE__ */ jsx(SliceSimulatorWrapper, {
		message,
		hasSlices,
		background,
		zIndex,
		className,
		children
	});
};
//#endregion
export { SliceSimulator };

//# sourceMappingURL=SliceSimulator.js.map