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 >
  );
}