react-intlayer
Version:
Easily internationalize i18n your React applications with type-safe multilingual content management.
1 lines • 3.96 kB
Source Map (JSON)
{"version":3,"file":"HTMLRenderer.cjs","names":["Fragment","VOID_HTML_ELEMENTS","useHTMLContext"],"sources":["../../../src/html/HTMLRenderer.tsx"],"sourcesContent":["'use client';\n\nimport { getHTML } from '@intlayer/core/interpreter';\nimport { VOID_HTML_ELEMENTS } from '@intlayer/core/transpiler';\nimport { createElement, type FC, Fragment, type JSX } from 'react';\nimport type { HTMLComponents } from './HTMLComponentTypes';\nimport { useHTMLContext } from './HTMLProvider';\n\nexport type RenderHTMLProps = {\n /**\n * Component overrides for HTML tags.\n * Allows you to customize how specific HTML elements are rendered.\n */\n components?: HTMLComponents<'permissive', {}>;\n};\n\n/**\n * Renders HTML-like content to JSX with the provided components.\n *\n * This function does not use context from HTMLProvider. Use `useHTMLRenderer`\n * hook if you want to leverage provider context.\n */\nexport const renderHTML = (\n content: string,\n { components = {} }: RenderHTMLProps = {}\n): JSX.Element => {\n // Wrap explicit user components to ensure they are rendered via React.createElement\n const userComponents = Object.fromEntries(\n Object.entries(components)\n .filter(([, Component]) => Component)\n .map(([key, Component]) => [\n key,\n (props: any) => createElement(Component as any, props),\n ])\n );\n\n // Proxy handles standard HTML tags lazily without a hardcoded list\n const wrappedComponents = new Proxy(userComponents, {\n get(target, prop) {\n if (typeof prop === 'string' && prop in target) {\n return target[prop];\n }\n // Fallback: Lazily generate a wrapper for standard lowercase HTML tags\n if (typeof prop === 'string' && /^[a-z][a-z0-9]*$/.test(prop)) {\n if (VOID_HTML_ELEMENTS.has(prop)) {\n // Void elements cannot have children — strip them to avoid React error\n return ({ children: _children, ...rest }: any) =>\n createElement(prop, rest);\n }\n return (props: any) => createElement(prop, props);\n }\n return undefined;\n },\n });\n\n return <Fragment>{getHTML(content, wrappedComponents as any)}</Fragment>;\n};\n\n/**\n * Hook that returns a function to render HTML content.\n *\n * This hook considers the configuration from the `HTMLProvider` context if available,\n * falling back to the provided components.\n */\nexport const useHTMLRenderer = ({ components }: RenderHTMLProps = {}) => {\n const context = useHTMLContext();\n\n return (content: string) => {\n return renderHTML(content, {\n components: {\n ...context?.components,\n ...components,\n },\n });\n };\n};\n\nexport type HTMLRendererProps = RenderHTMLProps & {\n /**\n * The HTML content to render as a string.\n */\n children: string;\n};\n\n/**\n * React component that renders HTML-like content to JSX.\n *\n * This component uses the components from the `HTMLProvider` context\n * if available.\n */\nexport const HTMLRenderer: FC<HTMLRendererProps> = ({\n children = '',\n components,\n}) => {\n const render = useHTMLRenderer({ components });\n\n return render(children);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,MAAa,cACX,SACA,EAAE,aAAa,EAAE,KAAsB,EAAE,KACzB;CAEhB,MAAM,iBAAiB,OAAO,YAC5B,OAAO,QAAQ,WAAW,CACvB,QAAQ,GAAG,eAAe,UAAU,CACpC,KAAK,CAAC,KAAK,eAAe,CACzB,MACC,mCAA6B,WAAkB,MAAM,CACvD,CAAC,CACL;AAqBD,QAAO,2CAACA,gBAAD,oDAAmB,SAAS,IAlBL,MAAM,gBAAgB,EAClD,IAAI,QAAQ,MAAM;AAChB,MAAI,OAAO,SAAS,YAAY,QAAQ,OACtC,QAAO,OAAO;AAGhB,MAAI,OAAO,SAAS,YAAY,mBAAmB,KAAK,KAAK,EAAE;AAC7D,OAAIC,6CAAmB,IAAI,KAAK,CAE9B,SAAQ,EAAE,UAAU,WAAW,GAAG,oCAClB,MAAM,KAAK;AAE7B,WAAQ,mCAA6B,MAAM,MAAM;;IAItD,CAEmD,CAAQ,EAAY;;;;;;;;AAS1E,MAAa,mBAAmB,EAAE,eAAgC,EAAE,KAAK;CACvE,MAAM,UAAUC,0CAAgB;AAEhC,SAAQ,YAAoB;AAC1B,SAAO,WAAW,SAAS,EACzB,YAAY;GACV,GAAG,SAAS;GACZ,GAAG;GACJ,EACF,CAAC;;;;;;;;;AAiBN,MAAa,gBAAuC,EAClD,WAAW,IACX,iBACI;AAGJ,QAFe,gBAAgB,EAAE,YAAY,CAEhC,CAAC,SAAS"}