73 |
74 |
75 |
81 |
82 |
83 |
84 |
13 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/local-store/streamQuery.ts:
--------------------------------------------------------------------------------
1 | import { streamQuery } from "../shared/pagination";
2 |
3 | import {
4 | DataModelFromSchemaDefinition,
5 | GenericQueryCtx,
6 | SchemaDefinition,
7 | TableNamesInDataModel,
8 | } from "convex/server";
9 | import { PageRequest } from "../shared/pagination";
10 |
11 | export const streamQueryForServerSchema = <
12 | ServerSchema extends SchemaDefinition
14 |
17 |
15 |
22 | {showItems && children}
23 |
24 | );
25 | }
26 |
27 | export default ItemGroup;
28 |
--------------------------------------------------------------------------------
/curvilinear/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "composite": true,
4 | "target": "ES2020",
5 | "useDefineForClassFields": true,
6 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
7 | "module": "ESNext",
8 | "skipLibCheck": true,
9 |
10 | /* Bundler mode */
11 | "moduleResolution": "bundler",
12 | "allowImportingTsExtensions": true,
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "moduleDetection": "force",
16 | "noEmit": true,
17 | "jsx": "react-jsx",
18 |
19 | /* Linting */
20 | "strict": true,
21 | "noUnusedLocals": true,
22 | "noUnusedParameters": true,
23 | "noFallthroughCasesInSwitch": true,
24 |
25 | /* Alias */
26 | "baseUrl": ".",
27 | "paths": {
28 | "@/*": ["./src/*"],
29 | "@cvx/*": ["./convex/*"],
30 | "~/*": ["./*"]
31 | }
32 | },
33 | "include": ["src", "convex"]
34 | }
35 |
--------------------------------------------------------------------------------
/curvilinear/src/assets/images/convex.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/curvilinear/src/hooks/useClickOutside.ts:
--------------------------------------------------------------------------------
1 | import { RefObject, useCallback, useEffect } from "react";
2 |
3 | export const useClickOutside = (
4 | ref: RefObject
38 |
39 |
40 | );
41 | }
42 |
--------------------------------------------------------------------------------
/curvilinear/convex/_generated/api.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | /**
3 | * Generated `api` utility.
4 | *
5 | * THIS CODE IS AUTOMATICALLY GENERATED.
6 | *
7 | * To regenerate, run `npx convex dev`.
8 | * @module
9 | */
10 |
11 | import type {
12 | ApiFromModules,
13 | FilterApi,
14 | FunctionReference,
15 | } from "convex/server";
16 | import type * as comments from "../comments.js";
17 | import type * as issues from "../issues.js";
18 | import type * as sync_comments from "../sync/comments.js";
19 | import type * as sync_issues from "../sync/issues.js";
20 | import type * as testing from "../testing.js";
21 |
22 | /**
23 | * A utility for referencing Convex functions in your app's API.
24 | *
25 | * Usage:
26 | * ```js
27 | * const myFunctionReference = api.myModule.myFunction;
28 | * ```
29 | */
30 | declare const fullApi: ApiFromModules<{
31 | comments: typeof comments;
32 | issues: typeof issues;
33 | "sync/comments": typeof sync_comments;
34 | "sync/issues": typeof sync_issues;
35 | testing: typeof testing;
36 | }>;
37 | export declare const api: FilterApi<
38 | typeof fullApi,
39 | FunctionReference
15 |
16 | {({ height, width }) => (
17 |
28 |
29 | );
30 | }
31 |
32 | const VirtualIssueRow = memo(
33 | ({
34 | data: issues,
35 | index,
36 | style,
37 | }: {
38 | data: Issue[];
39 | index: number;
40 | style: CSSProperties;
41 | }) => {
42 | const issue = issues[index];
43 | return -
24 | {VirtualIssueRow}
25 |
25 | Are you sure you want to delete this issue?
26 |
27 |
28 |
37 |
43 |
44 |
30 |
33 | );
34 | }
35 |
36 | export default List;
37 |
--------------------------------------------------------------------------------
/curvilinear/src/components/DebugModal.tsx:
--------------------------------------------------------------------------------
1 | import Modal from "./Modal";
2 |
3 | interface Props {
4 | isOpen: boolean;
5 | onDismiss?: () => void;
6 | }
7 |
8 | export default function DebugModal({ isOpen, onDismiss }: Props) {
9 | return (
10 |
12 |
40 | 13 | This is an example of a team collaboration app such as{` `} 14 | 15 | Linear 16 | 17 | {` `} 18 | built using{` `} 19 | 20 | Convex 21 | 22 | {` `}. 23 |
24 |25 | This example is built on top of ElectricSQL's fork of the excellent 26 | clone of the Linear UI built by{` `} 27 | 28 | Tuan Nguyen 29 | 30 | . 31 |
32 |33 | We have replaced the canned data with a stack running{` `} 34 | 35 | Convex 36 | 37 | . 38 |
39 |
12 |
40 | 13 | This is an example of a team collaboration app such as{` `} 14 | 15 | Linear 16 | 17 | {` `} 18 | built using{` `} 19 | 20 | Convex 21 | 22 | {` `}. 23 |
24 |25 | This example is built on top of ElectricSQL's fork of the excellent 26 | clone of the Linear UI built by{` `} 27 | 28 | Tuan Nguyen 29 | 30 | . 31 |
32 |33 | We have replaced the canned data with a stack running{` `} 34 | 35 | Convex 36 | 37 | . 38 |
39 |{label}
32 |
7 | {title !== `` && (
8 |
21 | );
22 | toast(content, {
23 | position: `bottom-right`,
24 | });
25 | }
26 |
27 | export function showInfo(msg: string, title: string = ``) {
28 | //TODO: make notification showing from bottom
29 | const content = (
30 |
11 |
12 |
15 |
16 | {title}
17 |
18 | )}
19 | {msg}
20 |
31 | {title !== `` && (
32 |
45 | );
46 | toast(content, {
47 | position: `bottom-right`,
48 | });
49 | }
50 |
--------------------------------------------------------------------------------
/local-store/react/localDb.ts:
--------------------------------------------------------------------------------
1 | import {
2 | DocumentByInfo,
3 | DocumentByName,
4 | FilterBuilder,
5 | GenericDataModel,
6 | GenericTableInfo,
7 | IndexNames,
8 | IndexRange,
9 | IndexRangeBuilder,
10 | NamedIndex,
11 | NamedTableInfo,
12 | TableNamesInDataModel,
13 | WithOptionalSystemFields,
14 | } from "convex/server";
15 | import { GenericId } from "convex/values";
16 |
17 | export interface LocalDbReader
35 |
36 |
39 |
40 | {title}
41 |
42 | )}
43 | {msg}
44 |
56 | {getAcronym(name)}
57 |
58 | );
59 | } else {
60 | // try to use default avatar
61 | avatar = (
62 |
84 | {avatar}
85 | {status}
86 |
87 | );
88 | }
89 |
90 | export default Avatar;
91 |
--------------------------------------------------------------------------------
/curvilinear/src/local/mutations.ts:
--------------------------------------------------------------------------------
1 | import { api } from "../../convex/_generated/api";
2 | import { FunctionArgs } from "convex/server";
3 | import { getIssueById } from "./queries";
4 | import { factory } from "./types";
5 |
6 | export const createIssue = factory.defineLocalMutation(
7 | api.issues.createIssue,
8 | (ctx, args: FunctionArgs navigate(`/issue/${issue.id}`)}
45 | style={style}
46 | >
47 |
71 | );
72 | }
73 |
74 | export default memo(IssueRow);
75 |
--------------------------------------------------------------------------------
/curvilinear/convex/README.md:
--------------------------------------------------------------------------------
1 | # Welcome to your Convex functions directory!
2 |
3 | Write your Convex functions here.
4 | See https://docs.convex.dev/functions for more.
5 |
6 | A query function that takes two arguments looks like:
7 |
8 | ```ts
9 | // functions.js
10 | import { query } from "./_generated/server";
11 | import { v } from "convex/values";
12 |
13 | export const myQueryFunction = query({
14 | // Validators for arguments.
15 | args: {
16 | first: v.number(),
17 | second: v.string(),
18 | },
19 |
20 | // Function implementation.
21 | handler: async (ctx, args) => {
22 | // Read the database as many times as you need here.
23 | // See https://docs.convex.dev/database/reading-data.
24 | const documents = await ctx.db.query("tablename").collect();
25 |
26 | // Arguments passed from the client are properties of the args object.
27 | console.log(args.first, args.second);
28 |
29 | // Write arbitrary JavaScript here: filter, aggregate, build derived data,
30 | // remove non-public properties, or create new objects.
31 | return documents;
32 | },
33 | });
34 | ```
35 |
36 | Using this query function in a React component looks like:
37 |
38 | ```ts
39 | const data = useQuery(api.functions.myQueryFunction, {
40 | first: 10,
41 | second: "hello",
42 | });
43 | ```
44 |
45 | A mutation function looks like:
46 |
47 | ```ts
48 | // functions.js
49 | import { mutation } from "./_generated/server";
50 | import { v } from "convex/values";
51 |
52 | export const myMutationFunction = mutation({
53 | // Validators for arguments.
54 | args: {
55 | first: v.string(),
56 | second: v.string(),
57 | },
58 |
59 | // Function implementation.
60 | handler: async (ctx, args) => {
61 | // Insert or modify documents in the database here.
62 | // Mutations can also read from the database like queries.
63 | // See https://docs.convex.dev/database/writing-data.
64 | const message = { body: args.first, author: args.second };
65 | const id = await ctx.db.insert("messages", message);
66 |
67 | // Optionally, return a value from your mutation.
68 | return await ctx.db.get(id);
69 | },
70 | });
71 | ```
72 |
73 | Using this mutation function in a React component looks like:
74 |
75 | ```ts
76 | const mutation = useMutation(api.functions.myMutationFunction);
77 | function handleButtonPress() {
78 | // fire and forget, the most common way to use mutations
79 | mutation({ first: "Hello!", second: "me" });
80 | // OR
81 | // use the result once the mutation has completed
82 | mutation({ first: "Hello!", second: "me" }).then((result) =>
83 | console.log(result),
84 | );
85 | }
86 | ```
87 |
88 | Use the Convex CLI to push your functions to a deployment. See everything
89 | the Convex CLI can do by running `npx convex -h` in your project root
90 | directory. To learn more, launch the docs with `npx convex docs`.
91 |
--------------------------------------------------------------------------------
/curvilinear/src/App.tsx:
--------------------------------------------------------------------------------
1 | import { SignInButton } from "@clerk/clerk-react";
2 | import { Unauthenticated } from "convex/react";
3 | import "animate.css/animate.min.css";
4 | import { useState, createContext } from "react";
5 | import { createBrowserRouter, RouterProvider } from "react-router-dom";
6 | import "react-toastify/dist/ReactToastify.css";
7 | import List from "./pages/List";
8 | import Root from "./pages/root";
9 | import Issue from "./pages/Issue";
10 | import { localStore } from "./convex";
11 | import { preload } from "./local/queries";
12 | import { useCachedUser } from "./hooks/useUser";
13 |
14 | interface MenuContextInterface {
15 | showMenu: boolean;
16 | setShowMenu: (show: boolean) => void;
17 | }
18 |
19 | export const MenuContext = createContext(null as MenuContextInterface | null);
20 |
21 | const router = createBrowserRouter([
22 | {
23 | path: `/`,
24 | element:
48 |
54 |
55 |
61 |
62 | {issue.title.slice(0, 3000) || ``}
63 |
64 |
65 | {formatDate(new Date(issue.created))}
66 |
67 |
68 |
70 | {
80 | e.stopPropagation();
81 | }}
82 | >
83 | {filterKeyword && (
84 | {
88 | if (onKeywordChange) onKeywordChange(e.target.value);
89 | }}
90 | onClick={(e) => {
91 | e.stopPropagation();
92 | }}
93 | placeholder={searchPlaceholder}
94 | />
95 | )}
96 | {children}
97 |
98 |
37 |
47 |
90 |
91 | );
92 | }
93 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Convex local sync + Linear clone
2 |
3 | This repo is an alpha of the offline sync engine for Convex. See a deployed version of the demo [here](https://linear-convex.vercel.app/).
4 |
5 | ## Installation
6 | This monorepo depends on [PNPM](https://pnpm.io/installation) for package management.
7 |
8 | ```bash
9 | pnpm i
10 | cd curvilinear
11 | npm run dev
12 | ```
13 |
14 | Note that you can either [use a local dev server](https://stack.convex.dev/anonymous-development) without signing up for a Convex account or use a managed
15 | cloud deployment for running the backend.
16 |
17 | ## App
18 |
19 | Vite serves the app on port 5173. It's pretty minimal Linear clone that demonstrates:
20 |
21 | 1. Fast preloading of a page's content on initial load without any spinners
22 | 2. Storing application state in IndexedDB for offline support
23 | 3. Fully local client navigations that don't block on the server and show a spinner.
24 | 4. Mutations for creating, editing, and deleting tasks.
25 |
26 | ### Schema
27 |
28 | The server-side schema is defined at `convex/schema.ts`. We have two tables, `issues`
29 | and `comments`.
30 |
31 | The local schema is defined as a *projection* of the server-side schema at
32 | `convex/sync/schema.ts`. There are two local tables, `issues` and `comments`, and their
33 | relationship to the underlying server tables are at `convex/sync/{issues,comments}.ts`.
34 |
35 | We currently don't have any non-trivial mapping logic between the two data models,
36 | so the logic in `convex/sync/issues.ts` just directly maps queries to the local table
37 | to queries to the underlying sync table.
38 |
39 | ### Queries
40 |
41 | On the client, the app's queries against the local store are specified in
42 | `src/local/queries.ts`. These synchronous callbacks issue queries against a
43 | `ctx.localDb` object, and the sync engine handles pulling in data from the
44 | server to fulfill these queries.
45 |
46 | React app components, like `src/pages/Issue/Comments.tsx` use the `useLocalQuery`
47 | hook to execute one of these callbacks. The hook returns `undefined` if the data
48 | isn't available yet, which may happen if not all relevant data was preloaded.
49 |
50 | ### Mutations
51 |
52 | The client specifies its mutations in `src/local/mutations.ts`. These are centrally
53 | defined since the sync engine needs to know how to replay in-progress mutations
54 | on restart.
55 |
56 | Mutations contain both a pointer to an authoritative server-side mutation (e.g.
57 | `api.issues.changeStatus`) as well as a callback for mutating the local store. These
58 | don't have to agree, and the sync engine will coordinate atomically rolling back
59 | the local store update once the server-side change is complete and visible.
60 |
61 | Server-side mutations are fully serializable, so a wide range of conflict resolution
62 | strategies are possible.
63 |
64 | ## Known issues
65 |
66 | 1. Correctness. We have deterministic simulation testing set up but haven't exercised it and wrung out all the bugs yet.
67 | 2. Scale and performance. We've not optimized this for large numbers of rows managed yet.
68 | 3. Making the website part offline with PWA
69 | 4. API for reactively querying the set of in-progress mutations
70 | 5. Native client ID allocation
71 | 6. Synchronization across multiple tabs
72 | 7. Versioning and local database migrations
73 | 8. The naming isn't great, and the APIs need a lot of polish.
74 | 9. Codesharing between local optimistic updates and the authoritative server mutation.
75 |
--------------------------------------------------------------------------------
/curvilinear/src/components/Modal.tsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | memo,
3 | RefObject,
4 | useCallback,
5 | useRef,
6 | type MouseEvent,
7 | } from "react";
8 | import ReactDOM from "react-dom";
9 | import classnames from "classnames";
10 |
11 | import CloseIconImg from "../assets/icons/close.svg";
12 | import useLockBodyScroll from "../hooks/useLockBodyScroll";
13 | import { Transition } from "@headlessui/react";
14 |
15 | interface Props {
16 | title?: string;
17 | isOpen: boolean;
18 | center?: boolean;
19 | className?: string;
20 | /* function called when modal is closed */
21 | onDismiss?: () => void;
22 | children?: React.ReactNode;
23 | size?: keyof typeof sizeClasses;
24 | }
25 | const sizeClasses = {
26 | large: `w-400`,
27 | normal: `w-140`,
28 | };
29 |
30 | function Modal({
31 | title,
32 | isOpen,
33 | center = true,
34 | size = `normal`,
35 | className,
36 | onDismiss,
37 | children,
38 | }: Props) {
39 | const ref = useRef
48 | View Options
49 |
50 |
51 |
52 | {/*
89 |
53 | Grouping
54 |
*/}
64 |
65 |
55 |
62 |
63 |
66 | Ordering
67 |
88 |
68 |
77 |
78 |
79 |
86 |
87 |
69 |
79 | {/* XXX: Why don't the tailwind classes set above apply? */}
80 |
103 |
104 | );
105 |
106 | return ReactDOM.createPortal(
107 | modal,
108 | document.getElementById(`root-modal`) as Element,
109 | );
110 | }
111 |
112 | export default memo(Modal);
113 |
--------------------------------------------------------------------------------
/curvilinear/src/types/types.ts:
--------------------------------------------------------------------------------
1 | import CancelIconImg from "../assets/icons/cancel.svg";
2 | import BacklogIconImg from "../assets/icons/circle-dot.svg";
3 | import TodoIconImg from "../assets/icons/circle.svg";
4 | import DoneIconImg from "../assets/icons/done.svg";
5 | import InProgressIconImg from "../assets/icons/half-circle.svg";
6 | import HighPriorityIconImg from "../assets/icons/signal-strong.svg";
7 | import LowPriorityIconImg from "../assets/icons/signal-weak.svg";
8 | import MediumPriorityIconImg from "../assets/icons/signal-medium.svg";
9 | import NoPriorityIconImg from "../assets/icons/dots.svg";
10 | import UrgentPriorityIconImg from "../assets/icons/rounded-claim.svg";
11 |
12 | export type Issue = {
13 | id: string;
14 | title: string;
15 | description: string;
16 | priority: (typeof Priority)[keyof typeof Priority];
17 | status: (typeof Status)[keyof typeof Status];
18 | modified: number;
19 | created: number;
20 | username: string;
21 | };
22 |
23 | export type Comment = {
24 | id: string;
25 | body: string;
26 | username: string;
27 | issue_id: string;
28 | created_at: number;
29 | };
30 |
31 | export const Priority = {
32 | NONE: `none`,
33 | URGENT: `urgent`,
34 | HIGH: `high`,
35 | LOW: `low`,
36 | MEDIUM: `medium`,
37 | };
38 |
39 | export const PriorityDisplay = {
40 | [Priority.NONE]: `None`,
41 | [Priority.URGENT]: `Urgent`,
42 | [Priority.HIGH]: `High`,
43 | [Priority.LOW]: `Low`,
44 | [Priority.MEDIUM]: `Medium`,
45 | };
46 |
47 | export const PriorityIcons = {
48 | [Priority.NONE]: NoPriorityIconImg,
49 | [Priority.URGENT]: UrgentPriorityIconImg,
50 | [Priority.HIGH]: HighPriorityIconImg,
51 | [Priority.MEDIUM]: MediumPriorityIconImg,
52 | [Priority.LOW]: LowPriorityIconImg,
53 | };
54 |
55 | export const PriorityOptions: [
56 | string,
57 | string,
58 | (typeof Priority)[keyof typeof Priority],
59 | ][] = [
60 | [PriorityIcons[Priority.NONE], Priority.NONE, `None`],
61 | [PriorityIcons[Priority.URGENT], Priority.URGENT, `Urgent`],
62 | [PriorityIcons[Priority.HIGH], Priority.HIGH, `High`],
63 | [PriorityIcons[Priority.MEDIUM], Priority.MEDIUM, `Medium`],
64 | [PriorityIcons[Priority.LOW], Priority.LOW, `Low`],
65 | ];
66 |
67 | export const Status = {
68 | BACKLOG: `backlog`,
69 | TODO: `todo`,
70 | IN_PROGRESS: `in_progress`,
71 | DONE: `done`,
72 | CANCELED: `canceled`,
73 | };
74 |
75 | export const StatusDisplay = {
76 | [Status.BACKLOG]: `Backlog`,
77 | [Status.TODO]: `To Do`,
78 | [Status.IN_PROGRESS]: `In Progress`,
79 | [Status.DONE]: `Done`,
80 | [Status.CANCELED]: `Canceled`,
81 | };
82 |
83 | export const StatusIcons = {
84 | [Status.BACKLOG]: BacklogIconImg,
85 | [Status.TODO]: TodoIconImg,
86 | [Status.IN_PROGRESS]: InProgressIconImg,
87 | [Status.DONE]: DoneIconImg,
88 | [Status.CANCELED]: CancelIconImg,
89 | };
90 |
91 | export const StatusOptions: [
92 | string,
93 | (typeof Status)[keyof typeof Status],
94 | string,
95 | ][] = [
96 | [StatusIcons[Status.BACKLOG], Status.BACKLOG, StatusDisplay[Status.BACKLOG]],
97 | [StatusIcons[Status.TODO], Status.TODO, StatusDisplay[Status.TODO]],
98 | [
99 | StatusIcons[Status.IN_PROGRESS],
100 | Status.IN_PROGRESS,
101 | StatusDisplay[Status.IN_PROGRESS],
102 | ],
103 | [StatusIcons[Status.DONE], Status.DONE, StatusDisplay[Status.DONE]],
104 | [
105 | StatusIcons[Status.CANCELED],
106 | Status.CANCELED,
107 | StatusDisplay[Status.CANCELED],
108 | ],
109 | ];
110 |
--------------------------------------------------------------------------------
/local-store/test/browser/localStore.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from "vitest";
2 | import { CopyOnWriteLocalStore } from "../../browser/core/localStore";
3 | import { sync as syncSchema } from "../../../simulation/convex/sync/schema";
4 | import { anyApi, defineSchema, defineTable } from "convex/server";
5 | import { v } from "convex/values";
6 | import { Writes } from "../../browser/core/protocol";
7 | import {
8 | LOG2_PAGE_SIZE,
9 | SingleIndexRangeExecutor,
10 | indexRangeUnbounded,
11 | } from "../../browser/core/paginator";
12 | import { createQueryToken } from "../../shared/queryTokens";
13 | import { PageArguments, PageResult } from "../../shared/types";
14 |
15 | export const sync = defineSchema({
16 | // specific to current user
17 | conversations: defineTable({
18 | _id: v.string(),
19 | latestMessageTime: v.number(),
20 | emoji: v.optional(v.string()),
21 | users: v.array(v.id("users")),
22 | hasUnreadMessages: v.boolean(),
23 | }).index("by_priority", ["hasUnreadMessages", "latestMessageTime"]),
24 | });
25 |
26 | test("applyWrites", async () => {
27 | const localStore = new CopyOnWriteLocalStore(syncSchema);
28 | const pageArguments: PageArguments = {
29 | syncTableName: "conversations",
30 | index: "by_priority",
31 | target: { kind: "successor", value: [] },
32 | log2PageSize: LOG2_PAGE_SIZE,
33 | };
34 | const pageResult: PageResult = {
35 | results: [],
36 | lowerBound: { kind: "predecessor", value: [] },
37 | upperBound: { kind: "successor", value: [] },
38 | };
39 | localStore.ingest([
40 | {
41 | tableName: "conversations",
42 | indexName: "by_priority",
43 | convexSubscriptionId: createQueryToken(
44 | anyApi.sync.conversations.by_priority,
45 | pageArguments,
46 | ),
47 | state: {
48 | kind: "loaded",
49 | value: pageResult,
50 | },
51 | },
52 | ]);
53 | const writesA = new Writes();
54 | writesA.set("conversations", "1" as any, {
55 | _id: "1",
56 | latestMessageTime: 1,
57 | hasUnreadMessages: true,
58 | emoji: "A",
59 | users: [],
60 | });
61 | localStore.applyWrites(writesA);
62 | const paginator = new SingleIndexRangeExecutor(
63 | {
64 | tableName: "conversations",
65 | indexName: "by_priority",
66 | indexRangeBounds: indexRangeUnbounded,
67 | count: 100,
68 | order: "desc",
69 | },
70 | syncSchema,
71 | localStore,
72 | );
73 | const result = paginator.tryFulfill();
74 | expect(result.state).toEqual("fulfilled");
75 |
76 | const results =
77 | result.state === "fulfilled" ? result.results.map((r) => r.emoji) : [];
78 | expect(results).toEqual(["A"]);
79 |
80 | const writesB = new Writes();
81 | writesB.set("conversations", "2" as any, {
82 | _id: "2",
83 | latestMessageTime: 2,
84 | hasUnreadMessages: true,
85 | emoji: "B",
86 | users: [],
87 | });
88 | localStore.applyWrites(writesB);
89 | const paginatorB = new SingleIndexRangeExecutor(
90 | {
91 | tableName: "conversations",
92 | indexName: "by_priority",
93 | indexRangeBounds: indexRangeUnbounded,
94 | count: 100,
95 | order: "desc",
96 | },
97 | syncSchema,
98 | localStore,
99 | );
100 | const resultB = paginatorB.tryFulfill();
101 | expect(resultB.state).toEqual("fulfilled");
102 | const resultsB =
103 | resultB.state === "fulfilled" ? resultB.results.map((r) => r.emoji) : [];
104 | expect(resultsB).toEqual(["B", "A"]);
105 | });
106 |
--------------------------------------------------------------------------------
/curvilinear/convex/issues.ts:
--------------------------------------------------------------------------------
1 | import { v } from "convex/values";
2 | import { DatabaseReader, mutation } from "./_generated/server";
3 |
4 | export const createIssue = mutation({
5 | args: {
6 | id: v.string(),
7 | title: v.string(),
8 | description: v.string(),
9 | priority: v.string(),
10 | status: v.string(),
11 | modified: v.number(),
12 | created: v.number(),
13 | username: v.string(),
14 | },
15 | handler: async (ctx, args) => {
16 | const identity = await ctx.auth.getUserIdentity();
17 | if (!identity) {
18 | throw new Error("Not logged in.");
19 | }
20 | if (identity.name !== args.username) {
21 | throw new Error("Username does not match logged in user.");
22 | }
23 | await ctx.db.insert("issues", args);
24 | },
25 | });
26 |
27 | export const changeStatus = mutation({
28 | args: {
29 | id: v.string(),
30 | status: v.string(),
31 | },
32 | handler: async (ctx, args) => {
33 | const identity = await ctx.auth.getUserIdentity();
34 | if (!identity) {
35 | throw new Error("Not logged in.");
36 | }
37 | const issue = await getIssue(ctx.db, args.id);
38 | return ctx.db.patch(issue._id, {
39 | status: args.status,
40 | modified: Date.now(),
41 | });
42 | },
43 | });
44 |
45 | export const changePriority = mutation({
46 | args: {
47 | id: v.string(),
48 | priority: v.string(),
49 | },
50 | handler: async (ctx, args) => {
51 | const identity = await ctx.auth.getUserIdentity();
52 | if (!identity) {
53 | throw new Error("Not logged in.");
54 | }
55 | const issue = await getIssue(ctx.db, args.id);
56 | return ctx.db.patch(issue._id, {
57 | priority: args.priority,
58 | modified: Date.now(),
59 | });
60 | },
61 | });
62 |
63 | export const changeTitle = mutation({
64 | args: {
65 | id: v.string(),
66 | title: v.string(),
67 | },
68 | handler: async (ctx, args) => {
69 | const identity = await ctx.auth.getUserIdentity();
70 | if (!identity) {
71 | throw new Error("Not logged in.");
72 | }
73 | const issue = await getIssue(ctx.db, args.id);
74 | return ctx.db.patch(issue._id, { title: args.title, modified: Date.now() });
75 | },
76 | });
77 |
78 | export const changeDescription = mutation({
79 | args: {
80 | id: v.string(),
81 | description: v.string(),
82 | },
83 | handler: async (ctx, args) => {
84 | const identity = await ctx.auth.getUserIdentity();
85 | if (!identity) {
86 | throw new Error("Not logged in.");
87 | }
88 | const issue = await getIssue(ctx.db, args.id);
89 | return ctx.db.patch(issue._id, {
90 | description: args.description,
91 | modified: Date.now(),
92 | });
93 | },
94 | });
95 |
96 | export const deleteIssue = mutation({
97 | args: {
98 | id: v.string(),
99 | },
100 | handler: async (ctx, args) => {
101 | const identity = await ctx.auth.getUserIdentity();
102 | if (!identity) {
103 | throw new Error("Not logged in.");
104 | }
105 | const issue = await getIssue(ctx.db, args.id);
106 | await ctx.db.delete(issue._id);
107 | },
108 | });
109 |
110 | async function maybeGetIssue(db: DatabaseReader, id: string) {
111 | return db
112 | .query("issues")
113 | .withIndex("by_issue_id", (q) => q.eq("id", id))
114 | .unique();
115 | }
116 |
117 | async function getIssue(db: DatabaseReader, id: string) {
118 | const issue = await maybeGetIssue(db, id);
119 | if (!issue) {
120 | throw new Error("Issue not found");
121 | }
122 | return issue;
123 | }
124 |
--------------------------------------------------------------------------------
/curvilinear/src/pages/Issue/Comments.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import ReactMarkdown from "react-markdown";
3 | import Editor from "../../components/editor/Editor";
4 | import Avatar from "../../components/Avatar";
5 | import { formatDate } from "../../utils/date";
6 | import { showWarning } from "../../utils/notification";
7 | import { Comment, Issue } from "../../types/types";
8 | import { useLocalStoreClient } from "local-store/react/LocalStoreProvider";
9 | import { loadComments } from "@/local/queries";
10 | import { useLocalQuery } from "local-store/react/hooks";
11 | import { postComment } from "@/local/mutations";
12 | import { useCachedUser } from "@/hooks/useUser";
13 |
14 | export interface CommentsProps {
15 | issue: Issue;
16 | }
17 |
18 | function Comments(commentProps: CommentsProps) {
19 | const [newCommentBody, setNewCommentBody] = useState
88 | {title && (
89 |
102 |
90 |
99 | )}
100 | {children}
101 | {title}
91 |
92 | 
97 |
98 |
35 |
48 | ));
49 | }
50 | };
51 |
52 | const handlePost = async (event: any) => {
53 | event.preventDefault();
54 | if (!newCommentBody) {
55 | showWarning(
56 | `Please enter a comment before submitting`,
57 | `Comment required`,
58 | );
59 | return;
60 | }
61 | if (!user || !user.fullName) {
62 | showWarning(`Please login to post a comment`, `Login required`);
63 | return;
64 | }
65 | const args = {
66 | id: crypto.randomUUID(),
67 | issue_id: commentProps.issue.id,
68 | body: newCommentBody,
69 | created_at: Date.now(),
70 | username: user.fullName,
71 | };
72 | const promise = client.mutation(postComment, args);
73 | setNewCommentBody("");
74 | await promise;
75 | };
76 |
77 | return (
78 | <>
79 | {commentList()}
80 |
99 |
100 | );
101 | }
102 |
103 | export default Comments;
104 |
--------------------------------------------------------------------------------
/local-store/browser/driver.ts:
--------------------------------------------------------------------------------
1 | import { CoreSyncEngine } from "./core/core";
2 | import {
3 | CoreRequest,
4 | CoreResponse,
5 | UINewSyncQuery,
6 | UITransition,
7 | } from "./core/protocol";
8 | import { LocalPersistence } from "./localPersistence";
9 | import { Logger } from "./logger";
10 | import { Network } from "./network";
11 |
12 | export class Driver {
13 | coreLocalStore: CoreSyncEngine;
14 | network: Network;
15 | localPersistence: LocalPersistence;
16 | uiTransitionHandler: ((transition: UITransition) => void) | null = null;
17 | newSyncQueryResultHandler: ((result: UINewSyncQuery) => void) | null = null;
18 | requestQueue: CoreRequest[] = [];
19 | logger: Logger;
20 | constructor(opts: {
21 | coreLocalStore: CoreSyncEngine;
22 | network: Network;
23 | localPersistence: LocalPersistence;
24 | logger: Logger;
25 | }) {
26 | this.coreLocalStore = opts.coreLocalStore;
27 | this.network = opts.network;
28 | this.localPersistence = opts.localPersistence;
29 | this.logger = opts.logger;
30 | }
31 |
32 | step() {
33 | for (let i = 0; i < 1000; i++) {
34 | const requests = [...this.requestQueue];
35 | this.requestQueue = [];
36 | for (const request of requests) {
37 | this.logger.debug("Driver.step: processing request", request);
38 | const responses = this.coreLocalStore.receive(request);
39 | for (const response of responses) {
40 | this.processResponse(response);
41 | }
42 | }
43 | if (this.requestQueue.length === 0) {
44 | return;
45 | }
46 | this.logger.warn(
47 | "Driver.step: Processing responses added more requests.",
48 | );
49 | }
50 | throw new Error("Too many steps on a single Driver turn!");
51 | }
52 |
53 | receive(message: CoreRequest) {
54 | this.requestQueue.push(message);
55 | this.step();
56 | }
57 |
58 | addUiTransitionHandler(handler: (transition: UITransition) => void) {
59 | this.uiTransitionHandler = handler;
60 | }
61 |
62 | addNewSyncQueryResultHandler(handler: (result: UINewSyncQuery) => void) {
63 | this.newSyncQueryResultHandler = handler;
64 | }
65 |
66 | private processResponse(response: CoreResponse) {
67 | this.logger.debug("Driver.processResponse: processing", response);
68 | switch (response.kind) {
69 | case "newSyncQuery": {
70 | this.newSyncQueryResultHandler?.(response);
71 | return;
72 | }
73 | case "sendQueryToNetwork": {
74 | this.network.sendQueryToNetwork(
75 | response.syncFunction,
76 | response.pageRequest,
77 | );
78 | return;
79 | }
80 | case "persistMutation": {
81 | this.localPersistence.persistMutation(
82 | response.persistId,
83 | response.mutationInfo,
84 | );
85 | return;
86 | }
87 | case "persistPages": {
88 | this.localPersistence.persistPages(response.persistId, response.pages);
89 | return;
90 | }
91 | case "transition": {
92 | if (!this.uiTransitionHandler) {
93 | throw new Error("No UI transition handler");
94 | }
95 | this.uiTransitionHandler(response);
96 | return;
97 | }
98 | case "removeQueryFromNetwork":
99 | this.network.removeQueryFromNetwork(response.queriesToRemove);
100 | return;
101 | case "sendMutationToNetwork":
102 | this.network.sendMutationToNetwork(response.mutationInfo);
103 | return;
104 | }
105 | const _typecheck: never = response;
106 | throw new Error("Unreachable");
107 | }
108 | }
109 |
--------------------------------------------------------------------------------
/curvilinear/src/components/ProfileMenu.tsx:
--------------------------------------------------------------------------------
1 | import { Transition } from "@headlessui/react";
2 | import { useRef, useState } from "react";
3 | import classnames from "classnames";
4 | import { useClickOutside } from "../hooks/useClickOutside";
5 | import Toggle from "./Toggle";
6 | import { SignOutButton } from "@clerk/clerk-react";
7 | import Modal from "./Modal";
8 |
9 | interface Props {
10 | isOpen: boolean;
11 | onDismiss?: () => void;
12 | setShowAboutModal?: (show: boolean) => void;
13 | setShowDebugView?: (show: boolean) => void;
14 | className?: string;
15 | }
16 | export default function ProfileMenu({
17 | isOpen,
18 | className,
19 | onDismiss,
20 | setShowAboutModal,
21 | setShowDebugView,
22 | }: Props) {
23 | const connectivityState = { status: `disconnected` };
24 | const classes = classnames(
25 | `select-none w-53 shadow-modal z-50 flex flex-col py-1 bg-white font-normal rounded text-gray-800`,
26 | className,
27 | );
28 | const ref = useRef(null);
29 |
30 | const connectivityConnected = connectivityState.status !== `disconnected`;
31 | const connectivityStateDisplay =
32 | connectivityState.status[0].toUpperCase() +
33 | connectivityState.status.slice(1);
34 |
35 | useClickOutside(ref, () => {
36 | if (isOpen && onDismiss) {
37 | onDismiss();
38 | }
39 | });
40 |
41 | return (
42 |
36 |
44 |
45 | {comment.body}
46 |
47 |
43 |
54 |
63 |
67 | Visit Convex
68 |
69 |
73 | Documentation
74 |
75 |
79 | GitHub
80 |
81 |
90 |
91 |
107 |
108 | );
109 | }
110 |
--------------------------------------------------------------------------------
/local-store/browser/core/optimisticUpdateExecutor.ts:
--------------------------------------------------------------------------------
1 | import {
2 | DefaultFunctionArgs,
3 | FunctionReference,
4 | SchemaDefinition,
5 | } from "convex/server";
6 | import { IndexRangeRequest, MutationInfo, TableName } from "../../shared/types";
7 | import { Writes } from "./protocol";
8 | import { LoadingError } from "../localDbReader";
9 | import { GenericId, Value } from "convex/values";
10 | import { LocalDbWriterImpl } from "../localDbWriter";
11 | import { CopyOnWriteLocalStore } from "./localStore";
12 | import { SingleIndexRangeExecutor } from "./paginator";
13 | import { LocalDbWriter } from "../../react/localDb";
14 |
15 | export type SyncMutation = (ctx: { localDb: any }, args: any) => Value;
16 |
17 | export type MutationMap = Record<
18 | string,
19 | {
20 | fn: FunctionReference<"mutation">;
21 | optimisticUpdate?: (
22 | ctx: { localDb: LocalDbWriter
96 |
97 | {connectivityStateDisplay}
98 |
99 |
*/}
106 |
20 |
32 |
44 |
56 |
68 |
69 |
80 |
91 |
102 |
113 |
114 | );
115 | };
116 |
117 | export default EditorMenu;
118 |
--------------------------------------------------------------------------------
/local-store/browser/localDbReader.ts:
--------------------------------------------------------------------------------
1 | import { GenericDocument, IndexRange } from "convex/server";
2 | import { DocumentByInfo, NamedIndex } from "convex/server";
3 | import { GenericTableInfo } from "convex/server";
4 | import { IndexRangeBuilder } from "convex/server";
5 | import { IndexName, IndexPrefix, IndexRangeRequest } from "../shared/types";
6 |
7 | import { IndexRangeBounds, TableName } from "../shared/types";
8 | import { PaginatorIndexRange } from "../shared/pagination";
9 | import { GenericId } from "convex/values";
10 | import { indexFieldsForSyncObject } from "../server/resolvers";
11 |
12 | export class LocalDbReaderImpl {
13 | public debugIndexRanges: Map<
14 | string,
15 | {
16 | table: string;
17 | index: string;
18 | indexRangeBounds: IndexRangeBounds;
19 | order: "asc" | "desc";
20 | limit: number;
21 | }
22 | > = new Map();
23 | constructor(
24 | private syncSchema: any,
25 | private requestRange: (
26 | rangeRequest: IndexRangeRequest,
27 | ) => Array