UNPKG

@prismicio/next

Version:

Helpers to integrate Prismic into Next.js apps

1 lines 3.7 kB
{"version":3,"file":"SliceSimulator.cjs","names":["SimulatorManager","getSlices","StateEventType","SliceSimulatorWrapper"],"sources":["../src/SliceSimulator.tsx"],"sourcesContent":["\"use client\"\n\nimport { SimulatorManager, StateEventType, getDefaultMessage } from \"@prismicio/simulator/kit\"\nimport type { SliceSimulatorProps as BaseSliceSimulatorProps } from \"@prismicio/simulator/kit\"\nimport { compressToEncodedURIComponent } from \"lz-string\"\nimport { useRouter } from \"next/navigation\"\nimport { useEffect, useState } from \"react\"\nimport type { FC, ReactNode } from \"react\"\n\nimport { getSlices } from \"./getSlices\"\nimport { SliceSimulatorWrapper } from \"./SliceSimulatorWrapper\"\n\nconst STATE_PARAMS_KEY = \"state\"\n\nconst simulatorManager = new SimulatorManager()\n\n/** Parameters provided to the Slice Simulator page. */\nexport type SliceSimulatorParams = {\n\tsearchParams: Promise<{\n\t\tstate?: string\n\t}>\n}\n\nexport type SliceSimulatorProps = BaseSliceSimulatorProps & {\n\tchildren: ReactNode\n\tclassName?: string\n}\n\n/**\n * Simulate slices in isolation. The slice simulator enables live slice development in Slice Machine\n * and live previews in the Page Builder.\n */\nexport const SliceSimulator: FC<SliceSimulatorProps> = ({\n\tchildren,\n\tbackground,\n\tzIndex,\n\tclassName,\n}) => {\n\tconst [message, setMessage] = useState(() => getDefaultMessage())\n\tconst router = useRouter()\n\n\tconst state =\n\t\ttypeof window !== \"undefined\"\n\t\t\t? new URL(window.location.href).searchParams.get(STATE_PARAMS_KEY)\n\t\t\t: undefined\n\tconst hasSlices = getSlices(state).length > 0\n\n\tuseEffect(() => {\n\t\tsimulatorManager.state.on(\n\t\t\tStateEventType.Slices,\n\t\t\t(newSlices) => {\n\t\t\t\tconst url = new URL(window.location.href)\n\t\t\t\turl.searchParams.set(\n\t\t\t\t\tSTATE_PARAMS_KEY,\n\t\t\t\t\tcompressToEncodedURIComponent(JSON.stringify(newSlices)),\n\t\t\t\t)\n\n\t\t\t\twindow.history.replaceState(null, \"\", url)\n\t\t\t\t// Wait until the next tick to prevent URL state race conditions.\n\t\t\t\tsetTimeout(() => router.refresh(), 0)\n\t\t\t},\n\t\t\t\"simulator-slices\",\n\t\t)\n\t\tsimulatorManager.state.on(\n\t\t\tStateEventType.Message,\n\t\t\t(newMessage) => setMessage(newMessage),\n\t\t\t\"simulator-message\",\n\t\t)\n\n\t\tsimulatorManager.init()\n\n\t\treturn () => {\n\t\t\tsimulatorManager.state.off(StateEventType.Slices, \"simulator-slices\")\n\n\t\t\tsimulatorManager.state.off(StateEventType.Message, \"simulator-message\")\n\t\t}\n\t}, [router])\n\n\treturn (\n\t\t<SliceSimulatorWrapper\n\t\t\tmessage={message}\n\t\t\thasSlices={hasSlices}\n\t\t\tbackground={background}\n\t\t\tzIndex={zIndex}\n\t\t\tclassName={className}\n\t\t>\n\t\t\t{children}\n\t\t</SliceSimulatorWrapper>\n\t)\n}\n"],"mappings":";;;;;;;;;;AAYA,MAAM,mBAAmB;AAEzB,MAAM,mBAAmB,IAAIA,yBAAAA,kBAAkB;;;;;AAkB/C,MAAa,kBAA2C,EACvD,UACA,YACA,QACA,gBACK;CACL,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,iBAAA,GAAA,yBAAA,oBAAgD,CAAC;CACjE,MAAM,UAAA,GAAA,gBAAA,YAAoB;CAM1B,MAAM,YAAYC,kBAAAA,UAHjB,OAAO,WAAW,cACf,IAAI,IAAI,OAAO,SAAS,KAAK,CAAC,aAAa,IAAI,iBAAiB,GAChE,KAAA,EAC8B,CAAC,SAAS;AAE5C,EAAA,GAAA,MAAA,iBAAgB;AACf,mBAAiB,MAAM,GACtBC,yBAAAA,eAAe,SACd,cAAc;GACd,MAAM,MAAM,IAAI,IAAI,OAAO,SAAS,KAAK;AACzC,OAAI,aAAa,IAChB,mBAAA,GAAA,UAAA,+BAC8B,KAAK,UAAU,UAAU,CAAC,CACxD;AAED,UAAO,QAAQ,aAAa,MAAM,IAAI,IAAI;AAE1C,oBAAiB,OAAO,SAAS,EAAE,EAAE;KAEtC,mBACA;AACD,mBAAiB,MAAM,GACtBA,yBAAAA,eAAe,UACd,eAAe,WAAW,WAAW,EACtC,oBACA;AAED,mBAAiB,MAAM;AAEvB,eAAa;AACZ,oBAAiB,MAAM,IAAIA,yBAAAA,eAAe,QAAQ,mBAAmB;AAErE,oBAAiB,MAAM,IAAIA,yBAAAA,eAAe,SAAS,oBAAoB;;IAEtE,CAAC,OAAO,CAAC;AAEZ,QACC,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,uBAAD;EACU;EACE;EACC;EACJ;EACG;EAEV;EACsB,CAAA"}