Skip to content

Commit

Permalink
Merge branch 'vakila-quickstart-fix'
Browse files Browse the repository at this point in the history
  • Loading branch information
pvh committed Mar 19, 2024
2 parents b764b39 + 00659bf commit 9ff7090
Showing 1 changed file with 8 additions and 7 deletions.
15 changes: 8 additions & 7 deletions docs/quickstart.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,7 @@ yarn add @automerge/automerge \
@automerge/automerge-repo-react-hooks \
@automerge/automerge-repo-network-broadcastchannel \
@automerge/automerge-repo-storage-indexeddb \
vite-plugin-wasm \
vite-plugin-top-level-await
vite-plugin-wasm
```

Because Vite support for WebAssembly modules (used by Automerge) currently requires configuring a plugin, replace `vite.config.ts` with the following:
Expand All @@ -43,25 +42,27 @@ Because Vite support for WebAssembly modules (used by Automerge) currently requi
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import wasm from "vite-plugin-wasm"
import topLevelAwait from "vite-plugin-top-level-await"

export default defineConfig({
plugins: [topLevelAwait(), wasm(), react()],
plugins: [wasm(), react()],

worker: {
format: "es",
plugins: () => [wasm()],
},
})

```

With that out of the way, we're ready to build the application.

# Using Automerge

The central concept of Automerge is one of documents. An Automerge document is a JSON-like data structure that is kept synchronized between all communicating peers with the same document ID.
The central concept of Automerge is one of [documents](./documents/). An Automerge document is a JSON-like data structure that is kept synchronized between all communicating peers with the same document ID.

To create or find Automerge documents, we'll use a [Repo](./repositories/). The Repo (short for repository) keeps track of all the documents you load and makes sure they're properly synchronized and stored.

To create or find Automerge documents, we'll use a Repo. The Repo (short for repository) keeps track of all the documents you load and makes sure they're properly synchronized and stored. Let's go ahead and make one. Add the following imports to `src/main.tsx`:
Let's go ahead and make one. Add the following imports to `src/main.tsx`:

```typescript
import { isValidAutomergeUrl, Repo } from '@automerge/automerge-repo'
Expand Down Expand Up @@ -256,7 +257,7 @@ This change will be reflected in any connected and listening handles. Go back to
## Saving the document
If you provide a `Repo` with a `StorageAdapter` then it will save documents for use later. In the browser we might used IndexedDB:
If you provide a `Repo` with a `StorageAdapter` then it will save documents for use later. In the browser we used IndexedDB:
```js
import { IndexedDBStorageAdapter } from "@automerge/automerge-repo-storage-indexeddb"
Expand Down

0 comments on commit 9ff7090

Please sign in to comment.