@ domainkit/ 反应

用于自定义域设置的无头反应钩子,通过您服务器拥有的传输. 包裹 供应说明、复制和可访问性;您的应用程序提供标记。 供应商证书 永远不能到达浏览器 .

联合国 域名- kit.dev

安装

npm install @domainkit/react domainkit effect react react-dom

需要反应19。 安装 domainkit 财务报告和审定财务报表 @domainkit/react 在同一个发行版本.

对于有样式的构成,请将来自 DomainKit 注册的流加入您的阴影包 :

npx shadcn@latest add https://domain-kit.dev/r/domain-flow.json

一个钩子

"use client";

import { DnsRecord } from "domainkit";
import { Transport } from "domainkit/client";
import { Domain, DomainKit } from "@domainkit/react";

const transport = Transport.fromFetch("/api/domainkit");

const requirements = [
  DnsRecord.cname({ name: "app.example.com", target: "edge.acme.dev", purpose: "Serve your site" }),
  DnsRecord.txt({
    name: "_acme.app.example.com",
    value: "acme-verify=7f3a",
    purpose: "Prove ownership",
  }),
];

function DomainSetup() {
  const flow = Domain.useFlow({ domain: "app.example.com", requirements });
  return <DomainFlowCard flow={flow} />;
}

export function DomainSettings() {
  return (
    <DomainKit.Root transport={transport}>
      <DomainSetup />
    </DomainKit.Root>
  );
}

Domain.useFlow 连接一个提供者,规划 DNS 更改,取得客户的批准或 拒绝,适用计划,遵守记录,并根据申请收据清理记录。 这个 返回四个控制器、计划行报告、最新准备状态、能力组 运输申报,a FlowState 你自己的表面读取.

Transport.fromFetch 在您所搭载的路线上的点数 domainkit/server。将其写入 JSX没事: DomainKit.Root 将运输器的身份保存在整个挂载上,所以控制器 不要在每次渲染时重启。 过 revision 以在更改后重新检查每个挂载域 乌伊没有做到.

一个交互式提供者将客户返回到他们开始的页面. 过 returnTo 改为名称 不同的目的地,或 null 离开服务器的 defaultReturnTo 负责.

回调恢复

Connect.useRecovery() 返回名称 Connect.Recovery 与 outcome 财务报告和审定财务报表 dismiss()。 。 。 . 结果是 CallbackRecovery.Model 从 domainkit/client数字 : kind 实值 cancelled, (中文(简体) ), restart,或 inspect, (中文(简体) ), provider 确定再次报价的提供者,并可选择 connectionId 确定用于重新认证的现有连接。 回调提示是 不是成功联系的证据。 对于 inspect,在重试前检查连接的账户.

将提示显示为 recoveryCancelled(provider), (中文(简体) ), recoveryRestart(provider),或 recoveryInspect(provider) 从 Messages.Catalog,通过提供者的显示名。 每个 返回标题和描述。 用目录 retry 财务报告和审定财务报表 dismissRecovery 动作标签. 重试调用已有的连接控制器 connect({ provider, method }) 与 顾客选择的方法。 当提示包含时 connectionId电话 reconnect({ connectionId, provider, method }) 换句话说 域控制器和账户 控制器曝光; 域输入为 Connect.ReconnectInput. 解散清除可见的警报. 控制器剥离默认当前恢复参数 返回 URL ,即使另一个控件开始尝试,当前页面保持不变.

dismiss() 删除回收参数通过 history.replaceState,保存主机历史 状态,不相关的查询参数,和无导航的散列。 钩子回来了 null 期间 然后读取浏览器 URL。 它跟随浏览器 历史和散列事件并检查主机重报的 URL; 更改历史的客户端路由器 无需浏览器事件必须重新给消费者。 钩子不需要 DomainKit.Root。 。 。 .

流言对一个域的意义

flow.state 这是DomainKit必须说, 所以你自己的报价可以 命令旁边,而不是 与它竞争.

发现提供商的名字,其名称服务于域,以及 Connect.hostProvider 返回时 它的描述。 当没有注册供应商为这个区域服务时,域名Kit无法连接, 这样 offering 是虚假的。 过 connect: "always" 提供所有供应商,或者 connect: "never" 您的应用程序已经解决了另一个问题.

连接是客户对记录说"同意",所以计划建立自己的时刻 连接在连接符后和客户从提供者返回后着陆。 一个 approve 添加它们,而流又观测到域来读回. 一个已经存在的域 当后来的观察读取了其中的一则记录丢失,或者 错误,因此在提供者被删除的记录再次从同一个按钮中提供. 记录流动 自己的清理被带走不是那样的.

主计长

由同钩自作出流相. 每个选项对象返回一个命名对象 Controller 谁 State 是一个有标记的工会.

const connection = Connect.useController({ domain });
const provisioning = Provision.useController({ domain, requirements, onApplied });
const cleanup = Cleanup.useController({ domain, receiptId, onCleaned });
const verification = Verify.useController({ domain, polling: true });

approve 授权计划文摘并加以应用. reject (一) 记录客户拒绝 尝试是终极的,需要一个新的计划. retry 当理由说出旧的时 制定新的计划 一个不见了, 重做失败的步骤 否则.

Connect.describeMethods 将一个提供者的认证方法安排到交互式方法中 点击和要求获得证书的人,所以一个连接的表面请求在 一个时间. Connect.rejectedField 命名一个拒绝的字段.

添加一个域

Connect.useZones 列出工作空间账户覆盖的每一区域, Connect.useAccounts 添加 另一个账户,不指定一个域并列出已经连接的域,每个域与 label 提供方提供的null 当时,供货商未点名 Connect.useDomainField 将文本输入转换为 这些区域上的组合框: 它返回 inputProps, (中文(简体) ), listboxProps,以及 optionProps移动 以箭头键突出显示,并在 Tab 或 Enter 上完成,同时保留任何子域 键入区前。 已经拥有被打出的名字的区是 自己最深处的 先说 一个没有连接区域 的完成名称 没有任何意义.

const { zones } = Connect.useZones();
const field = Connect.useDomainField({ zones, value, onChange: setValue, onResolve });

<input {...field.inputProps} />
<ul {...field.listboxProps}>
  {field.suggestions.map((zone) => (
    <li key={`${zone.connectionId}:${zone.zone}`} {...field.optionProps(zone)}>
      {zone.zone}
    </li>
  ))}
</ul>;

成员的意见

可能读取域名但不会更改域名的客户 readOnly国家仍然提交报告 命令将更改域名 拒绝运行, 在控制器而不是在您的标记中, 所以不管怎样,你的控制无法到达运输.

<DomainKit.Root transport={transport} readOnly>
  <DomainSetup />
</DomainKit.Root>

Domain.useFlow 当页面上只有一个域只读时, 使用相同的旗帜, 并使用 flow.state.readOnly,所以你的表面可以说谁可以连接 而不是渲染什么. 能力标注是另一半:运输未申报的组没有参加 flow.capabilities,所以运输 建造与 Transport.fromFetch(url, { capabilities: ["connection", "verification"] }) 已经排除了 提供和清理. readOnly 包括不能表示的运输许可,例如: 达到同一路线的组织成员.

核查并不等待连接:流量遵守它给出的要求,所以 域名中没有任何提供者,但仍然有记录.

一个在自己的钟表上观察的宿主 通过了它所拥有的准备状态 Domain.useFlow({ verification: { readiness, observe } }),或作为 supplied 打开 Verify.useController。然后钩子在挂载上观察不到任何东西,没有设置计时器和路径 observe 财务报告和审定财务报表 retry 而漂移的再规划则会从所提供的价值中流出.

观察和核查重试保留只读,因为检查 DNS 读取 而不是改变域名。 供给和清理复试被拒. 连接 重新检查而不是重新发送失败的写入 .

单词

Messages.Catalog 每个用户可见字符串,包括标题和描述 DomainKit.Error 理由; 没有什么能成为标记、 状态文字或理由名称 。 过 messages 改为 DomainKit.Root 以覆盖任意密钥.

const describe = Outcome.useDescribe();
const words = describe(error, { provider: "Cloudflare" });

记录

Records.standingOf 回答两个事实 planned,操作计划待定 保持记录,和 observed,要求最后保存的观察,证据 包含。 都一样 null。 。 。 . Records.useCopy 是剪贴板控制一个值需要,并且 Records.toZoneFile 财务报告和审定财务报表 Records.downloadZoneFile 拼写对客户的全部要求 谁用手编辑 DNS.

下一个.js

包项携带 "use client"。运输是函数的对象,所以在内部构建 一个客户端模块,而不是从服务器组件中传递一个.

学多点

• 书记官处
• 反应源
• 运输合同
• 问题

许可证

麻省理工学院