@basictech/react 0.8.0-beta.4 → 0.9.0-beta.1

package/src/sync/index.ts

@@ -1,288 +0,0 @@
-"use client"
-
-import { v7 as uuidv7 } from 'uuid';
-import { Dexie } from 'dexie';
-
-import { log } from '../config'
-import { validateData } from '@basictech/schema'
-import { setTokenGetter } from './tokenRegistry'
-
-// Track initialization state
-let dexieExtensionsLoaded = false;
-let initPromise: Promise<void> | null = null;
-
-/**
- * Initialize Dexie extensions (syncable and observable)
- * This must be called before creating a BasicSync instance
- * Safe to call multiple times - will only load once
- */
-export async function initDexieExtensions(): Promise<void> {
-  // Return early if already loaded or not in browser
-  if (dexieExtensionsLoaded) return;
-  if (typeof window === 'undefined') return;
-  
-  // If already initializing, wait for that promise
-  if (initPromise) return initPromise;
-  
-  initPromise = (async () => {
-    try {
-      // Dynamic imports - only loaded in browser
-      await import('dexie-syncable');
-      await import('dexie-observable');
-      
-      // Import and register sync protocol
-      const { syncProtocol } = await import('./syncProtocol');
-      syncProtocol();
-      
-      dexieExtensionsLoaded = true;
-      log('Dexie extensions loaded successfully');
-    } catch (error) {
-      console.error('Failed to load Dexie extensions:', error);
-      throw error;
-    }
-  })();
-  
-  return initPromise;
-}
-
-/**
- * Check if Dexie extensions are loaded
- */
-export function isDexieReady(): boolean {
-  return dexieExtensionsLoaded;
-}
-
-
-export class BasicSync extends Dexie {
-  basic_schema: any
-
-  constructor(name: string, options: any) {
-    super(name, options);
-
-    // --- INIT SCHEMA --- //
-    this.basic_schema = options.schema
-    this.version(1).stores(this._convertSchemaToDxSchema(this.basic_schema))
-    this.version(2).stores({})
-
-    // @ts-ignore - alias for toArray
-    this.Collection.prototype.get = this.Collection.prototype.toArray
-  }
-
-  async connect({ getToken, ws_url }: { getToken: (opts?: { forceRefresh?: boolean }) => Promise<string>, ws_url?: string }) {
-    const WS_URL = ws_url || 'wss://pds.basic.id/ws'
-
-    log('Connecting to', WS_URL)
-
-    // Store getToken in module-level registry (not in options) because
-    // dexie-syncable serializes options into IndexedDB via structured clone,
-    // which cannot handle functions.
-    setTokenGetter(WS_URL, getToken)
-
-    await this.updateSyncNodes();
-    
-    log('Starting connection...')
-    return this.syncable.connect("websocket", WS_URL, { schema: this.basic_schema });
-  }
-
-  async disconnect({ ws_url }: { ws_url?: string } = {}) {
-    const WS_URL = ws_url || 'wss://pds.basic.id/ws'
-
-    return this.syncable.disconnect(WS_URL) 
-  }
-
-  private async updateSyncNodes() {
-    try {
-      const syncNodes = await this.table('_syncNodes').toArray();
-      const localSyncNodes = syncNodes.filter(node => node.type === 'local');
-      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) {
-          log('Largest node is already the master. No changes needed.');
-          return; // Exit the function early as no changes are needed
-        }
-
-
-        log('Largest node id:', largestNodeId);
-        log('HEISENBUG: More than one local sync node found.')
-
-        for (const node of localSyncNodes) {
-          log(`Local sync node keys:`, node.id, node.isMaster);
-          await this.table('_syncNodes').update(node.id, { isMaster: node.id === largestNodeId ? 1 : 0 });
-
-          log(`HEISENBUG: Setting ${node.id} to ${node.id === largestNodeId ? 'master' : '0'}`);
-        }
-
-        await new Promise(resolve => setTimeout(resolve, 1000));
-
-        if (typeof window !== 'undefined') {
-          window.location.reload();
-        }
-      }
-
-      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(([, field]: any) => field.indexed)
-        .map(([fieldKey]: any) => `,${fieldKey}`)
-        .join('')
-      return {
-        [key]: 'id' + indexedFields
-      }
-    })
-
-    return Object.assign({}, ...stores)
-  }
-
-  debugeroo() {
-    return this.syncable
-  }
-
-  collection<T extends { id: string } = Record<string, any> & { id: string }>(name: string) {
-    // Validate table exists in schema
-    if (this.basic_schema?.tables && !this.basic_schema.tables[name]) {
-      throw new Error(`Table "${name}" not found in schema`)
-    }
-
-    const table = this.table(name)
-
-    return {
-      /**
-       * Returns the underlying Dexie table
-       * @type {Dexie.Table}
-       */
-      ref: table,
-
-      // --- WRITE ---- // 
-
-      /**
-       * Add a new record - returns the full object with generated id
-       */
-      add: async (data: Omit<T, 'id'>): Promise<T> => {
-        const valid = validateData(this.basic_schema, name, data)
-        if (!valid.valid) {
-          log('Invalid data', valid)
-          throw new Error(valid.message || 'Data validation failed')
-        }
-
-        const id = uuidv7()
-        const fullData = { id, ...data } as T
-        
-        await table.add(fullData)
-        return fullData
-      },
-
-      /**
-       * Put (upsert) a record - returns the full object
-       */
-      put: async (data: T): Promise<T> => {
-        if (!data.id) {
-          throw new Error('put() requires an id field')
-        }
-
-        const valid = validateData(this.basic_schema, name, data)
-        if (!valid.valid) {
-          log('Invalid data', valid)
-          throw new Error(valid.message || 'Data validation failed')
-        }
-
-        await table.put(data)
-        return data
-      },
-
-      /**
-       * Update an existing record - returns updated object or null
-       */
-      update: async (id: string, data: Partial<Omit<T, 'id'>>): Promise<T | null> => {
-        if (!id) {
-          throw new Error('update() requires an id')
-        }
-
-        const valid = validateData(this.basic_schema, name, data, false)
-        if (!valid.valid) {
-          log('Invalid data', valid)
-          throw new Error(valid.message || 'Data validation failed')
-        }
-
-        const updated = await table.update(id, data)
-        if (updated === 0) {
-          return null
-        }
-
-        // Fetch and return the updated record
-        const record = await table.get(id)
-        return (record as T) || null
-      },
-
-      /**
-       * Delete a record - returns true if deleted, false if not found
-       */
-      delete: async (id: string): Promise<boolean> => {
-        if (!id) {
-          throw new Error('delete() requires an id')
-        }
-
-        // Check if record exists first
-        const exists = await table.get(id)
-        if (!exists) {
-          return false
-        }
-
-        await table.delete(id)
-        return true
-      },
-
-      // --- READ ---- // 
-
-      /**
-       * Get a single record by id - returns null if not found
-       */
-      get: async (id: string): Promise<T | null> => {
-        if (!id) {
-          throw new Error('get() requires an id')
-        }
-
-        const record = await table.get(id)
-        return (record as T) || null
-      },
-
-      /**
-       * Get all records in the collection
-       */
-      getAll: async (): Promise<T[]> => {
-        return table.toArray() as Promise<T[]>
-      },
-
-      // --- QUERY ---- // 
-
-      /**
-       * Filter records using a predicate function
-       */
-      filter: async (fn: (item: T) => boolean): Promise<T[]> => {
-        return table.filter(fn).toArray() as Promise<T[]>
-      },
-
-      /**
-       * Get the raw Dexie table for advanced queries
-       * @deprecated Use ref instead
-       */
-      query: () => table,
-    }
-  }
-}

package/src/sync/syncProtocol.js

@@ -1,291 +0,0 @@
-"use client"
-import { Dexie } from "dexie";
-import { log } from "../config";
-import { getTokenGetter } from "./tokenRegistry";
-
-function decodeJwtExp(token) {
-  try {
-    var parts = token.split(".");
-    if (parts.length !== 3) return null;
-    var payload = JSON.parse(atob(parts[1].replace(/-/g, "+").replace(/_/g, "/")));
-    return typeof payload.exp === "number" ? payload.exp : null;
-  } catch (_) {
-    return null;
-  }
-}
-
-export const syncProtocol = function () {
-  log("Initializing syncProtocol");
-  // Constants:
-  var RECONNECT_DELAY = 5000; // Reconnect delay in case of errors such as network down.
-  var TOKEN_REFRESH_BUFFER = 60; // Refresh token this many seconds before exp
-
-  Dexie.Syncable.registerSyncProtocol("websocket", {
-    sync: function (
-      context,
-      url,
-      options,
-      baseRevision,
-      syncedRevision,
-      changes,
-      partial,
-      applyRemoteChanges,
-      onChangesAccepted,
-      onSuccess,
-      onError,
-    ) {
-      // The following vars are needed because we must know which callback to ack when server sends it's ack to us.
-      var requestId = 0;
-      var acceptCallbacks = {};
-      var refreshTimer = null;
-      var pendingTokenUpdate = null;
-
-      // Connect the WebSocket to given url:
-      log("Connecting to", url)
-      var ws = new WebSocket(url);
-
-      // sendChanges() method:
-      function sendChanges(changes, baseRevision, partial, onChangesAccepted) {
-        log("sendChanges", changes.length, baseRevision);
-        ++requestId;
-        acceptCallbacks[requestId.toString()] = onChangesAccepted;
-
-        // In this example, the server expects the following JSON format of the request:
-        //  {
-        //      type: "changes"
-        //      baseRevision: baseRevision,
-        //      changes: changes,
-        //      partial: partial,
-        //      requestId: id
-        //  }
-        //  To make the sample simplified, we assume the server has the exact same specification of how changes are structured.
-        //  In real world, you would have to pre-process the changes array to fit the server specification.
-        //  However, this example shows how to deal with the WebSocket to fullfill the API.
-
-        ws.send(
-          JSON.stringify({
-            type: "changes",
-            changes: changes,
-            partial: partial,
-            baseRevision: baseRevision,
-            requestId: requestId,
-          }),
-        );
-      }
-
-
-
-      function clearRefreshTimer() {
-        if (refreshTimer) {
-          clearTimeout(refreshTimer);
-          refreshTimer = null;
-        }
-      }
-
-      function sendTokenUpdate(token) {
-        if (ws.readyState !== WebSocket.OPEN) return false;
-        pendingTokenUpdate = token;
-        ws.send(JSON.stringify({ type: "tokenUpdate", authToken: token }));
-        return true;
-      }
-
-      // Resolve the getToken function from the module-level registry.
-      // It's stored there (not in options) because dexie-syncable serializes
-      // options into IndexedDB, and functions can't survive structured clone.
-      function resolveGetToken() {
-        var fn = getTokenGetter(url);
-        if (!fn) throw new Error("No token getter registered for " + url);
-        return fn;
-      }
-
-      // Schedule a proactive token refresh before the JWT expires.
-      // Sends a tokenUpdate message on the existing WebSocket so the
-      // server can accept the new token without dropping the connection.
-      function scheduleTokenRefresh(tokenStr) {
-        clearRefreshTimer();
-        var exp = decodeJwtExp(tokenStr);
-        if (!exp) return;
-        var msUntilRefresh = (exp - TOKEN_REFRESH_BUFFER) * 1000 - Date.now();
-        if (msUntilRefresh <= 0) return;
-        log("Scheduling proactive token refresh in", Math.round(msUntilRefresh / 1000), "s");
-        refreshTimer = setTimeout(async function () {
-          try {
-            var newToken = await resolveGetToken()({ forceRefresh: true });
-            if (sendTokenUpdate(newToken)) {
-              log("Sending tokenUpdate on existing WebSocket");
-            }
-          } catch (err) {
-            log("Proactive token refresh failed (non-fatal):", err);
-          }
-        }, msUntilRefresh);
-      }
-
-      // When WebSocket opens, get a fresh token and send our identity to the server.
-      // This runs on every open, including reconnects after ERROR_WILL_RETRY,
-      // so each attempt gets a fresh token via getToken().
-      ws.onopen = async function (event) {
-        try {
-          var token = await resolveGetToken()();
-          log("Opening socket - sending clientIdentity", context.clientIdentity);
-          ws.send(
-            JSON.stringify({
-              type: "clientIdentity",
-              clientIdentity: context.clientIdentity || null,
-              authToken: token,
-              schema: options.schema
-            }),
-          );
-          scheduleTokenRefresh(token);
-        } catch (err) {
-          log("Failed to get token for WebSocket:", err);
-          ws.close();
-          onError("Authentication failed: " + (err.message || err), RECONNECT_DELAY);
-        }
-      };
-
-      // When the page becomes visible again (e.g. PWA/mobile browser resuming
-      // from background), the scheduled setTimeout for token refresh may have
-      // been frozen by the browser. Force-refresh the token and re-send it to
-      // the server so the WebSocket connection stays authenticated.
-      function handleVisibilityResume() {
-        if (document.visibilityState === 'visible' && ws.readyState === WebSocket.OPEN) {
-          log("Page became visible - refreshing token for WebSocket");
-          resolveGetToken()({ forceRefresh: true }).then(function(newToken) {
-            sendTokenUpdate(newToken);
-          }).catch(function(err) {
-            log("Token refresh on visibility resume failed:", err);
-          });
-        }
-      }
-      if (typeof document !== 'undefined') {
-        document.addEventListener('visibilitychange', handleVisibilityResume);
-      }
-
-      function cleanupVisibilityListener() {
-        if (typeof document !== 'undefined') {
-          document.removeEventListener('visibilitychange', handleVisibilityResume);
-        }
-      }
-
-      // If network down or other error, tell the framework to reconnect again in some time:
-      ws.onerror = function (event) {
-        clearRefreshTimer();
-        cleanupVisibilityListener();
-        ws.close();
-        log("ws.onerror", event);
-        onError(event?.message, RECONNECT_DELAY);
-      };
-
-      // If socket is closed (network disconnected), inform framework and make it reconnect
-      ws.onclose = function (event) {
-        clearRefreshTimer();
-        cleanupVisibilityListener();
-        onError("Socket closed: " + event.reason, RECONNECT_DELAY);
-      };
-
-      // isFirstRound: Will need to call onSuccess() only when we are in sync the first time.
-      // onSuccess() will unblock Dexie to be used by application code.
-      // If for example app code writes: db.friends.where('shoeSize').above(40).toArray(callback), the execution of that query
-      // will not run until we have called onSuccess(). This is because we want application code to get results that are as
-      // accurate as possible. Specifically when connected the first time and the entire DB is being synced down to the browser,
-      // it is important that queries starts running first when db is in sync.
-      var isFirstRound = true;
-      // When message arrive from the server, deal with the message accordingly:
-      ws.onmessage = function (event) {
-        try {
-          // Assume we have a server that should send JSON messages of the following format:
-          // {
-          //     type: "clientIdentity", "changes", "ack" or "error"
-          //     clientIdentity: unique value for our database client node to persist in the context. (Only applicable if type="clientIdentity")
-          //     message: Error message (Only applicable if type="error")
-          //     requestId: ID of change request that is acked by the server (Only applicable if type="ack" or "error")
-          //     changes: changes from server (Only applicable if type="changes")
-          //     lastRevision: last revision of changes sent (applicable if type="changes")
-          //     partial: true if server has additionalChanges to send. False if these changes were the last known. (applicable if type="changes")
-          // }
-          var requestFromServer = JSON.parse(event.data);
-          log("requestFromServer", requestFromServer, { isFirstRound });
-
-          if (requestFromServer.type == "clientIdentity") {
-            context.clientIdentity = requestFromServer.clientIdentity;
-            context.save();
-
-            sendChanges(changes, baseRevision, partial, onChangesAccepted);
-
-            ws.send(
-              JSON.stringify({
-                type: "subscribe",
-                syncedRevision: syncedRevision,
-              }),
-            );
-          } else if (requestFromServer.type == "changes") {
-            applyRemoteChanges(
-              requestFromServer.changes,
-              requestFromServer.currentRevision,
-              requestFromServer.partial,
-            );
-            if (isFirstRound && !requestFromServer.partial) {
-              // Since this is the first sync round and server sais we've got all changes - now is the time to call onsuccess()
-              onSuccess({
-                // Specify a react function that will react on additional client changes
-                react: function (
-                  changes,
-                  baseRevision,
-                  partial,
-                  onChangesAccepted,
-                ) {
-                  sendChanges(
-                    changes,
-                    baseRevision,
-                    partial,
-                    onChangesAccepted,
-                  );
-                },
-                disconnect: function () {
-                  clearRefreshTimer();
-                  cleanupVisibilityListener();
-                  ws.close();
-                },
-              });
-              isFirstRound = false;
-            }
-          } else if (requestFromServer.type == "tokenUpdateAck") {
-            if (requestFromServer.ok) {
-              scheduleTokenRefresh(requestFromServer.authToken || pendingTokenUpdate);
-              pendingTokenUpdate = null;
-            } else {
-              log("tokenUpdate rejected by server:", requestFromServer.code || requestFromServer.message);
-              pendingTokenUpdate = null;
-              ws.close(4001, requestFromServer.code || "token_update_failed");
-              onError(
-                requestFromServer.message || "Authentication refresh failed",
-                RECONNECT_DELAY,
-              );
-            }
-          } else if (requestFromServer.type == "ack") {
-            var requestId = requestFromServer.requestId;
-            var acceptCallback = acceptCallbacks[requestId.toString()];
-            acceptCallback(); // Tell framework that server has acknowledged the changes sent.
-            delete acceptCallbacks[requestId.toString()];
-          } else if (requestFromServer.type == "error") {
-            ws.close();
-            if (requestFromServer.code === "TOKEN_EXPIRED" || requestFromServer.code === "UNAUTHORIZED") {
-              log("Auth error from server, will reconnect with fresh token:", requestFromServer.message);
-              onError(requestFromServer.message, RECONNECT_DELAY);
-            } else {
-              onError(requestFromServer.message, Infinity);
-            }
-          } else {
-            log("unknown message", requestFromServer);
-            ws.close();
-            onError("unknown message", Infinity);
-          }
-        } catch (e) {
-          ws.close();
-          log("caught error", e)
-          onError(e, Infinity); // Something went crazy. Server sends invalid format or our code is buggy. Dont reconnect - it would continue failing.
-        }
-      };
-    },
-  });
-};

package/src/sync/tokenRegistry.ts

@@ -1,20 +0,0 @@
-/**
- * Module-level registry for token getter functions, keyed by WebSocket URL.
- *
- * dexie-syncable serializes the `options` object into IndexedDB via
- * structured clone, which cannot handle functions. This registry keeps
- * the getToken function out of `options` so it survives serialization
- * while remaining accessible to the sync protocol on every (re)connect.
- */
-
-type GetTokenFn = (options?: { forceRefresh?: boolean }) => Promise<string>
-
-const registry = new Map<string, GetTokenFn>()
-
-export function setTokenGetter(url: string, fn: GetTokenFn): void {
-    registry.set(url, fn)
-}
-
-export function getTokenGetter(url: string): GetTokenFn | undefined {
-    return registry.get(url)
-}

package/src/updater/updateMigrations.ts

@@ -1,22 +0,0 @@
-import { BasicStorage } from '../utils/storage'
-import { Migration } from './versionUpdater'
-import { log } from '../config'
-
-export const addMigrationTimestamp: Migration = {
-  fromVersion: '0.6.0',
-  toVersion: '0.7.0',
-  async migrate(storage: BasicStorage) {
-    log('Running migration 0.6.0 → 0.7.0')
-    storage.set('test_migration', 'true')
-  }
-}
-
-
-/**
- * Get all available migrations
- */
-export function getMigrations(): Migration[] {
-  return [
-    addMigrationTimestamp
-  ]
-}