Ditto 的回放收发夹库
这是用于 抖出。 。 。 .
目前,这个项目在网页浏览器,Node.JS和Electron环境中工作.
如果对该项目有疑问或需要任何援助,请通过 支持@ ditto.com。 。 。 .
Ditto SDK v5 软件
这个图书馆的目标是 Ditto v5 SDK 软件 (单位:千美元)
@dittolive/ditto@^5.0.0)和使用 DQL (Ditto 查询语言) 专有. 4号 查询- 构建器钩子( t)usePendingCursorOperation, (中文(简体) ),useMutations(等等)和 身份钩(useOnlinePlaygroundIdentity已删除。 见 Ditto v5 迁移指南 根本的SDK改变.
安装
用 npm 或 纱线安装此库 :
npm install @dittolive/ditto @dittolive/react-ditto
yarn add @dittolive/ditto @dittolive/react-ditto
在您的 React app的顶层,用一个上下文提供者包装它,
DittoProvider 或者说 DittoLazyProvider数字 :
<DittoProvider setup={createDittoInstance}>
{({ loading, error }) => {
if (loading) return <span>Loading Ditto...</span>
if (error)
return (
<span>There was an error loading Ditto. Error: {error.toString()}</span>
)
return <App />
}}
</DittoProvider>
此时此刻,您准备使用由 提供钩子来构建您的 Ditto 应用
图书馆。 阅读以学习如何选择 DittoProvider 财务报告和审定财务报表
DittoLazyProvider,如何用 v5 API 打开 Ditto 实例,以及如何使用
页:1 useQuery 财务报告和审定财务报表 useExecuteQuery 钩子.
选择提供者
库包括两个初始化 Ditto 上下文的上下文提供者
为您的应用程序: DittoProvider 财务报告和审定财务报表 DittoLazyProvider。 。 。 .
DittoProvider 当您的应用程序所使用的 Ditto 实例集时使用
当应用程序被拖出时,可以创建。 总之
其他情况, DittoLazyProvider 可用于懒惰地创建 Ditto 实例
当供养者的孩子首先需要时.
两个供应商的API相同,但 setup 道具,哪个
返回时 Ditto | Ditto[] | Promise<Ditto | Ditto[]> 页:1 DittoProvider 财务报告和审定财务报表
Promise<Ditto | null> 页:1 DittoLazyProvider。 。 。 .
选择一个供货商而不是另一个供货商对剩下的钩子没有任何影响——它们 无论供应商是谁,使用方式都完全相同.
Ditto 提供示例
import { Ditto, DittoConfig } from '@dittolive/ditto'
const createDittoInstance = async () => {
const ditto = await Ditto.open(
new DittoConfig('my-database-id', { mode: 'smallPeersOnly' }, 'some-path'),
)
ditto.sync.start()
return ditto
}
;<DittoProvider setup={createDittoInstance}>
{({ loading, error }) => {
if (loading) return <span>Loading Ditto...</span>
if (error)
return (
<span>There was an error loading Ditto. Error: {error.toString()}</span>
)
return <App />
}}
</DittoProvider>
DittoLazy 提供示例
import { Ditto, DittoConfig } from '@dittolive/ditto'
const createDittoInstance = async (path: string) => {
const ditto = await Ditto.open(
new DittoConfig('my-database-id', { mode: 'smallPeersOnly' }, path),
)
ditto.sync.start()
return ditto
}
;<DittoLazyProvider setup={createDittoInstance}>
{({ loading, error }) => {
if (loading) return <span>Loading Ditto...</span>
if (error)
return (
<span>There was an error loading Ditto. Error: {error.toString()}</span>
)
return <App />
}}
</DittoLazyProvider>
当多个实例被注册时,钩子通过
persistenceDirectory 选项,与您设置的持久性目录匹配
在个案中 DittoConfig。省略时,第一审登记为
已使用.
打开 Ditto 实例
在v5中,打开一个 Ditto 实例 Ditto.open(config) (同步)或
Ditto.openSync(config),其中配置是一个 DittoConfig 说明
数据库 ID,连接模式,和一个可选的持久目录.
离线/ 对等点
import { Ditto, DittoConfig } from '@dittolive/ditto'
const ditto = await Ditto.open(
new DittoConfig('my-database-id', { mode: 'smallPeersOnly' }, '/path'),
)
ditto.sync.start()
在线( 连接到 Ditto 服务器 / Big Peer)
服务器连接需要设置认证过期处理器
在同步开始前 - ditto.sync.start() 抛出其他。 整个复制
从 Ditto 门户网站连接 URL( 通过 SDK 连接) ~ 網址; 不构建
从数据库的ID.
import { Authenticator, Ditto, DittoConfig } from '@dittolive/ditto'
const ditto = await Ditto.open(
new DittoConfig(
'my-database-id',
{ mode: 'server', url: 'REPLACE_ME_WITH_YOUR_URL' },
'/path',
),
)
await ditto.auth.setExpirationHandler(async (ditto) => {
await ditto.auth.login('your-token', Authenticator.DEVELOPMENT_PROVIDER)
})
ditto.sync.start()
查询 useQuery
useQuery 持续获取非调试 DQL 查询的结果
注册商店观察员和(除非 localOnly 设置) 同步
订阅。 它返回当前项目、 装入状态以及任何错误 .
import { useQuery } from '@dittolive/react-ditto'
type Task = { _id: string; body: string; isCompleted: boolean }
export default function App() {
const { items, isLoading, error } = useQuery<Task>(
'SELECT * FROM tasks WHERE isCompleted = :isCompleted',
{ queryArguments: { isCompleted: false } },
)
if (isLoading) return <p>Loading…</p>
if (error) return <p>Error: {String(error)}</p>
return (
<ul>
{items.map((task) => (
<li key={task.value._id}>{task.value.body}</li>
))}
</ul>
)
}
更改和按需查询 useExecuteQuery
useExecuteQuery 返回按要求运行 DQL 查询的执行函数.
用于用户引发的突变(插入/更新/删除)和临时查询
行动。 它没有设置同步订阅, 所以双突变与一个
useQuery 用于同一收藏,如果需要同步和观察.
import { useExecuteQuery } from '@dittolive/react-ditto'
export default function AddTask() {
const [insertTask] = useExecuteQuery<void, { value: { body: string } }>(
'INSERT INTO tasks DOCUMENTS (:value)',
)
return (
<button onClick={() => insertTask({ value: { body: 'Buy milk' } })}>
Add Task
</button>
)
}
在设置钩和/或调用时可以提供查询参数 执行函数; 当两者都得到提供时, 两者均被浅浮并带有 执行函数的参数优先.
快速开始 vite
- 安装库 :
npm install @dittolive/ditto @dittolive/react-ditto
- 单位
./src/index.tsx,设置 Ditto 与DittoProvider数字 :
// ... other imports from vite above
import { Ditto, DittoConfig } from '@dittolive/ditto'
import { DittoProvider } from '@dittolive/react-ditto'
/**
* This configuration is optional for web browser-based React applications. It
* tells the `DittoProvider` where to load the .wasm file. If no path is provided
* (ie. initOptions is undefined), the wasm is loaded from our CDN. If you enable
* this, make sure to serve `ditto.wasm` with the correct MIME type and CORS
* headers. See
* https://www.npmjs.com/package/@dittolive/ditto#browser-environments for
* details.
**/
const initOptions = {
webAssemblyModule: '/ditto.wasm',
}
const RootComponent = () => (
<DittoProvider
setup={async () => {
// Create a database at https://portal.ditto.live/ and copy its database
// ID and connection URL from the settings page.
const ditto = await Ditto.open(
new DittoConfig(
'your-database-id',
{ mode: 'smallPeersOnly' },
'testing',
),
)
ditto.sync.start()
return ditto
}}
/* initOptions={initOptions} */
>
{({ loading, error }) => {
if (loading) return <p>Loading</p>
if (error) return <p>{error.message}</p>
return <App />
}}
</DittoProvider>
)
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<React.StrictMode>
<RootComponent />
</React.StrictMode>,
)
- 在你身边
App组件,使用useQuery观察文件useExecuteQuery- 参见以上例子和完整的 vite 示例应用。 。 。 .
与在线应用程序合作
使用 门户 您可以创建同步的应用程序
a Ditto 服务器(大对等服务器)。 配置实例为 a { mode: 'server', url }
连接和认证通过 ditto.auth数字 :
- 设置一个过期处理器
ditto.auth.setExpirationHandler(handler)编辑 处理器接收 Ditto 实例,并在每次( 重新) 认证时被引用 需要时间. - 在操作员内部,呼叫
ditto.auth.login(token, provider)启用Authenticator.DEVELOPMENT_PROVIDER游乐场/开发标志,或您的 已配置认证的 webhooks 时, 拥有提供者字符串 门户网. - 过期的处理器必须在呼叫前设置
ditto.sync.start()页:1 服务器连接 .
当前认证状态可通过 ditto.auth.status
(单位:千美元){ isAuthenticated, userID }) (中文(简体) ).
建此库并进行测试
- 大楼: 运行
npm run build。 。 。 . - 类型检查 : 运行
npm run types。 。 。 . - 林特: 运行
npm run lint。 。 。 . - 运行测试 : 运行
npm test套房以无头Chrome方式通过卡玛和 练习真正的 Ditto WASM 构建.
运行示例应用程序
每个实例项目都在下方的自己的目录中 ./实例 目录.