switching over to biome from eslint, also cleaned up some markdown

Author: carlsverre

.vscode/settings.json

@@ -4,5 +4,23 @@
   "lldb.consoleMode": "commands",
   // this allows rust-analyzer to compile sqlsync_reducer::host_ffi
   "rust-analyzer.cargo.features": ["host"],
-  "rust-analyzer.showUnlinkedFileNotification": false
+  "rust-analyzer.showUnlinkedFileNotification": false,
+  "[typescriptreact][typescript][javascript][javascriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.formatOnSave": false,
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "never",
+      "quickfix.biome": "always",
+      "source.addMissingImports": "always",
+      "source.formatDocument": "always",
+      "source.organizeImports": "always"
+    },
+    "editor.tabSize": 2,
+    "editor.insertSpaces": true
+  },
+  "[json][jsonc]": {
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.tabSize": 2,
+    "editor.insertSpaces": true
+  }
 }

GUIDE.md

@@ -1,25 +1,15 @@
 # The SQLSync Guide
 
-<!-- prettier-ignore-start -->
 > [!IMPORTANT]
-> SQLSync is in active development and thus is changing quickly.
-> Currently, do not use it in a production application as there is no backwards
-> compatibility or stability promise.
-<!-- prettier-ignore-end -->
+> SQLSync is in active development and thus is changing quickly. Currently, do not use it in a production application as there is no backwards compatibility or stability promise.
 
-SQLSync is distributed as a Javascript package as well as a Rust Crate.
-Currently both are required to use SQLSync. Also, React is the only supported
-framework at the moment.
+SQLSync is distributed as a JavaScript package as well as a Rust Crate.  Currently, both are required to use SQLSync. Also, React is the only supported framework at the moment.
 
-If you want to jump ahead to a working demo, check out the finished product at:
-https://github.com/orbitinghail/sqlsync-demo-guestbook
+If you want to jump ahead to a working demo, check out the finished product at: https://github.com/orbitinghail/sqlsync-demo-guestbook
 
 ## Step 1: Creating the Reducer
 
-SQLSync requires that all mutations are handled by a piece of code called "The
-Reducer". Currently this code has to be written in Rust, however we have plans
-to make it possible to write Reducers using JS or other languages. The fastest
-way to create a reducer is to initialize a new Rust project like so:
+SQLSync requires that all mutations are handled by a piece of code called "The Reducer". Currently, this code has to be written in Rust, however we have plans to make it possible to write Reducers using JS or other languages. The fastest way to create a reducer is to initialize a new Rust project like so:
 
 1. Make sure you have Rust installed; if not install using [rustup].
 2. Install support for the `wasm32-unknown-unknown` target:
@@ -112,17 +102,11 @@ cargo build --target wasm32-unknown-unknown --release
 npm install @orbitinghail/sqlsync-react @orbitinghail/sqlsync-worker
 ```
 
-The following examples will be using Typescript to make everything a bit more
-precise. If you are not using Typescript you can still use SQLSync, just skip
-the type descriptions and annotations.
+The following examples will be using Typescript to make everything a bit more precise. If you are not using Typescript you can still use SQLSync, just skip the type descriptions and annotations.
 
-Also, make sure your JS bundling tool supports importing assets from the
-filesystem, as will need that to easily get access to the Reducer we compiled
-earlier in this guide. If in doubt, [Vite] is highly recommended.
+Also, make sure your JS bundling tool supports importing assets from the file system, as will need that to easily get access to the Reducer we compiled earlier in this guide. If in doubt, [Vite] is highly recommended.
 
-Create a file which will contain type information for your Mutations, the
-reducer URL, and export some useful React hooks for your app to consume. It
-should look something like this:
+Create a file which will contain type information for your Mutations, the reducer URL, and export some useful React hooks for your app to consume. It should look something like this:
 
 ```typescript
 import {
@@ -160,12 +144,9 @@ export const { useMutate, useQuery, useSetConnectionEnabled } =
 
 ## Step 3: Hooking it up to your app
 
-Using the hooks exported from the file in
-[Step 2](#step-2-install-and-configure-the-react-library) we can easily hook
-SQLSync up to our application.
+Using the hooks exported from the file in [Step 2](#step-2-install-and-configure-the-react-library) we can easily hook SQLSync up to our application.
 
-Here is a complete example of a very trivial guestbook application which uses
-the reducer we created above. If
+Here is a complete example of a very trivial guestbook application which uses the reducer we created above.
 
 ```tsx
 import React, { FormEvent, useEffect } from "react";
@@ -268,8 +249,7 @@ export function App() {
 
 ## Step 4: Connect to the coordinator (COMING SOON)
 
-This step still requires using SQLSync from source. For now you'll have to
-follow the directions in the [Contribution Guide] to setup a Local Coordinator.
+This step still requires using SQLSync from source. For now, you'll have to follow the directions in the [Contribution Guide] to set up a Local Coordinator.
 
 [rustup]: https://rustup.rs/
 [Vite]: https://vitejs.dev/

README.md

@@ -3,30 +3,23 @@
 [![github actions](https://github.com/orbitinghail/sqlsync/actions/workflows/actions.yaml/badge.svg?branch=main)](https://github.com/orbitinghail/sqlsync/actions?query=branch%3Amain)
 [![Join the SQLSync Community](https://discordapp.com/api/guilds/1149205110262595634/widget.png?style=shield)][discord]
 
-**SQLSync is a collaborative offline-first wrapper around SQLite** designed to
-synchronize web application state between users, devices, and the edge.
+**SQLSync is a collaborative offline-first wrapper around SQLite** designed to synchronize web application state between users, devices, and the edge.
 
 **Example use cases**
 
-- A web app with a structured file oriented data model like Figma. Each file
-  could be a SQLSync database, enabling real-time local first collaboration and
-  presense
-- An embedded systems deployment running SQLSync on the edge with high tolerance
-  for unreliable network conditions
+- A web app with a structured file oriented data model like Figma. Each file could be a SQLSync database, enabling real-time local first collaboration and presence
+- Running SQLSync on the edge with high tolerance for unreliable network conditions
 - Enabling optimistic mutations on SQLite read replicas
 
 **SQLSync Demo**
 
-The best way to get a feel for how SQLSync behaves is to play with the
-[Todo list demo](https://sqlsync-todo.pages.dev/). Clicking
-[this link](https://sqlsync-todo.pages.dev/) will create a unique todo list and
-redirect you to it's unique URL. You can then share that URL with friends or
-open it on multiple devices (or browsers) to see the power of offline-first
-collaborative SQLite.
+The best way to get a feel for how SQLSync behaves is to play with the [Todo list demo][todo-demo]. Clicking [this link][todo-demo] will create a unique to-do list and redirect you to its unique URL. You can then share that URL with friends or open it on multiple devices (or browsers) to see the power of offline-first collaborative SQLite.
 
-You can also learn more about SQLSync and it's goals by watching Carl's WasmCon
-2023 talk.
-[The recording can be found here](https://youtu.be/oLYda9jmNpk?si=7BBBdLxEj9ZQ4OvS).
+[todo-demo]: https://sqlsync-todo.pages.dev/
+
+You can also learn more about SQLSync and it's goals by watching Carl's WasmCon 2023 talk. [The recording can be found here][wasmcon-talk].
+
+[wasmcon-talk]: https://youtu.be/oLYda9jmNpk?si=7BBBdLxEj9ZQ4OvS
 
 **Features**
 
@@ -38,21 +31,15 @@ You can also learn more about SQLSync and it's goals by watching Carl's WasmCon
 - Cross-tab sync
 - React library
 
-If you are interested in using or contributing to SQLSync, please [join the
-Discord community][discord] and let us know what you want to build. We are
-excited to collaborate with you!
+If you are interested in using or contributing to SQLSync, please [join the Discord community][discord] and let us know what you want to build. We are excited to collaborate with you!
 
 ## Installation & Getting started
 
-Please refer to [the guide](./GUIDE.md) to learn how to add SQLSync to your
-application.
+Please refer to [the guide](./GUIDE.md) to learn how to add SQLSync to your application.
 
 ## Community & Contributing
 
-If you are interested in contributing to SQLSync, please [join the Discord
-community][discord] and let us know what you want to build. All contributions
-will be held to a high standard, and are more likely to be accepted if they are
-tied to an existing task and agreed upon specification.
+If you are interested in contributing to SQLSync, please [join the Discord community][discord] and let us know what you want to build. All contributions will be held to a high standard, and are more likely to be accepted if they are tied to an existing task and agreed upon specification.
 
 [![Join the SQLSync Community](https://discordapp.com/api/guilds/1149205110262595634/widget.png?style=banner2)][discord]
 

biome.json

@@ -0,0 +1,38 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.4.0/schema.json",
+  "organizeImports": {
+    "enabled": false
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "style": {
+        "useSingleVarDeclarator": "off"
+      }
+    }
+  },
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": false,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 100
+  },
+  "json": {
+    "parser": {
+      "allowComments": true
+    }
+  },
+  "files": {
+    "ignore": [
+      "lib/sqlsync-worker/sqlsync-wasm",
+      "lib/sqlsync-worker/dist",
+      "lib/sqlsync-react/dist",
+      "demo/cloudflare-backend/build",
+      "demo/cloudflare-backend/dist",
+      "demo/frontend/dist",
+      "target"
+    ]
+  }
+}

demo/cloudflare-backend/package.json

@@ -10,4 +10,4 @@
   "devDependencies": {
     "wrangler": "^3.14.0"
   }
-}
+}

demo/frontend/.eslintrc.cjs

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "biome check .",
     "preview": "vite preview",
     "release": "pnpm build && wrangler pages deploy dist"
   },
@@ -31,14 +31,8 @@
     "@types/react-dom": "^18.2.14",
     "@types/uuid": "^9.0.6",
     "@types/wicg-file-system-access": "^2020.9.8",
-    "@typescript-eslint/eslint-plugin": "^6.9.0",
-    "@typescript-eslint/parser": "^6.9.0",
     "@vitejs/plugin-react": "^4.1.0",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.52.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
     "postcss": "^8.4.31",
     "postcss-preset-mantine": "^1.9.0",
     "typescript": "^5.2.2",

demo/frontend/package.json

@@ -1,10 +1,10 @@
 import { Container, Stack } from "@mantine/core";
 import { JournalId } from "@orbitinghail/sqlsync-worker";
 import { useEffect } from "react";
-import { useMutate } from "./doctype";
 import { Header } from "./components/Header";
-import { TaskList } from "./components/TaskList";
 import { QueryViewer } from "./components/QueryViewer";
+import { TaskList } from "./components/TaskList";
+import { useMutate } from "./doctype";
 
 export const App = ({ docId }: { docId: JournalId }) => {
   const mutate = useMutate(docId);

demo/frontend/src/App.tsx

@@ -1,9 +1,9 @@
-import { rem, Button } from "@mantine/core";
+import { Button, rem } from "@mantine/core";
 import { useConnectionStatus } from "@orbitinghail/sqlsync-react";
 import { JournalId } from "@orbitinghail/sqlsync-worker";
+import { IconWifi, IconWifiOff } from "@tabler/icons-react";
 import { useCallback } from "react";
 import { useSetConnectionEnabled } from "../doctype";
-import { IconWifi, IconWifiOff } from "@tabler/icons-react";
 
 export const ConnectionStatus = ({ docId }: { docId: JournalId }) => {
   const status = useConnectionStatus();

demo/frontend/src/components/ConnectionStatus.tsx

@@ -22,10 +22,9 @@ export const QueryViewerInner = ({ docId }: Props) => {
         if (typeof value === "bigint") {
           return value.toString();
         }
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
         return value;
       },
-      2
+      2,
     );
   }, [result.rows]);
 

demo/frontend/src/components/QueryViewer.tsx

@@ -1,8 +1,8 @@
 import { Button, Flex, TextInput } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { useCallback } from "react";
-import { Mutation } from "../doctype";
 import { v4 as uuidv4 } from "uuid";
+import { Mutation } from "../doctype";
 
 interface TaskFormProps {
   mutate: (m: Mutation) => Promise<void>;
@@ -30,8 +30,8 @@ export const TaskForm = ({ mutate }: TaskFormProps) => {
             console.error("Failed to create task", err);
           });
       },
-      [mutate, form]
-    )
+      [mutate, form],
+    ),
   );
 
   return (

demo/frontend/src/components/TaskForm.tsx

@@ -1,7 +1,7 @@
-import { Text, ActionIcon, Checkbox, Flex } from "@mantine/core";
+import { ActionIcon, Checkbox, Flex, Text } from "@mantine/core";
+import { IconX } from "@tabler/icons-react";
 import { useCallback } from "react";
 import { Mutation } from "../doctype";
-import { IconX } from "@tabler/icons-react";
 
 export interface Task {
   id: string;

demo/frontend/src/components/TaskItem.tsx

@@ -1,15 +1,15 @@
 import { Center, Flex, Paper, Stack, Title } from "@mantine/core";
 import { sql } from "@orbitinghail/sqlsync-react";
 import { JournalId } from "@orbitinghail/sqlsync-worker";
-import { ConnectionStatus } from "./ConnectionStatus";
 import { useMutate, useQuery } from "../doctype";
-import { Task, TaskItem } from "./TaskItem";
+import { ConnectionStatus } from "./ConnectionStatus";
 import { TaskForm } from "./TaskForm";
+import { Task, TaskItem } from "./TaskItem";
 
 export const TaskList = ({ docId }: { docId: JournalId }) => {
   const { rows: tasks } = useQuery<Task>(
     docId,
-    sql`select id, description, completed from tasks order by description`
+    sql`select id, description, completed from tasks order by description`,
   );
   const mutate = useMutate(docId);
 

demo/frontend/src/components/TaskList.tsx

@@ -2,7 +2,7 @@ import { DocType, createDocHooks, serializeMutationAsJSON } from "@orbitinghail/
 
 const REDUCER_URL = new URL(
   "../../../target/wasm32-unknown-unknown/release/demo_reducer.wasm",
-  import.meta.url
+  import.meta.url,
 );
 
 // matches the Mutation type in demo/demo-reducer