@shopify/hydrogen-react 2026.4.1 → 2026.4.2

package/dist/node-dev/RichText.components.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RichText.components.mjs","sources":["../../src/RichText.components.tsx"],"sourcesContent":["import {createElement, type ReactNode} from 'react';\n\nexport type CustomComponents = {\n  /** The root node of the rich text. Defaults to `<div>` */\n  root?: typeof Root;\n  /** Customize the headings. Each heading has a `level` property from 1-6. Defaults to `<h1>` to `<h6>` */\n  heading?: typeof Heading;\n  /** Customize paragraphs. Defaults to `<p>` */\n  paragraph?: typeof Paragraph;\n  /** Customize how text nodes. They can either be bold or italic. Defaults to `<em>`, `<strong>` or text. */\n  text?: typeof Text;\n  /** Customize links. Defaults to a React Router `<Link>` component in Hydrogen and a `<a>` in Hydrogen React. */\n  link?: typeof RichTextLink;\n  /** Customize lists. They can be either ordered or unordered. Defaults to `<ol>` or `<ul>` */\n  list?: typeof List;\n  /** Customize list items. Defaults to `<li>`. */\n  listItem?: typeof ListItem;\n};\n\nexport const RichTextComponents = {\n  root: Root,\n  heading: Heading,\n  paragraph: Paragraph,\n  text: Text,\n  link: RichTextLink,\n  list: List,\n  'list-item': ListItem,\n};\n\nfunction Root({\n  node,\n}: {\n  node: {\n    type: 'root';\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return <div>{node.children}</div>;\n}\n\nfunction Heading({\n  node,\n}: {\n  node: {\n    type: 'heading';\n    level: number;\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return createElement(`h${node.level ?? '1'}`, null, node.children);\n}\n\nfunction Paragraph({\n  node,\n}: {\n  node: {\n    type: 'paragraph';\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return <p>{node.children}</p>;\n}\n\nfunction Text({\n  node,\n}: {\n  node: {\n    type: 'text';\n    italic?: boolean;\n    bold?: boolean;\n    value?: string;\n  };\n}): ReactNode {\n  if (node.bold && node.italic)\n    return (\n      <em>\n        <strong>{node.value}</strong>\n      </em>\n    );\n\n  if (node.bold) return <strong>{node.value}</strong>;\n  if (node.italic) return <em>{node.value}</em>;\n\n  return node.value;\n}\n\nfunction RichTextLink({\n  node,\n}: {\n  node: {\n    type: 'link';\n    url: string;\n    title?: string;\n    target?: string;\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return (\n    <a href={node.url} title={node.title} target={node.target}>\n      {node.children}\n    </a>\n  );\n}\n\nfunction List({\n  node,\n}: {\n  node: {\n    type: 'list';\n    listType: 'unordered' | 'ordered';\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  const List = node.listType === 'unordered' ? 'ul' : 'ol';\n  return <List>{node.children}</List>;\n}\n\nfunction ListItem({\n  node,\n}: {\n  node: {\n    type: 'list-item';\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return <li>{node.children}</li>;\n}\n"],"names":["List"],"mappings":";;AAmBO,MAAM,qBAAqB;AAAA,EAChC,MAAM;AAAA,EACN,SAAS;AAAA,EACT,WAAW;AAAA,EACX,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,aAAa;AACf;AAEA,SAAS,KAAK;AAAA,EACZ;AACF,GAKc;AACZ,SAAO,oBAAC,OAAA,EAAK,UAAA,KAAK,SAAA,CAAS;AAC7B;AAEA,SAAS,QAAQ;AAAA,EACf;AACF,GAMc;AACZ,SAAO,cAAc,IAAI,KAAK,SAAS,GAAG,IAAI,MAAM,KAAK,QAAQ;AACnE;AAEA,SAAS,UAAU;AAAA,EACjB;AACF,GAKc;AACZ,SAAO,oBAAC,KAAA,EAAG,UAAA,KAAK,SAAA,CAAS;AAC3B;AAEA,SAAS,KAAK;AAAA,EACZ;AACF,GAOc;AACZ,MAAI,KAAK,QAAQ,KAAK;AACpB,+BACG,MAAA,EACC,UAAA,oBAAC,UAAA,EAAQ,UAAA,KAAK,OAAM,EAAA,CACtB;AAGJ,MAAI,KAAK,KAAM,QAAO,oBAAC,UAAA,EAAQ,eAAK,OAAM;AAC1C,MAAI,KAAK,OAAQ,QAAO,oBAAC,MAAA,EAAI,eAAK,OAAM;AAExC,SAAO,KAAK;AACd;AAEA,SAAS,aAAa;AAAA,EACpB;AACF,GAQc;AACZ,SACE,oBAAC,KAAA,EAAE,MAAM,KAAK,KAAK,OAAO,KAAK,OAAO,QAAQ,KAAK,QAChD,UAAA,KAAK,UACR;AAEJ;AAEA,SAAS,KAAK;AAAA,EACZ;AACF,GAMc;AACZ,QAAMA,QAAO,KAAK,aAAa,cAAc,OAAO;AACpD,SAAO,oBAACA,OAAA,EAAM,UAAA,KAAK,SAAA,CAAS;AAC9B;AAEA,SAAS,SAAS;AAAA,EAChB;AACF,GAKc;AACZ,SAAO,oBAAC,MAAA,EAAI,UAAA,KAAK,SAAA,CAAS;AAC5B;"}
+{"version":3,"file":"RichText.components.mjs","names":[],"sources":["../../src/RichText.components.tsx"],"sourcesContent":["import {createElement, type ReactNode} from 'react';\n\nexport type CustomComponents = {\n  /** The root node of the rich text. Defaults to `<div>` */\n  root?: typeof Root;\n  /** Customize the headings. Each heading has a `level` property from 1-6. Defaults to `<h1>` to `<h6>` */\n  heading?: typeof Heading;\n  /** Customize paragraphs. Defaults to `<p>` */\n  paragraph?: typeof Paragraph;\n  /** Customize how text nodes. They can either be bold or italic. Defaults to `<em>`, `<strong>` or text. */\n  text?: typeof Text;\n  /** Customize links. Defaults to a React Router `<Link>` component in Hydrogen and a `<a>` in Hydrogen React. */\n  link?: typeof RichTextLink;\n  /** Customize lists. They can be either ordered or unordered. Defaults to `<ol>` or `<ul>` */\n  list?: typeof List;\n  /** Customize list items. Defaults to `<li>`. */\n  listItem?: typeof ListItem;\n};\n\nexport const RichTextComponents = {\n  root: Root,\n  heading: Heading,\n  paragraph: Paragraph,\n  text: Text,\n  link: RichTextLink,\n  list: List,\n  'list-item': ListItem,\n};\n\nfunction Root({\n  node,\n}: {\n  node: {\n    type: 'root';\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return <div>{node.children}</div>;\n}\n\nfunction Heading({\n  node,\n}: {\n  node: {\n    type: 'heading';\n    level: number;\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return createElement(`h${node.level ?? '1'}`, null, node.children);\n}\n\nfunction Paragraph({\n  node,\n}: {\n  node: {\n    type: 'paragraph';\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return <p>{node.children}</p>;\n}\n\nfunction Text({\n  node,\n}: {\n  node: {\n    type: 'text';\n    italic?: boolean;\n    bold?: boolean;\n    value?: string;\n  };\n}): ReactNode {\n  if (node.bold && node.italic)\n    return (\n      <em>\n        <strong>{node.value}</strong>\n      </em>\n    );\n\n  if (node.bold) return <strong>{node.value}</strong>;\n  if (node.italic) return <em>{node.value}</em>;\n\n  return node.value;\n}\n\nfunction RichTextLink({\n  node,\n}: {\n  node: {\n    type: 'link';\n    url: string;\n    title?: string;\n    target?: string;\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return (\n    <a href={node.url} title={node.title} target={node.target}>\n      {node.children}\n    </a>\n  );\n}\n\nfunction List({\n  node,\n}: {\n  node: {\n    type: 'list';\n    listType: 'unordered' | 'ordered';\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  const List = node.listType === 'unordered' ? 'ul' : 'ol';\n  return <List>{node.children}</List>;\n}\n\nfunction ListItem({\n  node,\n}: {\n  node: {\n    type: 'list-item';\n    children?: ReactNode[];\n  };\n}): ReactNode {\n  return <li>{node.children}</li>;\n}\n"],"mappings":";;;AAmBA,IAAa,qBAAqB;CAChC,MAAM;CACN,SAAS;CACT,WAAW;CACX,MAAM;CACN,MAAM;CACN,MAAM;CACN,aAAa;CACd;AAED,SAAS,KAAK,EACZ,QAMY;AACZ,QAAO,oBAAC,OAAD,EAAA,UAAM,KAAK,UAAe,CAAA;;AAGnC,SAAS,QAAQ,EACf,QAOY;AACZ,QAAO,cAAc,IAAI,KAAK,SAAS,OAAO,MAAM,KAAK,SAAS;;AAGpE,SAAS,UAAU,EACjB,QAMY;AACZ,QAAO,oBAAC,KAAD,EAAA,UAAI,KAAK,UAAa,CAAA;;AAG/B,SAAS,KAAK,EACZ,QAQY;AACZ,KAAI,KAAK,QAAQ,KAAK,OACpB,QACE,oBAAC,MAAD,EAAA,UACE,oBAAC,UAAD,EAAA,UAAS,KAAK,OAAe,CAAA,EAC1B,CAAA;AAGT,KAAI,KAAK,KAAM,QAAO,oBAAC,UAAD,EAAA,UAAS,KAAK,OAAe,CAAA;AACnD,KAAI,KAAK,OAAQ,QAAO,oBAAC,MAAD,EAAA,UAAK,KAAK,OAAW,CAAA;AAE7C,QAAO,KAAK;;AAGd,SAAS,aAAa,EACpB,QASY;AACZ,QACE,oBAAC,KAAD;EAAG,MAAM,KAAK;EAAK,OAAO,KAAK;EAAO,QAAQ,KAAK;YAChD,KAAK;EACJ,CAAA;;AAIR,SAAS,KAAK,EACZ,QAOY;AAEZ,QAAO,oBADM,KAAK,aAAa,cAAc,OAAO,MAC7C,EAAA,UAAO,KAAK,UAAgB,CAAA;;AAGrC,SAAS,SAAS,EAChB,QAMY;AACZ,QAAO,oBAAC,MAAD,EAAA,UAAK,KAAK,UAAc,CAAA"}

package/dist/node-dev/RichText.js

@@ -1,160 +1,118 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const RichText_components = require("./RichText.components.js");
-function RichText({
-  as,
-  data,
-  plain,
-  components,
-  ...passthroughProps
-}) {
-  try {
-    const Wrapper = as ?? "div";
-    const parsedData = React.useMemo(
-      () => JSON.parse(data),
-      [data]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { ...passthroughProps, children: plain ? richTextToString(parsedData) : serializeRichTextASTNode(components, parsedData) });
-  } catch (e) {
-    throw new Error(
-      "[h2:error:RichText] Parsing error. Make sure to pass a JSON string of rich text metafield",
-      {
-        cause: e
-      }
-    );
-  }
+require("./_virtual/_rolldown/runtime.js");
+const require_RichText_components = require("./RichText.components.js");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/RichText.tsx
+/** @publicDocs */
+function RichText({ as, data, plain, components, ...passthroughProps }) {
+	try {
+		const Wrapper = as ?? "div";
+		const parsedData = (0, react.useMemo)(() => JSON.parse(data), [data]);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Wrapper, {
+			...passthroughProps,
+			children: plain ? richTextToString(parsedData) : serializeRichTextASTNode(components, parsedData)
+		});
+	} catch (e) {
+		throw new Error("[h2:error:RichText] Parsing error. Make sure to pass a JSON string of rich text metafield", { cause: e });
+	}
 }
 function serializeRichTextASTNode(components = {}, node, index = 0) {
-  let children;
-  if ("children" in node) {
-    children = node.children.map(
-      (child, childIndex) => serializeRichTextASTNode(components, child, childIndex)
-    );
-  }
-  const Component = components[node.type === "list-item" ? "listItem" : node.type] ?? RichText_components.RichTextComponents[node.type];
-  switch (node.type) {
-    case "root":
-      return React.createElement(
-        Component,
-        {
-          key: index,
-          node: {
-            type: "root",
-            children
-          }
-        }
-      );
-    case "heading":
-      return React.createElement(
-        Component,
-        {
-          key: index,
-          node: {
-            type: "heading",
-            level: node.level,
-            children
-          }
-        }
-      );
-    case "paragraph":
-      return React.createElement(
-        Component,
-        {
-          key: index,
-          node: {
-            type: "paragraph",
-            children
-          }
-        }
-      );
-    case "text": {
-      const elements = (node.value ?? "").split("\n").flatMap((value, subindex) => {
-        const key = `${index}-${value}-${subindex}`;
-        const textElement = React.createElement(
-          Component,
-          {
-            key,
-            node: {
-              type: "text",
-              italic: node.italic,
-              bold: node.bold,
-              value
-            }
-          }
-        );
-        return subindex === 0 ? textElement : [React.createElement("br", { key: `${key}-br` }), textElement];
-      });
-      return elements.length > 1 ? React.createElement(React.Fragment, { key: index }, elements) : elements[0];
-    }
-    case "link":
-      return React.createElement(
-        Component,
-        {
-          key: index,
-          node: {
-            type: "link",
-            url: node.url,
-            title: node.title,
-            target: node.target,
-            children
-          }
-        }
-      );
-    case "list":
-      return React.createElement(
-        Component,
-        {
-          key: index,
-          node: {
-            type: "list",
-            listType: node.listType,
-            children
-          }
-        }
-      );
-    case "list-item":
-      return React.createElement(
-        Component,
-        {
-          key: index,
-          node: {
-            type: "list-item",
-            children
-          }
-        }
-      );
-  }
+	let children;
+	if ("children" in node) children = node.children.map((child, childIndex) => serializeRichTextASTNode(components, child, childIndex));
+	const Component = components[node.type === "list-item" ? "listItem" : node.type] ?? require_RichText_components.RichTextComponents[node.type];
+	switch (node.type) {
+		case "root": return (0, react.createElement)(Component, {
+			key: index,
+			node: {
+				type: "root",
+				children
+			}
+		});
+		case "heading": return (0, react.createElement)(Component, {
+			key: index,
+			node: {
+				type: "heading",
+				level: node.level,
+				children
+			}
+		});
+		case "paragraph": return (0, react.createElement)(Component, {
+			key: index,
+			node: {
+				type: "paragraph",
+				children
+			}
+		});
+		case "text": {
+			const elements = (node.value ?? "").split("\n").flatMap((value, subindex) => {
+				const key = `${index}-${value}-${subindex}`;
+				const textElement = (0, react.createElement)(Component, {
+					key,
+					node: {
+						type: "text",
+						italic: node.italic,
+						bold: node.bold,
+						value
+					}
+				});
+				return subindex === 0 ? textElement : [(0, react.createElement)("br", { key: `${key}-br` }), textElement];
+			});
+			return elements.length > 1 ? (0, react.createElement)(react.Fragment, { key: index }, elements) : elements[0];
+		}
+		case "link": return (0, react.createElement)(Component, {
+			key: index,
+			node: {
+				type: "link",
+				url: node.url,
+				title: node.title,
+				target: node.target,
+				children
+			}
+		});
+		case "list": return (0, react.createElement)(Component, {
+			key: index,
+			node: {
+				type: "list",
+				listType: node.listType,
+				children
+			}
+		});
+		case "list-item": return (0, react.createElement)(Component, {
+			key: index,
+			node: {
+				type: "list-item",
+				children
+			}
+		});
+	}
 }
 function richTextToString(node, result = []) {
-  switch (node.type) {
-    case "root":
-      node.children.forEach((child) => richTextToString(child, result));
-      break;
-    case "heading":
-    case "paragraph":
-      node.children.forEach((child) => richTextToString(child, result));
-      result.push(" ");
-      break;
-    case "text":
-      result.push(node.value || "");
-      break;
-    case "link":
-      node.children.forEach((child) => richTextToString(child, result));
-      break;
-    case "list":
-      node.children.forEach((item) => {
-        if (item.children) {
-          item.children.forEach((child) => richTextToString(child, result));
-        }
-        result.push(" ");
-      });
-      break;
-    default:
-      throw new Error(`Unknown node encountered ${node.type}`);
-  }
-  return result.join("").trim();
+	switch (node.type) {
+		case "root":
+			node.children.forEach((child) => richTextToString(child, result));
+			break;
+		case "heading":
+		case "paragraph":
+			node.children.forEach((child) => richTextToString(child, result));
+			result.push(" ");
+			break;
+		case "text":
+			result.push(node.value || "");
+			break;
+		case "link":
+			node.children.forEach((child) => richTextToString(child, result));
+			break;
+		case "list":
+			node.children.forEach((item) => {
+				if (item.children) item.children.forEach((child) => richTextToString(child, result));
+				result.push(" ");
+			});
+			break;
+		default: throw new Error(`Unknown node encountered ${node.type}`);
+	}
+	return result.join("").trim();
 }
+//#endregion
 exports.RichText = RichText;
-//# sourceMappingURL=RichText.js.map
+
+//# sourceMappingURL=RichText.js.map

package/dist/node-dev/RichText.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichText.js","sources":["../../src/RichText.tsx"],"sourcesContent":["import {createElement, Fragment, type ReactNode, useMemo} from 'react';\nimport type {RichTextASTNode} from './RichText.types.js';\nimport {\n  type CustomComponents,\n  RichTextComponents,\n} from './RichText.components.js';\n\nexport interface RichTextPropsBase<ComponentGeneric extends React.ElementType> {\n  /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`. */\n  as?: ComponentGeneric;\n  /** The JSON string that correspond to the Storefront API's [RichText format](https://shopify.dev/docs/apps/custom-data/metafields/types#rich-text-formatting). */\n  data: string;\n  /** Customize how rich text components are rendered */\n  components?: CustomComponents;\n  /** Remove rich text formatting and render plain text */\n  plain?: boolean;\n}\n\n/** @publicDocs */\nexport function RichText<ComponentGeneric extends React.ElementType = 'div'>({\n  as,\n  data,\n  plain,\n  components,\n  ...passthroughProps\n}: RichTextProps<ComponentGeneric>): JSX.Element {\n  try {\n    const Wrapper = as ?? 'div';\n    const parsedData = useMemo(\n      () => JSON.parse(data) as RichTextASTNode,\n      [data],\n    );\n\n    return (\n      <Wrapper {...passthroughProps}>\n        {plain\n          ? richTextToString(parsedData)\n          : serializeRichTextASTNode(components, parsedData)}\n      </Wrapper>\n    );\n  } catch (e) {\n    throw new Error(\n      '[h2:error:RichText] Parsing error. Make sure to pass a JSON string of rich text metafield',\n      {\n        cause: e,\n      },\n    );\n  }\n}\n\n// This article helps understand the typing here https://www.benmvp.com/blog/polymorphic-react-components-typescript/ Ben is the best :)\nexport type RichTextProps<ComponentGeneric extends React.ElementType> =\n  RichTextPropsBase<ComponentGeneric> &\n    Omit<\n      React.ComponentPropsWithoutRef<ComponentGeneric>,\n      keyof RichTextPropsBase<ComponentGeneric>\n    >;\n\nfunction serializeRichTextASTNode(\n  components: CustomComponents = {},\n  node: RichTextASTNode,\n  index = 0,\n): ReactNode {\n  let children;\n  if ('children' in node) {\n    children = node.children.map((child, childIndex) =>\n      serializeRichTextASTNode(components, child, childIndex),\n    );\n  }\n\n  const Component =\n    components[node.type === 'list-item' ? 'listItem' : node.type] ??\n    RichTextComponents[node.type];\n\n  switch (node.type) {\n    case 'root':\n      return createElement(\n        Component as Exclude<CustomComponents['root'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'root',\n            children,\n          },\n        },\n      );\n    case 'heading':\n      return createElement(\n        Component as Exclude<CustomComponents['heading'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'heading',\n            level: node.level,\n            children,\n          },\n        },\n      );\n    case 'paragraph':\n      return createElement(\n        Component as Exclude<CustomComponents['paragraph'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'paragraph',\n            children,\n          },\n        },\n      );\n    case 'text': {\n      const elements = (node.value ?? '')\n        .split('\\n')\n        .flatMap((value, subindex) => {\n          const key = `${index}-${value}-${subindex}`;\n          const textElement = createElement(\n            Component as Exclude<CustomComponents['text'], undefined>,\n            {\n              key,\n              node: {\n                type: 'text',\n                italic: node.italic,\n                bold: node.bold,\n                value,\n              },\n            },\n          );\n\n          // Add a `<br>` before each substring except the first one\n          return subindex === 0\n            ? textElement\n            : [createElement('br', {key: `${key}-br`}), textElement];\n        });\n\n      return elements.length > 1\n        ? createElement(Fragment, {key: index}, elements)\n        : elements[0];\n    }\n    case 'link':\n      return createElement(\n        Component as Exclude<CustomComponents['link'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'link',\n            url: node.url,\n            title: node.title,\n            target: node.target,\n            children,\n          },\n        },\n      );\n    case 'list':\n      return createElement(\n        Component as Exclude<CustomComponents['list'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'list',\n            listType: node.listType,\n            children,\n          },\n        },\n      );\n    case 'list-item':\n      return createElement(\n        Component as Exclude<CustomComponents['listItem'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'list-item',\n            children,\n          },\n        },\n      );\n  }\n}\n\nfunction richTextToString(\n  node: RichTextASTNode,\n  result: string[] = [],\n): string {\n  switch (node.type) {\n    case 'root':\n      node.children.forEach((child) => richTextToString(child, result));\n      break;\n    case 'heading':\n    case 'paragraph':\n      node.children.forEach((child) => richTextToString(child, result));\n      result.push(' ');\n      break;\n    case 'text':\n      result.push(node.value || '');\n      break;\n    case 'link':\n      node.children.forEach((child) => richTextToString(child, result));\n      break;\n    case 'list':\n      node.children.forEach((item) => {\n        if (item.children) {\n          item.children.forEach((child) => richTextToString(child, result));\n        }\n        result.push(' ');\n      });\n      break;\n    default:\n      throw new Error(`Unknown node encountered ${node.type}`);\n  }\n\n  return result.join('').trim();\n}\n\n// This is only for documentation purposes, and it is not used in the code.\n/** @publicDocs */\nexport type RichTextPropsForDocs<AsType extends React.ElementType = 'div'> =\n  RichTextPropsBase<AsType>;\n"],"names":["useMemo","jsx","RichTextComponents","createElement","Fragment"],"mappings":";;;;;AAmBO,SAAS,SAA6D;AAAA,EAC3E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,MAAI;AACF,UAAM,UAAU,MAAM;AACtB,UAAM,aAAaA,MAAAA;AAAAA,MACjB,MAAM,KAAK,MAAM,IAAI;AAAA,MACrB,CAAC,IAAI;AAAA,IAAA;AAGP,WACEC,2BAAAA,IAAC,SAAA,EAAS,GAAG,kBACV,UAAA,QACG,iBAAiB,UAAU,IAC3B,yBAAyB,YAAY,UAAU,EAAA,CACrD;AAAA,EAEJ,SAAS,GAAG;AACV,UAAM,IAAI;AAAA,MACR;AAAA,MACA;AAAA,QACE,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,EAEJ;AACF;AAUA,SAAS,yBACP,aAA+B,CAAA,GAC/B,MACA,QAAQ,GACG;AACX,MAAI;AACJ,MAAI,cAAc,MAAM;AACtB,eAAW,KAAK,SAAS;AAAA,MAAI,CAAC,OAAO,eACnC,yBAAyB,YAAY,OAAO,UAAU;AAAA,IAAA;AAAA,EAE1D;AAEA,QAAM,YACJ,WAAW,KAAK,SAAS,cAAc,aAAa,KAAK,IAAI,KAC7DC,uCAAmB,KAAK,IAAI;AAE9B,UAAQ,KAAK,MAAA;AAAA,IACX,KAAK;AACH,aAAOC,MAAAA;AAAAA,QACL;AAAA,QACA;AAAA,UACE,KAAK;AAAA,UACL,MAAM;AAAA,YACJ,MAAM;AAAA,YACN;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAAA,IAEJ,KAAK;AACH,aAAOA,MAAAA;AAAAA,QACL;AAAA,QACA;AAAA,UACE,KAAK;AAAA,UACL,MAAM;AAAA,YACJ,MAAM;AAAA,YACN,OAAO,KAAK;AAAA,YACZ;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAAA,IAEJ,KAAK;AACH,aAAOA,MAAAA;AAAAA,QACL;AAAA,QACA;AAAA,UACE,KAAK;AAAA,UACL,MAAM;AAAA,YACJ,MAAM;AAAA,YACN;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAAA,IAEJ,KAAK,QAAQ;AACX,YAAM,YAAY,KAAK,SAAS,IAC7B,MAAM,IAAI,EACV,QAAQ,CAAC,OAAO,aAAa;AAC5B,cAAM,MAAM,GAAG,KAAK,IAAI,KAAK,IAAI,QAAQ;AACzC,cAAM,cAAcA,MAAAA;AAAAA,UAClB;AAAA,UACA;AAAA,YACE;AAAA,YACA,MAAM;AAAA,cACJ,MAAM;AAAA,cACN,QAAQ,KAAK;AAAA,cACb,MAAM,KAAK;AAAA,cACX;AAAA,YAAA;AAAA,UACF;AAAA,QACF;AAIF,eAAO,aAAa,IAChB,cACA,CAACA,MAAAA,cAAc,MAAM,EAAC,KAAK,GAAG,GAAG,MAAA,CAAM,GAAG,WAAW;AAAA,MAC3D,CAAC;AAEH,aAAO,SAAS,SAAS,IACrBA,MAAAA,cAAcC,MAAAA,UAAU,EAAC,KAAK,MAAA,GAAQ,QAAQ,IAC9C,SAAS,CAAC;AAAA,IAChB;AAAA,IACA,KAAK;AACH,aAAOD,MAAAA;AAAAA,QACL;AAAA,QACA;AAAA,UACE,KAAK;AAAA,UACL,MAAM;AAAA,YACJ,MAAM;AAAA,YACN,KAAK,KAAK;AAAA,YACV,OAAO,KAAK;AAAA,YACZ,QAAQ,KAAK;AAAA,YACb;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAAA,IAEJ,KAAK;AACH,aAAOA,MAAAA;AAAAA,QACL;AAAA,QACA;AAAA,UACE,KAAK;AAAA,UACL,MAAM;AAAA,YACJ,MAAM;AAAA,YACN,UAAU,KAAK;AAAA,YACf;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAAA,IAEJ,KAAK;AACH,aAAOA,MAAAA;AAAAA,QACL;AAAA,QACA;AAAA,UACE,KAAK;AAAA,UACL,MAAM;AAAA,YACJ,MAAM;AAAA,YACN;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAAA,EACF;AAEN;AAEA,SAAS,iBACP,MACA,SAAmB,IACX;AACR,UAAQ,KAAK,MAAA;AAAA,IACX,KAAK;AACH,WAAK,SAAS,QAAQ,CAAC,UAAU,iBAAiB,OAAO,MAAM,CAAC;AAChE;AAAA,IACF,KAAK;AAAA,IACL,KAAK;AACH,WAAK,SAAS,QAAQ,CAAC,UAAU,iBAAiB,OAAO,MAAM,CAAC;AAChE,aAAO,KAAK,GAAG;AACf;AAAA,IACF,KAAK;AACH,aAAO,KAAK,KAAK,SAAS,EAAE;AAC5B;AAAA,IACF,KAAK;AACH,WAAK,SAAS,QAAQ,CAAC,UAAU,iBAAiB,OAAO,MAAM,CAAC;AAChE;AAAA,IACF,KAAK;AACH,WAAK,SAAS,QAAQ,CAAC,SAAS;AAC9B,YAAI,KAAK,UAAU;AACjB,eAAK,SAAS,QAAQ,CAAC,UAAU,iBAAiB,OAAO,MAAM,CAAC;AAAA,QAClE;AACA,eAAO,KAAK,GAAG;AAAA,MACjB,CAAC;AACD;AAAA,IACF;AACE,YAAM,IAAI,MAAM,4BAA4B,KAAK,IAAI,EAAE;AAAA,EAAA;AAG3D,SAAO,OAAO,KAAK,EAAE,EAAE,KAAA;AACzB;;"}
+{"version":3,"file":"RichText.js","names":[],"sources":["../../src/RichText.tsx"],"sourcesContent":["import {createElement, Fragment, type ReactNode, useMemo} from 'react';\nimport type {RichTextASTNode} from './RichText.types.js';\nimport {\n  type CustomComponents,\n  RichTextComponents,\n} from './RichText.components.js';\n\nexport interface RichTextPropsBase<ComponentGeneric extends React.ElementType> {\n  /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`. */\n  as?: ComponentGeneric;\n  /** The JSON string that correspond to the Storefront API's [RichText format](https://shopify.dev/docs/apps/custom-data/metafields/types#rich-text-formatting). */\n  data: string;\n  /** Customize how rich text components are rendered */\n  components?: CustomComponents;\n  /** Remove rich text formatting and render plain text */\n  plain?: boolean;\n}\n\n/** @publicDocs */\nexport function RichText<ComponentGeneric extends React.ElementType = 'div'>({\n  as,\n  data,\n  plain,\n  components,\n  ...passthroughProps\n}: RichTextProps<ComponentGeneric>): JSX.Element {\n  try {\n    const Wrapper = as ?? 'div';\n    const parsedData = useMemo(\n      () => JSON.parse(data) as RichTextASTNode,\n      [data],\n    );\n\n    return (\n      <Wrapper {...passthroughProps}>\n        {plain\n          ? richTextToString(parsedData)\n          : serializeRichTextASTNode(components, parsedData)}\n      </Wrapper>\n    );\n  } catch (e) {\n    throw new Error(\n      '[h2:error:RichText] Parsing error. Make sure to pass a JSON string of rich text metafield',\n      {\n        cause: e,\n      },\n    );\n  }\n}\n\n// This article helps understand the typing here https://www.benmvp.com/blog/polymorphic-react-components-typescript/ Ben is the best :)\nexport type RichTextProps<ComponentGeneric extends React.ElementType> =\n  RichTextPropsBase<ComponentGeneric> &\n    Omit<\n      React.ComponentPropsWithoutRef<ComponentGeneric>,\n      keyof RichTextPropsBase<ComponentGeneric>\n    >;\n\nfunction serializeRichTextASTNode(\n  components: CustomComponents = {},\n  node: RichTextASTNode,\n  index = 0,\n): ReactNode {\n  let children;\n  if ('children' in node) {\n    children = node.children.map((child, childIndex) =>\n      serializeRichTextASTNode(components, child, childIndex),\n    );\n  }\n\n  const Component =\n    components[node.type === 'list-item' ? 'listItem' : node.type] ??\n    RichTextComponents[node.type];\n\n  switch (node.type) {\n    case 'root':\n      return createElement(\n        Component as Exclude<CustomComponents['root'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'root',\n            children,\n          },\n        },\n      );\n    case 'heading':\n      return createElement(\n        Component as Exclude<CustomComponents['heading'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'heading',\n            level: node.level,\n            children,\n          },\n        },\n      );\n    case 'paragraph':\n      return createElement(\n        Component as Exclude<CustomComponents['paragraph'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'paragraph',\n            children,\n          },\n        },\n      );\n    case 'text': {\n      const elements = (node.value ?? '')\n        .split('\\n')\n        .flatMap((value, subindex) => {\n          const key = `${index}-${value}-${subindex}`;\n          const textElement = createElement(\n            Component as Exclude<CustomComponents['text'], undefined>,\n            {\n              key,\n              node: {\n                type: 'text',\n                italic: node.italic,\n                bold: node.bold,\n                value,\n              },\n            },\n          );\n\n          // Add a `<br>` before each substring except the first one\n          return subindex === 0\n            ? textElement\n            : [createElement('br', {key: `${key}-br`}), textElement];\n        });\n\n      return elements.length > 1\n        ? createElement(Fragment, {key: index}, elements)\n        : elements[0];\n    }\n    case 'link':\n      return createElement(\n        Component as Exclude<CustomComponents['link'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'link',\n            url: node.url,\n            title: node.title,\n            target: node.target,\n            children,\n          },\n        },\n      );\n    case 'list':\n      return createElement(\n        Component as Exclude<CustomComponents['list'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'list',\n            listType: node.listType,\n            children,\n          },\n        },\n      );\n    case 'list-item':\n      return createElement(\n        Component as Exclude<CustomComponents['listItem'], undefined>,\n        {\n          key: index,\n          node: {\n            type: 'list-item',\n            children,\n          },\n        },\n      );\n  }\n}\n\nfunction richTextToString(\n  node: RichTextASTNode,\n  result: string[] = [],\n): string {\n  switch (node.type) {\n    case 'root':\n      node.children.forEach((child) => richTextToString(child, result));\n      break;\n    case 'heading':\n    case 'paragraph':\n      node.children.forEach((child) => richTextToString(child, result));\n      result.push(' ');\n      break;\n    case 'text':\n      result.push(node.value || '');\n      break;\n    case 'link':\n      node.children.forEach((child) => richTextToString(child, result));\n      break;\n    case 'list':\n      node.children.forEach((item) => {\n        if (item.children) {\n          item.children.forEach((child) => richTextToString(child, result));\n        }\n        result.push(' ');\n      });\n      break;\n    default:\n      throw new Error(`Unknown node encountered ${node.type}`);\n  }\n\n  return result.join('').trim();\n}\n\n// This is only for documentation purposes, and it is not used in the code.\n/** @publicDocs */\nexport type RichTextPropsForDocs<AsType extends React.ElementType = 'div'> =\n  RichTextPropsBase<AsType>;\n"],"mappings":"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"}

package/dist/node-dev/RichText.mjs

@@ -1,160 +1,117 @@
-import { jsx } from "react/jsx-runtime";
-import { useMemo, createElement, Fragment } from "react";
 import { RichTextComponents } from "./RichText.components.mjs";
-function RichText({
-  as,
-  data,
-  plain,
-  components,
-  ...passthroughProps
-}) {
-  try {
-    const Wrapper = as ?? "div";
-    const parsedData = useMemo(
-      () => JSON.parse(data),
-      [data]
-    );
-    return /* @__PURE__ */ jsx(Wrapper, { ...passthroughProps, children: plain ? richTextToString(parsedData) : serializeRichTextASTNode(components, parsedData) });
-  } catch (e) {
-    throw new Error(
-      "[h2:error:RichText] Parsing error. Make sure to pass a JSON string of rich text metafield",
-      {
-        cause: e
-      }
-    );
-  }
+import { Fragment, createElement, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/RichText.tsx
+/** @publicDocs */
+function RichText({ as, data, plain, components, ...passthroughProps }) {
+	try {
+		const Wrapper = as ?? "div";
+		const parsedData = useMemo(() => JSON.parse(data), [data]);
+		return /* @__PURE__ */ jsx(Wrapper, {
+			...passthroughProps,
+			children: plain ? richTextToString(parsedData) : serializeRichTextASTNode(components, parsedData)
+		});
+	} catch (e) {
+		throw new Error("[h2:error:RichText] Parsing error. Make sure to pass a JSON string of rich text metafield", { cause: e });
+	}
 }
 function serializeRichTextASTNode(components = {}, node, index = 0) {
-  let children;
-  if ("children" in node) {
-    children = node.children.map(
-      (child, childIndex) => serializeRichTextASTNode(components, child, childIndex)
-    );
-  }
-  const Component = components[node.type === "list-item" ? "listItem" : node.type] ?? RichTextComponents[node.type];
-  switch (node.type) {
-    case "root":
-      return createElement(
-        Component,
-        {
-          key: index,
-          node: {
-            type: "root",
-            children
-          }
-        }
-      );
-    case "heading":
-      return createElement(
-        Component,
-        {
-          key: index,
-          node: {
-            type: "heading",
-            level: node.level,
-            children
-          }
-        }
-      );
-    case "paragraph":
-      return createElement(
-        Component,
-        {
-          key: index,
-          node: {
-            type: "paragraph",
-            children
-          }
-        }
-      );
-    case "text": {
-      const elements = (node.value ?? "").split("\n").flatMap((value, subindex) => {
-        const key = `${index}-${value}-${subindex}`;
-        const textElement = createElement(
-          Component,
-          {
-            key,
-            node: {
-              type: "text",
-              italic: node.italic,
-              bold: node.bold,
-              value
-            }
-          }
-        );
-        return subindex === 0 ? textElement : [createElement("br", { key: `${key}-br` }), textElement];
-      });
-      return elements.length > 1 ? createElement(Fragment, { key: index }, elements) : elements[0];
-    }
-    case "link":
-      return createElement(
-        Component,
-        {
-          key: index,
-          node: {
-            type: "link",
-            url: node.url,
-            title: node.title,
-            target: node.target,
-            children
-          }
-        }
-      );
-    case "list":
-      return createElement(
-        Component,
-        {
-          key: index,
-          node: {
-            type: "list",
-            listType: node.listType,
-            children
-          }
-        }
-      );
-    case "list-item":
-      return createElement(
-        Component,
-        {
-          key: index,
-          node: {
-            type: "list-item",
-            children
-          }
-        }
-      );
-  }
+	let children;
+	if ("children" in node) children = node.children.map((child, childIndex) => serializeRichTextASTNode(components, child, childIndex));
+	const Component = components[node.type === "list-item" ? "listItem" : node.type] ?? RichTextComponents[node.type];
+	switch (node.type) {
+		case "root": return createElement(Component, {
+			key: index,
+			node: {
+				type: "root",
+				children
+			}
+		});
+		case "heading": return createElement(Component, {
+			key: index,
+			node: {
+				type: "heading",
+				level: node.level,
+				children
+			}
+		});
+		case "paragraph": return createElement(Component, {
+			key: index,
+			node: {
+				type: "paragraph",
+				children
+			}
+		});
+		case "text": {
+			const elements = (node.value ?? "").split("\n").flatMap((value, subindex) => {
+				const key = `${index}-${value}-${subindex}`;
+				const textElement = createElement(Component, {
+					key,
+					node: {
+						type: "text",
+						italic: node.italic,
+						bold: node.bold,
+						value
+					}
+				});
+				return subindex === 0 ? textElement : [createElement("br", { key: `${key}-br` }), textElement];
+			});
+			return elements.length > 1 ? createElement(Fragment, { key: index }, elements) : elements[0];
+		}
+		case "link": return createElement(Component, {
+			key: index,
+			node: {
+				type: "link",
+				url: node.url,
+				title: node.title,
+				target: node.target,
+				children
+			}
+		});
+		case "list": return createElement(Component, {
+			key: index,
+			node: {
+				type: "list",
+				listType: node.listType,
+				children
+			}
+		});
+		case "list-item": return createElement(Component, {
+			key: index,
+			node: {
+				type: "list-item",
+				children
+			}
+		});
+	}
 }
 function richTextToString(node, result = []) {
-  switch (node.type) {
-    case "root":
-      node.children.forEach((child) => richTextToString(child, result));
-      break;
-    case "heading":
-    case "paragraph":
-      node.children.forEach((child) => richTextToString(child, result));
-      result.push(" ");
-      break;
-    case "text":
-      result.push(node.value || "");
-      break;
-    case "link":
-      node.children.forEach((child) => richTextToString(child, result));
-      break;
-    case "list":
-      node.children.forEach((item) => {
-        if (item.children) {
-          item.children.forEach((child) => richTextToString(child, result));
-        }
-        result.push(" ");
-      });
-      break;
-    default:
-      throw new Error(`Unknown node encountered ${node.type}`);
-  }
-  return result.join("").trim();
+	switch (node.type) {
+		case "root":
+			node.children.forEach((child) => richTextToString(child, result));
+			break;
+		case "heading":
+		case "paragraph":
+			node.children.forEach((child) => richTextToString(child, result));
+			result.push(" ");
+			break;
+		case "text":
+			result.push(node.value || "");
+			break;
+		case "link":
+			node.children.forEach((child) => richTextToString(child, result));
+			break;
+		case "list":
+			node.children.forEach((item) => {
+				if (item.children) item.children.forEach((child) => richTextToString(child, result));
+				result.push(" ");
+			});
+			break;
+		default: throw new Error(`Unknown node encountered ${node.type}`);
+	}
+	return result.join("").trim();
 }
-export {
-  RichText
-};
-//# sourceMappingURL=RichText.mjs.map
+//#endregion
+export { RichText };
+
+//# sourceMappingURL=RichText.mjs.map