boos
e0a5f57793
Vendor the rebranded BoosAPI Desktop client (Tauri + Vue) into metapi as a monorepo subdirectory under desktop/. Source only — node_modules, dist, Cargo target and the upstream .git history are excluded. desktop/ keeps its own independent Cargo workspace (desktop/src-tauri with crates/*); it is not part of the backend boosapi crate, so a `cargo check` at the metapi root still compiles only the backend. Build the desktop app from desktop/src-tauri per desktop/README.md. Note: app icons are still placeholder assets pending the final BoosAPI logo. The updater signing keys live outside the repo and are not included.
109 lines
2.6 KiB
Markdown
109 lines
2.6 KiB
Markdown
# markstream-angular
|
|
|
|
Angular version of Markstream: a streaming-friendly Markdown renderer with KaTeX, Mermaid, Monaco code blocks, D2, infographic blocks, custom HTML tags, and cross-framework playground parity.
|
|
|
|
## Install
|
|
|
|
```bash
|
|
pnpm add markstream-angular @angular/core @angular/common
|
|
```
|
|
|
|
Optional peer dependencies:
|
|
|
|
- `stream-monaco` for Monaco-powered code blocks
|
|
- `mermaid` for Mermaid diagrams
|
|
- `katex` for math rendering
|
|
- `@terrastruct/d2` for D2 diagrams
|
|
- `@antv/infographic` for infographic blocks
|
|
|
|
Example:
|
|
|
|
```bash
|
|
pnpm add stream-monaco mermaid katex @terrastruct/d2 @antv/infographic
|
|
```
|
|
|
|
## Quick Start
|
|
|
|
Import the stylesheet once in your Angular app entry:
|
|
|
|
```ts
|
|
import 'markstream-angular/index.css'
|
|
import 'katex/dist/katex.min.css'
|
|
```
|
|
|
|
Use the standalone component directly:
|
|
|
|
```ts
|
|
import { Component, signal } from '@angular/core'
|
|
import { bootstrapApplication } from '@angular/platform-browser'
|
|
import { MarkstreamAngularComponent } from 'markstream-angular'
|
|
|
|
@Component({
|
|
selector: 'app-root',
|
|
standalone: true,
|
|
imports: [MarkstreamAngularComponent],
|
|
template: `
|
|
<markstream-angular
|
|
[content]="markdown()"
|
|
[final]="true"
|
|
[codeBlockStream]="true"
|
|
/>
|
|
`,
|
|
})
|
|
class AppComponent {
|
|
readonly markdown = signal(`# Hello Angular
|
|
|
|
- streaming markdown
|
|
- code blocks
|
|
- Mermaid / KaTeX / D2`)
|
|
}
|
|
|
|
bootstrapApplication(AppComponent)
|
|
```
|
|
|
|
## TypeScript
|
|
|
|
`markstream-angular` exports the same public props/context helpers you use at runtime:
|
|
|
|
```ts
|
|
import type {
|
|
AngularRenderContext,
|
|
CodeBlockMonacoOptions,
|
|
CustomComponentMap,
|
|
MarkstreamAngularComponentProps,
|
|
NodeRendererProps,
|
|
} from 'markstream-angular'
|
|
```
|
|
|
|
## Workers
|
|
|
|
KaTeX and Mermaid can use the same off-thread worker path as the React/Vue packages:
|
|
|
|
```ts
|
|
import { setKaTeXWorker, setMermaidWorker } from 'markstream-angular'
|
|
import KatexWorker from 'markstream-angular/workers/katexRenderer.worker?worker'
|
|
import MermaidWorker from 'markstream-angular/workers/mermaidParser.worker?worker'
|
|
|
|
setKaTeXWorker(new KatexWorker())
|
|
setMermaidWorker(new MermaidWorker())
|
|
```
|
|
|
|
## Playground
|
|
|
|
In this monorepo:
|
|
|
|
- Angular playground: `pnpm play:angular`
|
|
- Angular regression lab: `http://127.0.0.1:4175/test`
|
|
- Angular version sandbox: `http://127.0.0.1:4175/test-sandbox`
|
|
|
|
## Status
|
|
|
|
This package is still tagged `alpha`, but the current direction is already aligned with `markstream-react` / `markstream-vue2` for:
|
|
|
|
- node-component renderer structure
|
|
- streaming code block behavior
|
|
- shared `/test` fixtures and cross-framework comparison
|
|
- KaTeX / Mermaid worker integration
|
|
|
|
Issue tracker and source: [Simon-He95/markstream-vue](https://github.com/Simon-He95/markstream-vue)
|