@discord/markdown-react 0.1.2 → 0.1.4

package/dist/src/index.js

@@ -1 +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})}
+import{jsx as e,Fragment as r}from"react/jsx-runtime";import{parse as t}from"@discord/markdown-wasm";import{useMemo as n,createContext as l,useContext as o}from"react";let i=l(null);export function useAst(){return o(i)}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:r,renderers:t,...n}){let l=t[r.type];if(!function(e,r){if(null==e)throw Error(`Attempted to render "${r}" but no renderer was provided`)}(l,r.type),Array.isArray(r.value))return e(l,{...n,children:e(NodeList,{nodes:r.value,renderers:t})});switch(r.type){case"mention":case"timestamp":case"emoji":case"code_block":return e(l,{...r.value,...n});case"link":let o=r.value,i=null;if("normal"===o.type){let{value:{text:r,url:n}}=o;i=r?e(NodeList,{nodes:r,renderers:t}):n}return e(l,{...r.value,...n,children:i});case"text":case"code":return e(l,{...n,children:r.value});case"heading":return e(l,{level:r.value.level,...n,children:e(NodeList,{nodes:r.value.content,renderers:t})});case"list":let s=t.listItem??"li";return e(l,{...r.value,...n,children:r.value.items.map((n,l)=>e(s,{siblings:r.value.items,index:l,children:e(NodeList,{nodes:n.content,renderers:t})},l))});case"empty":return e(l,{...n});case"small":return e(l,{...n,children:e(NodeList,{nodes:r.value.content,renderers:t})});default:throw TypeError(`Unknown node type "${r.type}"`)}}export function NodeList({nodes:t,renderers:n}){return e(r,{children:t.map((r,l)=>e(Node,{node:r,renderers:n,siblings:t,index:l},l))})}export default function s({content:r,renderers:l}){let o=n(()=>{let e=Object.keys(l).filter(e=>RULES.has(e));return e.length>0?e:null},[l]),s=n(()=>t(r,o),[r,o]);return e(i.Provider,{value:s,children:e(NodeList,{nodes:s,renderers:l})})}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@discord/markdown-react",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "description": "React library for parsing and rendering Discord Markdown",
   "main": "dist/src/index.js",
@@ -13,8 +13,7 @@
     "src/index.d.ts"
   ],
   "dependencies": {
-    "react": "^18.3.1",
-    "@discord/markdown-wasm": "0.1.2"
+    "@discord/markdown-wasm": "0.1.4"
   },
   "devDependencies": {
     "@swc/cli": "^0.5.2",
@@ -23,13 +22,17 @@
     "@testing-library/react": "^16.0.0",
     "@types/react": "^18",
     "jsdom": "^24.1.1",
+    "react": "^18.3.1",
     "vite": "^5.4.0",
     "vite-plugin-wasm": "^3.3.0",
     "vitest": "^2.0.3",
-    "@discord/markdown-types": "0.1.1"
+    "@discord/markdown-types": "0.1.3"
+  },
+  "peerDependencies": {
+    "react": "17 - 19"
   },
   "scripts": {
-    "test": "vitest run",
+    "test": "pnpm build && vitest run",
     "build": "swc src/index.jsx -d dist"
   }
 }

package/src/index.d.ts

@@ -8,22 +8,27 @@ import {
   Mention,
   Link,
   List,
+  Block,
+  Node,
 } from "@discord/markdown-types";
 
-type NodeRenderProps<P = {}> = React.PropsWithChildren<P>;
+type NodeRenderProps<P> = P & { siblings: Node[]; index: number };
+type NodeRenderPropsWithChildren<P = {}> = React.PropsWithChildren<
+  NodeRenderProps<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 BoldProps = NodeRenderPropsWithChildren;
+export type ItalicProps = NodeRenderPropsWithChildren;
+export type UnderlineProps = NodeRenderPropsWithChildren;
+export type StrikethroughProps = NodeRenderPropsWithChildren;
+export type SpoilerProps = NodeRenderPropsWithChildren;
+export type EmojiProps = NodeRenderProps<Emoji["value"]>;
+export type TimestampProps = NodeRenderProps<Timestamp["value"]>;
+export type MentionProps = NodeRenderProps<Mention["value"]>;
+export type LinkProps = NodeRenderPropsWithChildren<Link["value"]>;
+export type CodeProps = NodeRenderPropsWithChildren;
+export type CodeBlockProps = NodeRenderProps<CodeBlock["value"]>;
 
 export type InlineProps =
   | BoldProps
@@ -39,18 +44,18 @@ export type InlineProps =
   | 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 HeadingProps = NodeRenderPropsWithChildren<{ level: 1 | 2 | 3 }>;
+export type ListProps = NodeRenderPropsWithChildren<List["value"]>;
+export type QuoteProps = NodeRenderPropsWithChildren;
+export type SmallProps = NodeRenderPropsWithChildren;
 
 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 TextProps = NodeRenderPropsWithChildren;
+export type ParagraphProps = NodeRenderPropsWithChildren;
+export type EmptyProps = NodeRenderProps;
+export type ListItemProps = NodeRenderPropsWithChildren;
 
 export type TopLevelProps =
   | TextProps
@@ -108,9 +113,9 @@ export type MarkdownProps = {
   renderers: Renderers;
 };
 
-export const INLINE_RULES: string[];
-export const BLOCK_RULES: string[];
+export const RULES: Set<string>;
 
+export function useAst(): Block[];
 export function Node(props: NodeProps): React.ReactNode;
 export function NodeList(props: NodeListProps): React.ReactNode;
 export default function Markdown(props: MarkdownProps): React.ReactNode;