streamdown 0.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +144 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +1 -1
- package/package.json +3 -2
package/README.md
ADDED
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
# Streamdown
|
|
2
|
+
|
|
3
|
+
A drop-in replacement for react-markdown, designed for AI-powered streaming.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/streamdown)
|
|
6
|
+
|
|
7
|
+
## Overview
|
|
8
|
+
|
|
9
|
+
Formatting Markdown is easy, but when you tokenize and stream it, new challenges arise. Streamdown is built specifically to handle the unique requirements of streaming Markdown content from AI models, providing seamless formatting even with incomplete or unterminated Markdown blocks.
|
|
10
|
+
|
|
11
|
+
Streamdown powers the [AI Elements Response](https://ai-sdk.dev/elements/components/response) component but can be installed as a standalone package for your own streaming needs.
|
|
12
|
+
|
|
13
|
+
## Features
|
|
14
|
+
|
|
15
|
+
- 🚀 **Drop-in replacement** for `react-markdown`
|
|
16
|
+
- 🔄 **Streaming-optimized** - Handles incomplete Markdown gracefully
|
|
17
|
+
- 🎨 **Unterminated block parsing** - Styles incomplete bold, italic, code, links, and headings
|
|
18
|
+
- 📊 **GitHub Flavored Markdown** - Tables, task lists, and strikethrough support
|
|
19
|
+
- 🔢 **Math rendering** - LaTeX equations via KaTeX
|
|
20
|
+
- 🎯 **Code syntax highlighting** - Beautiful code blocks with Shiki
|
|
21
|
+
- 🛡️ **Security-first** - Built on harden-react-markdown for safe rendering
|
|
22
|
+
- ⚡ **Performance optimized** - Memoized rendering for efficient updates
|
|
23
|
+
|
|
24
|
+
## Installation
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
npm i streamdown
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Then, update your Tailwind `globals.css` to include the following:
|
|
31
|
+
|
|
32
|
+
```css
|
|
33
|
+
@source "../node_modules/streamdown/dist/index.js";
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
This will ensure that the Streamdown styles are applied to your project.
|
|
37
|
+
|
|
38
|
+
## Usage
|
|
39
|
+
|
|
40
|
+
### Basic Example
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
import { Streamdown } from 'streamdown';
|
|
44
|
+
|
|
45
|
+
export default function Page() {
|
|
46
|
+
const markdown = "# Hello World\n\nThis is **streaming** markdown!";
|
|
47
|
+
|
|
48
|
+
return <Streamdown>{markdown}</Streamdown>;
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### With AI SDK
|
|
53
|
+
|
|
54
|
+
```tsx
|
|
55
|
+
'use client';
|
|
56
|
+
|
|
57
|
+
import { useChat } from '@ai-sdk/react';
|
|
58
|
+
import { useState } from 'react';
|
|
59
|
+
import { Streamdown } from 'streamdown';
|
|
60
|
+
|
|
61
|
+
export default function Page() {
|
|
62
|
+
const { messages, sendMessage, status } = useChat();
|
|
63
|
+
const [input, setInput] = useState('');
|
|
64
|
+
|
|
65
|
+
return (
|
|
66
|
+
<>
|
|
67
|
+
{messages.map(message => (
|
|
68
|
+
<div key={message.id}>
|
|
69
|
+
{message.parts.filter(part => part.type === 'text').map((part, index) => (
|
|
70
|
+
<Streamdown key={index}>{part.text}</Streamdown>
|
|
71
|
+
))}
|
|
72
|
+
</div>
|
|
73
|
+
))}
|
|
74
|
+
|
|
75
|
+
<form
|
|
76
|
+
onSubmit={e => {
|
|
77
|
+
e.preventDefault();
|
|
78
|
+
if (input.trim()) {
|
|
79
|
+
sendMessage({ text: input });
|
|
80
|
+
setInput('');
|
|
81
|
+
}
|
|
82
|
+
}}
|
|
83
|
+
>
|
|
84
|
+
<input
|
|
85
|
+
value={input}
|
|
86
|
+
onChange={e => setInput(e.target.value)}
|
|
87
|
+
disabled={status !== 'ready'}
|
|
88
|
+
placeholder="Say something..."
|
|
89
|
+
/>
|
|
90
|
+
<button type="submit" disabled={status !== 'ready'}>
|
|
91
|
+
Submit
|
|
92
|
+
</button>
|
|
93
|
+
</form>
|
|
94
|
+
</>
|
|
95
|
+
);
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## Props
|
|
100
|
+
|
|
101
|
+
Streamdown accepts all the same props as react-markdown, plus additional streaming-specific options:
|
|
102
|
+
|
|
103
|
+
| Prop | Type | Default | Description |
|
|
104
|
+
|------|------|---------|-------------|
|
|
105
|
+
| `children` | `string` | - | The Markdown content to render |
|
|
106
|
+
| `parseIncompleteMarkdown` | `boolean` | `true` | Parse and style unterminated Markdown blocks |
|
|
107
|
+
| `className` | `string` | - | CSS class for the container |
|
|
108
|
+
| `components` | `object` | - | Custom component overrides |
|
|
109
|
+
| `remarkPlugins` | `array` | `[remarkGfm, remarkMath]` | Remark plugins to use |
|
|
110
|
+
| `rehypePlugins` | `array` | `[rehypeKatex]` | Rehype plugins to use |
|
|
111
|
+
| `allowedImagePrefixes` | `array` | `['*']` | Allowed image URL prefixes |
|
|
112
|
+
| `allowedLinkPrefixes` | `array` | `['*']` | Allowed link URL prefixes |
|
|
113
|
+
|
|
114
|
+
## Architecture
|
|
115
|
+
|
|
116
|
+
Streamdown is built as a monorepo with:
|
|
117
|
+
|
|
118
|
+
- **`packages/streamdown`** - The core React component library
|
|
119
|
+
- **`apps/website`** - Documentation and demo site
|
|
120
|
+
|
|
121
|
+
## Development
|
|
122
|
+
|
|
123
|
+
```bash
|
|
124
|
+
# Install dependencies
|
|
125
|
+
pnpm install
|
|
126
|
+
|
|
127
|
+
# Run development server
|
|
128
|
+
pnpm dev
|
|
129
|
+
|
|
130
|
+
# Run tests
|
|
131
|
+
pnpm test
|
|
132
|
+
|
|
133
|
+
# Build packages
|
|
134
|
+
pnpm build
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
## Requirements
|
|
138
|
+
|
|
139
|
+
- Node.js >= 18
|
|
140
|
+
- React >= 19.1.1
|
|
141
|
+
|
|
142
|
+
## Contributing
|
|
143
|
+
|
|
144
|
+
Contributions are welcome! Please feel free to submit a Pull Request.
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";"use client";var F=Object.create;var h=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames,C=Object.getOwnPropertySymbols,W=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty,v=Object.prototype.propertyIsEnumerable;var $=(t,e,o)=>e in t?h(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,a=(t,e)=>{for(var o in e||(e={}))N.call(e,o)&&$(t,o,e[o]);if(C)for(var o of C(e))v.call(e,o)&&$(t,o,e[o]);return t};var i=(t,e)=>{var o={};for(var n in t)N.call(t,n)&&e.indexOf(n)<0&&(o[n]=t[n]);if(t!=null&&C)for(var n of C(t))e.indexOf(n)<0&&v.call(t,n)&&(o[n]=t[n]);return o};var X=(t,e)=>{for(var o in e)h(t,o,{get:e[o],enumerable:!0})},w=(t,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of Q(e))!N.call(t,s)&&s!==o&&h(t,s,{get:()=>e[s],enumerable:!(n=J(e,s))||n.enumerable});return t};var f=(t,e,o)=>(o=t!=null?F(W(t)):{},w(e||!t||!t.__esModule?h(o,"default",{value:t,enumerable:!0}):o,t)),Y=t=>w(h({},"__esModule",{value:!0}),t);var Nt={};X(Nt,{Streamdown:()=>z});module.exports=Y(Nt);var p=require("react"),O=f(require("react-markdown"),1),q=f(require("rehype-katex"),1),R=f(require("remark-gfm"),1),V=f(require("remark-math"),1),Ut=require("katex/dist/katex.min.css"),j=f(require("harden-react-markdown"),1);var K=require("react");var M=require("lucide-react"),d=require("react"),_=require("shiki");var P=require("clsx"),T=require("tailwind-merge"),c=(...t)=>(0,T.twMerge)((0,P.clsx)(t));var S=(0,d.createContext)({code:""});async function Z(t,e){return await(0,_.codeToHtml)(t,{lang:e,theme:"github-light"})}var A=r=>{var l=r,{code:t,language:e,className:o,children:n}=l,s=i(l,["code","language","className","children"]);let[m,g]=(0,d.useState)("");return(0,d.useEffect)(()=>{let u=!0;return Z(t,e).then(b=>{u&&g(b)}),()=>{u=!1}},[t,e]),React.createElement(S.Provider,{value:{code:t}},React.createElement("div",{className:"group relative"},React.createElement("div",a({className:c("overflow-x-auto",o),dangerouslySetInnerHTML:{__html:m}},s)),n))},H=l=>{var m=l,{onCopy:t,onError:e,timeout:o=2e3,children:n,className:s}=m,r=i(m,["onCopy","onError","timeout","children","className"]);let[g,u]=(0,d.useState)(!1),{code:b}=(0,d.useContext)(S),k=async()=>{var y;if(typeof window=="undefined"||!((y=navigator==null?void 0:navigator.clipboard)!=null&&y.writeText)){e==null||e(new Error("Clipboard API not available"));return}try{await navigator.clipboard.writeText(b),u(!0),t==null||t(),setTimeout(()=>u(!1),o)}catch(I){e==null||e(I)}},B=g?M.CheckIcon:M.CopyIcon;return React.createElement("button",a({className:c("absolute top-2 right-2 shrink-0 rounded-md p-3 opacity-0 transition-all","hover:bg-secondary group-hover:opacity-100",s),onClick:k,type:"button"},r),n!=null?n:React.createElement(B,{size:14}))};var L={ol:s=>{var r=s,{node:t,children:e,className:o}=r,n=i(r,["node","children","className"]);return React.createElement("ol",a({className:c("ml-4 list-outside list-decimal",o)},n),e)},li:s=>{var r=s,{node:t,children:e,className:o}=r,n=i(r,["node","children","className"]);return React.createElement("li",a({className:c("py-1",o)},n),e)},ul:s=>{var r=s,{node:t,children:e,className:o}=r,n=i(r,["node","children","className"]);return React.createElement("ul",a({className:c("ml-4 list-outside list-disc",o)},n),e)},hr:n=>{var s=n,{node:t,className:e}=s,o=i(s,["node","className"]);return React.createElement("hr",a({className:c("my-6 border-border",e)},o))},strong:s=>{var r=s,{node:t,children:e,className:o}=r,n=i(r,["node","children","className"]);return React.createElement("span",a({className:c("font-semibold",o)},n),e)},a:r=>{var l=r,{node:t,children:e,className:o,href:n}=l,s=i(l,["node","children","className","href"]);return React.createElement("a",a({className:c("font-medium text-primary underline",o),href:n,rel:"noreferrer",target:"_blank"},s),e)},h1:s=>{var r=s,{node:t,children:e,className:o}=r,n=i(r,["node","children","className"]);return React.createElement("h1",a({className:c("mt-6 mb-2 font-semibold text-3xl",o)},n),e)},h2:s=>{var r=s,{node:t,children:e,className:o}=r,n=i(r,["node","children","className"]);return React.createElement("h2",a({className:c("mt-6 mb-2 font-semibold text-2xl",o)},n),e)},h3:s=>{var r=s,{node:t,children:e,className:o}=r,n=i(r,["node","children","className"]);return React.createElement("h3",a({className:c("mt-6 mb-2 font-semibold text-xl",o)},n),e)},h4:s=>{var r=s,{node:t,children:e,className:o}=r,n=i(r,["node","children","className"]);return React.createElement("h4",a({className:c("mt-6 mb-2 font-semibold text-lg",o)},n),e)},h5:s=>{var r=s,{node:t,children:e,className:o}=r,n=i(r,["node","children","className"]);return React.createElement("h5",a({className:c("mt-6 mb-2 font-semibold text-base",o)},n),e)},h6:s=>{var r=s,{node:t,children:e,className:o}=r,n=i(r,["node","children","className"]);return React.createElement("h6",a({className:c("mt-6 mb-2 font-semibold text-sm",o)},n),e)},table:s=>{var r=s,{node:t,children:e,className:o}=r,n=i(r,["node","children","className"]);return React.createElement("div",{className:"my-4 overflow-x-auto"},React.createElement("table",a({className:c("w-full border-collapse border border-border",o)},n),e))},thead:s=>{var r=s,{node:t,children:e,className:o}=r,n=i(r,["node","children","className"]);return React.createElement("thead",a({className:c("bg-muted/50",o)},n),e)},tbody:s=>{var r=s,{node:t,children:e,className:o}=r,n=i(r,["node","children","className"]);return React.createElement("tbody",a({className:c("divide-y divide-border",o)},n),e)},tr:s=>{var r=s,{node:t,children:e,className:o}=r,n=i(r,["node","children","className"]);return React.createElement("tr",a({className:c("border-border border-b",o)},n),e)},th:s=>{var r=s,{node:t,children:e,className:o}=r,n=i(r,["node","children","className"]);return React.createElement("th",a({className:c("px-4 py-2 text-left font-semibold text-sm",o)},n),e)},td:s=>{var r=s,{node:t,children:e,className:o}=r,n=i(r,["node","children","className"]);return React.createElement("td",a({className:c("px-4 py-2 text-sm",o)},n),e)},blockquote:s=>{var r=s,{node:t,children:e,className:o}=r,n=i(r,["node","children","className"]);return React.createElement("blockquote",a({className:c("my-4 border-muted-foreground/30 border-l-4 pl-4 text-muted-foreground italic",o)},n),e)},code:n=>{var s=n,{node:t,className:e}=s,o=i(s,["node","className"]);var l,m;return((l=t==null?void 0:t.position)==null?void 0:l.start.line)===((m=t==null?void 0:t.position)==null?void 0:m.end.line)?React.createElement("code",a({className:c("rounded bg-muted px-1.5 py-0.5 font-mono text-sm",e)},o)):React.createElement("code",a({className:e},o))},pre:({node:t,className:e,children:o})=>{var r;let n="javascript";typeof((r=t==null?void 0:t.properties)==null?void 0:r.className)=="string"&&(n=t.properties.className.replace("language-",""));let s="";return(0,K.isValidElement)(o)&&o.props&&typeof o.props=="object"&&"children"in o.props&&typeof o.props.children=="string"?s=o.props.children:typeof o=="string"&&(s=o),React.createElement(A,{className:c("my-4 h-auto rounded-lg border p-4",e),code:s,language:n},React.createElement(H,null))},sup:s=>{var r=s,{node:t,children:e,className:o}=r,n=i(r,["node","children","className"]);return React.createElement("sup",a({className:c("text-sm",o)},n),e)},sub:s=>{var r=s,{node:t,children:e,className:o}=r,n=i(r,["node","children","className"]);return React.createElement("sub",a({className:c("text-sm",o)},n),e)}};var U=require("marked"),x=t=>U.marked.lexer(t).map(o=>o.raw);var E=/(!?\[)([^\]]*?)$/,tt=/(\*\*)([^*]*?)$/,et=/(__)([^_]*?)$/,ot=/(\*)([^*]*?)$/,nt=/(_)([^_]*?)$/,rt=/(`)([^`]*?)$/,st=/(~~)([^~]*?)$/,at=/(\$)([^$]*?)$/,it=/(\$\$)([^$]*?)$/,ct=t=>{let e=t.match(E);if(e){let o=t.lastIndexOf(e[1]);return t.substring(0,o)}return t},lt=t=>t.match(tt)&&(t.match(/\*\*/g)||[]).length%2===1?`${t}**`:t,mt=t=>t.match(et)&&(t.match(/__/g)||[]).length%2===1?`${t}__`:t,dt=t=>t.split("").reduce((e,o,n)=>{if(o==="*"){let s=t[n-1],r=t[n+1];if(s==="\\")return e;if(s!=="*"&&r!=="*")return e+1}return e},0),pt=t=>t.match(ot)&&dt(t)%2===1?`${t}*`:t,ut=t=>t.split("").reduce((e,o,n)=>{if(o==="_"){let s=t[n-1],r=t[n+1];if(s==="\\")return e;if(s!=="_"&&r!=="_")return e+1}return e},0),gt=t=>t.match(nt)&&ut(t)%2===1?`${t}_`:t,ht=(t,e)=>{let o=t.substring(e,e+3)==="```",n=e>0&&t.substring(e-1,e+2)==="```",s=e>1&&t.substring(e-2,e+1)==="```";return o||n||s},ft=t=>{let e=0;for(let o=0;o<t.length;o++)t[o]==="`"&&!ht(t,o)&&e++;return e},bt=t=>{let e=(t.match(/```/g)||[]).length,o=e%2===1;return e>0&&e%2===0?t:t.match(rt)&&!o&&ft(t)%2===1?`${t}\``:t},kt=t=>t.match(st)&&(t.match(/~~/g)||[]).length%2===1?`${t}~~`:t,yt=t=>t.split("").reduce((e,o,n)=>{if(o==="$"){let s=t[n-1],r=t[n+1];if(s==="\\")return e;if(s!=="$"&&r!=="$")return e+1}return e},0),Ct=t=>t.match(it)&&(t.match(/\$\$/g)||[]).length%2===1?`${t}$$`:t,Mt=t=>t.match(at)&&yt(t)%2===1?`${t}$`:t,D=t=>{if(!t||typeof t!="string")return t;let e=t;return e=ct(e),e=lt(e),e=mt(e),e=pt(e),e=gt(e),e=bt(e),e=kt(e),e=Ct(e),e=Mt(e),e};var Bt=(0,j.default)(O.default),It=(0,p.memo)(n=>{var s=n,{content:t,shouldParseIncompleteMarkdown:e}=s,o=i(s,["content","shouldParseIncompleteMarkdown"]);let r=(0,p.useMemo)(()=>typeof t=="string"&&e?D(t.trim()):t,[t,e]);return React.createElement(Bt,a({},o),r)},(t,e)=>t.content===e.content),z=(0,p.memo)(b=>{var k=b,{children:t,allowedImagePrefixes:e,allowedLinkPrefixes:o,defaultOrigin:n,parseIncompleteMarkdown:s=!0,components:r,rehypePlugins:l,remarkPlugins:m,className:g}=k,u=i(k,["children","allowedImagePrefixes","allowedLinkPrefixes","defaultOrigin","parseIncompleteMarkdown","components","rehypePlugins","remarkPlugins","className"]);let B=(0,p.useId)(),y=(0,p.useMemo)(()=>x(typeof t=="string"?t:""),[t]);return React.createElement("div",a({className:c("space-y-4",g)},u),y.map((I,G)=>React.createElement(It,{allowedImagePrefixes:e!=null?e:["*"],allowedLinkPrefixes:o!=null?o:["*"],components:a(a({},L),r),content:I,defaultOrigin:n,key:`${B}-block_${G}`,rehypePlugins:[q.default,...l!=null?l:[]],remarkPlugins:[R.default,V.default,...m!=null?m:[]],shouldParseIncompleteMarkdown:s})))},(t,e)=>t.children===e.children);z.displayName="Streamdown";0&&(module.exports={Streamdown});
|
|
1
|
+
"use strict";"use client";var x=Object.create;var f=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var G=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var J=(t,e)=>{for(var o in e)f(t,o,{get:e[o],enumerable:!0})},B=(t,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of z(e))!F.call(t,r)&&r!==o&&f(t,r,{get:()=>e[r],enumerable:!(n=V(e,r))||n.enumerable});return t};var g=(t,e,o)=>(o=t!=null?x(G(t)):{},B(e||!t||!t.__esModule?f(o,"default",{value:t,enumerable:!0}):o,t)),Q=t=>B(f({},"__esModule",{value:!0}),t);var Ct={};J(Ct,{Streamdown:()=>q});module.exports=Q(Ct);var d=require("react"),K=g(require("react-markdown"),1),L=g(require("rehype-katex"),1),U=g(require("remark-gfm"),1),D=g(require("remark-math"),1),_t=require("katex/dist/katex.min.css"),O=g(require("harden-react-markdown"),1);var T=require("react");var b=require("lucide-react"),l=require("react"),$=require("shiki");var I=require("clsx"),N=require("tailwind-merge"),s=(...t)=>(0,N.twMerge)((0,I.clsx)(t));var p=require("react/jsx-runtime"),v=(0,l.createContext)({code:""});async function W(t,e){return await(0,$.codeToHtml)(t,{lang:e,theme:"github-light"})}var w=({code:t,language:e,className:o,children:n,...r})=>{let[i,m]=(0,l.useState)("");return(0,l.useEffect)(()=>{let c=!0;return W(t,e).then(u=>{c&&m(u)}),()=>{c=!1}},[t,e]),(0,p.jsx)(v.Provider,{value:{code:t},children:(0,p.jsxs)("div",{className:"group relative",children:[(0,p.jsx)("div",{className:s("overflow-x-auto",o),dangerouslySetInnerHTML:{__html:i},...r}),n]})})},P=({onCopy:t,onError:e,timeout:o=2e3,children:n,className:r,...i})=>{let[m,c]=(0,l.useState)(!1),{code:u}=(0,l.useContext)(v),y=async()=>{var h;if(typeof window=="undefined"||!((h=navigator==null?void 0:navigator.clipboard)!=null&&h.writeText)){e==null||e(new Error("Clipboard API not available"));return}try{await navigator.clipboard.writeText(u),c(!0),t==null||t(),setTimeout(()=>c(!1),o)}catch(M){e==null||e(M)}},C=m?b.CheckIcon:b.CopyIcon;return(0,p.jsx)("button",{className:s("absolute top-2 right-2 shrink-0 rounded-md p-3 opacity-0 transition-all","hover:bg-secondary group-hover:opacity-100",r),onClick:y,type:"button",...i,children:n!=null?n:(0,p.jsx)(C,{size:14})})};var a=require("react/jsx-runtime"),_={ol:({node:t,children:e,className:o,...n})=>(0,a.jsx)("ol",{className:s("ml-4 list-outside list-decimal",o),...n,children:e}),li:({node:t,children:e,className:o,...n})=>(0,a.jsx)("li",{className:s("py-1",o),...n,children:e}),ul:({node:t,children:e,className:o,...n})=>(0,a.jsx)("ul",{className:s("ml-4 list-outside list-disc",o),...n,children:e}),hr:({node:t,className:e,...o})=>(0,a.jsx)("hr",{className:s("my-6 border-border",e),...o}),strong:({node:t,children:e,className:o,...n})=>(0,a.jsx)("span",{className:s("font-semibold",o),...n,children:e}),a:({node:t,children:e,className:o,href:n,...r})=>(0,a.jsx)("a",{className:s("font-medium text-primary underline",o),href:n,rel:"noreferrer",target:"_blank",...r,children:e}),h1:({node:t,children:e,className:o,...n})=>(0,a.jsx)("h1",{className:s("mt-6 mb-2 font-semibold text-3xl",o),...n,children:e}),h2:({node:t,children:e,className:o,...n})=>(0,a.jsx)("h2",{className:s("mt-6 mb-2 font-semibold text-2xl",o),...n,children:e}),h3:({node:t,children:e,className:o,...n})=>(0,a.jsx)("h3",{className:s("mt-6 mb-2 font-semibold text-xl",o),...n,children:e}),h4:({node:t,children:e,className:o,...n})=>(0,a.jsx)("h4",{className:s("mt-6 mb-2 font-semibold text-lg",o),...n,children:e}),h5:({node:t,children:e,className:o,...n})=>(0,a.jsx)("h5",{className:s("mt-6 mb-2 font-semibold text-base",o),...n,children:e}),h6:({node:t,children:e,className:o,...n})=>(0,a.jsx)("h6",{className:s("mt-6 mb-2 font-semibold text-sm",o),...n,children:e}),table:({node:t,children:e,className:o,...n})=>(0,a.jsx)("div",{className:"my-4 overflow-x-auto",children:(0,a.jsx)("table",{className:s("w-full border-collapse border border-border",o),...n,children:e})}),thead:({node:t,children:e,className:o,...n})=>(0,a.jsx)("thead",{className:s("bg-muted/50",o),...n,children:e}),tbody:({node:t,children:e,className:o,...n})=>(0,a.jsx)("tbody",{className:s("divide-y divide-border",o),...n,children:e}),tr:({node:t,children:e,className:o,...n})=>(0,a.jsx)("tr",{className:s("border-border border-b",o),...n,children:e}),th:({node:t,children:e,className:o,...n})=>(0,a.jsx)("th",{className:s("px-4 py-2 text-left font-semibold text-sm",o),...n,children:e}),td:({node:t,children:e,className:o,...n})=>(0,a.jsx)("td",{className:s("px-4 py-2 text-sm",o),...n,children:e}),blockquote:({node:t,children:e,className:o,...n})=>(0,a.jsx)("blockquote",{className:s("my-4 border-muted-foreground/30 border-l-4 pl-4 text-muted-foreground italic",o),...n,children:e}),code:({node:t,className:e,...o})=>{var r,i;return((r=t==null?void 0:t.position)==null?void 0:r.start.line)===((i=t==null?void 0:t.position)==null?void 0:i.end.line)?(0,a.jsx)("code",{className:s("rounded bg-muted px-1.5 py-0.5 font-mono text-sm",e),...o}):(0,a.jsx)("code",{className:e,...o})},pre:({node:t,className:e,children:o})=>{var i;let n="javascript";typeof((i=t==null?void 0:t.properties)==null?void 0:i.className)=="string"&&(n=t.properties.className.replace("language-",""));let r="";return(0,T.isValidElement)(o)&&o.props&&typeof o.props=="object"&&"children"in o.props&&typeof o.props.children=="string"?r=o.props.children:typeof o=="string"&&(r=o),(0,a.jsx)(w,{className:s("my-4 h-auto rounded-lg border p-4",e),code:r,language:n,children:(0,a.jsx)(P,{})})},sup:({node:t,children:e,className:o,...n})=>(0,a.jsx)("sup",{className:s("text-sm",o),...n,children:e}),sub:({node:t,children:e,className:o,...n})=>(0,a.jsx)("sub",{className:s("text-sm",o),...n,children:e})};var S=require("marked"),A=t=>S.marked.lexer(t).map(o=>o.raw);var X=/(!?\[)([^\]]*?)$/,Y=/(\*\*)([^*]*?)$/,Z=/(__)([^_]*?)$/,j=/(\*)([^*]*?)$/,E=/(_)([^_]*?)$/,tt=/(`)([^`]*?)$/,et=/(~~)([^~]*?)$/,ot=/(\$)([^$]*?)$/,nt=/(\$\$)([^$]*?)$/,rt=t=>{let e=t.match(X);if(e){let o=t.lastIndexOf(e[1]);return t.substring(0,o)}return t},st=t=>t.match(Y)&&(t.match(/\*\*/g)||[]).length%2===1?`${t}**`:t,at=t=>t.match(Z)&&(t.match(/__/g)||[]).length%2===1?`${t}__`:t,it=t=>t.split("").reduce((e,o,n)=>{if(o==="*"){let r=t[n-1],i=t[n+1];if(r==="\\")return e;if(r!=="*"&&i!=="*")return e+1}return e},0),ct=t=>t.match(j)&&it(t)%2===1?`${t}*`:t,lt=t=>t.split("").reduce((e,o,n)=>{if(o==="_"){let r=t[n-1],i=t[n+1];if(r==="\\")return e;if(r!=="_"&&i!=="_")return e+1}return e},0),dt=t=>t.match(E)&<(t)%2===1?`${t}_`:t,mt=(t,e)=>{let o=t.substring(e,e+3)==="```",n=e>0&&t.substring(e-1,e+2)==="```",r=e>1&&t.substring(e-2,e+1)==="```";return o||n||r},pt=t=>{let e=0;for(let o=0;o<t.length;o++)t[o]==="`"&&!mt(t,o)&&e++;return e},ut=t=>{let e=(t.match(/```/g)||[]).length,o=e%2===1;return e>0&&e%2===0?t:t.match(tt)&&!o&&pt(t)%2===1?`${t}\``:t},gt=t=>t.match(et)&&(t.match(/~~/g)||[]).length%2===1?`${t}~~`:t,ht=t=>t.split("").reduce((e,o,n)=>{if(o==="$"){let r=t[n-1],i=t[n+1];if(r==="\\")return e;if(r!=="$"&&i!=="$")return e+1}return e},0),ft=t=>t.match(nt)&&(t.match(/\$\$/g)||[]).length%2===1?`${t}$$`:t,bt=t=>t.match(ot)&&ht(t)%2===1?`${t}$`:t,H=t=>{if(!t||typeof t!="string")return t;let e=t;return e=rt(e),e=st(e),e=at(e),e=ct(e),e=dt(e),e=ut(e),e=gt(e),e=ft(e),e=bt(e),e};var k=require("react/jsx-runtime"),kt=(0,O.default)(K.default),yt=(0,d.memo)(({content:t,shouldParseIncompleteMarkdown:e,...o})=>{let n=(0,d.useMemo)(()=>typeof t=="string"&&e?H(t.trim()):t,[t,e]);return(0,k.jsx)(kt,{...o,children:n})},(t,e)=>t.content===e.content),q=(0,d.memo)(({children:t,allowedImagePrefixes:e,allowedLinkPrefixes:o,defaultOrigin:n,parseIncompleteMarkdown:r=!0,components:i,rehypePlugins:m,remarkPlugins:c,className:u,...y})=>{let C=(0,d.useId)(),h=(0,d.useMemo)(()=>A(typeof t=="string"?t:""),[t]);return(0,k.jsx)("div",{className:s("space-y-4",u),...y,children:h.map((M,R)=>(0,k.jsx)(yt,{allowedImagePrefixes:e!=null?e:["*"],allowedLinkPrefixes:o!=null?o:["*"],components:{..._,...i},content:M,defaultOrigin:n,rehypePlugins:[L.default,...m!=null?m:[]],remarkPlugins:[U.default,D.default,...c!=null?c:[]],shouldParseIncompleteMarkdown:r},`${C}-block_${R}`))})},(t,e)=>t.children===e.children);q.displayName="Streamdown";0&&(module.exports={Streamdown});
|
package/dist/index.d.cts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ComponentProps } from 'react';
|
|
3
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
4
|
import hardenReactMarkdown from 'harden-react-markdown';
|
|
4
5
|
|
|
5
6
|
declare const HardenedMarkdown: ReturnType<typeof hardenReactMarkdown>;
|
|
@@ -7,6 +8,6 @@ type StreamdownProps = ComponentProps<typeof HardenedMarkdown> & {
|
|
|
7
8
|
parseIncompleteMarkdown?: boolean;
|
|
8
9
|
className?: string;
|
|
9
10
|
};
|
|
10
|
-
declare const Streamdown: react.MemoExoticComponent<({ children, allowedImagePrefixes, allowedLinkPrefixes, defaultOrigin, parseIncompleteMarkdown: shouldParseIncompleteMarkdown, components, rehypePlugins, remarkPlugins, className, ...props }: StreamdownProps) =>
|
|
11
|
+
declare const Streamdown: react.MemoExoticComponent<({ children, allowedImagePrefixes, allowedLinkPrefixes, defaultOrigin, parseIncompleteMarkdown: shouldParseIncompleteMarkdown, components, rehypePlugins, remarkPlugins, className, ...props }: StreamdownProps) => react_jsx_runtime.JSX.Element>;
|
|
11
12
|
|
|
12
13
|
export { Streamdown, type StreamdownProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ComponentProps } from 'react';
|
|
3
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
4
|
import hardenReactMarkdown from 'harden-react-markdown';
|
|
4
5
|
|
|
5
6
|
declare const HardenedMarkdown: ReturnType<typeof hardenReactMarkdown>;
|
|
@@ -7,6 +8,6 @@ type StreamdownProps = ComponentProps<typeof HardenedMarkdown> & {
|
|
|
7
8
|
parseIncompleteMarkdown?: boolean;
|
|
8
9
|
className?: string;
|
|
9
10
|
};
|
|
10
|
-
declare const Streamdown: react.MemoExoticComponent<({ children, allowedImagePrefixes, allowedLinkPrefixes, defaultOrigin, parseIncompleteMarkdown: shouldParseIncompleteMarkdown, components, rehypePlugins, remarkPlugins, className, ...props }: StreamdownProps) =>
|
|
11
|
+
declare const Streamdown: react.MemoExoticComponent<({ children, allowedImagePrefixes, allowedLinkPrefixes, defaultOrigin, parseIncompleteMarkdown: shouldParseIncompleteMarkdown, components, rehypePlugins, remarkPlugins, className, ...props }: StreamdownProps) => react_jsx_runtime.JSX.Element>;
|
|
11
12
|
|
|
12
13
|
export { Streamdown, type StreamdownProps };
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";
|
|
1
|
+
"use client";import{memo as N,useId as ct,useMemo as $}from"react";import lt from"react-markdown";import dt from"rehype-katex";import mt from"remark-gfm";import pt from"remark-math";import"katex/dist/katex.min.css";import ut from"harden-react-markdown";import{isValidElement as D}from"react";import{CheckIcon as T,CopyIcon as _}from"lucide-react";import{createContext as S,useContext as A,useEffect as H,useState as b}from"react";import{codeToHtml as K}from"shiki";import{clsx as w}from"clsx";import{twMerge as P}from"tailwind-merge";var r=(...t)=>P(w(t));import{jsx as p,jsxs as U}from"react/jsx-runtime";var k=S({code:""});async function L(t,e){return await K(t,{lang:e,theme:"github-light"})}var y=({code:t,language:e,className:o,children:n,...s})=>{let[i,l]=b("");return H(()=>{let c=!0;return L(t,e).then(d=>{c&&l(d)}),()=>{c=!1}},[t,e]),p(k.Provider,{value:{code:t},children:U("div",{className:"group relative",children:[p("div",{className:r("overflow-x-auto",o),dangerouslySetInnerHTML:{__html:i},...s}),n]})})},C=({onCopy:t,onError:e,timeout:o=2e3,children:n,className:s,...i})=>{let[l,c]=b(!1),{code:d}=A(k),u=async()=>{var m;if(typeof window=="undefined"||!((m=navigator==null?void 0:navigator.clipboard)!=null&&m.writeText)){e==null||e(new Error("Clipboard API not available"));return}try{await navigator.clipboard.writeText(d),c(!0),t==null||t(),setTimeout(()=>c(!1),o)}catch(h){e==null||e(h)}},g=l?T:_;return p("button",{className:r("absolute top-2 right-2 shrink-0 rounded-md p-3 opacity-0 transition-all","hover:bg-secondary group-hover:opacity-100",s),onClick:u,type:"button",...i,children:n!=null?n:p(g,{size:14})})};import{jsx as a}from"react/jsx-runtime";var M={ol:({node:t,children:e,className:o,...n})=>a("ol",{className:r("ml-4 list-outside list-decimal",o),...n,children:e}),li:({node:t,children:e,className:o,...n})=>a("li",{className:r("py-1",o),...n,children:e}),ul:({node:t,children:e,className:o,...n})=>a("ul",{className:r("ml-4 list-outside list-disc",o),...n,children:e}),hr:({node:t,className:e,...o})=>a("hr",{className:r("my-6 border-border",e),...o}),strong:({node:t,children:e,className:o,...n})=>a("span",{className:r("font-semibold",o),...n,children:e}),a:({node:t,children:e,className:o,href:n,...s})=>a("a",{className:r("font-medium text-primary underline",o),href:n,rel:"noreferrer",target:"_blank",...s,children:e}),h1:({node:t,children:e,className:o,...n})=>a("h1",{className:r("mt-6 mb-2 font-semibold text-3xl",o),...n,children:e}),h2:({node:t,children:e,className:o,...n})=>a("h2",{className:r("mt-6 mb-2 font-semibold text-2xl",o),...n,children:e}),h3:({node:t,children:e,className:o,...n})=>a("h3",{className:r("mt-6 mb-2 font-semibold text-xl",o),...n,children:e}),h4:({node:t,children:e,className:o,...n})=>a("h4",{className:r("mt-6 mb-2 font-semibold text-lg",o),...n,children:e}),h5:({node:t,children:e,className:o,...n})=>a("h5",{className:r("mt-6 mb-2 font-semibold text-base",o),...n,children:e}),h6:({node:t,children:e,className:o,...n})=>a("h6",{className:r("mt-6 mb-2 font-semibold text-sm",o),...n,children:e}),table:({node:t,children:e,className:o,...n})=>a("div",{className:"my-4 overflow-x-auto",children:a("table",{className:r("w-full border-collapse border border-border",o),...n,children:e})}),thead:({node:t,children:e,className:o,...n})=>a("thead",{className:r("bg-muted/50",o),...n,children:e}),tbody:({node:t,children:e,className:o,...n})=>a("tbody",{className:r("divide-y divide-border",o),...n,children:e}),tr:({node:t,children:e,className:o,...n})=>a("tr",{className:r("border-border border-b",o),...n,children:e}),th:({node:t,children:e,className:o,...n})=>a("th",{className:r("px-4 py-2 text-left font-semibold text-sm",o),...n,children:e}),td:({node:t,children:e,className:o,...n})=>a("td",{className:r("px-4 py-2 text-sm",o),...n,children:e}),blockquote:({node:t,children:e,className:o,...n})=>a("blockquote",{className:r("my-4 border-muted-foreground/30 border-l-4 pl-4 text-muted-foreground italic",o),...n,children:e}),code:({node:t,className:e,...o})=>{var s,i;return((s=t==null?void 0:t.position)==null?void 0:s.start.line)===((i=t==null?void 0:t.position)==null?void 0:i.end.line)?a("code",{className:r("rounded bg-muted px-1.5 py-0.5 font-mono text-sm",e),...o}):a("code",{className:e,...o})},pre:({node:t,className:e,children:o})=>{var i;let n="javascript";typeof((i=t==null?void 0:t.properties)==null?void 0:i.className)=="string"&&(n=t.properties.className.replace("language-",""));let s="";return D(o)&&o.props&&typeof o.props=="object"&&"children"in o.props&&typeof o.props.children=="string"?s=o.props.children:typeof o=="string"&&(s=o),a(y,{className:r("my-4 h-auto rounded-lg border p-4",e),code:s,language:n,children:a(C,{})})},sup:({node:t,children:e,className:o,...n})=>a("sup",{className:r("text-sm",o),...n,children:e}),sub:({node:t,children:e,className:o,...n})=>a("sub",{className:r("text-sm",o),...n,children:e})};import{marked as O}from"marked";var B=t=>O.lexer(t).map(o=>o.raw);var q=/(!?\[)([^\]]*?)$/,R=/(\*\*)([^*]*?)$/,x=/(__)([^_]*?)$/,V=/(\*)([^*]*?)$/,z=/(_)([^_]*?)$/,G=/(`)([^`]*?)$/,F=/(~~)([^~]*?)$/,J=/(\$)([^$]*?)$/,Q=/(\$\$)([^$]*?)$/,W=t=>{let e=t.match(q);if(e){let o=t.lastIndexOf(e[1]);return t.substring(0,o)}return t},X=t=>t.match(R)&&(t.match(/\*\*/g)||[]).length%2===1?`${t}**`:t,Y=t=>t.match(x)&&(t.match(/__/g)||[]).length%2===1?`${t}__`:t,Z=t=>t.split("").reduce((e,o,n)=>{if(o==="*"){let s=t[n-1],i=t[n+1];if(s==="\\")return e;if(s!=="*"&&i!=="*")return e+1}return e},0),j=t=>t.match(V)&&Z(t)%2===1?`${t}*`:t,E=t=>t.split("").reduce((e,o,n)=>{if(o==="_"){let s=t[n-1],i=t[n+1];if(s==="\\")return e;if(s!=="_"&&i!=="_")return e+1}return e},0),tt=t=>t.match(z)&&E(t)%2===1?`${t}_`:t,et=(t,e)=>{let o=t.substring(e,e+3)==="```",n=e>0&&t.substring(e-1,e+2)==="```",s=e>1&&t.substring(e-2,e+1)==="```";return o||n||s},ot=t=>{let e=0;for(let o=0;o<t.length;o++)t[o]==="`"&&!et(t,o)&&e++;return e},nt=t=>{let e=(t.match(/```/g)||[]).length,o=e%2===1;return e>0&&e%2===0?t:t.match(G)&&!o&&ot(t)%2===1?`${t}\``:t},rt=t=>t.match(F)&&(t.match(/~~/g)||[]).length%2===1?`${t}~~`:t,st=t=>t.split("").reduce((e,o,n)=>{if(o==="$"){let s=t[n-1],i=t[n+1];if(s==="\\")return e;if(s!=="$"&&i!=="$")return e+1}return e},0),at=t=>t.match(Q)&&(t.match(/\$\$/g)||[]).length%2===1?`${t}$$`:t,it=t=>t.match(J)&&st(t)%2===1?`${t}$`:t,I=t=>{if(!t||typeof t!="string")return t;let e=t;return e=W(e),e=X(e),e=Y(e),e=j(e),e=tt(e),e=nt(e),e=rt(e),e=at(e),e=it(e),e};import{jsx as f}from"react/jsx-runtime";var gt=ut(lt),ht=N(({content:t,shouldParseIncompleteMarkdown:e,...o})=>{let n=$(()=>typeof t=="string"&&e?I(t.trim()):t,[t,e]);return f(gt,{...o,children:n})},(t,e)=>t.content===e.content),ft=N(({children:t,allowedImagePrefixes:e,allowedLinkPrefixes:o,defaultOrigin:n,parseIncompleteMarkdown:s=!0,components:i,rehypePlugins:l,remarkPlugins:c,className:d,...u})=>{let g=ct(),m=$(()=>B(typeof t=="string"?t:""),[t]);return f("div",{className:r("space-y-4",d),...u,children:m.map((h,v)=>f(ht,{allowedImagePrefixes:e!=null?e:["*"],allowedLinkPrefixes:o!=null?o:["*"],components:{...M,...i},content:h,defaultOrigin:n,rehypePlugins:[dt,...l!=null?l:[]],remarkPlugins:[mt,pt,...c!=null?c:[]],shouldParseIncompleteMarkdown:s},`${g}-block_${v}`))})},(t,e)=>t.children===e.children);ft.displayName="Streamdown";export{ft as Streamdown};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "streamdown",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -13,7 +13,8 @@
|
|
|
13
13
|
}
|
|
14
14
|
},
|
|
15
15
|
"files": [
|
|
16
|
-
"dist"
|
|
16
|
+
"dist",
|
|
17
|
+
"README.md"
|
|
17
18
|
],
|
|
18
19
|
"scripts": {
|
|
19
20
|
"build": "tsup",
|