{"version":3,"file":"getStaticMarkup.client.mjs","sources":[""],"sourcesContent":["import type { ReactElement } from \"react\";\r\nimport { flushSync } from \"react-dom\";\r\nimport { createRoot } from \"react-dom/client\";\r\nimport { RenderContext } from \"../../components/renderContext\";\r\nimport { Localisation } from \"../../plugins/localisation\";\r\nimport type { TAppRenderModes } from \"../../types\";\r\n\r\nconst getDefaultModifier = (str = \"\") => str.replaceAll(/<template data-comment=\"\">([^\"]*)<\\/template>/g, \"\\n$1\");\r\n\r\ntype TOptions = Partial<{\r\n  before: string;\r\n  after: string;\r\n  getWithModifier: (str: string) => string;\r\n  mode: Exclude<TAppRenderModes, \"SSR\">;\r\n}>;\r\n\r\n/**\r\n * Получает статичную разметку из React-компонента.\r\n * Используется в браузерной среде, если вам необходимо получить результат рендера React на клиенте в виде HTML. DOM-дерево должно быть доступно.\r\n * Функция дожидается загрузки плагина `Localisation`.\r\n * @param element{ReactElement} компонент\r\n * @param options{Object=} параметры получения\r\n * @param options.before{String=} строка, добавляемая до компонента\r\n * @param options.after{String=} строка, добавляемая после компонента\r\n * @param options.getWithModifier{Function=} функция, модифицирующая HTML\r\n * @returns {Promise<string>} Возвращает Promise со строкой HTML, сформированной из переданного React-элемента.\r\n * @example\r\n * import { getStaticMarkupForClient } from \"@delement/ui/utils/react\";\r\n *\r\n * const html = await getStaticMarkupForClient(<div>Hello</div>);\r\n */\r\nconst getStaticMarkupForClient = async (element: ReactElement, options?: TOptions): Promise<string> => {\r\n\r\n  if (typeof window === \"undefined\") {\r\n    throw new Error(`[getStaticMarkupForClient] Function was called on server, use \"getStaticMarkupForServer\" instead`);\r\n  }\r\n\r\n  const {\r\n    before = \"\",\r\n    after = \"\",\r\n    getWithModifier = getDefaultModifier,\r\n    mode = \"CSR\",\r\n  } = (options || {});\r\n\r\n  if (!element) {\r\n    return Promise.resolve(\"\");\r\n  }\r\n\r\n  const div = document.createElement(\"div\");\r\n  const root = createRoot(div);\r\n\r\n  const getLayout = () => {\r\n    try {\r\n      flushSync(() => root.render(<RenderContext mode={mode} isSSR={false}>{element}</RenderContext>));\r\n      return getWithModifier(`${before}${div.innerHTML}${after}`);\r\n    } finally {\r\n      root.unmount();\r\n    }\r\n  };\r\n\r\n  return new Promise((resolve) => {\r\n    const resolver = () => {\r\n      const layout = getLayout();\r\n      resolve(layout);\r\n    };\r\n    if (Localisation.instance) { // localization are ready\r\n      resolver();\r\n    } else { // wait for localization\r\n      Localisation.create()\r\n        .finally(() => {\r\n          resolver();\r\n        });\r\n    }\r\n  });\r\n};\r\n\r\nexport {\r\n  getStaticMarkupForClient,\r\n};\r\n"],"names":["getDefaultModifier","str","replaceAll","getStaticMarkupForClient","async","element","options","window","Error","before","after","getWithModifier","mode","Promise","resolve","div","document","createElement","root","createRoot","getLayout","flushSync","render","_jsx","RenderContext","isSSR","children","innerHTML","unmount","resolver","layout","Localisation","instance","create","finally"],"mappings":"gPAOA,MAAMA,mBAAqB,CAACC,IAAM,KAAOA,IAAIC,WAAW,iDAAkD;;;;;;;;;;;;;;;GAwB1G,MAAMC,yBAA2BC,MAAOC,QAAuBC,WAE7D,UAAWC,SAAW,YACpB,MAAM,IAAIC,MAAM,oGAGlB,MAAMC,OACJA,OAAS,GAAEC,MACXA,MAAQ,GAAEC,gBACVA,gBAAkBX,mBAAkBY,KACpCA,KAAO,OACJN,SAAW,CAAA,EAEhB,IAAKD,QACH,OAAOQ,QAAQC,QAAQ,IAGzB,MAAMC,IAAMC,SAASC,cAAc,OACnC,MAAMC,KAAOC,WAAWJ,KAExB,MAAMK,UAAY,KAChB,IACEC,UAAU,IAAMH,KAAKI,OAAOC,IAACC,cAAa,CAACZ,KAAMA,KAAMa,MAAO,MAAMC,SAAErB,YACtE,OAAOM,gBAAgB,GAAGF,SAASM,IAAIY,YAAYjB,QACrD,CAAC,QACCQ,KAAKU,SACP,GAGF,OAAO,IAAIf,QAASC,UAClB,MAAMe,SAAW,KACf,MAAMC,OAASV,YACfN,QAAQgB,SAEV,GAAIC,aAAaC;;AACfH;;AAEAE,aAAaE,SACVC,QAAQ,KACPL"}