@ 0disoft/ saylo- svelte (英语)
版本 0.1.0 也可以选择导出
StrictRichTextRenderers<AppRichTextSchema, Key> 用于检查片段地图
生成标签合同。 见 严格的丰富文本类型。 。 。 .
该类型包括在 0.1.0; 已有 <RichText> 行为不变.
在Svelte 5上 $i18n. 该软件包提供了EME JavaScript和TypeScript声明文件. 这个读取器描述 0.1.0 (dist-tag语) latest) (中文(简体) ). 见 发布注释 用于范围和验证。 斯维尔特自 0.1.0-alpha.2。以下两个选择的 API 都包含在 0.1.0-alpha.4 释放.
直接订阅
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 懒惰的个案也被转交.
通过上下文
在应用模块中创建一次打字厂.
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>() 通过上下文通过同一选择器.
import { selectSvelteStore } from '@0disoft/saylo-svelte';
const title = selectSvelteStore(i18n, snapshot => snapshot.t('cart:title'));
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 释放.
const title = selectSvelteStore(i18n, snapshot => snapshot.t('cart:title'), {
onError: error => console.error('selector failed', error),
});
制约因素如下。 保持选择器的纯计算 。 如果选取者抓取道具,单凭道具的改变就不会产生出源通知,所以不会自动被重新选中. 如果选择器每次返回一个新的对象或阵列, Object.is 不同,每张快照都有通知火灾 将动态组件参数与现有的 $i18n 和斯维尔特 $derived。 。 。 .
<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消费者以及保存输入、焦点、光标、对话框和编译组件中的状态。 这个 斯维尔特演示 财务报告和审定财务报表 执行说明 描述如何连接它和真正的浏览器验证.
丰富的文本组件( RichText. svelte)
按核心返回的渲染器部件 tParts 作为斯维尔特5组件. 根条目保存商店 API 并只导出 RichTextProps 财务报告和审定财务报表 RichTextRenderers 类型; 组件作为默认导入单独导入。 根导入工作在Node SSR中不汇编斯维尔特.
<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 (英语)。本部分为地方承诺 010a600 却不在 0.1.0-alpha.4 释放.
问题和安全报告
发送一般问题、 特性建议和错误到 [email protected] (英语)包含软件包和版本,环境,预期和实际行为,以及从合成数据中构建的最小复制. 将安全问题私下报告给同一电子邮件 Saylo security 主题。 不要发送指使符,密钥,饼干,或真实的用户数据.
如果您安装了Vite 软件包, 您可以在 node_modules/@0disoft/saylo-vite/docs/support.md 财务报告和审定财务报表 security.md。这些指南和软件包的联系元数据包含在α.5中。 早期的α.4焦油丸并不含.
在Apache-2.0下获得许可,柏油球包括: LICENSE 财务报告和审定财务报表 NOTICE。 。 。 .