@willwang-io/react-djot 0.1.1

package/README.md

@@ -0,0 +1,140 @@
+# react-djot
+
+`react-djot` renders [Djot](https://djot.net/) into React elements with a
+`react-markdown`-style API.
+
+The design goal is familiarity: if you know `react-markdown`, you should feel
+at home with `react-djot`.
+
+## Features
+
+- React 18+ support
+- `components` override map for per-node rendering control
+- No `dangerouslySetInnerHTML`
+- React Server Component friendly main path (no hooks)
+- TypeScript-first API
+
+## Installation
+
+```bash
+npm install react-djot
+```
+
+Peer dependencies:
+
+- `react`
+- `react-dom`
+- `@djot/djot`
+
+## Quick Start
+
+```tsx
+import { Djot } from "react-djot";
+
+export function Example() {
+  return <Djot>{"# Hello\n\nThis is *Djot*."}</Djot>;
+}
+```
+
+## API
+
+### `<Djot />`
+
+```tsx
+import { Djot } from "react-djot";
+
+<Djot
+  children={"# Title"}
+  components={
+    {
+      /* overrides */
+    }
+  }
+/>;
+```
+
+Props:
+
+- `children?: string | null | undefined`
+  - Djot source text to parse and render.
+- `components?: DjotComponents`
+  - Optional map of node-tag keys to React components.
+
+### `components` overrides
+
+The override pattern mirrors `react-markdown`: provide a component per node
+type key.
+
+```tsx
+import { Djot } from "react-djot";
+import type { DjotComponents } from "react-djot";
+
+const components: DjotComponents = {
+  para: ({ node, children, ...props }) => (
+    <p className="lead" {...props}>
+      {children}
+    </p>
+  ),
+  heading: ({ level, node, children, ...props }) => {
+    const Tag = `h${Math.min(Math.max(level, 1), 6)}` as const;
+    return (
+      <Tag {...props} data-level={level}>
+        {children}
+      </Tag>
+    );
+  },
+  link: ({ node, href, children, ...props }) => (
+    <a {...props} href={href} rel="noreferrer" target="_blank">
+      {children}
+    </a>
+  )
+};
+
+export function Example() {
+  return <Djot components={components}>{"## Custom\n\n[Go](https://example.com)"}</Djot>;
+}
+```
+
+### Supported node keys (current core set)
+
+- `doc`
+- `para`
+- `heading`
+- `emph`
+- `strong`
+- `code`
+- `code_block`
+- `link`
+- `image`
+- `bullet_list`
+- `ordered_list`
+- `list_item`
+- `blockquote`
+- `thematic_break`
+- `str`
+- `soft_break` and `softbreak`
+- `hard_break` and `hardbreak`
+
+## Rendering Guarantees
+
+- Parses Djot via `@djot/djot` `parse()`
+- Walks the AST recursively and creates React elements directly
+- Does not use `dangerouslySetInnerHTML`
+
+## React Server Components
+
+`<Djot />` has no hooks in the main render path, so it can be used in Server
+Components.
+
+## Development
+
+```bash
+npm run build
+npm run typecheck
+npm run lint
+npm test
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,371 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var djot = require('@djot/djot');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/Djot.tsx
+function isParentNode(node) {
+  return Array.isArray(node.children);
+}
+function isSoftBreakNode(node) {
+  return node.tag === "soft_break" || node.tag === "softbreak";
+}
+function isHardBreakNode(node) {
+  return node.tag === "hard_break" || node.tag === "hardbreak";
+}
+function pickComponent(components, primary, alias) {
+  if (!components) {
+    return void 0;
+  }
+  return components[primary] ?? (alias ? components[alias] : void 0);
+}
+function renderChildren(children, components) {
+  return children.map(
+    (child, index) => renderNode(child, {
+      components,
+      key: index
+    })
+  );
+}
+function toAltText(nodes) {
+  let output = "";
+  for (const node of nodes) {
+    switch (node.tag) {
+      case "str":
+      case "code":
+      case "code_block":
+        output += node.text;
+        break;
+      case "soft_break":
+      case "softbreak":
+        output += " ";
+        break;
+      case "hard_break":
+      case "hardbreak":
+        output += "\n";
+        break;
+      default:
+        if (isParentNode(node)) {
+          output += toAltText(node.children);
+        }
+        break;
+    }
+  }
+  return output.trim();
+}
+function clampHeadingLevel(level) {
+  if (level <= 1) {
+    return 1;
+  }
+  if (level >= 6) {
+    return 6;
+  }
+  return level;
+}
+function withKey(props, key) {
+  if (key === void 0) {
+    return props;
+  }
+  return {
+    ...props,
+    key
+  };
+}
+function renderWithOverride(override, fallback, domProps, customProps, key, children) {
+  const Component = override ?? fallback;
+  const props = typeof Component === "string" ? withKey(domProps, key) : withKey(
+    {
+      ...domProps,
+      ...customProps
+    },
+    key
+  );
+  return react.createElement(Component, props, children);
+}
+function renderDoc(node, components, key) {
+  const children = renderChildren(node.children, components);
+  const Component = pickComponent(components, "doc");
+  if (Component) {
+    if (typeof Component === "string") {
+      return react.createElement(Component, withKey({}, key), children);
+    }
+    return react.createElement(Component, withKey({ node }, key), children);
+  }
+  return react.createElement(react.Fragment, withKey({}, key), children);
+}
+function renderHeading(node, components, key) {
+  const level = clampHeadingLevel(node.level);
+  const children = renderChildren(node.children, components);
+  return renderWithOverride(
+    pickComponent(components, "heading"),
+    `h${level}`,
+    {},
+    {
+      level,
+      node
+    },
+    key,
+    children
+  );
+}
+function renderCode(node, components, key) {
+  const value = node.text;
+  return renderWithOverride(
+    pickComponent(components, "code"),
+    "code",
+    {},
+    {
+      node,
+      value
+    },
+    key,
+    value
+  );
+}
+function renderCodeBlock(node, components, key) {
+  const value = node.text;
+  const language = node.lang;
+  const fallbackChildren = react.createElement(
+    "code",
+    {
+      className: language ? `language-${language}` : void 0
+    },
+    value
+  );
+  return renderWithOverride(
+    pickComponent(components, "code_block"),
+    "pre",
+    {},
+    {
+      language,
+      node,
+      value
+    },
+    key,
+    fallbackChildren
+  );
+}
+function renderLink(node, components, key) {
+  const children = renderChildren(node.children, components);
+  const href = node.destination;
+  return renderWithOverride(
+    pickComponent(components, "link"),
+    "a",
+    {
+      href
+    },
+    {
+      node
+    },
+    key,
+    children
+  );
+}
+function renderImage(node, components, key) {
+  const alt = toAltText(node.children) || void 0;
+  const src = node.destination;
+  return renderWithOverride(
+    pickComponent(components, "image"),
+    "img",
+    {
+      alt,
+      src
+    },
+    {
+      alt,
+      node
+    },
+    key
+  );
+}
+function renderOrderedList(node, components, key) {
+  const children = renderChildren(node.children, components);
+  return renderWithOverride(
+    pickComponent(components, "ordered_list"),
+    "ol",
+    {
+      start: node.start
+    },
+    {
+      node,
+      start: node.start
+    },
+    key,
+    children
+  );
+}
+function renderStr(node, components, key) {
+  const value = node.text;
+  const Component = pickComponent(components, "str");
+  if (!Component) {
+    return value;
+  }
+  if (typeof Component === "string") {
+    return react.createElement(Component, withKey({}, key), value);
+  }
+  return react.createElement(
+    Component,
+    withKey(
+      {
+        node,
+        value
+      },
+      key
+    ),
+    value
+  );
+}
+function renderSoftBreak(node, components, key) {
+  const Component = pickComponent(components, "soft_break", "softbreak");
+  if (!Component) {
+    return "\n";
+  }
+  if (typeof Component === "string") {
+    return react.createElement(Component, withKey({}, key), "\n");
+  }
+  return react.createElement(
+    Component,
+    withKey(
+      {
+        node
+      },
+      key
+    ),
+    "\n"
+  );
+}
+function renderHardBreak(node, components, key) {
+  return renderWithOverride(
+    pickComponent(components, "hard_break", "hardbreak"),
+    "br",
+    {},
+    {
+      node
+    },
+    key
+  );
+}
+function renderNode(node, options = {}) {
+  const { components, key } = options;
+  const children = isParentNode(node) ? renderChildren(node.children, components) : void 0;
+  switch (node.tag) {
+    case "doc":
+      return renderDoc(node, components, key);
+    case "para":
+      return renderWithOverride(
+        pickComponent(components, "para"),
+        "p",
+        {},
+        {
+          node
+        },
+        key,
+        children
+      );
+    case "heading":
+      return renderHeading(node, components, key);
+    case "emph":
+      return renderWithOverride(
+        pickComponent(components, "emph"),
+        "em",
+        {},
+        {
+          node
+        },
+        key,
+        children
+      );
+    case "strong":
+      return renderWithOverride(
+        pickComponent(components, "strong"),
+        "strong",
+        {},
+        {
+          node
+        },
+        key,
+        children
+      );
+    case "code":
+      return renderCode(node, components, key);
+    case "code_block":
+      return renderCodeBlock(node, components, key);
+    case "link":
+      return renderLink(node, components, key);
+    case "image":
+      return renderImage(node, components, key);
+    case "bullet_list":
+      return renderWithOverride(
+        pickComponent(components, "bullet_list"),
+        "ul",
+        {},
+        {
+          node
+        },
+        key,
+        children
+      );
+    case "ordered_list":
+      return renderOrderedList(node, components, key);
+    case "list_item":
+      return renderWithOverride(
+        pickComponent(components, "list_item"),
+        "li",
+        {},
+        {
+          node
+        },
+        key,
+        children
+      );
+    case "blockquote":
+      return renderWithOverride(
+        pickComponent(components, "blockquote"),
+        "blockquote",
+        {},
+        {
+          node
+        },
+        key,
+        children
+      );
+    case "thematic_break":
+      return renderWithOverride(
+        pickComponent(components, "thematic_break"),
+        "hr",
+        {},
+        {
+          node
+        },
+        key
+      );
+    case "str":
+      return renderStr(node, components, key);
+    default:
+      if (isSoftBreakNode(node)) {
+        return renderSoftBreak(node, components, key);
+      }
+      if (isHardBreakNode(node)) {
+        return renderHardBreak(node, components, key);
+      }
+      return null;
+  }
+}
+function Djot({ children, components }) {
+  const source = children ?? "";
+  if (source.length === 0) {
+    return null;
+  }
+  const ast = djot.parse(source);
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: renderNode(ast, { components }) });
+}
+var Djot_default = Djot;
+
+exports.Djot = Djot;
+exports.default = Djot_default;
+exports.renderNode = renderNode;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/renderNode.tsx","../src/Djot.tsx"],"names":["createElement","Fragment","parse","jsx"],"mappings":"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","file":"index.cjs","sourcesContent":["import { createElement, Fragment } from \"react\";\nimport type React from \"react\";\nimport type {\n  DjotBaseNode,\n  DjotCodeBlockNode,\n  DjotCodeNode,\n  DjotComponentPropsMap,\n  DjotComponents,\n  DjotDocNode,\n  DjotHardBreakNode,\n  DjotHeadingNode,\n  DjotImageNode,\n  DjotLinkNode,\n  DjotNode,\n  DjotOrderedListNode,\n  DjotParentNode,\n  DjotSoftBreakNode,\n  DjotStrNode\n} from \"./types\";\n\nexport interface RenderNodeOptions {\n  components?: DjotComponents | undefined;\n  key?: React.Key;\n}\n\ntype ComponentKey = keyof DjotComponentPropsMap;\n\nfunction isParentNode(node: DjotBaseNode): node is DjotParentNode {\n  return Array.isArray((node as DjotParentNode).children);\n}\n\nfunction isSoftBreakNode(node: DjotNode): node is DjotSoftBreakNode {\n  return node.tag === \"soft_break\" || node.tag === \"softbreak\";\n}\n\nfunction isHardBreakNode(node: DjotNode): node is DjotHardBreakNode {\n  return node.tag === \"hard_break\" || node.tag === \"hardbreak\";\n}\n\nfunction pickComponent(\n  components: DjotComponents | undefined,\n  primary: ComponentKey,\n  alias?: ComponentKey\n): React.ElementType | undefined {\n  if (!components) {\n    return undefined;\n  }\n\n  return (components[primary] ?? (alias ? components[alias] : undefined)) as\n    | React.ElementType\n    | undefined;\n}\n\nfunction renderChildren(children: DjotNode[], components?: DjotComponents): React.ReactNode[] {\n  return children.map((child, index) =>\n    renderNode(child, {\n      components,\n      key: index\n    })\n  );\n}\n\nfunction toAltText(nodes: DjotNode[]): string {\n  let output = \"\";\n\n  for (const node of nodes) {\n    switch (node.tag) {\n      case \"str\":\n      case \"code\":\n      case \"code_block\":\n        output += node.text;\n        break;\n      case \"soft_break\":\n      case \"softbreak\":\n        output += \" \";\n        break;\n      case \"hard_break\":\n      case \"hardbreak\":\n        output += \"\\n\";\n        break;\n      default:\n        if (isParentNode(node)) {\n          output += toAltText(node.children);\n        }\n        break;\n    }\n  }\n\n  return output.trim();\n}\n\nfunction clampHeadingLevel(level: number): 1 | 2 | 3 | 4 | 5 | 6 {\n  if (level <= 1) {\n    return 1;\n  }\n\n  if (level >= 6) {\n    return 6;\n  }\n\n  return level as 1 | 2 | 3 | 4 | 5 | 6;\n}\n\nfunction withKey<T extends Record<string, unknown>>(props: T, key?: React.Key): T & { key?: React.Key } {\n  if (key === undefined) {\n    return props;\n  }\n\n  return {\n    ...props,\n    key\n  };\n}\n\nfunction renderWithOverride(\n  override: React.ElementType | undefined,\n  fallback: React.ElementType,\n  domProps: Record<string, unknown>,\n  customProps: Record<string, unknown>,\n  key?: React.Key,\n  children?: React.ReactNode\n): React.ReactNode {\n  const Component = override ?? fallback;\n  const props =\n    typeof Component === \"string\"\n      ? withKey(domProps, key)\n      : withKey(\n          {\n            ...domProps,\n            ...customProps\n          },\n          key\n        );\n\n  return createElement(Component, props, children);\n}\n\nfunction renderDoc(\n  node: DjotDocNode,\n  components: DjotComponents | undefined,\n  key?: React.Key\n): React.ReactNode {\n  const children = renderChildren(node.children, components);\n  const Component = pickComponent(components, \"doc\");\n\n  if (Component) {\n    if (typeof Component === \"string\") {\n      return createElement(Component, withKey({}, key), children);\n    }\n\n    return createElement(Component, withKey({ node }, key), children);\n  }\n\n  return createElement(Fragment, withKey({}, key), children);\n}\n\nfunction renderHeading(\n  node: DjotHeadingNode,\n  components: DjotComponents | undefined,\n  key?: React.Key\n): React.ReactNode {\n  const level = clampHeadingLevel(node.level);\n  const children = renderChildren(node.children, components);\n  return renderWithOverride(\n    pickComponent(components, \"heading\"),\n    `h${level}`,\n    {},\n    {\n      level,\n      node\n    },\n    key,\n    children\n  );\n}\n\nfunction renderCode(\n  node: DjotCodeNode,\n  components: DjotComponents | undefined,\n  key?: React.Key\n): React.ReactNode {\n  const value = node.text;\n  return renderWithOverride(\n    pickComponent(components, \"code\"),\n    \"code\",\n    {},\n    {\n      node,\n      value\n    },\n    key,\n    value\n  );\n}\n\nfunction renderCodeBlock(\n  node: DjotCodeBlockNode,\n  components: DjotComponents | undefined,\n  key?: React.Key\n): React.ReactNode {\n  const value = node.text;\n  const language = node.lang;\n  const fallbackChildren = createElement(\n    \"code\",\n    {\n      className: language ? `language-${language}` : undefined\n    },\n    value\n  );\n\n  return renderWithOverride(\n    pickComponent(components, \"code_block\"),\n    \"pre\",\n    {},\n    {\n      language,\n      node,\n      value\n    },\n    key,\n    fallbackChildren\n  );\n}\n\nfunction renderLink(\n  node: DjotLinkNode,\n  components: DjotComponents | undefined,\n  key?: React.Key\n): React.ReactNode {\n  const children = renderChildren(node.children, components);\n  const href = node.destination;\n  return renderWithOverride(\n    pickComponent(components, \"link\"),\n    \"a\",\n    {\n      href\n    },\n    {\n      node\n    },\n    key,\n    children\n  );\n}\n\nfunction renderImage(\n  node: DjotImageNode,\n  components: DjotComponents | undefined,\n  key?: React.Key\n): React.ReactNode {\n  const alt = toAltText(node.children) || undefined;\n  const src = node.destination;\n  return renderWithOverride(\n    pickComponent(components, \"image\"),\n    \"img\",\n    {\n      alt,\n      src\n    },\n    {\n      alt,\n      node\n    },\n    key\n  );\n}\n\nfunction renderOrderedList(\n  node: DjotOrderedListNode,\n  components: DjotComponents | undefined,\n  key?: React.Key\n): React.ReactNode {\n  const children = renderChildren(node.children, components);\n  return renderWithOverride(\n    pickComponent(components, \"ordered_list\"),\n    \"ol\",\n    {\n      start: node.start\n    },\n    {\n      node,\n      start: node.start\n    },\n    key,\n    children\n  );\n}\n\nfunction renderStr(\n  node: DjotStrNode,\n  components: DjotComponents | undefined,\n  key?: React.Key\n): React.ReactNode {\n  const value = node.text;\n  const Component = pickComponent(components, \"str\");\n\n  if (!Component) {\n    return value;\n  }\n\n  if (typeof Component === \"string\") {\n    return createElement(Component, withKey({}, key), value);\n  }\n\n  return createElement(\n    Component,\n    withKey(\n      {\n        node,\n        value\n      },\n      key\n    ),\n    value\n  );\n}\n\nfunction renderSoftBreak(\n  node: DjotSoftBreakNode,\n  components: DjotComponents | undefined,\n  key?: React.Key\n): React.ReactNode {\n  const Component = pickComponent(components, \"soft_break\", \"softbreak\");\n\n  if (!Component) {\n    return \"\\n\";\n  }\n\n  if (typeof Component === \"string\") {\n    return createElement(Component, withKey({}, key), \"\\n\");\n  }\n\n  return createElement(\n    Component,\n    withKey(\n      {\n        node\n      },\n      key\n    ),\n    \"\\n\"\n  );\n}\n\nfunction renderHardBreak(\n  node: DjotHardBreakNode,\n  components: DjotComponents | undefined,\n  key?: React.Key\n): React.ReactNode {\n  return renderWithOverride(\n    pickComponent(components, \"hard_break\", \"hardbreak\"),\n    \"br\",\n    {},\n    {\n      node\n    },\n    key\n  );\n}\n\nexport function renderNode(node: DjotNode, options: RenderNodeOptions = {}): React.ReactNode {\n  const { components, key } = options;\n  const children = isParentNode(node) ? renderChildren(node.children, components) : undefined;\n\n  switch (node.tag) {\n    case \"doc\":\n      return renderDoc(node, components, key);\n    case \"para\":\n      return renderWithOverride(\n        pickComponent(components, \"para\"),\n        \"p\",\n        {},\n        {\n          node\n        },\n        key,\n        children\n      );\n    case \"heading\":\n      return renderHeading(node, components, key);\n    case \"emph\":\n      return renderWithOverride(\n        pickComponent(components, \"emph\"),\n        \"em\",\n        {},\n        {\n          node\n        },\n        key,\n        children\n      );\n    case \"strong\":\n      return renderWithOverride(\n        pickComponent(components, \"strong\"),\n        \"strong\",\n        {},\n        {\n          node\n        },\n        key,\n        children\n      );\n    case \"code\":\n      return renderCode(node, components, key);\n    case \"code_block\":\n      return renderCodeBlock(node, components, key);\n    case \"link\":\n      return renderLink(node, components, key);\n    case \"image\":\n      return renderImage(node, components, key);\n    case \"bullet_list\":\n      return renderWithOverride(\n        pickComponent(components, \"bullet_list\"),\n        \"ul\",\n        {},\n        {\n          node\n        },\n        key,\n        children\n      );\n    case \"ordered_list\":\n      return renderOrderedList(node, components, key);\n    case \"list_item\":\n      return renderWithOverride(\n        pickComponent(components, \"list_item\"),\n        \"li\",\n        {},\n        {\n          node\n        },\n        key,\n        children\n      );\n    case \"blockquote\":\n      return renderWithOverride(\n        pickComponent(components, \"blockquote\"),\n        \"blockquote\",\n        {},\n        {\n          node\n        },\n        key,\n        children\n      );\n    case \"thematic_break\":\n      return renderWithOverride(\n        pickComponent(components, \"thematic_break\"),\n        \"hr\",\n        {},\n        {\n          node\n        },\n        key\n      );\n    case \"str\":\n      return renderStr(node, components, key);\n    default:\n      if (isSoftBreakNode(node)) {\n        return renderSoftBreak(node, components, key);\n      }\n\n      if (isHardBreakNode(node)) {\n        return renderHardBreak(node, components, key);\n      }\n\n      return null;\n  }\n}\n","import { parse } from \"@djot/djot\";\nimport { Fragment } from \"react\";\nimport type React from \"react\";\nimport { renderNode } from \"./renderNode\";\nimport type { DjotNode, DjotProps } from \"./types\";\n\nexport function Djot({ children, components }: DjotProps): React.ReactElement | null {\n  const source = children ?? \"\";\n\n  if (source.length === 0) {\n    return null;\n  }\n\n  const ast = parse(source) as DjotNode;\n  return <Fragment>{renderNode(ast, { components })}</Fragment>;\n}\n\nexport default Djot;\n"]}

package/dist/index.d.cts

@@ -0,0 +1,127 @@
+import React from 'react';
+
+type DjotAttributes = Record<string, string>;
+interface DjotBaseNode {
+    attributes?: DjotAttributes;
+    tag: string;
+}
+interface DjotParentNode extends DjotBaseNode {
+    children: DjotNode[];
+}
+interface DjotDocNode extends DjotParentNode {
+    tag: "doc";
+}
+interface DjotParaNode extends DjotParentNode {
+    tag: "para";
+}
+interface DjotHeadingNode extends DjotParentNode {
+    level: number;
+    tag: "heading";
+}
+interface DjotEmphNode extends DjotParentNode {
+    tag: "emph";
+}
+interface DjotStrongNode extends DjotParentNode {
+    tag: "strong";
+}
+interface DjotCodeNode extends DjotBaseNode {
+    tag: "code";
+    text: string;
+}
+interface DjotCodeBlockNode extends DjotBaseNode {
+    lang?: string;
+    tag: "code_block";
+    text: string;
+}
+interface DjotLinkNode extends DjotParentNode {
+    destination: string;
+    tag: "link";
+}
+interface DjotImageNode extends DjotParentNode {
+    destination: string;
+    tag: "image";
+}
+interface DjotBulletListNode extends DjotParentNode {
+    tag: "bullet_list";
+}
+interface DjotOrderedListNode extends DjotParentNode {
+    start?: number;
+    tag: "ordered_list";
+}
+interface DjotListItemNode extends DjotParentNode {
+    tag: "list_item";
+}
+interface DjotBlockquoteNode extends DjotParentNode {
+    tag: "blockquote";
+}
+interface DjotThematicBreakNode extends DjotBaseNode {
+    tag: "thematic_break";
+}
+interface DjotStrNode extends DjotBaseNode {
+    tag: "str";
+    text: string;
+}
+interface DjotSoftBreakNode extends DjotBaseNode {
+    tag: "soft_break" | "softbreak";
+}
+interface DjotHardBreakNode extends DjotBaseNode {
+    tag: "hard_break" | "hardbreak";
+}
+type DjotNode = DjotDocNode | DjotParaNode | DjotHeadingNode | DjotEmphNode | DjotStrongNode | DjotCodeNode | DjotCodeBlockNode | DjotLinkNode | DjotImageNode | DjotBulletListNode | DjotOrderedListNode | DjotListItemNode | DjotBlockquoteNode | DjotThematicBreakNode | DjotStrNode | DjotSoftBreakNode | DjotHardBreakNode;
+type DjotNodeTag = DjotNode["tag"];
+type DjotNodeByTag<Tag extends DjotNodeTag> = Extract<DjotNode, {
+    tag: Tag;
+}>;
+interface DjotNodePropsBase<Tag extends DjotNodeTag> {
+    children?: React.ReactNode;
+    node: DjotNodeByTag<Tag>;
+}
+interface DjotComponentPropsMap {
+    doc: DjotNodePropsBase<"doc">;
+    para: React.HTMLAttributes<HTMLParagraphElement> & DjotNodePropsBase<"para">;
+    heading: React.HTMLAttributes<HTMLHeadingElement> & DjotNodePropsBase<"heading"> & {
+        level: number;
+    };
+    emph: React.HTMLAttributes<HTMLElement> & DjotNodePropsBase<"emph">;
+    strong: React.HTMLAttributes<HTMLElement> & DjotNodePropsBase<"strong">;
+    code: React.HTMLAttributes<HTMLElement> & DjotNodePropsBase<"code"> & {
+        value: string;
+    };
+    code_block: React.HTMLAttributes<HTMLPreElement> & DjotNodePropsBase<"code_block"> & {
+        language?: string;
+        value: string;
+    };
+    link: React.AnchorHTMLAttributes<HTMLAnchorElement> & DjotNodePropsBase<"link">;
+    image: React.ImgHTMLAttributes<HTMLImageElement> & DjotNodePropsBase<"image"> & {
+        alt?: string;
+    };
+    bullet_list: React.HTMLAttributes<HTMLUListElement> & DjotNodePropsBase<"bullet_list">;
+    ordered_list: React.OlHTMLAttributes<HTMLOListElement> & DjotNodePropsBase<"ordered_list">;
+    list_item: React.LiHTMLAttributes<HTMLLIElement> & DjotNodePropsBase<"list_item">;
+    blockquote: React.BlockquoteHTMLAttributes<HTMLQuoteElement> & DjotNodePropsBase<"blockquote">;
+    thematic_break: React.HTMLAttributes<HTMLHRElement> & DjotNodePropsBase<"thematic_break">;
+    str: DjotNodePropsBase<"str"> & {
+        value: string;
+    };
+    soft_break: DjotNodePropsBase<"soft_break">;
+    softbreak: DjotNodePropsBase<"softbreak">;
+    hard_break: DjotNodePropsBase<"hard_break">;
+    hardbreak: DjotNodePropsBase<"hardbreak">;
+}
+type DjotComponents = Partial<{
+    [K in keyof DjotComponentPropsMap]: React.ElementType<DjotComponentPropsMap[K]>;
+}>;
+interface DjotProps {
+    children?: string | null | undefined;
+    components?: DjotComponents | undefined;
+}
+
+declare function Djot({ children, components }: DjotProps): React.ReactElement | null;
+
+interface RenderNodeOptions {
+    components?: DjotComponents | undefined;
+    key?: React.Key;
+}
+declare function renderNode(node: DjotNode, options?: RenderNodeOptions): React.ReactNode;
+
+export { Djot, type DjotComponentPropsMap, type DjotComponents, type DjotNode, type DjotNodeByTag, type DjotNodeTag, type DjotProps, Djot as default, renderNode };

package/dist/index.d.ts

@@ -0,0 +1,127 @@
+import React from 'react';
+
+type DjotAttributes = Record<string, string>;
+interface DjotBaseNode {
+    attributes?: DjotAttributes;
+    tag: string;
+}
+interface DjotParentNode extends DjotBaseNode {
+    children: DjotNode[];
+}
+interface DjotDocNode extends DjotParentNode {
+    tag: "doc";
+}
+interface DjotParaNode extends DjotParentNode {
+    tag: "para";
+}
+interface DjotHeadingNode extends DjotParentNode {
+    level: number;
+    tag: "heading";
+}
+interface DjotEmphNode extends DjotParentNode {
+    tag: "emph";
+}
+interface DjotStrongNode extends DjotParentNode {
+    tag: "strong";
+}
+interface DjotCodeNode extends DjotBaseNode {
+    tag: "code";
+    text: string;
+}
+interface DjotCodeBlockNode extends DjotBaseNode {
+    lang?: string;
+    tag: "code_block";
+    text: string;
+}
+interface DjotLinkNode extends DjotParentNode {
+    destination: string;
+    tag: "link";
+}
+interface DjotImageNode extends DjotParentNode {
+    destination: string;
+    tag: "image";
+}
+interface DjotBulletListNode extends DjotParentNode {
+    tag: "bullet_list";
+}
+interface DjotOrderedListNode extends DjotParentNode {
+    start?: number;
+    tag: "ordered_list";
+}
+interface DjotListItemNode extends DjotParentNode {
+    tag: "list_item";
+}
+interface DjotBlockquoteNode extends DjotParentNode {
+    tag: "blockquote";
+}
+interface DjotThematicBreakNode extends DjotBaseNode {
+    tag: "thematic_break";
+}
+interface DjotStrNode extends DjotBaseNode {
+    tag: "str";
+    text: string;
+}
+interface DjotSoftBreakNode extends DjotBaseNode {
+    tag: "soft_break" | "softbreak";
+}
+interface DjotHardBreakNode extends DjotBaseNode {
+    tag: "hard_break" | "hardbreak";
+}
+type DjotNode = DjotDocNode | DjotParaNode | DjotHeadingNode | DjotEmphNode | DjotStrongNode | DjotCodeNode | DjotCodeBlockNode | DjotLinkNode | DjotImageNode | DjotBulletListNode | DjotOrderedListNode | DjotListItemNode | DjotBlockquoteNode | DjotThematicBreakNode | DjotStrNode | DjotSoftBreakNode | DjotHardBreakNode;
+type DjotNodeTag = DjotNode["tag"];
+type DjotNodeByTag<Tag extends DjotNodeTag> = Extract<DjotNode, {
+    tag: Tag;
+}>;
+interface DjotNodePropsBase<Tag extends DjotNodeTag> {
+    children?: React.ReactNode;
+    node: DjotNodeByTag<Tag>;
+}
+interface DjotComponentPropsMap {
+    doc: DjotNodePropsBase<"doc">;
+    para: React.HTMLAttributes<HTMLParagraphElement> & DjotNodePropsBase<"para">;
+    heading: React.HTMLAttributes<HTMLHeadingElement> & DjotNodePropsBase<"heading"> & {
+        level: number;
+    };
+    emph: React.HTMLAttributes<HTMLElement> & DjotNodePropsBase<"emph">;
+    strong: React.HTMLAttributes<HTMLElement> & DjotNodePropsBase<"strong">;
+    code: React.HTMLAttributes<HTMLElement> & DjotNodePropsBase<"code"> & {
+        value: string;
+    };
+    code_block: React.HTMLAttributes<HTMLPreElement> & DjotNodePropsBase<"code_block"> & {
+        language?: string;
+        value: string;
+    };
+    link: React.AnchorHTMLAttributes<HTMLAnchorElement> & DjotNodePropsBase<"link">;
+    image: React.ImgHTMLAttributes<HTMLImageElement> & DjotNodePropsBase<"image"> & {
+        alt?: string;
+    };
+    bullet_list: React.HTMLAttributes<HTMLUListElement> & DjotNodePropsBase<"bullet_list">;
+    ordered_list: React.OlHTMLAttributes<HTMLOListElement> & DjotNodePropsBase<"ordered_list">;
+    list_item: React.LiHTMLAttributes<HTMLLIElement> & DjotNodePropsBase<"list_item">;
+    blockquote: React.BlockquoteHTMLAttributes<HTMLQuoteElement> & DjotNodePropsBase<"blockquote">;
+    thematic_break: React.HTMLAttributes<HTMLHRElement> & DjotNodePropsBase<"thematic_break">;
+    str: DjotNodePropsBase<"str"> & {
+        value: string;
+    };
+    soft_break: DjotNodePropsBase<"soft_break">;
+    softbreak: DjotNodePropsBase<"softbreak">;
+    hard_break: DjotNodePropsBase<"hard_break">;
+    hardbreak: DjotNodePropsBase<"hardbreak">;
+}
+type DjotComponents = Partial<{
+    [K in keyof DjotComponentPropsMap]: React.ElementType<DjotComponentPropsMap[K]>;
+}>;
+interface DjotProps {
+    children?: string | null | undefined;
+    components?: DjotComponents | undefined;
+}
+
+declare function Djot({ children, components }: DjotProps): React.ReactElement | null;
+
+interface RenderNodeOptions {
+    components?: DjotComponents | undefined;
+    key?: React.Key;
+}
+declare function renderNode(node: DjotNode, options?: RenderNodeOptions): React.ReactNode;
+
+export { Djot, type DjotComponentPropsMap, type DjotComponents, type DjotNode, type DjotNodeByTag, type DjotNodeTag, type DjotProps, Djot as default, renderNode };

package/dist/index.js

@@ -0,0 +1,365 @@
+import { parse } from '@djot/djot';
+import { Fragment, createElement } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/Djot.tsx
+function isParentNode(node) {
+  return Array.isArray(node.children);
+}
+function isSoftBreakNode(node) {
+  return node.tag === "soft_break" || node.tag === "softbreak";
+}
+function isHardBreakNode(node) {
+  return node.tag === "hard_break" || node.tag === "hardbreak";
+}
+function pickComponent(components, primary, alias) {
+  if (!components) {
+    return void 0;
+  }
+  return components[primary] ?? (alias ? components[alias] : void 0);
+}
+function renderChildren(children, components) {
+  return children.map(
+    (child, index) => renderNode(child, {
+      components,
+      key: index
+    })
+  );
+}
+function toAltText(nodes) {
+  let output = "";
+  for (const node of nodes) {
+    switch (node.tag) {
+      case "str":
+      case "code":
+      case "code_block":
+        output += node.text;
+        break;
+      case "soft_break":
+      case "softbreak":
+        output += " ";
+        break;
+      case "hard_break":
+      case "hardbreak":
+        output += "\n";
+        break;
+      default:
+        if (isParentNode(node)) {
+          output += toAltText(node.children);
+        }
+        break;
+    }
+  }
+  return output.trim();
+}
+function clampHeadingLevel(level) {
+  if (level <= 1) {
+    return 1;
+  }
+  if (level >= 6) {
+    return 6;
+  }
+  return level;
+}
+function withKey(props, key) {
+  if (key === void 0) {
+    return props;
+  }
+  return {
+    ...props,
+    key
+  };
+}
+function renderWithOverride(override, fallback, domProps, customProps, key, children) {
+  const Component = override ?? fallback;
+  const props = typeof Component === "string" ? withKey(domProps, key) : withKey(
+    {
+      ...domProps,
+      ...customProps
+    },
+    key
+  );
+  return createElement(Component, props, children);
+}
+function renderDoc(node, components, key) {
+  const children = renderChildren(node.children, components);
+  const Component = pickComponent(components, "doc");
+  if (Component) {
+    if (typeof Component === "string") {
+      return createElement(Component, withKey({}, key), children);
+    }
+    return createElement(Component, withKey({ node }, key), children);
+  }
+  return createElement(Fragment, withKey({}, key), children);
+}
+function renderHeading(node, components, key) {
+  const level = clampHeadingLevel(node.level);
+  const children = renderChildren(node.children, components);
+  return renderWithOverride(
+    pickComponent(components, "heading"),
+    `h${level}`,
+    {},
+    {
+      level,
+      node
+    },
+    key,
+    children
+  );
+}
+function renderCode(node, components, key) {
+  const value = node.text;
+  return renderWithOverride(
+    pickComponent(components, "code"),
+    "code",
+    {},
+    {
+      node,
+      value
+    },
+    key,
+    value
+  );
+}
+function renderCodeBlock(node, components, key) {
+  const value = node.text;
+  const language = node.lang;
+  const fallbackChildren = createElement(
+    "code",
+    {
+      className: language ? `language-${language}` : void 0
+    },
+    value
+  );
+  return renderWithOverride(
+    pickComponent(components, "code_block"),
+    "pre",
+    {},
+    {
+      language,
+      node,
+      value
+    },
+    key,
+    fallbackChildren
+  );
+}
+function renderLink(node, components, key) {
+  const children = renderChildren(node.children, components);
+  const href = node.destination;
+  return renderWithOverride(
+    pickComponent(components, "link"),
+    "a",
+    {
+      href
+    },
+    {
+      node
+    },
+    key,
+    children
+  );
+}
+function renderImage(node, components, key) {
+  const alt = toAltText(node.children) || void 0;
+  const src = node.destination;
+  return renderWithOverride(
+    pickComponent(components, "image"),
+    "img",
+    {
+      alt,
+      src
+    },
+    {
+      alt,
+      node
+    },
+    key
+  );
+}
+function renderOrderedList(node, components, key) {
+  const children = renderChildren(node.children, components);
+  return renderWithOverride(
+    pickComponent(components, "ordered_list"),
+    "ol",
+    {
+      start: node.start
+    },
+    {
+      node,
+      start: node.start
+    },
+    key,
+    children
+  );
+}
+function renderStr(node, components, key) {
+  const value = node.text;
+  const Component = pickComponent(components, "str");
+  if (!Component) {
+    return value;
+  }
+  if (typeof Component === "string") {
+    return createElement(Component, withKey({}, key), value);
+  }
+  return createElement(
+    Component,
+    withKey(
+      {
+        node,
+        value
+      },
+      key
+    ),
+    value
+  );
+}
+function renderSoftBreak(node, components, key) {
+  const Component = pickComponent(components, "soft_break", "softbreak");
+  if (!Component) {
+    return "\n";
+  }
+  if (typeof Component === "string") {
+    return createElement(Component, withKey({}, key), "\n");
+  }
+  return createElement(
+    Component,
+    withKey(
+      {
+        node
+      },
+      key
+    ),
+    "\n"
+  );
+}
+function renderHardBreak(node, components, key) {
+  return renderWithOverride(
+    pickComponent(components, "hard_break", "hardbreak"),
+    "br",
+    {},
+    {
+      node
+    },
+    key
+  );
+}
+function renderNode(node, options = {}) {
+  const { components, key } = options;
+  const children = isParentNode(node) ? renderChildren(node.children, components) : void 0;
+  switch (node.tag) {
+    case "doc":
+      return renderDoc(node, components, key);
+    case "para":
+      return renderWithOverride(
+        pickComponent(components, "para"),
+        "p",
+        {},
+        {
+          node
+        },
+        key,
+        children
+      );
+    case "heading":
+      return renderHeading(node, components, key);
+    case "emph":
+      return renderWithOverride(
+        pickComponent(components, "emph"),
+        "em",
+        {},
+        {
+          node
+        },
+        key,
+        children
+      );
+    case "strong":
+      return renderWithOverride(
+        pickComponent(components, "strong"),
+        "strong",
+        {},
+        {
+          node
+        },
+        key,
+        children
+      );
+    case "code":
+      return renderCode(node, components, key);
+    case "code_block":
+      return renderCodeBlock(node, components, key);
+    case "link":
+      return renderLink(node, components, key);
+    case "image":
+      return renderImage(node, components, key);
+    case "bullet_list":
+      return renderWithOverride(
+        pickComponent(components, "bullet_list"),
+        "ul",
+        {},
+        {
+          node
+        },
+        key,
+        children
+      );
+    case "ordered_list":
+      return renderOrderedList(node, components, key);
+    case "list_item":
+      return renderWithOverride(
+        pickComponent(components, "list_item"),
+        "li",
+        {},
+        {
+          node
+        },
+        key,
+        children
+      );
+    case "blockquote":
+      return renderWithOverride(
+        pickComponent(components, "blockquote"),
+        "blockquote",
+        {},
+        {
+          node
+        },
+        key,
+        children
+      );
+    case "thematic_break":
+      return renderWithOverride(
+        pickComponent(components, "thematic_break"),
+        "hr",
+        {},
+        {
+          node
+        },
+        key
+      );
+    case "str":
+      return renderStr(node, components, key);
+    default:
+      if (isSoftBreakNode(node)) {
+        return renderSoftBreak(node, components, key);
+      }
+      if (isHardBreakNode(node)) {
+        return renderHardBreak(node, components, key);
+      }
+      return null;
+  }
+}
+function Djot({ children, components }) {
+  const source = children ?? "";
+  if (source.length === 0) {
+    return null;
+  }
+  const ast = parse(source);
+  return /* @__PURE__ */ jsx(Fragment, { children: renderNode(ast, { components }) });
+}
+var Djot_default = Djot;
+
+export { Djot, Djot_default as default, renderNode };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/renderNode.tsx","../src/Djot.tsx"],"names":["Fragment"],"mappings":"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","file":"index.js","sourcesContent":["import { createElement, Fragment } from \"react\";\nimport type React from \"react\";\nimport type {\n  DjotBaseNode,\n  DjotCodeBlockNode,\n  DjotCodeNode,\n  DjotComponentPropsMap,\n  DjotComponents,\n  DjotDocNode,\n  DjotHardBreakNode,\n  DjotHeadingNode,\n  DjotImageNode,\n  DjotLinkNode,\n  DjotNode,\n  DjotOrderedListNode,\n  DjotParentNode,\n  DjotSoftBreakNode,\n  DjotStrNode\n} from \"./types\";\n\nexport interface RenderNodeOptions {\n  components?: DjotComponents | undefined;\n  key?: React.Key;\n}\n\ntype ComponentKey = keyof DjotComponentPropsMap;\n\nfunction isParentNode(node: DjotBaseNode): node is DjotParentNode {\n  return Array.isArray((node as DjotParentNode).children);\n}\n\nfunction isSoftBreakNode(node: DjotNode): node is DjotSoftBreakNode {\n  return node.tag === \"soft_break\" || node.tag === \"softbreak\";\n}\n\nfunction isHardBreakNode(node: DjotNode): node is DjotHardBreakNode {\n  return node.tag === \"hard_break\" || node.tag === \"hardbreak\";\n}\n\nfunction pickComponent(\n  components: DjotComponents | undefined,\n  primary: ComponentKey,\n  alias?: ComponentKey\n): React.ElementType | undefined {\n  if (!components) {\n    return undefined;\n  }\n\n  return (components[primary] ?? (alias ? components[alias] : undefined)) as\n    | React.ElementType\n    | undefined;\n}\n\nfunction renderChildren(children: DjotNode[], components?: DjotComponents): React.ReactNode[] {\n  return children.map((child, index) =>\n    renderNode(child, {\n      components,\n      key: index\n    })\n  );\n}\n\nfunction toAltText(nodes: DjotNode[]): string {\n  let output = \"\";\n\n  for (const node of nodes) {\n    switch (node.tag) {\n      case \"str\":\n      case \"code\":\n      case \"code_block\":\n        output += node.text;\n        break;\n      case \"soft_break\":\n      case \"softbreak\":\n        output += \" \";\n        break;\n      case \"hard_break\":\n      case \"hardbreak\":\n        output += \"\\n\";\n        break;\n      default:\n        if (isParentNode(node)) {\n          output += toAltText(node.children);\n        }\n        break;\n    }\n  }\n\n  return output.trim();\n}\n\nfunction clampHeadingLevel(level: number): 1 | 2 | 3 | 4 | 5 | 6 {\n  if (level <= 1) {\n    return 1;\n  }\n\n  if (level >= 6) {\n    return 6;\n  }\n\n  return level as 1 | 2 | 3 | 4 | 5 | 6;\n}\n\nfunction withKey<T extends Record<string, unknown>>(props: T, key?: React.Key): T & { key?: React.Key } {\n  if (key === undefined) {\n    return props;\n  }\n\n  return {\n    ...props,\n    key\n  };\n}\n\nfunction renderWithOverride(\n  override: React.ElementType | undefined,\n  fallback: React.ElementType,\n  domProps: Record<string, unknown>,\n  customProps: Record<string, unknown>,\n  key?: React.Key,\n  children?: React.ReactNode\n): React.ReactNode {\n  const Component = override ?? fallback;\n  const props =\n    typeof Component === \"string\"\n      ? withKey(domProps, key)\n      : withKey(\n          {\n            ...domProps,\n            ...customProps\n          },\n          key\n        );\n\n  return createElement(Component, props, children);\n}\n\nfunction renderDoc(\n  node: DjotDocNode,\n  components: DjotComponents | undefined,\n  key?: React.Key\n): React.ReactNode {\n  const children = renderChildren(node.children, components);\n  const Component = pickComponent(components, \"doc\");\n\n  if (Component) {\n    if (typeof Component === \"string\") {\n      return createElement(Component, withKey({}, key), children);\n    }\n\n    return createElement(Component, withKey({ node }, key), children);\n  }\n\n  return createElement(Fragment, withKey({}, key), children);\n}\n\nfunction renderHeading(\n  node: DjotHeadingNode,\n  components: DjotComponents | undefined,\n  key?: React.Key\n): React.ReactNode {\n  const level = clampHeadingLevel(node.level);\n  const children = renderChildren(node.children, components);\n  return renderWithOverride(\n    pickComponent(components, \"heading\"),\n    `h${level}`,\n    {},\n    {\n      level,\n      node\n    },\n    key,\n    children\n  );\n}\n\nfunction renderCode(\n  node: DjotCodeNode,\n  components: DjotComponents | undefined,\n  key?: React.Key\n): React.ReactNode {\n  const value = node.text;\n  return renderWithOverride(\n    pickComponent(components, \"code\"),\n    \"code\",\n    {},\n    {\n      node,\n      value\n    },\n    key,\n    value\n  );\n}\n\nfunction renderCodeBlock(\n  node: DjotCodeBlockNode,\n  components: DjotComponents | undefined,\n  key?: React.Key\n): React.ReactNode {\n  const value = node.text;\n  const language = node.lang;\n  const fallbackChildren = createElement(\n    \"code\",\n    {\n      className: language ? `language-${language}` : undefined\n    },\n    value\n  );\n\n  return renderWithOverride(\n    pickComponent(components, \"code_block\"),\n    \"pre\",\n    {},\n    {\n      language,\n      node,\n      value\n    },\n    key,\n    fallbackChildren\n  );\n}\n\nfunction renderLink(\n  node: DjotLinkNode,\n  components: DjotComponents | undefined,\n  key?: React.Key\n): React.ReactNode {\n  const children = renderChildren(node.children, components);\n  const href = node.destination;\n  return renderWithOverride(\n    pickComponent(components, \"link\"),\n    \"a\",\n    {\n      href\n    },\n    {\n      node\n    },\n    key,\n    children\n  );\n}\n\nfunction renderImage(\n  node: DjotImageNode,\n  components: DjotComponents | undefined,\n  key?: React.Key\n): React.ReactNode {\n  const alt = toAltText(node.children) || undefined;\n  const src = node.destination;\n  return renderWithOverride(\n    pickComponent(components, \"image\"),\n    \"img\",\n    {\n      alt,\n      src\n    },\n    {\n      alt,\n      node\n    },\n    key\n  );\n}\n\nfunction renderOrderedList(\n  node: DjotOrderedListNode,\n  components: DjotComponents | undefined,\n  key?: React.Key\n): React.ReactNode {\n  const children = renderChildren(node.children, components);\n  return renderWithOverride(\n    pickComponent(components, \"ordered_list\"),\n    \"ol\",\n    {\n      start: node.start\n    },\n    {\n      node,\n      start: node.start\n    },\n    key,\n    children\n  );\n}\n\nfunction renderStr(\n  node: DjotStrNode,\n  components: DjotComponents | undefined,\n  key?: React.Key\n): React.ReactNode {\n  const value = node.text;\n  const Component = pickComponent(components, \"str\");\n\n  if (!Component) {\n    return value;\n  }\n\n  if (typeof Component === \"string\") {\n    return createElement(Component, withKey({}, key), value);\n  }\n\n  return createElement(\n    Component,\n    withKey(\n      {\n        node,\n        value\n      },\n      key\n    ),\n    value\n  );\n}\n\nfunction renderSoftBreak(\n  node: DjotSoftBreakNode,\n  components: DjotComponents | undefined,\n  key?: React.Key\n): React.ReactNode {\n  const Component = pickComponent(components, \"soft_break\", \"softbreak\");\n\n  if (!Component) {\n    return \"\\n\";\n  }\n\n  if (typeof Component === \"string\") {\n    return createElement(Component, withKey({}, key), \"\\n\");\n  }\n\n  return createElement(\n    Component,\n    withKey(\n      {\n        node\n      },\n      key\n    ),\n    \"\\n\"\n  );\n}\n\nfunction renderHardBreak(\n  node: DjotHardBreakNode,\n  components: DjotComponents | undefined,\n  key?: React.Key\n): React.ReactNode {\n  return renderWithOverride(\n    pickComponent(components, \"hard_break\", \"hardbreak\"),\n    \"br\",\n    {},\n    {\n      node\n    },\n    key\n  );\n}\n\nexport function renderNode(node: DjotNode, options: RenderNodeOptions = {}): React.ReactNode {\n  const { components, key } = options;\n  const children = isParentNode(node) ? renderChildren(node.children, components) : undefined;\n\n  switch (node.tag) {\n    case \"doc\":\n      return renderDoc(node, components, key);\n    case \"para\":\n      return renderWithOverride(\n        pickComponent(components, \"para\"),\n        \"p\",\n        {},\n        {\n          node\n        },\n        key,\n        children\n      );\n    case \"heading\":\n      return renderHeading(node, components, key);\n    case \"emph\":\n      return renderWithOverride(\n        pickComponent(components, \"emph\"),\n        \"em\",\n        {},\n        {\n          node\n        },\n        key,\n        children\n      );\n    case \"strong\":\n      return renderWithOverride(\n        pickComponent(components, \"strong\"),\n        \"strong\",\n        {},\n        {\n          node\n        },\n        key,\n        children\n      );\n    case \"code\":\n      return renderCode(node, components, key);\n    case \"code_block\":\n      return renderCodeBlock(node, components, key);\n    case \"link\":\n      return renderLink(node, components, key);\n    case \"image\":\n      return renderImage(node, components, key);\n    case \"bullet_list\":\n      return renderWithOverride(\n        pickComponent(components, \"bullet_list\"),\n        \"ul\",\n        {},\n        {\n          node\n        },\n        key,\n        children\n      );\n    case \"ordered_list\":\n      return renderOrderedList(node, components, key);\n    case \"list_item\":\n      return renderWithOverride(\n        pickComponent(components, \"list_item\"),\n        \"li\",\n        {},\n        {\n          node\n        },\n        key,\n        children\n      );\n    case \"blockquote\":\n      return renderWithOverride(\n        pickComponent(components, \"blockquote\"),\n        \"blockquote\",\n        {},\n        {\n          node\n        },\n        key,\n        children\n      );\n    case \"thematic_break\":\n      return renderWithOverride(\n        pickComponent(components, \"thematic_break\"),\n        \"hr\",\n        {},\n        {\n          node\n        },\n        key\n      );\n    case \"str\":\n      return renderStr(node, components, key);\n    default:\n      if (isSoftBreakNode(node)) {\n        return renderSoftBreak(node, components, key);\n      }\n\n      if (isHardBreakNode(node)) {\n        return renderHardBreak(node, components, key);\n      }\n\n      return null;\n  }\n}\n","import { parse } from \"@djot/djot\";\nimport { Fragment } from \"react\";\nimport type React from \"react\";\nimport { renderNode } from \"./renderNode\";\nimport type { DjotNode, DjotProps } from \"./types\";\n\nexport function Djot({ children, components }: DjotProps): React.ReactElement | null {\n  const source = children ?? \"\";\n\n  if (source.length === 0) {\n    return null;\n  }\n\n  const ast = parse(source) as DjotNode;\n  return <Fragment>{renderNode(ast, { components })}</Fragment>;\n}\n\nexport default Djot;\n"]}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@willwang-io/react-djot",
+  "version": "0.1.1",
+  "description": "Render Djot to React with a react-markdown style component override API.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint . --ext .ts,.tsx",
+    "format": "prettier . --write",
+    "format:check": "prettier . --check"
+  },
+  "peerDependencies": {
+    "@djot/djot": "^0.3.0",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@djot/djot": "^0.3.0",
+    "@types/node": "^24.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "prettier": "^3.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.2.0",
+    "typescript": "^5.6.0",
+    "vitest": "^2.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}