@payloadcms/ui 3.57.0-canary.6 → 3.57.0-internal.1d2ebbc

package/dist/providers/LivePreview/index.js

@@ -6,17 +6,22 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { usePopupWindow } from '../../hooks/usePopupWindow.js';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
 import { usePreferences } from '../../providers/Preferences/index.js';
-import { formatAbsoluteURL } from '../../utilities/formatAbsoluteURL.js';
 import { customCollisionDetection } from './collisionDetection.js';
 import { LivePreviewContext } from './context.js';
 import { sizeReducer } from './sizeReducer.js';
+const getAbsoluteUrl = url => {
+  try {
+    return new URL(url, window.location.origin).href;
+  } catch {
+    return url;
+  }
+};
 export const LivePreviewProvider = ({
   breakpoints: incomingBreakpoints,
   children,
   isLivePreviewEnabled,
   isLivePreviewing: incomingIsLivePreviewing,
-  typeofLivePreviewURL,
-  url: urlFromProps
+  url: incomingUrl
 }) => {
   const [previewWindowType, setPreviewWindowType] = useState('iframe');
   const [isLivePreviewing, setIsLivePreviewing] = useState(incomingIsLivePreviewing);
@@ -27,6 +32,10 @@ export const LivePreviewProvider = ({
     width: '100%'
   }], [incomingBreakpoints]);
   const [url, setURL] = useState('');
+  // This needs to be done in a useEffect to prevent hydration issues
+  // as the URL may not be absolute when passed in as a prop,
+  // and getAbsoluteUrl requires the window object to be available
+  useEffect(() => setURL(incomingUrl?.startsWith('http://') || incomingUrl?.startsWith('https://') ? incomingUrl : getAbsoluteUrl(incomingUrl)), [incomingUrl]);
   const {
     isPopupOpen,
     openPopupWindow,
@@ -46,7 +55,7 @@ export const LivePreviewProvider = ({
     setPreference
   } = usePreferences();
   const iframeRef = React.useRef(null);
-  const [loadedURL, setLoadedURL] = useState();
+  const [iframeHasLoaded, setIframeHasLoaded] = useState(false);
   const [zoom, setZoom] = useState(1);
   const [position, setPosition] = useState({
     x: 0,
@@ -61,25 +70,6 @@ export const LivePreviewProvider = ({
     width: 0
   });
   const [breakpoint, setBreakpoint] = React.useState('responsive');
-  /**
-  * A "middleware" callback fn that does some additional work before `setURL`.
-  * This is what we provide through context, bc it:
-  *  - ensures the URL is absolute
-  *  - resets `appIsReady` to `false` while the new URL is loading
-  */
-  const setLivePreviewURL = useCallback(_incomingURL => {
-    const incomingURL = formatAbsoluteURL(_incomingURL);
-    if (incomingURL !== url) {
-      setAppIsReady(false);
-      setURL(incomingURL);
-    }
-  }, [url]);
-  /**
-  * `url` needs to be relative to the window, which cannot be done on initial render.
-  */
-  useEffect(() => {
-    setURL(formatAbsoluteURL(urlFromProps));
-  }, [urlFromProps]);
   // The toolbar needs to freely drag and drop around the page
   const handleDragEnd = ev => {
     // only update position if the toolbar is completely within the preview area
@@ -121,12 +111,10 @@ export const LivePreviewProvider = ({
       });
     }
   }, [breakpoint, breakpoints]);
-  /**
-  * Receive the `ready` message from the popup window
-  * This indicates that the app is ready to receive `window.postMessage` events
-  * This is also the only cross-origin way of detecting when a popup window has loaded
-  * Unlike iframe elements which have an `onLoad` handler, there is no way to access `window.open` on popups
-  */
+  // Receive the `ready` message from the popup window
+  // This indicates that the app is ready to receive `window.postMessage` events
+  // This is also the only cross-origin way of detecting when a popup window has loaded
+  // Unlike iframe elements which have an `onLoad` handler, there is no way to access `window.open` on popups
   useEffect(() => {
     const handleMessage = event => {
       if (url?.startsWith(event.origin) && event.data && typeof event.data === 'object' && event.data.type === 'payload-live-preview') {
@@ -170,12 +158,12 @@ export const LivePreviewProvider = ({
       appIsReady,
       breakpoint,
       breakpoints,
+      iframeHasLoaded,
       iframeRef,
       isLivePreviewEnabled,
       isLivePreviewing,
       isPopupOpen,
       listeningForMessages,
-      loadedURL,
       measuredDeviceSize,
       openPopupWindow,
       popupRef,
@@ -183,18 +171,16 @@ export const LivePreviewProvider = ({
       setAppIsReady,
       setBreakpoint,
       setHeight,
+      setIframeHasLoaded,
       setIsLivePreviewing,
-      setLoadedURL,
       setMeasuredDeviceSize,
       setPreviewWindowType: handleWindowChange,
       setSize,
       setToolbarPosition: setPosition,
-      setURL: setLivePreviewURL,
       setWidth,
       setZoom,
       size,
       toolbarPosition: position,
-      typeofLivePreviewURL,
       url,
       zoom
     },

package/dist/providers/LivePreview/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DndContext","React","useCallback","useEffect","useMemo","useRef","useState","usePopupWindow","useDocumentInfo","usePreferences","formatAbsoluteURL","customCollisionDetection","LivePreviewContext","sizeReducer","LivePreviewProvider","breakpoints","incomingBreakpoints","children","isLivePreviewEnabled","isLivePreviewing","incomingIsLivePreviewing","typeofLivePreviewURL","url","urlFromProps","previewWindowType","setPreviewWindowType","setIsLivePreviewing","name","height","label","width","setURL","isPopupOpen","openPopupWindow","popupRef","eventType","appIsReady","setAppIsReady","listeningForMessages","setListeningForMessages","collectionSlug","globalSlug","isFirstRender","setPreference","iframeRef","loadedURL","setLoadedURL","zoom","setZoom","position","setPosition","x","y","size","setSize","useReducer","measuredDeviceSize","setMeasuredDeviceSize","breakpoint","setBreakpoint","setLivePreviewURL","_incomingURL","incomingURL","handleDragEnd","ev","over","id","newPos","delta","setWidth","type","value","setHeight","foundBreakpoint","find","bp","handleMessage","event","startsWith","origin","data","ready","window","addEventListener","removeEventListener","handleWindowChange","newPreviewWindowType","current","editViewType","_jsx","setToolbarPosition","toolbarPosition","collisionDetection","onDragEnd"],"sources":["../../../src/providers/LivePreview/index.tsx"],"sourcesContent":["'use client'\nimport type { CollectionPreferences, LivePreviewConfig } from 'payload'\n\nimport { DndContext } from '@dnd-kit/core'\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport type { LivePreviewContextType } from './context.js'\n\nimport { usePopupWindow } from '../../hooks/usePopupWindow.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { formatAbsoluteURL } from '../../utilities/formatAbsoluteURL.js'\nimport { customCollisionDetection } from './collisionDetection.js'\nimport { LivePreviewContext } from './context.js'\nimport { sizeReducer } from './sizeReducer.js'\n\nexport type LivePreviewProviderProps = {\n  appIsReady?: boolean\n  breakpoints?: LivePreviewConfig['breakpoints']\n  children: React.ReactNode\n  deviceSize?: {\n    height: number\n    width: number\n  }\n  isLivePreviewEnabled?: boolean\n  isLivePreviewing: boolean\n} & Pick<LivePreviewContextType, 'typeofLivePreviewURL' | 'url'>\n\nexport const LivePreviewProvider: React.FC<LivePreviewProviderProps> = ({\n  breakpoints: incomingBreakpoints,\n  children,\n  isLivePreviewEnabled,\n  isLivePreviewing: incomingIsLivePreviewing,\n  typeofLivePreviewURL,\n  url: urlFromProps,\n}) => {\n  const [previewWindowType, setPreviewWindowType] = useState<'iframe' | 'popup'>('iframe')\n  const [isLivePreviewing, setIsLivePreviewing] = useState(incomingIsLivePreviewing)\n\n  const breakpoints: LivePreviewConfig['breakpoints'] = useMemo(\n    () => [\n      ...(incomingBreakpoints || []),\n      {\n        name: 'responsive',\n        height: '100%',\n        label: 'Responsive',\n        width: '100%',\n      },\n    ],\n    [incomingBreakpoints],\n  )\n\n  const [url, setURL] = useState<string>('')\n\n  const { isPopupOpen, openPopupWindow, popupRef } = usePopupWindow({\n    eventType: 'payload-live-preview',\n    url,\n  })\n\n  const [appIsReady, setAppIsReady] = useState(false)\n  const [listeningForMessages, setListeningForMessages] = useState(false)\n\n  const { collectionSlug, globalSlug } = useDocumentInfo()\n\n  const isFirstRender = useRef(true)\n\n  const { setPreference } = usePreferences()\n\n  const iframeRef = React.useRef<HTMLIFrameElement>(null)\n\n  const [loadedURL, setLoadedURL] = useState<string>()\n\n  const [zoom, setZoom] = useState(1)\n\n  const [position, setPosition] = useState({ x: 0, y: 0 })\n\n  const [size, setSize] = React.useReducer(sizeReducer, { height: 0, width: 0 })\n\n  const [measuredDeviceSize, setMeasuredDeviceSize] = useState({\n    height: 0,\n    width: 0,\n  })\n\n  const [breakpoint, setBreakpoint] =\n    React.useState<LivePreviewConfig['breakpoints'][0]['name']>('responsive')\n\n  /**\n   * A \"middleware\" callback fn that does some additional work before `setURL`.\n   * This is what we provide through context, bc it:\n   *  - ensures the URL is absolute\n   *  - resets `appIsReady` to `false` while the new URL is loading\n   */\n  const setLivePreviewURL = useCallback<LivePreviewContextType['setURL']>(\n    (_incomingURL) => {\n      const incomingURL = formatAbsoluteURL(_incomingURL)\n\n      if (incomingURL !== url) {\n        setAppIsReady(false)\n        setURL(incomingURL)\n      }\n    },\n    [url],\n  )\n\n  /**\n   * `url` needs to be relative to the window, which cannot be done on initial render.\n   */\n  useEffect(() => {\n    setURL(formatAbsoluteURL(urlFromProps))\n  }, [urlFromProps])\n\n  // The toolbar needs to freely drag and drop around the page\n  const handleDragEnd = (ev) => {\n    // only update position if the toolbar is completely within the preview area\n    // otherwise reset it back to the previous position\n    // TODO: reset to the nearest edge of the preview area\n    if (ev.over && ev.over.id === 'live-preview-area') {\n      const newPos = {\n        x: position.x + ev.delta.x,\n        y: position.y + ev.delta.y,\n      }\n\n      setPosition(newPos)\n    } else {\n      // reset\n    }\n  }\n\n  const setWidth = useCallback(\n    (width) => {\n      setSize({ type: 'width', value: width })\n    },\n    [setSize],\n  )\n\n  const setHeight = useCallback(\n    (height) => {\n      setSize({ type: 'height', value: height })\n    },\n    [setSize],\n  )\n\n  // explicitly set new width and height when as new breakpoints are selected\n  // exclude `custom` breakpoint as it is handled by the `setWidth` and `setHeight` directly\n  useEffect(() => {\n    const foundBreakpoint = breakpoints?.find((bp) => bp.name === breakpoint)\n\n    if (\n      foundBreakpoint &&\n      breakpoint !== 'responsive' &&\n      breakpoint !== 'custom' &&\n      typeof foundBreakpoint?.width === 'number' &&\n      typeof foundBreakpoint?.height === 'number'\n    ) {\n      setSize({\n        type: 'reset',\n        value: {\n          height: foundBreakpoint.height,\n          width: foundBreakpoint.width,\n        },\n      })\n    }\n  }, [breakpoint, breakpoints])\n\n  /**\n   * Receive the `ready` message from the popup window\n   * This indicates that the app is ready to receive `window.postMessage` events\n   * This is also the only cross-origin way of detecting when a popup window has loaded\n   * Unlike iframe elements which have an `onLoad` handler, there is no way to access `window.open` on popups\n   */\n  useEffect(() => {\n    const handleMessage = (event: MessageEvent) => {\n      if (\n        url?.startsWith(event.origin) &&\n        event.data &&\n        typeof event.data === 'object' &&\n        event.data.type === 'payload-live-preview'\n      ) {\n        if (event.data.ready) {\n          setAppIsReady(true)\n        }\n      }\n    }\n\n    window.addEventListener('message', handleMessage)\n\n    setListeningForMessages(true)\n\n    return () => {\n      window.removeEventListener('message', handleMessage)\n    }\n  }, [url, listeningForMessages])\n\n  const handleWindowChange = useCallback(\n    (type: 'iframe' | 'popup') => {\n      setAppIsReady(false)\n      setPreviewWindowType(type)\n      if (type === 'popup') {\n        openPopupWindow()\n      }\n    },\n    [openPopupWindow],\n  )\n\n  // when the user closes the popup window, switch back to the iframe\n  // the `usePopupWindow` reports the `isPopupOpen` state for us to use here\n  useEffect(() => {\n    const newPreviewWindowType = isPopupOpen ? 'popup' : 'iframe'\n\n    if (newPreviewWindowType !== previewWindowType) {\n      handleWindowChange('iframe')\n    }\n  }, [previewWindowType, isPopupOpen, handleWindowChange])\n\n  useEffect(() => {\n    if (isFirstRender.current) {\n      isFirstRender.current = false\n      return\n    }\n\n    void setPreference<CollectionPreferences>(\n      collectionSlug ? `collection-${collectionSlug}` : `global-${globalSlug}`,\n      {\n        editViewType: isLivePreviewing ? 'live-preview' : 'default',\n      },\n      true,\n    )\n  }, [isLivePreviewing, setPreference, collectionSlug, globalSlug])\n\n  return (\n    <LivePreviewContext\n      value={{\n        appIsReady,\n        breakpoint,\n        breakpoints,\n        iframeRef,\n        isLivePreviewEnabled,\n        isLivePreviewing,\n        isPopupOpen,\n        listeningForMessages,\n        loadedURL,\n        measuredDeviceSize,\n        openPopupWindow,\n        popupRef,\n        previewWindowType,\n        setAppIsReady,\n        setBreakpoint,\n        setHeight,\n        setIsLivePreviewing,\n        setLoadedURL,\n        setMeasuredDeviceSize,\n        setPreviewWindowType: handleWindowChange,\n        setSize,\n        setToolbarPosition: setPosition,\n        setURL: setLivePreviewURL,\n        setWidth,\n        setZoom,\n        size,\n        toolbarPosition: position,\n        typeofLivePreviewURL,\n        url,\n        zoom,\n      }}\n    >\n      <DndContext collisionDetection={customCollisionDetection} onDragEnd={handleDragEnd}>\n        {children}\n      </DndContext>\n    </LivePreviewContext>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["DndContext","React","useCallback","useEffect","useMemo","useRef","useState","usePopupWindow","useDocumentInfo","usePreferences","customCollisionDetection","LivePreviewContext","sizeReducer","getAbsoluteUrl","url","URL","window","location","origin","href","LivePreviewProvider","breakpoints","incomingBreakpoints","children","isLivePreviewEnabled","isLivePreviewing","incomingIsLivePreviewing","incomingUrl","previewWindowType","setPreviewWindowType","setIsLivePreviewing","name","height","label","width","setURL","startsWith","isPopupOpen","openPopupWindow","popupRef","eventType","appIsReady","setAppIsReady","listeningForMessages","setListeningForMessages","collectionSlug","globalSlug","isFirstRender","setPreference","iframeRef","iframeHasLoaded","setIframeHasLoaded","zoom","setZoom","position","setPosition","x","y","size","setSize","useReducer","measuredDeviceSize","setMeasuredDeviceSize","breakpoint","setBreakpoint","handleDragEnd","ev","over","id","newPos","delta","setWidth","type","value","setHeight","foundBreakpoint","find","bp","handleMessage","event","data","ready","addEventListener","removeEventListener","handleWindowChange","newPreviewWindowType","current","editViewType","_jsx","setToolbarPosition","toolbarPosition","collisionDetection","onDragEnd"],"sources":["../../../src/providers/LivePreview/index.tsx"],"sourcesContent":["'use client'\nimport type { CollectionPreferences, LivePreviewConfig } from 'payload'\n\nimport { DndContext } from '@dnd-kit/core'\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport { usePopupWindow } from '../../hooks/usePopupWindow.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { customCollisionDetection } from './collisionDetection.js'\nimport { LivePreviewContext } from './context.js'\nimport { sizeReducer } from './sizeReducer.js'\n\nexport type LivePreviewProviderProps = {\n  appIsReady?: boolean\n  breakpoints?: LivePreviewConfig['breakpoints']\n  children: React.ReactNode\n  deviceSize?: {\n    height: number\n    width: number\n  }\n  isLivePreviewEnabled?: boolean\n  isLivePreviewing: boolean\n  url: string\n}\n\nconst getAbsoluteUrl = (url) => {\n  try {\n    return new URL(url, window.location.origin).href\n  } catch {\n    return url\n  }\n}\n\nexport const LivePreviewProvider: React.FC<LivePreviewProviderProps> = ({\n  breakpoints: incomingBreakpoints,\n  children,\n  isLivePreviewEnabled,\n  isLivePreviewing: incomingIsLivePreviewing,\n  url: incomingUrl,\n}) => {\n  const [previewWindowType, setPreviewWindowType] = useState<'iframe' | 'popup'>('iframe')\n  const [isLivePreviewing, setIsLivePreviewing] = useState(incomingIsLivePreviewing)\n\n  const breakpoints: LivePreviewConfig['breakpoints'] = useMemo(\n    () => [\n      ...(incomingBreakpoints || []),\n      {\n        name: 'responsive',\n        height: '100%',\n        label: 'Responsive',\n        width: '100%',\n      },\n    ],\n    [incomingBreakpoints],\n  )\n\n  const [url, setURL] = useState<string>('')\n\n  // This needs to be done in a useEffect to prevent hydration issues\n  // as the URL may not be absolute when passed in as a prop,\n  // and getAbsoluteUrl requires the window object to be available\n  useEffect(\n    () =>\n      setURL(\n        incomingUrl?.startsWith('http://') || incomingUrl?.startsWith('https://')\n          ? incomingUrl\n          : getAbsoluteUrl(incomingUrl),\n      ),\n    [incomingUrl],\n  )\n\n  const { isPopupOpen, openPopupWindow, popupRef } = usePopupWindow({\n    eventType: 'payload-live-preview',\n    url,\n  })\n\n  const [appIsReady, setAppIsReady] = useState(false)\n  const [listeningForMessages, setListeningForMessages] = useState(false)\n\n  const { collectionSlug, globalSlug } = useDocumentInfo()\n\n  const isFirstRender = useRef(true)\n\n  const { setPreference } = usePreferences()\n\n  const iframeRef = React.useRef<HTMLIFrameElement>(null)\n\n  const [iframeHasLoaded, setIframeHasLoaded] = useState(false)\n\n  const [zoom, setZoom] = useState(1)\n\n  const [position, setPosition] = useState({ x: 0, y: 0 })\n\n  const [size, setSize] = React.useReducer(sizeReducer, { height: 0, width: 0 })\n\n  const [measuredDeviceSize, setMeasuredDeviceSize] = useState({\n    height: 0,\n    width: 0,\n  })\n\n  const [breakpoint, setBreakpoint] =\n    React.useState<LivePreviewConfig['breakpoints'][0]['name']>('responsive')\n\n  // The toolbar needs to freely drag and drop around the page\n  const handleDragEnd = (ev) => {\n    // only update position if the toolbar is completely within the preview area\n    // otherwise reset it back to the previous position\n    // TODO: reset to the nearest edge of the preview area\n    if (ev.over && ev.over.id === 'live-preview-area') {\n      const newPos = {\n        x: position.x + ev.delta.x,\n        y: position.y + ev.delta.y,\n      }\n\n      setPosition(newPos)\n    } else {\n      // reset\n    }\n  }\n\n  const setWidth = useCallback(\n    (width) => {\n      setSize({ type: 'width', value: width })\n    },\n    [setSize],\n  )\n\n  const setHeight = useCallback(\n    (height) => {\n      setSize({ type: 'height', value: height })\n    },\n    [setSize],\n  )\n\n  // explicitly set new width and height when as new breakpoints are selected\n  // exclude `custom` breakpoint as it is handled by the `setWidth` and `setHeight` directly\n  useEffect(() => {\n    const foundBreakpoint = breakpoints?.find((bp) => bp.name === breakpoint)\n\n    if (\n      foundBreakpoint &&\n      breakpoint !== 'responsive' &&\n      breakpoint !== 'custom' &&\n      typeof foundBreakpoint?.width === 'number' &&\n      typeof foundBreakpoint?.height === 'number'\n    ) {\n      setSize({\n        type: 'reset',\n        value: {\n          height: foundBreakpoint.height,\n          width: foundBreakpoint.width,\n        },\n      })\n    }\n  }, [breakpoint, breakpoints])\n\n  // Receive the `ready` message from the popup window\n  // This indicates that the app is ready to receive `window.postMessage` events\n  // This is also the only cross-origin way of detecting when a popup window has loaded\n  // Unlike iframe elements which have an `onLoad` handler, there is no way to access `window.open` on popups\n  useEffect(() => {\n    const handleMessage = (event: MessageEvent) => {\n      if (\n        url?.startsWith(event.origin) &&\n        event.data &&\n        typeof event.data === 'object' &&\n        event.data.type === 'payload-live-preview'\n      ) {\n        if (event.data.ready) {\n          setAppIsReady(true)\n        }\n      }\n    }\n\n    window.addEventListener('message', handleMessage)\n\n    setListeningForMessages(true)\n\n    return () => {\n      window.removeEventListener('message', handleMessage)\n    }\n  }, [url, listeningForMessages])\n\n  const handleWindowChange = useCallback(\n    (type: 'iframe' | 'popup') => {\n      setAppIsReady(false)\n      setPreviewWindowType(type)\n      if (type === 'popup') {\n        openPopupWindow()\n      }\n    },\n    [openPopupWindow],\n  )\n\n  // when the user closes the popup window, switch back to the iframe\n  // the `usePopupWindow` reports the `isPopupOpen` state for us to use here\n  useEffect(() => {\n    const newPreviewWindowType = isPopupOpen ? 'popup' : 'iframe'\n\n    if (newPreviewWindowType !== previewWindowType) {\n      handleWindowChange('iframe')\n    }\n  }, [previewWindowType, isPopupOpen, handleWindowChange])\n\n  useEffect(() => {\n    if (isFirstRender.current) {\n      isFirstRender.current = false\n      return\n    }\n\n    void setPreference<CollectionPreferences>(\n      collectionSlug ? `collection-${collectionSlug}` : `global-${globalSlug}`,\n      {\n        editViewType: isLivePreviewing ? 'live-preview' : 'default',\n      },\n      true,\n    )\n  }, [isLivePreviewing, setPreference, collectionSlug, globalSlug])\n\n  return (\n    <LivePreviewContext\n      value={{\n        appIsReady,\n        breakpoint,\n        breakpoints,\n        iframeHasLoaded,\n        iframeRef,\n        isLivePreviewEnabled,\n        isLivePreviewing,\n        isPopupOpen,\n        listeningForMessages,\n        measuredDeviceSize,\n        openPopupWindow,\n        popupRef,\n        previewWindowType,\n        setAppIsReady,\n        setBreakpoint,\n        setHeight,\n        setIframeHasLoaded,\n        setIsLivePreviewing,\n        setMeasuredDeviceSize,\n        setPreviewWindowType: handleWindowChange,\n        setSize,\n        setToolbarPosition: setPosition,\n        setWidth,\n        setZoom,\n        size,\n        toolbarPosition: position,\n        url,\n        zoom,\n      }}\n    >\n      <DndContext collisionDetection={customCollisionDetection} onDragEnd={handleDragEnd}>\n        {children}\n      </DndContext>\n    </LivePreviewContext>\n  )\n}\n"],"mappings":"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","ignoreList":[]}