@discord/markdown-react 0.1.1

package/README.md

@@ -0,0 +1,36 @@
+# @discord/markdown-react
+
+## Prerequisites
+
+- Build WASM module
+
+## Build
+
+```
+pnpm build
+```
+
+## Usage
+
+```js
+import Markdown from '@discord/markdown-react';
+
+function Text({ children }) {
+  return <span>{children}</span>;
+}
+
+function Paragraph({ children }) {
+  return <span>{children}</span>;
+}
+
+const renderers = {
+  text: Text,
+  paragraph: Paragraph,
+  quote: Quote,
+  ...otherRenderers, // define renderers for other node types
+};
+
+export function MyMarkdown({ content }) {
+  return <Markdown content={content} renderers={renderers} />;
+}
+```

package/dist/src/index.js

@@ -0,0 +1 @@
+import{parse as e}from"@discord/markdown-wasm";import*as t from"react";import{memo as r,useMemo as n}from"react";function l(e,t){if(null==e)throw Error(`Attempted to render "${t}" but no renderer was provided`)}export const RULES=new Set(["bold","italic","underline","strikethrough","spoiler","emoji","timestamp","mention","link","code","code_block","heading","list","quote","small"]);export function Node({node:e,renderers:r}){let n=r[e.type];if(l(n,e.type),Array.isArray(e.value))return t.createElement(n,null,t.createElement(NodeList,{nodes:e.value,renderers:r}));switch(e.type){case"mention":case"timestamp":case"emoji":case"code_block":return t.createElement(n,e.value);case"link":let a=e.value,o=null;if("normal"===a.type){let{value:{text:e,url:n}}=a;o=e?t.createElement(NodeList,{nodes:e,renderers:r}):n}return t.createElement(n,e.value,o);case"quote":let s=r.paragraph;return l(s,"paragraph"),t.createElement(n,null,e.value.lines.map((e,n)=>t.createElement(s,{key:n,value:e,renderers:r},t.createElement(NodeList,{nodes:e,renderers:r}))));case"text":case"code":return t.createElement(n,null,e.value);case"heading":return t.createElement(n,{level:e.value.level},t.createElement(NodeList,{nodes:e.value.content,renderers:r}));case"list":let c=r.listItem??"li";return t.createElement(n,e.value,e.value.items.map((e,n)=>t.createElement(c,{key:n},t.createElement(NodeList,{nodes:e.content,renderers:r}))));case"empty":return t.createElement(n,null);case"small":return t.createElement(n,null,t.createElement(NodeList,{nodes:e.value.content,renderers:r}));default:throw TypeError(`Unknown node type "${e.type}"`)}}export const NodeList=r(function({nodes:e,renderers:r}){return t.createElement(t.Fragment,null,e.map((e,n)=>t.createElement(Node,{key:n,node:e,renderers:r})))});export default function a({content:r,renderers:l}){let a=n(()=>{let e=Object.keys(l).filter(e=>RULES.has(e));return e.length>0?e:null},[l]),o=n(()=>e(r,a),[r,a]);return t.createElement(NodeList,{nodes:o,renderers:l})}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@discord/markdown-react",
+  "version": "0.1.1",
+  "type": "module",
+  "description": "React library for parsing and rendering Discord Markdown",
+  "main": "dist/src/index.js",
+  "types": "src/index.d.ts",
+  "scripts": {
+    "test": "vitest run",
+    "build": "swc src/index.jsx -d dist"
+  },
+  "keywords": [],
+  "author": "Will Nelson",
+  "license": "MIT",
+  "files": [
+    "dist/src/index.js",
+    "src/index.d.ts"
+  ],
+  "dependencies": {
+    "@discord/markdown-wasm": "workspace:*",
+    "react": "^18.3.1"
+  },
+  "devDependencies": {
+    "@discord/markdown-types": "workspace:*",
+    "@swc/cli": "^0.5.2",
+    "@swc/core": "^1.10.1",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^18",
+    "jsdom": "^24.1.1",
+    "vite": "^5.4.0",
+    "vite-plugin-wasm": "^3.3.0",
+    "vitest": "^2.0.3"
+  }
+}

package/src/index.d.ts

@@ -0,0 +1,116 @@
+import React from "react";
+import {
+  Node,
+  AnyNode,
+  CodeBlock,
+  Emoji,
+  Timestamp,
+  Mention,
+  Link,
+  List,
+} from "@discord/markdown-types";
+
+type NodeRenderProps<P = {}> = React.PropsWithChildren<P>;
+
+// inline
+export type BoldProps = NodeRenderProps;
+export type ItalicProps = NodeRenderProps;
+export type UnderlineProps = NodeRenderProps;
+export type StrikethroughProps = NodeRenderProps;
+export type SpoilerProps = NodeRenderProps;
+export type EmojiProps = Emoji["value"];
+export type TimestampProps = Timestamp["value"];
+export type MentionProps = Mention["value"];
+export type LinkProps = NodeRenderProps<Link["value"]>;
+export type CodeProps = NodeRenderProps;
+export type CodeBlockProps = CodeBlock["value"];
+
+export type InlineProps =
+  | BoldProps
+  | ItalicProps
+  | UnderlineProps
+  | StrikethroughProps
+  | SpoilerProps
+  | EmojiProps
+  | TimestampProps
+  | MentionProps
+  | LinkProps
+  | CodeProps
+  | CodeBlockProps;
+
+// block
+export type HeadingProps = NodeRenderProps<{ level: 1 | 2 | 3 }>;
+export type ListProps = NodeRenderProps<List["value"]>;
+export type QuoteProps = NodeRenderProps;
+export type SmallProps = NodeRenderProps;
+
+export type BlockProps = HeadingProps | ListProps | QuoteProps | SmallProps;
+
+// top-level
+export type TextProps = NodeRenderProps;
+export type ParagraphProps = NodeRenderProps;
+export type EmptyProps = {};
+export type ListItemProps = NodeRenderProps;
+
+export type TopLevelProps =
+  | TextProps
+  | ParagraphProps
+  | EmptyProps
+  | ListItemProps;
+
+export type AllProps = InlineProps | BlockProps | TopLevelProps;
+
+export type RendererProps = {
+  // inline
+  bold: BoldProps;
+  italic: ItalicProps;
+  underline: UnderlineProps;
+  strikethrough: StrikethroughProps;
+  spoiler: SpoilerProps;
+  emoji: EmojiProps;
+  timestamp: TimestampProps;
+  mention: MentionProps;
+  link: LinkProps;
+  code: CodeProps;
+  code_block: CodeBlockProps;
+
+  // block
+  heading: HeadingProps;
+  list: ListProps;
+  quote: QuoteProps;
+  small: SmallProps;
+
+  // top-level
+  text: TextProps;
+  paragraph: ParagraphProps;
+  empty: EmptyProps;
+
+  // pseudo
+  listItem: ListItemProps;
+};
+
+export type Renderers = {
+  readonly [K in keyof RendererProps]?: React.FC<RendererProps[K]>;
+};
+
+export type NodeProps = {
+  node: AnyNode;
+  renderers: Renderers;
+};
+
+export type NodeListProps = {
+  nodes: AnyNode[];
+  renderers: Renderers;
+};
+
+export type MarkdownProps = {
+  content: string;
+  renderers: Renderers;
+};
+
+export const INLINE_RULES: string[];
+export const BLOCK_RULES: string[];
+
+export function Node(props: NodeProps): React.ReactNode;
+export function NodeList(props: NodeListProps): React.ReactNode;
+export default function Markdown(props: MarkdownProps): React.ReactNode;