@draftably/runtime 0.1.0 → 0.2.0
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 +16 -44
- package/dist/assets/{render.worker-BpUp6NY_.js → render.worker-fWW85Tf9.js} +2719 -2676
- package/dist/element.js +21 -12
- package/dist/{font-data-DbrpaYkG.js → font-data-tnqJ-kTK.js} +1 -1
- package/dist/index.js +2 -2
- package/dist/{render-BOAZBzVa.js → render-ZzhO-2H6.js} +2764 -2721
- package/dist/types/src/runtime/element.d.ts +2 -0
- package/dist/types/src/runtime/viewer.d.ts +5 -0
- package/dist/viewer.css +20 -0
- package/dist/viewer.js +81 -81
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,57 +1,29 @@
|
|
|
1
1
|
# @draftably/runtime
|
|
2
2
|
|
|
3
|
-
Render `.draft`
|
|
3
|
+
Render `.draft` diagrams to SVG in Node or a browser, or show them in an interactive
|
|
4
|
+
`<draft-diagram>` element. No runtime dependencies, DOM shim or install scripts. Needs Node 22.21
|
|
5
|
+
or later.
|
|
4
6
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
+
```sh
|
|
8
|
+
pnpm add @draftably/runtime
|
|
9
|
+
```
|
|
7
10
|
|
|
8
11
|
```ts
|
|
9
|
-
import { renderSvg
|
|
12
|
+
import { renderSvg } from '@draftably/runtime';
|
|
10
13
|
|
|
11
|
-
const result = await renderSvg('node api "API"
|
|
14
|
+
const result = await renderSvg('node api "API"');
|
|
12
15
|
if (result.ok) console.log(result.value.svg);
|
|
13
|
-
else console.error(result.diagnostics);
|
|
14
|
-
|
|
15
|
-
await validate('node api "API"\n');
|
|
16
16
|
```
|
|
17
17
|
|
|
18
|
-
Image output embeds its used fonts. Links and source metadata are disabled by default. Inline output needs a unique `idPrefix`:
|
|
19
|
-
|
|
20
18
|
```ts
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
idPrefix: 'checkout-one',
|
|
24
|
-
description: 'The web app calls the API and saves an order.',
|
|
25
|
-
});
|
|
19
|
+
import '@draftably/runtime/element';
|
|
20
|
+
// <draft-diagram source='node api "API"' label="API diagram"></draft-diagram>
|
|
26
21
|
```
|
|
27
22
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
## Interactive viewer
|
|
31
|
-
|
|
32
|
-
For automatic setup, import `@draftably/runtime/element` once and use
|
|
33
|
-
`<draft-diagram source='node api "API"'></draft-diagram>`. It supplies styles,
|
|
34
|
-
default sizing, updates, and cleanup. Put an image inside it for a static
|
|
35
|
-
fallback. See the [element guide](https://github.com/byronwall/draftably/blob/main/docs/integrations/element.md)
|
|
36
|
-
for the complete Vite configuration and source update example.
|
|
37
|
-
|
|
38
|
-
The optional `/viewer` entry mounts an independent, read-only viewer. Its default module worker and embedded fonts keep compilation off the main thread and visuals self-contained:
|
|
39
|
-
|
|
40
|
-
```ts
|
|
41
|
-
import { mountViewer } from '@draftably/runtime/viewer';
|
|
42
|
-
import '@draftably/runtime/viewer.css';
|
|
43
|
-
|
|
44
|
-
const viewer = mountViewer(document.querySelector('#diagram')!, { label: 'Checkout flow' });
|
|
45
|
-
void viewer.update(source).then(result => {
|
|
46
|
-
if (result.status === 'error') console.error(result.error.diagnostics);
|
|
47
|
-
});
|
|
48
|
-
// Call viewer.destroy() when the host is removed.
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
Give the host a height. The viewer requires an empty host and owns its children. Worker startup, timeout, and font failures return an error and preserve the last good drawing. The viewer does not fall back to main-thread compilation. Select `execution: { mode: 'main' }` for known small inputs or a host-provided link resolver. To use host fonts, import `@draftably/runtime/fonts.css` and set `render: { fonts: 'host' }`.
|
|
52
|
-
|
|
53
|
-
Read the [viewer integration guide](https://github.com/byronwall/draftably/blob/main/docs/integrations/viewer.md) for lifecycle, accessibility, framework, and SSR recipes.
|
|
54
|
-
|
|
55
|
-
Requires Node 22.21 or later. Browser ESM is checked in Chromium. Cancellation on the calling thread is cooperative. A host must choose worker or process isolation for an enforced deadline.
|
|
23
|
+
## Docs
|
|
56
24
|
|
|
57
|
-
|
|
25
|
+
- [Render SVG](https://draftably.dev/docs/render-svg): options, validation, inline output, links
|
|
26
|
+
and limits
|
|
27
|
+
- [Element and viewer](https://draftably.dev/docs/element): the element, `mountViewer`, fallback
|
|
28
|
+
images and SSR
|
|
29
|
+
- [Embed diagrams](https://draftably.dev/docs/embed): every route, including framework components
|