@dskripchenko /嵌入
视频和音频播放器、Mermaid图、OpenAPI引用、流程流、 live markdown和WYSIWYG编辑器-作为HTML标签 任何 页面：纯HTML； CMS, WordPress, Blade, React。来自CDN的一个脚本。元素共用一个 Vue和一个UI工具包，呈现彼此的块，并通过DOM事件进行对话。
<head>
<script src="https://cdn.jsdelivr.net/npm/@dskripchenko/embed@1/dist/embed.js"></script>
</head>
<body>
<dsk-flow src="/process.json" poll-url="/process/state" openapi-target="#api" media-target="#tour"></dsk-flow>
<dsk-video id="tour" src="/tour.mp4">
<track kind="chapters" src="/tour.chapters.vtt" default>
</dsk-video>
<dsk-openapi id="api" src="/openapi.yaml" height="720"></dsk-openapi>
<dsk-markdown>
<script type="text/markdown">
```mermaid
sequenceDiagram
Shop->>Payments: charge
```
</script>
</dsk-markdown>
<form method="post"><dsk-editor name="body"></dsk-editor></form>
</body>
单击流程步骤将打开其API操作，并播放该步骤的章节 视频;降价图表是实时的；编辑器提交HTML和表单。
元素
| 建立在 | ||
|---|---|---|
<dsk-video> | 播放器：来源和质量菜单，字幕，章节，缩略图，HLS | @dskripchenko/ui |
<dsk-audio> | 播放器，播放列表，波形 | @dskripchenko/ui |
<dsk-diagram> | 美人鱼，PlantUML, Graphviz DOT, D2， DBML, Structurizr, Wardley→SVG，未加载Vue | @dskripchenko/diagrams |
<dsk-openapi> | 完整的参考（几个规范），一个操作，或一个活动的API块 | @dskripchenko/openapi |
<dsk-flow> | 通过纯HTTP进行监视、切换和子流程的流程视图——或者编辑器 | @dskripchenko/flow |
<dsk-asyncapi> | AsyncAPI 2。x / 3.0事件驱动API的参考 | @dskripchenko/openapi |
<dsk-bpmn>， <dsk-dmn> | 建模器（视图或编辑器）中列出的BPMN流程和DMN决策 | @dskripchenko/bpmn |
<dsk-drawio> | 画画。io文件到SVG，页面选项卡，没有Vue加载 | @dskripchenko/drawio |
<dsk-kanban> | 用标记形式书写的看板：栏、道、标签、在制品限制；拖牌，编辑，锁 | @dskripchenko/ui |
<dsk-calendar> | 以标记形式编写的事件，重复：日、周、月、年、议程；拖拽，事件生成器，锁 | @dskripchenko/ui |
<dsk-board> | 无限白板：形状、粘性、框架、连接器、笔-视图、编辑器或实时编辑的共享板 | @dskripchenko/board |
<dsk-markdown> | 使用活动块Markdown：上面每种语法的图表， bpmn， dmn， drawio， openapi， asyncapi， flow， board， kanban， calendar， video， audio | @dskripchenko/ui |
<dsk-editor> | WYSIWYG与相同的活块；表单字段 | @dskripchenko/wysiwyg |
所有属性：attributes↔properties； dsk:* 事件, ready， loading="lazy"，
轻DOM（你的CSS应用）；图表，流程，流，板和参考打开全屏。→ 元素
一起工作
- 一个运行时。 加载器编写一个导入映射，将Vue、工具包和 插件包到发布的确切版本；每个元素和 live block在一个Vue应用上下文中呈现——一个locale，一个theme，一个set 块渲染器。
- 块。
DskEmbed.blocks.register('chart', renderer)-活块 套件和编辑的合同```chart住在 Markdown，在编辑器和DskEmbed.renderBlocks(root)，这就变成 储存的HTML (<pre><code class="language-…">)变成小部件。→ 块 - 配置。
DskEmbed.configure({ theme: 'light' | 'dark' | 'system', locale: 'en' | 'ru' })， 或者只是页面的<html data-theme lang>． → 配置和事件 - 事件。
DskEmbed.on('node', …)，或者addEventListener('dsk:node', …)在 任何祖先;React和其他主机使用ref和普通侦听器。→ 框架
加载器或包
| gzip | ||
|---|---|---|
dist/embed.js -装载机 | 9.1 KB | 经典的脚本;元素、API、导入映射。其他的都随叫随到。 |
dist/embed.bundle.js ——胖子 | 563 KB (2.0 MB) | 所有内部;没有导入映射，没有进一步的请求。 |
dist/bundles/<plugin>.js -每个插件一个 | 91 - 227 KB | 我们和里面的工具箱；一个页面上的几个共享一个运行时。→ 开始 |
加载器按需获取的内容(已发布文件的gzip -9； jsdelivery 供应小一点的Brotli)；
| 的第一要素…… | 获取 | |
|---|---|---|
| 任意值元素 | Vue运行时41.5 KB， @dskripchenko/ui 102.6 KB（里面的图标）+ CSS 30.1 KB | 每页一次 |
<dsk-video> / <dsk-audio> | 插件3.5 KB；仅为14.6 KB的HLS适配器 .m3u8 | |
<dsk-diagram> | 插件0.8 KB； @dskripchenko/diagrams 99.7 KB，套件令牌2.4 KB | 没有Vue，没有套件组件 |
<dsk-openapi> | 插件1.4 KB， @dskripchenko/openapi 180.5 KB + CSS 10.5 KB，图标5.2 KB | |
<dsk-flow> | 插件2.5 KB； @dskripchenko/flow 79.9 KB + CSS 4.6 KB，图标5.2 KB；美人鱼导入（2.4 KB +图表）仅适用于美人鱼源和编辑器 | |
<dsk-board> | 插件1.3 KB， @dskripchenko/board 46.4 KB（里面的图标）+ CSS 1.9 KB | |
<dsk-markdown> | 插件0.5 KB | 块加载自己的插件 |
<dsk-editor> | 插件1.1 KB， @dskripchenko/wysiwyg 18.2 KB + CSS 2.3 KB，图标5.2 KB |
图标文件（76个图标，一个文件）是共享的：由第一个获取一次 Openapi、flow和编辑器。
→ 开始片段，自托管， 使用您自己的导入映射、CSP、版本控制进行组合。
吃嫩叶的动物
当前的Chromium， Safari和Firefox。加载器需要导入映射；有 没有遗留构建。测试在铬和WebKit（剧作家）：两个构建， 两种主题，两种语言，桌面和手机。
已知的限制
- 主题是整页的 （
<html data-theme>)：套件的主题是 上定义:root，它的菜单和对话框都在<body>.
开发
pnpm install
pnpm build # dist/ and the size table
pnpm test # unit tests (vitest, jsdom)
pnpm lint && pnpm typecheck
node scripts/fixtures.mjs # media fixtures for the browser check (ffmpeg)
pnpm check:browser # Chromium + WebKit against a local mirror of the CDN
node scripts/mirror.mjs <dir> # self-hosting: the runtime in the CDN's layout
node scripts/demo.mjs <dir> --local # the demo page (examples/demo) for a host site
浏览器检查服务 node_modules jsdeliver服务npm的方式
（/npm/<pkg>@<version>/…（只有准确的版本）从第二个来源，所以
导入映射、跨原点模块加载和版本引脚将被执行
为真实的。