@basictech/react 0.2.0-beta.2 → 0.2.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basictech/react",
-  "version": "0.2.0-beta.2",
+  "version": "0.2.0-beta.4",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -17,9 +17,13 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@repo/sync": "0.1.0-beta.0",
+    "ajv": "^8.17.1",
+    "dexie": "^4.0.8",
+    "dexie-observable": "^4.0.1-beta.13",
     "dexie-react-hooks": "^1.1.7",
-    "jwt-decode": "^4.0.0"
+    "dexie-syncable": "^4.0.1-beta.13",
+    "jwt-decode": "^4.0.0",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@repo/typescript-config": "*",

package/readme.md

@@ -17,9 +17,31 @@ In your root component or App.tsx, wrap your application with the `BasicProvider
 ```typescript
 import { BasicProvider } from '@basictech/react';
 
+const schema = {
+  tables: { 
+    todos: { 
+      fields: { 
+        id: { 
+          type: "string",
+          primary: true
+        },
+        title: { 
+          type: "string",
+          indexed: true
+        },
+        completed: { 
+          type: "boolean",
+          indexed: true
+        }
+      }
+    }
+  } 
+}
+
+
 function App() {
   return (
-    <BasicProvider project_id="YOUR_PROJECT_ID">
+    <BasicProvider project_id="YOUR_PROJECT_ID" schema={schema}>
       {/* Your app components */}
     </BasicProvider>
   );

package/src/AuthContext.tsx

@@ -3,23 +3,61 @@
 import React, { createContext, useContext, useEffect, useState, useRef } from 'react'
 import { jwtDecode } from 'jwt-decode'
 
+import { BasicSync } from './sync'
+import { get, add, update, deleteRecord } from './db'
 
+import { validator, log } from './config'
+
+/*
+schema todo:
+    field types
+    array types
+    relations
+*/
+
+
+const example = {
+    project_id: '123',
+    version: 0,
+    tables: {
+        example: {
+            name: 'example',
+            type: 'collection',
+            fields: {
+                id: {
+                    type: 'uuid',
+                    primary: true,
+                },
+                value: {
+                    type: 'string',
+                    indexed: true,
+                },
+            }
+        },
+        example2: {
+            name: 'example2',
+            type: 'collection',
+            fields: {
+                id: { type: 'string', primary: true },
+                id: { type: 'string', primary: true },
+            }
+        }
+    }
+}
 
-import { BasicSync } from '@repo/sync'
-import { get, add, update, deleteRecord } from './db'
 
 type BasicSyncType = {
     basic_schema: any;
     connect: (options: { access_token: string }) => void;
     debugeroo: () => void;
     collection: (name: string) => {
-      ref: {
-        toArray: () => Promise<any[]>;
-        count: () => Promise<number>;
-      };
+        ref: {
+            toArray: () => Promise<any[]>;
+            count: () => Promise<number>;
+        };
     };
     [key: string]: any; // For other potential methods and properties
-  };
+};
 
 
 enum DBStatus {
@@ -56,7 +94,7 @@ export const BasicContext = createContext<{
     signin: () => void,
     getToken: () => Promise<string>,
     getSignInLink: () => string,
-    db: any, 
+    db: any,
     dbStatus: DBStatus
 }>({
     unicorn: "🦄",
@@ -103,6 +141,12 @@ function getSyncStatus(statusCode: number): string {
     }
 }
 
+type ErrorObject = {
+    code: string;
+    title: string;
+    message: string;
+}
+
 export function BasicProvider({ children, project_id, schema }: { children: React.ReactNode, project_id: string, schema: any }) {
     const [isLoaded, setIsLoaded] = useState(false)
     const [isSignedIn, setIsSignedIn] = useState(false)
@@ -110,30 +154,55 @@ export function BasicProvider({ children, project_id, schema }: { children: Reac
     const [authCode, setAuthCode] = useState<string | null>(null)
     const [user, setUser] = useState<User>({})
 
-    const [dbStatus, setDbStatus] = useState<DBStatus>(DBStatus.OFFLINE)
-
+    const [dbStatus, setDbStatus] = useState<DBStatus>(DBStatus.LOADING)
 
     const syncRef = useRef<BasicSync | null>(null);
 
+    const [error, setError] = useState<ErrorObject | null>(null)
+
     useEffect(() => {
-        if (!syncRef.current) {
-            syncRef.current = new BasicSync('basicdb', { schema: schema });
+        function initDb() {
+            // console.log('S', validator(example))
+            if (!validator(example)) {
+                console.error('Basic Schema is invalid!', validator.errors)
+                console.group('Schema Errors')
+                let errorMessage = ''
+                validator.errors.forEach((error, index) => {
+                    console.log('error', error)
+                    console.log(`${index + 1}:`, error.message, ` - at ${error.instancePath}`)
+                    errorMessage += `${index + 1}: ${error.message} - at ${error.instancePath}\n`
+                })
+                console.groupEnd('Schema Errors')
+                setError({
+                    code: 'schema_invalid',
+                    title: 'Basic Schema is invalid!',
+                    message: errorMessage
+                })
+                return null
+            }
 
-            // console.log('db is open', syncRef.current.isOpen())
-            // syncRef.current.open()
-            // .then(() => {
-            //     console.log("is open now:", syncRef.current.isOpen())
-            // })
 
-            syncRef.current.handleStatusChange((status: number, url: string) => {
-                setDbStatus(getSyncStatus(status))
-            })
+            if (!syncRef.current) {
+                syncRef.current = new BasicSync('basicdb', { schema: schema });
 
-            syncRef.current.syncable.getStatus().then((status) => {
-                console.log('sync status', getSyncStatus(status))
-            })
+                // console.log('db is open', syncRef.current.isOpen())
+                // syncRef.current.open()
+                // .then(() => {
+                //     console.log("is open now:", syncRef.current.isOpen())
+                // })
+
+                syncRef.current.handleStatusChange((status: number, url: string) => {
+                    setDbStatus(getSyncStatus(status))
+                })
+
+                syncRef.current.syncable.getStatus().then((status) => {
+                    console.log('sync status', getSyncStatus(status))
+                })
+            }
 
         }
+
+        initDb()
     }, []);
 
 
@@ -153,7 +222,7 @@ export function BasicProvider({ children, project_id, schema }: { children: Reac
     }
 
     useEffect(() => {
-        if (token) {
+        if (token && syncRef.current) {
             connectToDb()
         }
     }, [token])
@@ -163,8 +232,7 @@ export function BasicProvider({ children, project_id, schema }: { children: Reac
 
         const randomState = Math.random().toString(36).substring(7);
 
-        // let baseUrl = "https://api.basic.tech/auth/authorize"
-        let baseUrl = "http://localhost:3003/auth/authorize"
+        let baseUrl = "https://api.basic.tech/auth/authorize"
         baseUrl += `?client_id=${project_id}`
         baseUrl += `&redirect_uri=${encodeURIComponent(window.location.href)}`
         baseUrl += `&response_type=code`
@@ -366,11 +434,39 @@ export function BasicProvider({ children, project_id, schema }: { children: Reac
             db: syncRef.current,
             dbStatus
         }}>
+            {error && <ErrorDisplay error={error} />}
             {syncRef.current ? children : null}
         </BasicContext.Provider>
     )
 }
 
+function ErrorDisplay({ error }: { error: ErrorObject }) {
+    return <div style={{ 
+        position: 'absolute',
+        top: 20, 
+        left: 20,
+        color: 'black',
+        backgroundColor: '#f8d7da',
+        border: '1px solid #f5c6cb',
+        borderRadius: '4px',
+        padding: '20px',
+        maxWidth: '400px',
+        margin: '20px auto',
+        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+        fontFamily: 'monospace', 
+     }}>
+        <h3 style={{fontSize: '0.8rem', opacity: 0.8}}>code: {error.code}</h3>
+        <h1 style={{fontSize: '1.2rem', lineHeight: '1.5'}}>{error.title}</h1>
+        <p>{error.message}</p>
+    </div>
+}
+
+/*
+possible errors: 
+- projectid missing / invalid
+- schema missing / invalid
+*/
+
 export function useBasic() {
     return useContext(BasicContext);
 }

package/src/config.ts

@@ -0,0 +1,73 @@
+import Ajv from 'ajv'
+
+export const SERVER_URL = "https://api.basic.tech"
+// export const WS_URL = `${SERVER_URL}/ws`
+
+export const log = (...args: any[]) => {
+  if (process.env.NODE_ENV === 'development') {
+    console.log(...args)
+  }
+}
+
+
+const basicJsonSchema = {
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+      "project_id": {
+          "type": "string"
+      },
+      "namespace": {
+          "type": "string",
+      },
+      "version": {
+          "type": "integer",
+          "minimum": 0
+      },
+      "tables": {
+          "type": "object",
+          "patternProperties": {
+              "^[a-zA-Z0-9_]+$": {
+                  "type": "object",
+                  "properties": {
+                      "name": {
+                          "type": "string"
+                      },
+                      "type": {
+                          "type": "string",
+                          "enum": ["collection"]
+                      },
+                      "fields": {
+                          "type": "object",
+                          "patternProperties": {
+                              "^[a-zA-Z0-9_]+$": {
+                                  "type": "object",
+                                  "properties": {
+                                      "type": {
+                                          "type": "string"
+                                      },
+                                      "primary": {
+                                          "type": "boolean"
+                                      },
+                                      "indexed": {
+                                          "type": "boolean"
+                                      }
+                                  },
+                                  "required": ["type"]
+                              }
+                          },
+                          "additionalProperties": true
+                      }
+                  },
+                  "required": ["fields"]
+              }
+          },
+          "additionalProperties": true
+      }
+  },
+  "required": ["project_id", "version", "tables"]
+}
+
+
+const ajv = new Ajv()
+export const validator = ajv.compile(basicJsonSchema)

package/src/sync/index.ts

@@ -0,0 +1,195 @@
+"use client"
+
+import { v7 as uuidv7 } from 'uuid';
+import { Dexie, PromiseExtended } from 'dexie';
+// if (typeof window !== 'undefined') {
+//   import('dexie-observable');
+// }
+import 'dexie-syncable';
+import 'dexie-observable';
+
+import { syncProtocol } from './syncProtocol'
+import { SERVER_URL } from '../config'
+syncProtocol()
+
+
+// const DexieSyncStatus = {
+//   "-1": "ERROR",
+//   "0": "OFFLINE",
+//   "1": "CONNECTING",
+//   "2": "ONLINE",
+//   "3": "SYNCING",
+//   "4": "ERROR_WILL_RETRY"
+// }
+
+
+
+
+
+export class BasicSync extends Dexie {
+  basic_schema: any
+
+  constructor(name: string, options: any) {
+    super(name, options);
+
+    // --- INIT SCHEMA --- // 
+
+    //todo: handle versions?
+
+    // TODO: validate schema
+    this.basic_schema = options.schema
+    this.version(1).stores(this._convertSchemaToDxSchema(this.basic_schema))
+
+    this.version(2).stores({})
+    // this.verssion
+
+
+    // create an alias for toArray
+    // @ts-ignore
+    this.Collection.prototype.get = this.Collection.prototype.toArray
+
+
+    // --- SYNC --- // 
+
+    // this.syncable.on("statusChanged", (status, url) => { 
+    //   console.log("statusChanged", status, url)
+    // })
+
+  }
+
+  async connect({ access_token }: { access_token: string }) {
+    // const WS_URL = "ws://localhost:3003/ws"
+    const WS_URL = `${SERVER_URL}/ws`
+
+    
+    // Update sync nodes
+    await this.updateSyncNodes();
+    
+    // Proceed with the WebSocket connection
+    
+    console.log('Starting connection...')
+    return this.syncable.connect("websocket", WS_URL, { authToken: access_token });
+  }
+
+  private async updateSyncNodes() {
+    try {
+      const syncNodes = await this.table('_syncNodes').toArray();
+      const localSyncNodes = syncNodes.filter(node => node.type === 'local');
+      console.log('Local sync nodes:', localSyncNodes);
+
+      if (localSyncNodes.length > 1) {
+
+        
+        const largestNodeId = Math.max(...localSyncNodes.map(node => node.id));
+        // Check if the largest node is already the master
+        const largestNode = localSyncNodes.find(node => node.id === largestNodeId);
+        if (largestNode && largestNode.isMaster === 1) {
+          console.log('Largest node is already the master. No changes needed.');
+          return; // Exit the function early as no changes are needed
+        }
+
+
+        console.log('Largest node id:', largestNodeId);
+        console.error('HEISENBUG: More than one local sync node found.')
+
+        for (const node of localSyncNodes) {
+          console.log(`Local sync node keys:`, node.id, node.isMaster);
+          await this.table('_syncNodes').update(node.id, { isMaster: node.id === largestNodeId ? 1 : 0 });
+
+          console.log(`HEISENBUG: Setting ${node.id} to ${node.id === largestNodeId ? 'master' : '0'}`);
+        }
+
+        // Add a 1 second delay before returning // i dont think this helps?
+        await new Promise(resolve => setTimeout(resolve, 2000));
+
+      }
+
+      console.log('Sync nodes updated');
+    } catch (error) {
+      console.error('Error updating _syncNodes table:', error);
+    }
+  }
+
+  handleStatusChange(fn: any) {
+    this.syncable.on("statusChanged", fn)
+  }
+
+
+  _convertSchemaToDxSchema(schema: any) {
+    const stores = Object.entries(schema.tables).map(([key, table]: any) => {
+
+      const indexedFields = Object.entries(table.fields).filter(([key, field]: any) => field.indexed).map(([key, field]: any) => `,${key}`).join('')
+      return {
+        [key]: 'id' + indexedFields
+      }
+    })
+
+    return Object.assign({}, ...stores)
+  }
+
+  debugeroo() {
+    // console.log("debugeroo", this.syncable)
+
+    // this.syncable.list().then(x => console.log(x))
+
+    // this.syncable
+    return this.syncable
+  }
+
+
+  collection(name: string) {
+    // TODO: check against schema
+
+    return {
+
+      /**
+       * Returns the underlying Dexie table
+       * @type {Dexie.Table}
+       */
+      ref: this.table(name),
+
+      // --- WRITE ---- // 
+      add: (data: any) => {
+        console.log("Adding data to", name, data)
+        return this.table(name).add({
+          id: uuidv7(),
+          ...data
+        })
+      },
+
+      put: (data: any) => {
+        return this.table(name).put({
+          id: uuidv7(),
+          ...data
+        })
+      },
+
+      update: (id: string, data: any) => {
+        return this.table(name).update(id, data)
+      },
+
+      delete: (id: string) => {
+        return this.table(name).delete(id)
+      },
+
+
+      // --- READ ---- // 
+
+      get: (id: string) => {
+        return this.table(name).get(id)
+      },
+
+      getAll: () => {
+        return this.table(name).toArray()
+      },
+
+      // --- QUERY ---- // 
+      // TODO: lots to do here. simplifing creating querie,  filtering/ordering/limit, and execute
+
+      query: () => this.table(name),
+
+      filter: (fn: any) => this.table(name).filter(fn).toArray(),
+
+    }
+  }
+}