# @0disoft/saylo-svelte 中文文档

规范地址：https://npmcn.com/package/%400disoft/saylo-svelte/

版本：0\.1\.0
npm 元数据更新时间：2026-11-08T17:02:03.382Z
中文译文更新时间：2026-11-08T17:04:43.984Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%400disoft/saylo-svelte
原文对照：https://npmcn.com/package/%400disoft/saylo-svelte/?lang=original
项目主页：https://www.npmjs.com/package/@0disoft/saylo-svelte
源码仓库：https://github.com/0disoft/saylo

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：35.2 kB，12 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：24\.x
- 运行依赖：1 个
- peer 依赖：svelte 5
- 首次发布：2026-10-08T14:55:50.117Z
- 最新版本发布：2026-11-08T17:02:03.038Z
- 近 30 天下载量：2099（2026-10-04 至 2026-11-02，npm 官方下载统计）
- 已发布版本数：10（近 12 个月 10 个）

## 中文简介

Svelte 5 为 Saylo 装订有打出上下文并带有快照的翻译存储.

## 安装

```sh
npm install @0disoft/saylo-svelte
```

也可以使用：`pnpm add @0disoft/saylo-svelte`、`yarn add @0disoft/saylo-svelte`、`bun add @0disoft/saylo-svelte`

## README

# @ 0disoft/ saylo- svelte (英语)

版本 `0.1.0` 也可以选择导出 `StrictRichTextRenderers<AppRichTextSchema, Key>` 用于检查片段地图 生成标签合同。 见 [严格的丰富文本类型](https://npmcn.com/package/docs/rich-text-types.md)。 。 。 . 该类型包括在 `0.1.0`; 已有 `<RichText>` 行为不变.

在Svelte 5上 `$i18n`. 该软件包提供了EME JavaScript和TypeScript声明文件. 这个读取器描述 `0.1.0` (dist-tag语) `latest`) (中文(简体) ). 见 [发布注释](https://npmcn.com/package/releases/0.1.0.md) 用于范围和验证。 斯维尔特自 `0.1.0-alpha.2`。以下两个选择的 API 都包含在 `0.1.0-alpha.4` 释放.

## 直接订阅

```js
import { createStore, parseCatalog } from '@0disoft/saylo-core';
import { createSvelteStore } from '@0disoft/saylo-svelte';

const catalog = parseCatalog('{"title":"Cart"}', { locale: 'en', namespace: 'cart' });
const instance = createStore({ baseLocale: 'en', locale: 'en', catalogs: [catalog] });
const i18n = createSvelteStore(instance);
const unsubscribe = i18n.subscribe(snapshot => console.log(snapshot.t('cart:title')));
unsubscribe();
instance.dispose();
```

在一个组件中,声明 `const i18n = createSvelteStore(instance)` 和使用情况 `{$i18n.t('cart:title')}`键和参数类型 `createStore<AppSchema>` 或者说 `createI18n<AppSchema>` 通过适配器保存。 同步或同步返回 `setLocale` 财务报告和审定财务报表 `loadNamespace` 懒惰的个案也被转交.

## 通过上下文

在应用模块中创建一次打字厂.

```ts
import { createSayloSvelte } from '@0disoft/saylo-svelte';
import type { AppSchema } from './generated';

export const { setSayloContext, getI18n } = createSayloSvelte<AppSchema>();
```

打电话 `setSayloContext(instance)` 在父组件初始化期间。 儿童部分通过 `const i18n = getI18n()` 从同一个工厂制造 `{$i18n.t('cart:items', { count: 3 })}`. 在上山期间使父母的身影保持稳定。 读取不同工厂的上下文会抛出一个明显的错误.

## 选择器订阅( 选择SvelteStore 和 getI18nSelector)

`selectSvelteStore` 创建一个 `Readable` 这只挑出 商店需要的值. `createSayloSvelte<S>()` 通过上下文通过同一选择器.

```ts
import { selectSvelteStore } from '@0disoft/saylo-svelte';

const title = selectSvelteStore(i18n, snapshot => snapshot.t('cart:title'));
```

```ts
export const { setSayloContext, getI18n, getI18nSelector } = createSayloSvelte<AppSchema>();

// 자식 컴포넌트 초기화 중
const title = getI18nSelector(snapshot => snapshot.t('cart:title'));
```

合同如下.

-   签名是 `selectSvelteStore<S, T>(source: SayloSvelteStore<S>, selector: (snapshot: SayloSvelteSnapshot<S>) => T, options?: SayloSelectorOptions): Readable<T>`。 。 。 .
-   `createSayloSvelte<S>()` 提供 `getI18nSelector<T>(selector, options?: SayloSelectorOptions): Readable<T>` 并且必须在同一工厂环境中在初始化时使用.
-   `SayloSelectorOptions` 有一个财产, `readonly onError?: (error: unknown) => void`。 。 。 .
-   将结果与 `Object.is` 并通过一个值框转发 `{ value }` 给斯维尔特 `derived` 通知书。 同一个对象引用和 `NaN` 跳过通知时 `+0` 财务报告和审定财务报表 `-0` 以不同的值提供.
-   源和共享上下文保留了现有的单一核心订阅并最后发布;在SSR渲染完成后,核心订阅计数为0.
-   第一次订阅和重新订阅同步提供最新的值,并保持快照绑定 `t` 财务报告和审定财务报表 `setLocale`编号 :`loadNamespace`。 。 。 .
-   现有 `createSvelteStore` 财务报告和审定财务报表 `getI18n` 保持不变.

选择者提出的例外,视其发生时间不同,处理方式不同. 第一次订阅或重新订阅期间的失败处理新订阅, 然后同步重投选择器所抛出的值( 即使它不是一个错误或正在) `undefined`),以及 `onError` 本案中不要求这样做。 它不返回先前的成功值。 如果在活动订阅正在更新快照时发生故障,则保留最后一个成功值,在下一次快照上再次尝试选择器,没有无效或通知. 报告失败情况 `onError`,或与 `console.error('[saylo:svelte] selector failed', error)` 何时 `onError` 未指定。 若为 `onError` 萨洛自投自弃,以 `console.error('[saylo:svelte] selector error reporter failed', reportingError)` 斯维尔特继续通知. `options` 包含在 `0.1.0-alpha.4` 释放.

```ts
const title = selectSvelteStore(i18n, snapshot => snapshot.t('cart:title'), {
  onError: error => console.error('selector failed', error),
});
```

制约因素如下。 保持选择器的纯计算 。 如果选取者抓取道具,单凭道具的改变就不会产生出源通知,所以不会自动被重新选中. 如果选择器每次返回一个新的对象或阵列, `Object.is` 不同,每张快照都有通知火灾 将动态组件参数与现有的 `$i18n` 和斯维尔特 `$derived`。 。 。 .

```svelte
<script lang="ts">
  let { name }: { name: string } = $props();
  const i18n = getI18n();
  const greeting = $derived($i18n.t('demo:greeting', { name }));
</script>
<p>{greeting}</p>
```

## 抓图和所有权

-   第一次订阅同步提供当前值. 虽然订阅者存在,但他们共享一个单一的核心订阅;当最后的订阅结束时,核心订阅和处置的收听器被放出.
-   在没有订阅者的情况下更改的目录会在下一次订阅时被读取. `t` 从早先的快照中可以保存早先的翻译.
-   Svelte 处理组件的 `$i18n` 订阅。 创建这个案例的打电话者负责 `dispose()`。适配器不会丢弃实例.
-   在SSR中,每个请求创建一个实例并传递给父上下文. 工厂可以共享,但不在服务器上共享实例. 从同一核心启动快照创建第一个服务器和客户端实例, 并在挂载后启动活连接 .

运行校验方式 `npm run test --workspace=@0disoft/saylo-svelte` 财务报告和审定财务报表 `npm run typecheck:consumers --workspace=@0disoft/saylo-svelte`覆盖的范围包括SSSR请求和嵌入上下文隔离、匹配SSR标记的水合、未订阅、快照翻译、JS/TS消费者以及保存输入、焦点、光标、对话框和编译组件中的状态。 这个 [斯维尔特演示](https://github.com/0disoft/saylo/tree/main/examples/svelte) 财务报告和审定财务报表 [执行说明](https://github.com/0disoft/saylo/blob/main/docs/38-svelte-adapter.md) 描述如何连接它和真正的浏览器验证.

## 丰富的文本组件( RichText. svelte)

按核心返回的渲染器部件 `tParts` 作为斯维尔特5组件. 根条目保存商店 API 并只导出 `RichTextProps` 财务报告和审定财务报表 `RichTextRenderers` 类型; 组件作为默认导入单独导入。 根导入工作在Node SSR中不汇编斯维尔特.

```svelte
<script lang="ts">
  import type { Snippet } from 'svelte';
  import type { RichTextPart } from '@0disoft/saylo-core';
  import RichText from '@0disoft/saylo-svelte/RichText.svelte';

  let { parts }: { parts: readonly RichTextPart[] } = $props();
</script>

{#snippet strong(children: Snippet)}
  <strong>{@render children()}</strong>
{/snippet}

{#snippet link(children: Snippet)}
  <a href="#order-form">{@render children()}</a>
{/snippet}

<RichText {parts} renderers={{ strong, link }} />
```

道具是... 道具是 道具是道具 是道具 `parts: readonly RichTextPart[]` 和可选 `renderers?: Readonly<Record<string, Snippet<[Snippet]>>>`。一个渲染器值是接收一个儿童渲染器的片段,应用程序调用 `{@render children()}` 使内部在那个位置.

合同如下.

-   文本部分成为模板文本并斯维尔特逃脱. 该组件不使用 `{@html}`。 。 。 .
-   标记部分只有在其名称是渲染器的自有属性而值是片段时才会被片段所制取. 如果缺少或没有片段,则不创建标签,只提供孩子.
-   检查只拥有属性 。 从原型中继承的名称,例如 `constructor` 财务报告和审定财务报表 `toString`让他们的孩子.
-   Saylo不从目录中产生任意的DOM标记,HTML,属性,或URL. 链接和属性仅被添加到应用程序在渲染器中设置的名称上.
-   密钥是标记名外加一个出错编号(`tag:link:0`, (中文(简体) ), `tag:link:1`) (中文(简体) ). 在复制编辑或文字插入后保留节点身份.
-   渲染器片段必须为同一种标记保持同类型. 如果类型发生变化,则会重新创建节点并输入,焦点,状态会丢失.

`dist/RichText.svelte` 由消费者Svelte 5编译器作为来源出版并编译. 它与联署材料和类型申报的帮手同船,并与现有的Svelte 5和 `@sveltejs/vite-plugin-svelte` 7个设置. 要SSR在节点中的组件,消费者用斯维尔特编译器编译.

合同、关键规则、演示和核查状况见 [80-svelte-rich-text.md (英语)](https://github.com/0disoft/saylo/blob/main/docs/80-svelte-rich-text.md)。本部分为地方承诺 `010a600` 却不在 `0.1.0-alpha.4` 释放.

## 问题和安全报告

发送一般问题、 特性建议和错误到 [rodisoft1@gmail.com (英语)](mailto:rodisoft1@gmail.com)包含软件包和版本,环境,预期和实际行为,以及从合成数据中构建的最小复制. 将安全问题私下报告给同一电子邮件 `Saylo security` 主题。 不要发送指使符,密钥,饼干,或真实的用户数据.

如果您安装了Vite 软件包, 您可以在 `node_modules/@0disoft/saylo-vite/docs/support.md` 财务报告和审定财务报表 `security.md`。这些指南和软件包的联系元数据包含在α.5中。 早期的α.4焦油丸并不含.

在Apache-2.0下获得许可,柏油球包括: `LICENSE` 财务报告和审定财务报表 `NOTICE`。 。 。 .

## 常见问题

### @0disoft/saylo-svelte 是什么？

Svelte 5 为 Saylo 装订有打出上下文并带有快照的翻译存储\.

### 如何安装 @0disoft/saylo-svelte？

在项目目录运行 npm install @0disoft/saylo-svelte，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：svelte（5）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @0disoft/saylo-svelte 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @0disoft/saylo-svelte 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @0disoft/saylo-svelte 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js 24\.x。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @0disoft/saylo-svelte 可以商用吗？

@0disoft/saylo-svelte 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @0disoft/saylo-svelte 的下载量有多少？

根据 npm 官方下载统计，@0disoft/saylo-svelte 在 2026/10/04 – 2026/11/02 这 30 天内被下载 2,099 次，日均约 70 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @0disoft/saylo-svelte 还在维护吗？

最新版本 0\.1\.0 发布于 2026/11/09（今天）；至今共发布 10 个版本，其中过去 12 个月发布了 10 个；首次发布于 2026/10/08。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。