markstream-octane 0.0.56-beta.1

package/README.md

@@ -0,0 +1,276 @@
+# markstream-octane
+
+Native Octane streaming Markdown renderer for AI chat, SSE/WebSocket output, incomplete Markdown, Mermaid, KaTeX, Shiki, and Monaco.
+
+`markstream-octane` is compiled with the Octane compiler and runs on the Octane client and server runtimes. It does not require a React root or React compatibility layer. The published package contains precompiled JavaScript, declarations, styles, and workers, so consumers do not need to compile TSRX from `node_modules`.
+
+## Install
+
+```bash
+pnpm add markstream-octane octane
+```
+
+Octane 0.1.x currently declares Vite 8 plus React/React DOM compatibility peers in its own package metadata. `markstream-octane` does not import or execute React, but package managers may still ask consumers to satisfy those upstream Octane peer declarations.
+
+Optional renderer features are peer dependencies. Install only the features used by your Markdown:
+
+| Feature | Package |
+| --- | --- |
+| Shiki code blocks | `stream-markdown` |
+| Monaco editor code blocks | `stream-monaco` |
+| Mermaid diagrams | `mermaid` |
+| KaTeX math | `katex` |
+| D2 diagrams | `@terrastruct/d2` |
+| Infographic blocks | `@antv/infographic` |
+
+## Compiler setup
+
+Octane source components use the `.tsrx` extension. Add the Octane compiler to Vite:
+
+```ts
+// vite.config.ts
+import { octane } from 'octane/compiler/vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [octane()],
+  resolve: {
+    extensions: ['.tsrx', '.ts', '.mjs', '.js', '.json'],
+  },
+})
+```
+
+Configure TSRX and the Octane JSX runtime:
+
+```json
+{
+  "tsrx": {
+    "compiler": "octane/compiler"
+  },
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "octane",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "target": "ESNext"
+  }
+}
+```
+
+## Quick start
+
+Import one Markstream stylesheet explicitly; the JavaScript entry does not inject styles:
+
+```tsrx
+// App.tsrx
+import { NodeRenderer } from 'markstream-octane'
+import 'markstream-octane/index.css'
+
+export function ChatMessage(props: {
+  content: string
+  isDone: boolean
+}) {
+  return (
+    <NodeRenderer
+      content={props.content}
+      final={props.isDone}
+      fade={false}
+    />
+  )
+}
+```
+
+Mount the app with the native Octane root:
+
+```ts
+// main.ts
+import { createRoot } from 'octane'
+import { ChatMessage } from './App.tsrx'
+
+const host = document.getElementById('root')
+if (!host)
+  throw new Error('Missing #root')
+
+createRoot(host).render(ChatMessage, {
+  content: '# Hello from Octane',
+  isDone: true,
+})
+```
+
+Use `markstream-octane/index.px.css` when the application changes the root font size but renderer dimensions should remain pixel-based. Import `katex/dist/katex.min.css` as well when math rendering is enabled.
+
+## Streaming
+
+Accumulate SSE or WebSocket chunks and pass the growing string through `content`. Set `final` only after the stream ends:
+
+```tsrx
+import { useState } from 'octane'
+import { NodeRenderer } from 'markstream-octane'
+
+export function StreamingMessage() {
+  const [content, setContent] = useState('')
+  const [final, setFinal] = useState(false)
+
+  const start = () => {
+    setContent('')
+    setFinal(false)
+
+    const source = new EventSource('/api/chat/stream')
+    source.onmessage = (event) => {
+      if (event.data === '[DONE]') {
+        source.close()
+        setFinal(true)
+        return
+      }
+
+      const chunk = JSON.parse(event.data) as { content: string }
+      setContent(current => current + chunk.content)
+    }
+  }
+
+  return (
+    <>
+      <button type="button" onClick={start}>Start</button>
+      <NodeRenderer
+        content={content}
+        final={final}
+        typewriter
+        smoothStreaming="auto"
+      />
+    </>
+  )
+}
+```
+
+If parsing is already owned by a worker or store, pass pre-parsed `nodes` instead of `content`.
+
+## Server rendering
+
+Use the explicit server entry together with `octane/server`:
+
+```ts
+import { NodeRenderer } from 'markstream-octane/server'
+import { renderToString } from 'octane/server'
+
+const result = renderToString(NodeRenderer, {
+  content: '# Server-rendered Markdown',
+  final: true,
+})
+
+console.log(result.html)
+```
+
+The root export selects the server build through its `node` condition, but `markstream-octane/server` makes the runtime boundary unambiguous in server-only code.
+
+## Custom components
+
+Use `streamingComponents` for parser-backed custom tags. These components receive `NodeComponentProps`, including the parsed node, loading state, render context, and child renderer:
+
+```tsrx
+import type { NodeComponentProps } from 'markstream-octane'
+import {
+  NodeRenderer,
+  defineStreamingComponents,
+} from 'markstream-octane'
+
+type DocumentNode = {
+  type: 'documentlink'
+  content: string
+  loading?: boolean
+}
+
+function DocumentLink(props: NodeComponentProps<DocumentNode>) {
+  return (
+    <span aria-busy={props.node.loading || undefined}>
+      {props.node.content}
+    </span>
+  )
+}
+
+const components = defineStreamingComponents({
+  documentlink: DocumentLink,
+})
+
+export function Message(props: { content: string }) {
+  return (
+    <NodeRenderer
+      content={props.content}
+      streamingComponents={components}
+    />
+  )
+}
+```
+
+Keys in `streamingComponents` are normalized and included in the parser's effective `customHtmlTags`, so incomplete tags can render while tokens arrive.
+
+Use `htmlComponents` for the dynamic HTML path. These receive HTML-style props and `children`:
+
+```tsrx
+import type { OctaneNode } from 'octane'
+import {
+  NodeRenderer,
+  defineHtmlComponents,
+} from 'markstream-octane'
+
+function Badge(props: { kind?: string, children?: OctaneNode }) {
+  return <mark data-kind={props.kind}>{props.children}</mark>
+}
+
+const htmlComponents = defineHtmlComponents({ badge: Badge })
+
+export function Message(props: { content: string }) {
+  return (
+    <NodeRenderer
+      content={props.content}
+      htmlComponents={htmlComponents}
+    />
+  )
+}
+```
+
+`setCustomComponents` and `customId` remain available for shared application-level registration and built-in node overrides such as `code_block`, `mermaid`, or a language-specific renderer.
+
+## Tailwind
+
+Non-Tailwind applications should use the precompiled stylesheet:
+
+```ts
+import 'markstream-octane/index.css'
+```
+
+Tailwind applications can import the Tailwind-ready stylesheet and include the extracted class list:
+
+```ts
+import 'markstream-octane/index.tailwind.css'
+```
+
+```js
+module.exports = {
+  content: [
+    './src/**/*.{js,ts,tsrx}',
+    require('markstream-octane/tailwind'),
+  ],
+}
+```
+
+## Public entries
+
+- `markstream-octane`: precompiled Octane client runtime and public types
+- `markstream-octane/server`: precompiled Octane server renderer
+- `markstream-octane/index.css`: precompiled renderer styles
+- `markstream-octane/index.px.css`: pixel-based renderer styles
+- `markstream-octane/index.tailwind.css`: Tailwind-ready styles
+- `markstream-octane/tailwind`: extracted Tailwind class source
+- worker subpaths for KaTeX and Mermaid
+
+## Development
+
+From the repository root:
+
+```bash
+pnpm --filter markstream-octane typecheck
+pnpm --filter markstream-octane test
+pnpm --filter markstream-octane build
+pnpm play:octane
+pnpm test:e2e:octane-playground
+```

package/dist/client/chunks/languageIconExtended-BZR3DrgI.js

@@ -0,0 +1,2 @@
+// octane-no-slot: compiler-assigned hook slots are already present.
+var n={cpp:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">\n  <path fill="none" stroke="#8caaee" stroke-linecap="round" stroke-linejoin="round" d="m 2.5559121,12.951629 c 2.7459832,2.734744 7.1981158,2.734744 9.9441189,0 l -1.789955,-1.782586 c -1.7574201,1.750224 -4.606788,1.750224 -6.3642295,0 -1.7574416,-1.7502236 -1.7574416,-4.587893 0,-6.338097 1.7574415,-1.750224 4.6068094,-1.750224 6.3642295,0 l 0.894977,-0.8912929 0.894978,-0.891293 c -2.7460031,-2.73472867 -7.198136,-2.73472867 -9.9441191,0 -2.74598585,2.7347089 -2.74598585,7.1685599 2e-7,9.9032689 z" clip-rule="evenodd" />\n  <path fill="none" stroke="#8caaee" stroke-linecap="round" stroke-linejoin="round" d="M7.5 6v4M5.513524 7.9999996H9.51304M13.486476 5.9999996v4M11.5 7.9999992h3.999516" />\n</svg>\n',svg:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">\n  <path fill="none" stroke="#ef9f76" stroke-linecap="round" stroke-linejoin="round" d="m4.54 10 6.92-4m-6.92 4a1.5 1.5 0 10-2.6 1.5 1.5 1.5 0 002.6-1.5M8 4v8m0-8a1.5 1.5 0 100-3 1.5 1.5 0 000 3M4.54 6l6.92 4M4.54 6a1.5 1.5 0 10-2.6-1.5A1.5 1.5 0 004.54 6M8 12a1.5 1.5 0 100 3 1.5 1.5 0 000-3m3.46-2a1.5 1.5 0 102.6 1.5 1.5 1.5 0 00-2.6-1.5m0-4a1.5 1.5 0 102.6-1.5 1.5 1.5 0 00-2.6 1.5" />\n</svg>\n',vue:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">\n  <g fill="none" stroke="#a6d189" stroke-linecap="round" stroke-linejoin="round">\n    <path d="M1 1.5h5.44L8 4.56 9.56 1.5H15l-6.99 13z" />\n    <path d="M12.05 1.73 8 9.28 3.95 1.73" />\n  </g>\n</svg>\n'};export{n as EXTENDED_LANGUAGE_ICON_MAP};