diff --git a/docs/core-concepts/mutators.md b/docs/core-concepts/mutators.md index d01abfa..ed0881e 100644 --- a/docs/core-concepts/mutators.md +++ b/docs/core-concepts/mutators.md @@ -13,7 +13,7 @@ Because mutators are just high-level Javascript functions, the developer gains a The function `increment` below is an example of a mutator: -```javascript +```js title="/src/mutators.js" function increment(tx, { key, delta }) { const prev = tx.get(key); const next = (prev ?? 0) + delta; diff --git a/docs/core-concepts/rooms.md b/docs/core-concepts/rooms.md index 92ed639..fe12a16 100644 --- a/docs/core-concepts/rooms.md +++ b/docs/core-concepts/rooms.md @@ -8,7 +8,7 @@ The primary unit of collaboration within a Syncosaurus application is the **room In Syncosaurus, the room name is specified by passing it to the `launch` method of a `Syncosaurus` instance: -```js +```js title="/src/components/App.jsx" import mutators from './mutators.js'; const synco = new Syncosaurus({ diff --git a/docs/core-concepts/subscriptions.md b/docs/core-concepts/subscriptions.md index 7489fdf..39544a3 100644 --- a/docs/core-concepts/subscriptions.md +++ b/docs/core-concepts/subscriptions.md @@ -12,7 +12,7 @@ At the implementation level, a *subscription* is represented by the return value Here is a simple implementation of a subscription and its query: -```javascript +```js const count = useSubscribe(synco, (tx) => tx.get('count'), 0) ``` diff --git a/docs/getting-started/add-to-existing-project.md b/docs/getting-started/add-to-existing-project.md index c21355e..d27d680 100644 --- a/docs/getting-started/add-to-existing-project.md +++ b/docs/getting-started/add-to-existing-project.md @@ -4,10 +4,12 @@ sidebar_position: 2 # Add to an Existing Project -To add Syncosaurus to an existing React-based project: +To add Syncosaurus to an existing React-based project, first navigate to the root directory of your application. +Then, run the following command in your terminal: -1. Navigate to the root directory of your application -2. Run the command `npx syncosaurus setup` +```shell +npx syncosaurus setup +``` That's it! Make sure to correctly configure your Syncosaurus application before deployment - see here for details. @@ -17,7 +19,7 @@ Note that Syncosaurus currently only supports applications built with either Rea A local development environment makes it significantly easier to rapidly iterate, test, and debug your application in a consistent, controlled setting. Syncosaurus comes built-in with a local Syncosaurus server. -If you added Syncosaurus to an existing project and are not using Vite as your build tool, run the same command with the `-b` or `-backendOnly` flag enabled: +If you have added Syncosaurus to an existing project and are not using Vite as your frontend build tool, run the same command with the `-backendOnly` or `-b` flag enabled: ```shell npx syncosaurus dev -b @@ -37,7 +39,7 @@ Press 'x' to gracefully shut down the server Make sure to update your `server` value in your Syncosaurus constructor calls in your application code: -```javascript +```js title="/src/components/App.jsx" import mutators from './mutators.js'; const synco = new Syncosaurus({ diff --git a/docs/getting-started/start-a-new-project.md b/docs/getting-started/start-a-new-project.md index 30c39d4..d2d12e0 100644 --- a/docs/getting-started/start-a-new-project.md +++ b/docs/getting-started/start-a-new-project.md @@ -47,7 +47,7 @@ Press 'x' to gracefully shut down both servers Make sure to update your `server` value in your Syncosaurus constructor calls in your application code: -```javascript +```js title="/src/components/App.jsx" import mutators from './mutators.js'; const synco = new Syncosaurus({ diff --git a/docs/guides/authentication.md b/docs/guides/authentication.md index d08affa..e79e128 100644 --- a/docs/guides/authentication.md +++ b/docs/guides/authentication.md @@ -12,7 +12,7 @@ The Syncosaurus framework supports token-based authentication. JSON web tokens a To use a token, you can directly pass a *token string* to the `Syncosaurus` constructor as the `auth` key's value: -```js +```js title="/src/components/App.jsx" import mutators from './mutators.js'; const synco = new Syncosaurus({ @@ -26,7 +26,7 @@ const synco = new Syncosaurus({ You can also pass an *asynchronous function* that returns a token string to the `Syncosaurus` constructor as the `auth` key's value: -```js +```js title="/src/components/App.jsx" import mutators from './mutators.js'; import getToken from './auth-client.js'; @@ -43,7 +43,7 @@ const synco = new Syncosaurus({ Next, an `authHandler` function needs to be defined: -```js +```js title="/src/authHandler.js" const authServerUrl = `https://www.myAuthServer.com`; export default async function authHandler(token) {