@vedivad/typst-web-service 0.7.0 → 0.7.1
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 +98 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
# @vedivad/typst-web-service
|
|
2
|
+
|
|
3
|
+
Editor-agnostic Typst services for the web — compile, render, analyze, and format via WASM.
|
|
4
|
+
|
|
5
|
+
Four independent classes, each created via async `create()` factory methods. Import only what you need.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @vedivad/typst-web-service
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
> Most users should install `@vedivad/codemirror-typst` instead, which re-exports everything from this package and adds CodeMirror 6 integration.
|
|
14
|
+
|
|
15
|
+
## Compilation
|
|
16
|
+
|
|
17
|
+
```ts
|
|
18
|
+
import { TypstCompiler, TypstRenderer } from "@vedivad/typst-web-service";
|
|
19
|
+
|
|
20
|
+
const compiler = await TypstCompiler.create();
|
|
21
|
+
const renderer = await TypstRenderer.create();
|
|
22
|
+
|
|
23
|
+
// Single file
|
|
24
|
+
const result = await compiler.compile("= Hello, Typst");
|
|
25
|
+
if (result.vector) {
|
|
26
|
+
const svg = await renderer.renderSvg(result.vector);
|
|
27
|
+
document.querySelector("#preview")!.innerHTML = svg;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// Multi-file
|
|
31
|
+
const result = await compiler.compile({
|
|
32
|
+
"/main.typ": '#import "template.typ": greet\n#greet("World")',
|
|
33
|
+
"/template.typ": "#let greet(name) = [Hello, #name!]",
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
// PDF export
|
|
37
|
+
const pdf = await compiler.compilePdf("= Hello, Typst");
|
|
38
|
+
const blob = new Blob([pdf.slice()], { type: "application/pdf" });
|
|
39
|
+
|
|
40
|
+
compiler.destroy();
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Formatting
|
|
44
|
+
|
|
45
|
+
Requires a bundler that supports WASM imports (e.g. Vite + `vite-plugin-wasm`).
|
|
46
|
+
|
|
47
|
+
```ts
|
|
48
|
+
import { TypstFormatter } from "@vedivad/typst-web-service";
|
|
49
|
+
|
|
50
|
+
const formatter = await TypstFormatter.create({ tab_spaces: 2, max_width: 80 });
|
|
51
|
+
const formatted = await formatter.format(source);
|
|
52
|
+
const rangeResult = await formatter.formatRange(source, start, end);
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
Config options ([typstyle docs](https://github.com/typstyle-rs/typstyle)):
|
|
56
|
+
|
|
57
|
+
| Option | Type | Default | Description |
|
|
58
|
+
| ------------------------- | --------- | ------- | ----------------------------------- |
|
|
59
|
+
| `tab_spaces` | `number` | `2` | Spaces per indentation level |
|
|
60
|
+
| `max_width` | `number` | `80` | Maximum line width |
|
|
61
|
+
| `blank_lines_upper_bound` | `number` | -- | Max consecutive blank lines |
|
|
62
|
+
| `collapse_markup_spaces` | `boolean` | -- | Collapse whitespace in markup |
|
|
63
|
+
| `reorder_import_items` | `boolean` | -- | Sort import items alphabetically |
|
|
64
|
+
| `wrap_text` | `boolean` | -- | Wrap text to fit within `max_width` |
|
|
65
|
+
|
|
66
|
+
## LSP analysis with tinymist
|
|
67
|
+
|
|
68
|
+
`TypstAnalyzer` runs a [tinymist](https://github.com/Myriad-Dreamin/tinymist) language server in a Web Worker. The `wasmUrl` option must point to the `tinymist_bg.wasm` binary from the `tinymist-web` package.
|
|
69
|
+
|
|
70
|
+
```ts
|
|
71
|
+
import { TypstAnalyzer } from "@vedivad/typst-web-service";
|
|
72
|
+
import tinymistWasmUrl from "tinymist-web/pkg/tinymist_bg.wasm?url";
|
|
73
|
+
|
|
74
|
+
const analyzer = await TypstAnalyzer.create({ wasmUrl: tinymistWasmUrl });
|
|
75
|
+
|
|
76
|
+
analyzer.onDiagnostics((uri, diagnostics) => {
|
|
77
|
+
console.log(uri, diagnostics);
|
|
78
|
+
});
|
|
79
|
+
|
|
80
|
+
await analyzer.didChange("untitled:project/main.typ", source);
|
|
81
|
+
const completions = await analyzer.completion("untitled:project/main.typ", line, character);
|
|
82
|
+
const hover = await analyzer.hover("untitled:project/main.typ", line, character);
|
|
83
|
+
|
|
84
|
+
analyzer.destroy();
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## Service classes
|
|
88
|
+
|
|
89
|
+
| Class | Runs on | WASM loading | Purpose |
|
|
90
|
+
| ---------------- | ----------- | ----------------------- | --------------------------------------------------------- |
|
|
91
|
+
| `TypstCompiler` | Web Worker | CDN (automatic) | `compile()` -> diagnostics + vector, `compilePdf()` -> PDF |
|
|
92
|
+
| `TypstRenderer` | Main thread | CDN (automatic) | `renderSvg(vector)` -> SVG string |
|
|
93
|
+
| `TypstFormatter` | Main thread | Bundler (static import) | `format(source)`, `formatRange(source, start, end)` |
|
|
94
|
+
| `TypstAnalyzer` | Web Worker | User-provided `wasmUrl` | LSP diagnostics, completion, hover via tinymist |
|
|
95
|
+
|
|
96
|
+
## License
|
|
97
|
+
|
|
98
|
+
MIT
|