@ calimero-network/mero-反应

反应约束 卡利梅罗1.0-js的28个客户端上CalimeroClient) (中文(简体) ).

一个1.0节点运行在一个经过认证的TDX集群中. 客户端验证了节点的证明,将每个请求封入节点验证的密钥,并签字人与 密码. mero-react 将一个客户端放入上下文,并在上面搭起钩子:

• 密码签入和注册;
• 由自己恢复活力的会议;
• 在应用实例上打电话、观看和直播活动;
• 组织、团队和邀请;
• (a) 节点同意页;
• 斑点和存在;
• 输入错误, 您的用户界面可以打开 .

从10x升级? 11.0是核心1.0的重写,已删除 /admin-api, (中文(简体) ), /jsonrpc, (中文(简体) ), /ws, (中文(简体) ), /sse, 美罗- 奥斯和 /auth/token读取 从10.x移走 见下文.

安装

pnpm add @calimero-network/mero-react

@calimero-network/mero-js (^28.0) 随它而来,每出米罗-js出口都是再出口,所以应用只需要这个进口. 反应18或19是一种同龄依赖.

快开始

import {
  MeroProvider,
  ConnectButton,
  useMero,
  useView,
  useExecute,
  useSubscription,
} from '@calimero-network/mero-react';

export function Root() {
  return (
    // A frontend the node serves at {label}.{apps-domain}:
    <MeroProvider servedByNode minReleaseVersion="2.3.109" appId={APP_ID}>
      <App />
    </MeroProvider>
  );
}

function App() {
  const { isAuthenticated } = useMero();
  const items = useView<string[]>('list_items');
  const { execute, failure } = useExecute();
  useSubscription(undefined, (event) => {
    if (event.kind === 'ItemAdded') void items.refetch();
  });

  if (!isAuthenticated) return <ConnectButton appName="Notes" />;
  return (
    <>
      <ul>{items.data?.map((item) => <li key={item}>{item}</li>)}</ul>
      <button onClick={() => execute('add_item', { text: 'hello' })}>Add</button>
      {failure && <p role="alert">{failure.message}</p>}
    </>
  );
}

在别处托管的前端按名称到达 Calimero Cloud 集群, 在其节点之间失效:

<MeroProvider cluster="eu-shared-1" minReleaseVersion="2.3.109" appId={APP_ID}>

用于地方发展 merod local (三个) --dev 带模拟证明的节点,127.0.0.1:2501-2503:

<MeroProvider
  nodeUrl="http://127.0.0.1:2501"
  nodes={['http://127.0.0.1:2502', 'http://127.0.0.1:2503']}
  allowMock
>

allowMock 接受模拟证明引用。 永远不要从任何访问者控制的东西中设置它,例如一个URL参数或一个已部署的建筑的环境.

<MeroProvider>

useMero()

const {
  client,            // CalimeroClient | null (null until a node is known, or a cluster's nodes are)
  nodeUrl,           // the node in use
  cluster,           // the cluster connected to by name, or null
  isConnecting,      // the node directory is being read
  connectToNode,     // (url) => void
  connectToCluster,  // (name) => void
  disconnect,
  session, accountId, isAuthenticated, isLoading,
  signIn,            // () => Promise<CalimeroSession | null>: an existing passkey
  signUp,            // (name) => Promise<CalimeroSession | null>: a new account and passkey
  signOut, signOutEverywhere,
  appId, setAppId,
  passkey, servedByNode, allowMock,
  failure,           // the last sign-in, connection or session failure, described
  reportError,
} = useMero();

会议. 1.0会话是会话符号(v2.…持续15分钟,加上一个刷新符号(rt_…),持续30天,可以使用一次.

• 客户端自己刷新到一个 401。每个等待更新的请求都会共享一个刷新,因为重新使用刷新符使会话取消。 当发布会话的节点消失后,刷新会转到集群的另一个节点(mero-js#318).
• 提供者将每个新会话保存到 sessionStore,所以重新装入会话恢复.
• 当拒绝刷新时,钩子就会 LoginRequired,提供者结束会话并设定 failure.kind = 'login'。 。 。 .
• mero 作为已贬值的别名 client。 。 。 .

钩子

每个已读钩子返回 { data, loading, error, failure, refetch }。每个动作钩返回动作加 { loading, error, failure }。 。 。 .

• error 与客户端抛出的错误完全一样,所以 instanceof AppError 还行.
• failure 实值 describeError(error); 见 错误。 。 。 .
• 动作解决 null 当它失败时。 过 { throwOnError: true } 把它扔出来.

App:电话、视图、事件

appId 默认为提供者 appId。 。 。 .

怎么样 useSubscription 行为 :

• 每个应用程序都有一个 SSE 流出一个 AbortController。卸载,或更改应用标识,中止.
• 结束或失败的流会重新打开, 并且从它看到的最后一个事件返回 。 在那之前或之前的事件被跳过, 所以没有被两次交付.
• from 默认为 'live'。通过一个日志索引从中重放(0 重放整个历史).
• onOpen 每次开出一串溪流,都叫它。 折射视图以覆盖缺口 .

应用程序

组织和团队

密码继位. 由于 mero-js 28 节点批准成员变化,能力,邀请,密码和API 键与呼叫者的密码:它回答 412 CONFIRM_REQUIRED 和客户端回答 提供商的 passkey (单位:千美元)browserPasskey() 因此,人看到一个密码提示。 解职的提示失败 failure.kind = 'cancelled'。 。 。 .

邀请

inviteLink(token, base?) 财务报告和审定财务报表 readInviteToken(href) 也输出.

同意页

批准只出现在节点自始至终的页面上,从不出现在一个应用中. 在应用程序前端开的会话不能批准任何东西.

const consent = useConsent();
await consent.open(upgradeConsent(appId, '1.2.0', window.location.href), {
  // Show the confirmation code before leaving; the node's page shows the same one.
  confirm: (started) => window.confirm(`The approval page will show the code ${started.code}. Continue?`),
}); // then navigates to the node's page
// … back on returnTo:
if (consent.returned) await consent.check(consent.returned.requestId);    // confirm the hint
// or, when the page was opened in another window:
await consent.wait(started.requestId);

useConsent() 返回时 { request, open, check, wait, cancel, started, code, result, returned, … }。 。 。 . code 是确认代码( a)XXX-XXX) 正在处理中的请求的同意页:在链接旁边或输入 open是因为 confirm,这样这个人就可以检查他们降落在 他们的要求打开的页面. open 掷出 CONSENT_CODE_MISMATCH 当节点的代码与请求不符时( mero-js) confirmationCode) (中文(简体) ). 用 mero-js 构建请求 releaseConsent, (中文(简体) ), withdrawConsent 财务报告和审定财务报表 upgradeConsent。 。 。 .

集团、存在、账户

错误

mero-js 映射每次拒绝输入错误(errorFrom, mero-js #312 (英语). 元反应保持错误 error 添加 failure = describeError(error)数字 :

type Failure = {
  kind: FailureKind;          // see the table
  message: string;            // a sentence you can show as it is
  retryable: boolean;
  status?: number; code?: string;
  appCode?: string; fields?: Record<string, unknown>;   // kind 'app'
  committed?: false | 'unknown';                         // kind 'unavailable'
  release?: string;                                      // kind 'release-deadline'
  error: unknown;
};

构成部分

• <ConnectButton appName? allowSignUp? initialTab? theme? logoOnly? label? />签名,它显示"签名"并打开 LoginModal签名,它显示账户, 并有一个菜单 签名和签署到任何地方.
• <LoginModal isOpen onClose onSignedIn? initialTab? allowSignUp? appName? theme? />。用密码签名,或创建账户,该账户要求姓名。 在节点保存的一页上,它首先询问节点URL或集群名称.

他们

传递部分 MeroTheme (单位:千美元)primary, (中文(简体) ), primaryHover, (中文(简体) ), primaryText, (中文(简体) ), background, (中文(简体) ), backgroundSecondary, (中文(简体) ), backgroundTertiary, (中文(简体) ), border, (中文(简体) ), text, (中文(简体) ), textSecondary, (中文(简体) ), error, (中文(简体) ), overlay, (中文(简体) ), radius),或设置 --mero-* 全球CSS变量:

:root {
  --mero-accent: #ff4081;
  --mero-accent-hover: #e91e63;
}

对话框的课是 mero-dialog-overlay, (中文(简体) ), mero-dialog-panel, (中文(简体) ), mero-dialog-title, (中文(简体) ), mero-dialog-body, (中文(简体) ), mero-dialog-field, (中文(简体) ), mero-dialog-input, (中文(简体) ), mero-dialog-button, (中文(简体) ), mero-dialog-primary, (中文(简体) ), mero-dialog-secondary 财务报告和审定财务报表 mero-dialog-link按钮的课是 mero-connect-button, (中文(简体) ), mero-dropdown 财务报告和审定财务报表 mero-dropdown-item。 。 。 .

存储

• localStorageSessionStore 财务报告和审定财务报表 memorySessionStore(): 会话存储.
• getNodeUrl 编号 : setNodeUrl 编号 : clearNodeUrl, (中文(简体) ), getCluster 编号 : setCluster 编号 : clearCluster 财务报告和审定财务报表 getAppId 编号 : setAppId 编号 : clearAppId。 。 。 .
• clearAllStorage() 清除所有上述内容.
• 密钥 : mero:session, (中文(简体) ), mero:nodeUrl, (中文(简体) ), mero:cluster, (中文(简体) ), mero:appId. 10.x 符号不读.

从10.x移走

核心1.0是一个不同的节点,而mero-js 28是一个不同的客户端,因此11.0是一个破解放出. 大多数应用端口都是机械的:

1. 供养者.
   • 丢弃 mode, (中文(简体) ), packageName, (中文(简体) ), packageVersion, (中文(简体) ), registryUrl, (中文(简体) ), cloudBaseUrl, (中文(简体) ), timeoutMs, (中文(简体) ), allowedNodeUrls 财务报告和审定财务报表 tokenStore。 。 。 .
   • 添加 minReleaseVersion (生产)或 allowMock (单位:千美元)merod local) (中文(简体) ).
   • 保留 servedByNode。通过 appId 如果应用程序能用到一个实例.
2. 客户端.
   • useMero().mero 联合国 MeroJs 或中继客户端)现在 useMero().client 联合国 CalimeroClient) (中文(简体) ).
   • mero.rpc.execute({ contextId, method, argsJson, executorPublicKey }) 现在 client.call(appId, method, args),或 client.view(…) 读取.
3. 词汇.
   • 上下文现在是应用实例( s)appId(三);
   • 命名空间现在是组织;
   • 团队现在是团队;
   • 执行器/节点身份现在是已签名的账户 .
4. 奥特.
   • 没有方向、回调或 access_token 在 URL 中继续.
   • connectToNode(url) 只选择了节点。 签名为 signIn() 或者说 signUp(name) (密码),或 <ConnectButton />。 。 。 .
5. 错误. 打开 failure.kind,或 instanceof AppError 编号 : ConfirmRequired 编号 : WrongNode,而不是 HTTP 状态检查.

无替换删除 (v1 或仅桌面) :

• 管理员- API 钩子 : useSyncGroup, (中文(简体) ), useResyncContext, (中文(简体) ), useJoinSubgroupInheritance, (中文(简体) ), useDetachContextFromGroup, (中文(简体) ), useSetTeeAdmissionPolicy, (中文(简体) ), useContextDiscovery· ;
• 迁移钩和组件 : useMigrationStatus, (中文(简体) ), useMigrationEvents, (中文(简体) ), useMyAuthoredMigration, (中文(简体) ), MigrationPendingBanner, (中文(简体) ), MigrationAdminPanel· ;
• 版本钩子 : useAppVersion, (中文(简体) ), useLatestVersion, (中文(简体) ), useGroupAppVersion· ;
• 授权/中继/账户注册层: useAccountEnrolment, (中文(简体) ), useDelegatedBootstrap, (中文(简体) ), ConnectButtonAccount, (中文(简体) ), AccountSignInPanel还有接力, joinWithNode 财务报告和审定财务报表 bootstrapFromInvitation 再出口;
• 邀请 UI : InvitationGate, (中文(简体) ), InvitationDialog, (中文(简体) ), JoinSyncBanner, (中文(简体) ), useJoinSync· ;
• 本地节点发现 : discoverLocalNodes· ;
• 桌面 (Tauri) : isDesktopWindow。 。 。 .

许可证

麻省理工学院