@ contentful/ 经验- svelte
⚠️ 阿尔法. 发布至npm. API是不稳定的,并将改变.
内容体验SDK的斯维尔特适配器. 你带来了自己的Svelte 5组件;它使经验载荷从经验交付API(XDA)中与之并用.
npm install @contentful/experiences-svelte
这是你唯一安装的渲染SDK包. 它可以再出口你需要的一切 @contentful/experiences-sdk-core, (中文(简体) ), @contentful/experiences-design,以及 @contentful/experiences-client选项 @contentful/experiences-live-preview 软件包也是客户界面,并提供框架中性活预览客户端.
公共API镜像 @contentful/experiences-react 1:1为外形;只有渲染出原始物改变(Svelte 5) Components, 片断代替 children: ReactNode,以及 getDesignValues() 改为 useDesignValues()) (中文(简体) ).
公共 API
撰写
defineComponent<Props>(config); // Type-narrowing identity for component-type configs
defineExperienceTemplate<Props>(config); // Same shape, for coded Experience Template configs
获取
fetchExperience(experienceOptions, clientOptions, resolveOptions); // Async; fetches by Destination path/node id or Experience id and resolves in one call
fetchDestinationSitemap(destinationOptions, clientOptions, paginationOptions?); // Async; lists every routable path in a Destination
fetchPreviewSession(previewSessionOptions, clientOptions, resolveOptions); // Async; fetches and resolves a Preview Session Experience
从目标服务页面: URL 路径是目标路径 。 重定向节点作为值而不是错误返回. 在目标上不支持预览( 它抛出) DestinationPreviewNotSupportedError; 预览时使用代号表.
const result = await fetchExperience(
{ spaceId, destinationId, path: '/demo/landing' },
{ accessToken },
{ config: experienceConfig }
);
if ('redirect' in result) {
// follow it: navigate to result.redirect.path
}
// otherwise `result` is a PortableRenderPlan
// Enumerate every routable path, for example to prerender
const sitemap = await fetchDestinationSitemap({ spaceId, destinationId }, { accessToken });
const paths = sitemap.items.map((item) => item.path); // follow sitemap.pages.next for more
使用 fetchPreviewSession 内容应用程序时的初始渲染
页:1 preview_session_id预览会话
{\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}快照并解析成 PortableRenderPlan启用 useLivePreview 改为
接收随后的 WebSocket 更新 :
const plan = await fetchPreviewSession(
{ spaceId, environmentId, sessionId },
{ previewToken },
{ config: experienceConfig }
);
如果预览会话引用了来自其他空格的资源,则通过同样的
编码 resourceResolution 数值 previewSessionOptions 转至
fetchPreviewSession 财务报告和审定财务报表 useLivePreview。 。 。 .
解析器
resolveExperience(payload, config, opts?); // Async; walks payload, runs resolveData, returns a PortableRenderPlan
现场预览
使用 useLivePreview 当应用程序订阅预览会话更新时,
解决每个有效载荷,并将由此产生的计划从 data数字 :
<script lang="ts">
const livePreview = useLivePreview(() => ({
previewSessionOptions,
initialPayload,
initialPlan,
resolveOptions: { config: experienceConfig },
}));
</script>
<ClientExperienceRenderer experience={livePreview.data} config={experienceConfig} />
单独获取原始有效载荷和制作计划,使用
useLivePreviewExperience 财务报告和审定财务报表 useExperiencePlan数字 :
<script lang="ts">
const livePreview = useLivePreviewExperience(() => ({
previewSessionOptions: {
spaceId,
environmentId,
previewToken,
sessionId,
},
initialPayload,
}));
const plan = useExperiencePlan(() => ({
payload: livePreview.data,
initialPlan,
resolveOptions: { config: experienceConfig },
}));
</script>
<ClientExperienceRenderer experience={plan.data} config={experienceConfig} />
useLivePreviewExperience 返回最新的原始有效载荷.
initialPayload 种子第一个值. useExperiencePlan 转换有效载荷
输入 PortableRenderPlan 由制造器所消耗并保持电流
正在解决最新情况.
现场审查的结果也暴露了 error 预览会话连接时
失败。 最后一个有效 data 现保留.
渲染器
ServerExperienceRenderer; // SSR-safe renderer
ClientExperienceRenderer; // Client renderer
MissingComponent; // Default fallback for unregistered component types
NodesRenderer; // Exposed so you can re-render a slot's raw nodes yourself (see Slot children)
Styling + 运行时上下文 (帮助)
getDesignValues<T>(); // Escape hatch: the same resolved design record that auto-fills props; read in a $derived to stay reactive
toCss(design, options?); // Turns a design record into a plain style object, keeping only real CSS keys
getExperience(); // RenderContext: debug, metadata
getContentfulComponent(); // Raw payload for the enclosing node (or undefined), including `attribution`
getContentfulExperienceTemplate(); // Same, for an enclosing coded Experience Template node
getTrackingAttributes(attribution); // Attributes to spread on a node's outermost element for interaction tracking
type ToCssOptions;
确定的设计值为 自动填入您的组件道具 和内容一起。 样式从 $props() 是一条推荐路径. getDesignValues() 揭露出与出逃舱门相同的记录. 仅针对并非登记成分的被窝儿童,或用于在渲染道外所需的设计(一种效应,一种必须测量)——见 样式组件选项 resolveToken 在你身边 Config (单位:千美元)type ResolveToken) (中文(简体) ).
再出口类型和公用事业
// From core
type Config, Components, ExperienceTemplates, Registration, ExperienceTemplateRegistration,
type ComponentConfig, ExperienceTemplateConfig,
type ContentfulComponent, ContentfulExperienceTemplate,
type RenderContext, ResolveToken,
type ExperiencePayload, ExperienceNode, ComponentNode, ExperienceTemplateNode,
type PortableRenderPlan, PortableRenderNode, PortableRegistration,
type DesignPropValue, ManualDesignValue, DesignToken, ExperienceContext, ResolveContext,
type ResolverConfig, ResolveExperienceOptions
// From design
isCssProperty, toCssKey, CSS_PROPERTIES
// From client
fetchExperience, fetchDestinationSitemap, fetchPreviewSession, createClient, ContentfulViewDelivery,
ContentfulViewDeliveryClient, NotFoundError, DestinationPreviewNotSupportedError, PreviewSessionFetchError,
LivePreviewConnectionError,
DELIVERY_HOST, PREVIEW_HOST, PREVIEW_WEBSOCKET_HOST
type ExperienceOptions, ByIdExperienceOptions, ByDestinationPathExperienceOptions,
ByDestinationNodeIdExperienceOptions, DestinationRedirectResult, DestinationSitemapResult,
FetchDestinationSitemapOptions, FetchDestinationSitemapPaginationOptions, SitemapPathItem,
PreviewSessionExperienceOptions, PreviewSessionClientOptions,
PreviewSessionResolveOptions, ClientOptions, ResolveOptions, CreateClientOptions
快速引用
<!-- Button.svelte: content + resolved design both arrive as props -->
<script lang="ts">
interface ButtonProps {
label?: string;
url?: string;
backgroundColor?: string; // resolved design, auto-filled
color?: string;
}
let { label = 'Button', url, backgroundColor, color }: ButtonProps = $props();
</script>
{#if url}
<a href={url} style="background: {backgroundColor}; color: {color};">{label}</a>
{:else}
<button type="button" style="background: {backgroundColor}; color: {color};">{label}</button>
{/if}
// experience-config.ts
import {
defineComponent,
type Components,
type Config,
type ResolveToken,
} from '@contentful/experiences-svelte';
import Button from './components/Button.svelte';
import type { ButtonProps } from './components/Button.svelte';
const components: Components = {
// Bare component, or defineComponent({...}) when you need defaults/resolveData.
Button: defineComponent<ButtonProps>({
resolveData: ({ content }) => ({ url: ensureScheme(content.url) }),
component: Button,
}),
};
const resolveToken: ResolveToken = (token) => designTokens[token.value];
export const experienceConfig: Config = { components, resolveToken };
<!-- +page.svelte -->
<script lang="ts">
import { ServerExperienceRenderer } from '@contentful/experiences-svelte';
let { data } = $props();
</script>
<ServerExperienceRenderer experience={data.experience} config={experienceConfig} />
间隔儿童
每个插槽都是以插槽命名的道具 片段数组 (单位:千美元)Snippet[]),每个孩子一个——不是一个包片. 对于普通的"让它们变成"例,用 {#each} 财务报告和审定财务报表 {@render}(笑声) (掌声) (掌声) (掌声) (掌声) (掌声) (掌声) (掌声) (掌声) (掌声) .
<!-- Section.svelte -->
<script lang="ts">
import type { Snippet } from 'svelte';
let { children }: { children?: Snippet[] } = $props();
</script>
<!-- Common case — render them all: -->
<div>
{#each children ?? [] as child}
{@render child()}
{/each}
</div>
<!-- Or take control of each child: -->
<!--
<div>
{#each children ?? [] as child, i}
<div class="cell">{@render child()}</div>
{/each}
</div>
-->
children 不是特别的——它只是默认槽的常规名称. 每个 有效载荷中的槽变成同名的 Snippet[] 道具,所以一个组件有一个 header 位置刚刚宣布 header?: Snippet[] 并让它同样的方式。 这同样适用于编码的经验模板:带有 content 槽收到一个 content 道具 (英语).
如果你宁愿自己制造一个插口的生节点,它们仍然在有效载荷上 getContentfulComponent().slots 联合国 Record<string, PortableRenderNode[]>)——交给 NodesRenderer。 。 。 .
关于全面开始的走过、合并优先规则和设计原理,见 根读取 财务报告和审定财务报表 AGENTS.md。 。 。 .
许可证
麻省理工学院. 见寄存器 LICENSE 财务报告和审定财务报表 NOTICE 完全归属.
运行时间参数
位码 fetchExperience 接受 parameters,例如
{ featuredPosts: { limit: 6, order: '-fields.title' } }斯卡拉尔是弦或
数字; 记录叶有一个关卡。 命令是签字的 fields.<apiName> 或者说
sys.<id> 路径。 以已改变的值进行回溯,然后替换出质器的计划.
出口包括 ExperienceParameters, (中文(简体) ), ExperienceParameterValue, (中文(简体) ),
ExperienceParameterRecord,以及 ExperienceParameterOrder。 。 。 .
见 收藏/比较示例。 。 。 .