triplit下载 - triplit源代码下载

triplit

Ai源码

@triplit

下载

概述

TripLit是一个开源数据库，可实时同步服务器和浏览器之间的数据。

TripLit提供了一个实时同步数据存储，您可以将其作为打字条包放入应用程序中。 TripLit处理将您的数据存储在服务器上，并将查询智能同步到客户端。我们将这种类型的系统称为“完整堆栈数据库” - 您可以在此处查看我们向本新范式的本地第一个社区的演示文稿。

Triplit汇集了：

实时同步，并在属性级别进行增量更新和冲突解决

？由成熟的客户端数据库供电的本地缓存

？用管理仪表板耐用的服务器端存储

？可插入的存储提供商，例如SQLite，IndexedDB，LevelDB，内存等

？乐观的更新使每次互动都感觉很快

？复杂数据模型的关系查询

？具有自动重新连接和一致性保证的离线模式

？失败更新的回滚和重试管理

数据安全和打字稿自动完成的模式

？在服务器上执行的授权，以供阅读和写入

？ CRDT支持的协作/多人游戏

？使用DELTA补丁的低潜伏期与最小网络流量

简单的API ，用于查询和突变的香草JavaScript和React中的数据

✅完全开源！

monorepo概述

在triplit/packages中，您可以找到电动列表的各种项目：

triplitdb-旨在在任何JS环境（浏览器，节点，DENO，REACT等）中运行，并提供表现力，快速和实时更新查询，同时在与网络上与许多作家保持一致性。
客户端 - 浏览器库与本地和远程triplitdbs进行交互。
CLI- CLI工具，带有命令来踩踏项目，运行全堆栈开发环境，迁移服务器等等。
React- @triplit/client的React绑定。
Svelte- @triplit/client的Svelte绑定。
控制台 - 用于查看和突变三个项目中数据并管理其模式的应用程序。
服务器 - 节点服务器，用于在三倍客户端之间同步数据。
服务器核 - 协议不可或缺的库，用于构建服务器运行的三倍。
Docs -Triplit Docs，由Nextra构建。
类型 - 各种三个三个项目的共享类型。
UI-使用ShadCN构建的三个前端项目的共享UI组件。

快速开始

开始一个新项目。

npm create triplit-app@latest my-app

或将依赖项添加到现有项目中。

npm install --save-dev @triplit/cli
npm run triplit init

在my-app/triplit/schema.ts中定义模式。

 import { Schema as S , ClientSchema } from '@triplit/client' ;

export const schema = {
  todos : {
    schema : S . Schema ( {
      id : S . Id ( ) ,
      text : S . String ( ) ,
      completed : S . Boolean ( { default : false } ) ,
    } ) ,
  } ,
} satisfies ClientSchema ;

启动三圈开发同步服务器。

npm run triplit dev

这将输出一些重要的环境变量，您的应用将需要与服务器同步。将它们添加到您的.env文件中（下面的Vite示例）。

VITE_TRIPLIT_SERVER_URL=http://localhost:6543
VITE_TRIPLIT_TOKEN=copied-in-from-triplit-dev

在应用程序中定义查询（下面的React示例）。

 import { TriplitClient } from '@triplit/client' ;
import { useQuery } from '@triplit/react' ;
import { schema } from '../triplit/schema' ;

const client = new TriplitClient ( {
  schema ,
  serverUrl : import . meta . env . VITE_TRIPLIT_SERVER_URL ,
  token : import . meta . env . VITE_TRIPLIT_TOKEN ,
} ) ;

function App ( ) {
  const { results : todos } = useQuery ( client . query ( 'todos' ) ) ;

  return (
    < div >
      { Array . from ( todos . values ( ) ) . map ( ( todo ) => (
        < div key = { todo . id } >
          < input
            type = "checkbox"
            checked = { todo . completed }
            onChange = { ( ) =>
              client . update ( 'todos' , todo . id , ( todo ) => ( {
                todo . completed = ! todo . completed ,
              } )
            }
          / >
          { todo . text }
        </ div >
      ) ) }
    </ div >
  );
}