@instantdb/core 0.22.96-experimental.add-posthog-frontend.20386914944.1 → 0.22.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instantdb/core",
-  "version": "0.22.96-experimental.add-posthog-frontend.20386914944.1",
+  "version": "0.22.96",
   "description": "Instant's core local abstraction",
   "homepage": "https://github.com/instantdb/instant/tree/main/client/packages/core",
   "repository": {
@@ -53,7 +53,7 @@
   "dependencies": {
     "mutative": "^1.0.10",
     "uuid": "^11.1.0",
-    "@instantdb/version": "0.22.96-experimental.add-posthog-frontend.20386914944.1"
+    "@instantdb/version": "0.22.96"
   },
   "scripts": {
     "test": "vitest",

package/src/Reactor.js

@@ -50,6 +50,7 @@ const STATUS = {
 const QUERY_ONCE_TIMEOUT = 30_000;
 const PENDING_TX_CLEANUP_TIMEOUT = 30_000;
 const PENDING_MUTATION_CLEANUP_THRESHOLD = 200;
+const ONE_MIN_MS = 1_000 * 60;
 
 const defaultConfig = {
   apiURI: 'https://api.instantdb.com',
@@ -348,7 +349,14 @@ export default class Reactor {
     this._oauthCallbackResponse = this._oauthLoginInit();
 
     // kick off a request to cache it
-    this.getCurrentUser();
+    this.getCurrentUser().then((userInfo) => {
+      this.syncUserToEndpoint(userInfo.user);
+    });
+
+    setInterval(async () => {
+      const currentUser = await this.getCurrentUser();
+      this.syncUserToEndpoint(currentUser.user);
+    }, ONE_MIN_MS);
 
     NetworkListener.getIsOnline().then((isOnline) => {
       this._isOnline = isOnline;
@@ -549,6 +557,43 @@ export default class Reactor {
     }
   }
 
+  /**
+   * Does the same thing as add-query-ok
+   * but called as a result of receiving query info from ssr
+   * @param {any} q
+   * @param {{ triples: any; pageInfo: any; }} result
+   * @param {boolean} enableCardinalityInference
+   */
+  _addQueryData(q, result, enableCardinalityInference) {
+    if (!this.attrs) {
+      throw new Error('Attrs in reactor have not been set');
+    }
+    const queryHash = weakHash(q);
+    const attrsStore = this.ensureAttrs();
+    const store = s.createStore(
+      this.attrs,
+      result.triples,
+      enableCardinalityInference,
+      this.config.useDateObjects,
+    );
+    this.querySubs.updateInPlace((prev) => {
+      prev[queryHash] = {
+        result: {
+          store,
+          attrsStore,
+          pageInfo: result.pageInfo,
+          processedTxId: undefined,
+          isExternal: true,
+        },
+        q,
+      };
+    });
+    this._cleanupPendingMutationsQueries();
+    this.notifyOne(queryHash);
+    this.notifyOneQueryOnce(queryHash);
+    this._cleanupPendingMutationsTimeout();
+  }
+
   _handleReceive(connId, msg) {
     // opt-out, enabled by default if schema
     const enableCardinalityInference =
@@ -1221,7 +1266,7 @@ export default class Reactor {
   }
 
   /** Runs instaql on a query and a store */
-  dataForQuery(hash) {
+  dataForQuery(hash, applyOptimistic = true) {
     const errorMessage = this._errorMessage;
     if (errorMessage) {
       return { error: errorMessage };
@@ -1245,15 +1290,26 @@ export default class Reactor {
       return cached;
     }
 
-    const { store, attrsStore, pageInfo, aggregate, processedTxId } = result;
+    let store = result.store;
+    let attrsStore = result.attrsStore;
+    const { pageInfo, aggregate, processedTxId } = result;
     const mutations = this._rewriteMutationsSorted(
       attrsStore,
       pendingMutations,
     );
-    const { store: newStore, attrsStore: newAttrsStore } =
-      this._applyOptimisticUpdates(store, attrsStore, mutations, processedTxId);
+    if (applyOptimistic) {
+      const optimisticResult = this._applyOptimisticUpdates(
+        store,
+        attrsStore,
+        mutations,
+        processedTxId,
+      );
+
+      store = optimisticResult.store;
+      attrsStore = optimisticResult.attrsStore;
+    }
     const resp = instaql(
-      { store: newStore, attrsStore: newAttrsStore, pageInfo, aggregate },
+      { store: store, attrsStore: attrsStore, pageInfo, aggregate },
       q,
     );
 
@@ -1989,7 +2045,28 @@ export default class Reactor {
     }
   }
 
+  async syncUserToEndpoint(user) {
+    if (!this.config.firstPartyPath) return;
+    try {
+      fetch(this.config.firstPartyPath + '/', {
+        method: 'POST',
+        body: JSON.stringify({
+          type: 'sync-user',
+          appId: this.config.appId,
+          user: user,
+        }),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+    } catch (error) {
+      this._log.error('Error syncing user with external endpoint', error);
+    }
+  }
+
   updateUser(newUser) {
+    this.syncUserToEndpoint(newUser);
+
     const newV = { error: undefined, user: newUser };
     this._currentUserCached = { isLoading: false, ...newV };
     this._dataForQueryCache = {};

package/src/SyncTable.ts

@@ -199,20 +199,18 @@ function applyChangesToStore(
   }
 }
 
+type ChangedFieldsOfChanges = {
+  [eid: string]: { [field: string]: { oldValue: unknown; newValue: unknown } };
+};
+
 function changedFieldsOfChanges(
   store: s.Store,
   attrsStore: s.AttrsStore,
   changes: SyncUpdateTriplesMsg['txes'][number]['changes'],
-): {
-  [eid: string]: SyncTransaction<
-    any,
-    any,
-    any
-  >['updated'][number]['changedFields'];
-} {
+): ChangedFieldsOfChanges {
   // This will be more complicated when we include links, we can either add a
   // changedLinks field or we can have something like 'bookshelves.title`
-  const changedFields = {};
+  const changedFields: ChangedFieldsOfChanges = {};
   for (const { action, triple } of changes) {
     const [e, a, v] = triple;
     const field = attrsStore.getAttr(a)?.['forward-identity']?.[2];
@@ -222,7 +220,6 @@ function changedFieldsOfChanges(
     changedFields[e] = fields;
 
     const oldNew = fields[field] ?? {};
-    fields[field] = oldNew;
 
     switch (action) {
       case 'added':
@@ -235,12 +232,15 @@ function changedFieldsOfChanges(
         }
         break;
     }
+
+    fields[field] = oldNew;
   }
 
-  for (const k of Object.keys(changedFields)) {
-    const { oldValue, newValue } = changedFields[k];
-    if (oldValue === newValue) {
-      delete changedFields[k];
+  for (const [_eid, fields] of Object.entries(changedFields)) {
+    for (const [k, { oldValue, newValue }] of Object.entries(fields)) {
+      if (oldValue === newValue) {
+        delete fields[k];
+      }
     }
   }
   return changedFields;
@@ -783,7 +783,11 @@ export class SyncTable {
               updated.push({
                 oldEntity: ent.entity,
                 newEntity: entity,
-                changedFields: changedFields || {},
+                changedFields: (changedFields || {}) as SyncTransaction<
+                  any,
+                  any,
+                  any
+                >['updated'][number]['changedFields'],
               });
               ent.entity = entity;
             } else {

package/src/createRouteHandler.ts

@@ -0,0 +1,63 @@
+import type { User } from './clientTypes.js';
+
+type CreateRouteHandlerConfig = {
+  appId: string;
+};
+
+function createUserSyncResponse(
+  config: CreateRouteHandlerConfig,
+  user: User | null,
+) {
+  if (user && user.refresh_token) {
+    return new Response(JSON.stringify({ ok: true }), {
+      headers: {
+        'Content-Type': 'application/json',
+        // 7 day expiry
+        'Set-Cookie': `instant_user_${config.appId}=${JSON.stringify(user)}; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=604800`,
+      },
+    });
+  } else {
+    return new Response(JSON.stringify({ ok: true }), {
+      headers: {
+        'Content-Type': 'application/json',
+        // remove the cookie (some browsers)
+        'Set-Cookie': `instant_user_${config.appId}=; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=-1`,
+      },
+    });
+  }
+}
+
+function errorResponse(status: number, message: string) {
+  return new Response(JSON.stringify({ ok: false, error: message }), {
+    status,
+    headers: { 'Content-Type': 'application/json' },
+  });
+}
+
+export const createInstantRouteHandler = (config: CreateRouteHandlerConfig) => {
+  return {
+    POST: async (req: Request) => {
+      let body: { type?: string; appId?: string; user?: User | null };
+      try {
+        body = await req.json();
+      } catch {
+        return errorResponse(400, 'Invalid JSON body');
+      }
+
+      if (!body.type) {
+        return errorResponse(400, 'Missing "type" field');
+      }
+
+      if (body.appId !== config.appId) {
+        return errorResponse(403, 'App ID mismatch');
+      }
+
+      switch (body.type) {
+        case 'sync-user':
+          return createUserSyncResponse(config, body.user ?? null);
+        default:
+          return errorResponse(400, `Unknown type: ${body.type}`);
+      }
+    },
+  };
+};

package/src/framework.ts

@@ -0,0 +1,318 @@
+// The FrameworkClient class is a mini version of a query store that allows making queries on both the frontend and backend
+// you can register queries, await their results and serialize them over a server/client boundary.
+// The class is generic so that it can be a good starting off point to make other ssr adapters.
+import {
+  coerceQuery,
+  InstantCoreDatabase,
+  InstantDBAttr,
+  weakHash,
+} from './index.ts';
+import * as s from './store.js';
+import instaql from './instaql.js';
+import { RuleParams } from './schemaTypes.ts';
+import { createLinkIndex } from './utils/linkIndex.ts';
+
+export const isServer = typeof window === 'undefined' || 'Deno' in globalThis;
+
+export type FrameworkConfig = {
+  token?: string | null;
+  db: InstantCoreDatabase<any, any>;
+};
+
+// represents an eventual result from running a query
+// either via ssr or by using the existing websocket connection.
+type QueryPromise =
+  | {
+      type: 'http';
+      triples: any;
+      attrs: any;
+      queryHash: any;
+      query: any;
+      pageInfo?: any;
+    }
+  | {
+      type: 'session';
+      queryResult: any;
+    };
+
+export class FrameworkClient {
+  private params: FrameworkConfig;
+  private db: InstantCoreDatabase<any, any>;
+
+  // stores all of the query promises so that ssr can read them
+  // and send the relevant results alongside the html that resulted in the query resolving
+  public resultMap: Map<
+    string,
+    {
+      status: 'pending' | 'success' | 'error';
+      type: 'http' | 'session';
+      promise?: Promise<QueryPromise> | null;
+      data?: any;
+      error?: any;
+    }
+  > = new Map();
+
+  private queryResolvedCallbacks: ((result: {
+    triples: any;
+    attrs: any;
+    queryHash: any;
+    query: any;
+    pageInfo?: any;
+  }) => void)[] = [];
+
+  constructor(params: FrameworkConfig) {
+    this.params = params;
+    this.db = params.db;
+    this.resultMap = new Map<
+      string,
+      {
+        type: 'http' | 'session';
+        status: 'pending' | 'success' | 'error';
+        promise?: Promise<QueryPromise>;
+        data?: any;
+        error?: any;
+      }
+    >();
+  }
+
+  public subscribe = (
+    callback: (result: {
+      triples: any;
+      attrs: any;
+      queryHash: string;
+      pageInfo?: any;
+    }) => void,
+  ) => {
+    this.queryResolvedCallbacks.push(callback);
+  };
+
+  // Runs on the client when ssr gets html script tags
+  public addQueryResult = (queryKey: string, value: any) => {
+    this.resultMap.set(queryKey, {
+      type: value.type,
+      status: 'success',
+      data: value,
+      promise: null,
+      error: null,
+    });
+    // send the result to the client
+    if (!isServer) {
+      // make sure the attrs are there to create stores
+      if (!this.db._reactor.attrs) {
+        this.db._reactor._setAttrs(value.attrs);
+      }
+      this.db._reactor._addQueryData(
+        value.query,
+        value,
+        !!this.db._reactor.config.schema,
+      );
+    }
+  };
+
+  // creates an entry in the results map
+  // and returns the same thing added to the map
+  public query = (
+    _query: any,
+    opts?: {
+      ruleParams: RuleParams;
+    },
+  ): {
+    type: 'http' | 'session';
+    status: 'pending' | 'success' | 'error';
+    promise?: Promise<QueryPromise>;
+    data?: any;
+    error?: any;
+  } => {
+    const { hash, query } = this.hashQuery(_query, opts);
+
+    if (this.db._reactor.status === 'authenticated') {
+      const promise = this.db.queryOnce(_query, opts);
+      let entry = {
+        status: 'pending' as 'pending' | 'success' | 'error',
+        type: 'session' as 'http' | 'session',
+        data: undefined as any,
+        error: undefined as any,
+        promise: promise as any,
+      };
+      promise.then((result) => {
+        entry.status = 'success';
+        entry.data = result;
+        entry.promise = null;
+      });
+      promise.catch((error) => {
+        entry.status = 'error';
+        entry.error = error;
+        entry.promise = null;
+      });
+      this.resultMap.set(hash, entry);
+      return entry as any;
+    }
+
+    const promise = this.getTriplesAndAttrsForQuery(query);
+    let entry = {
+      status: 'pending' as 'pending' | 'success' | 'error',
+      type: 'http' as 'http' | 'session',
+      data: undefined as any,
+      error: undefined as any,
+      promise: promise as any,
+    };
+
+    promise.then((result) => {
+      entry.status = 'success';
+      entry.data = result;
+      entry.promise = null;
+    });
+    promise.catch((error) => {
+      entry.status = 'error';
+      entry.error = error;
+      entry.promise = null;
+    });
+
+    promise.then((result) => {
+      this.queryResolvedCallbacks.forEach((callback) => {
+        callback({
+          queryHash: hash,
+          query: query,
+          attrs: result.attrs,
+          triples: result.triples,
+          pageInfo: result.pageInfo,
+        });
+      });
+    });
+
+    this.resultMap.set(hash, entry);
+    return entry;
+  };
+
+  public getExistingResultForQuery = (
+    _query: any,
+    opts?: {
+      ruleParams: RuleParams;
+    },
+  ) => {
+    const { hash } = this.hashQuery(_query, opts);
+    return this.resultMap.get(hash);
+  };
+
+  // creates a query result from a set of triples, query, and attrs
+  // can be run server side or client side
+  public completeIsomorphic = (
+    query: any,
+    triples: any[],
+    attrs: InstantDBAttr[],
+    pageInfo?: any,
+  ) => {
+    const attrMap = {};
+    attrs.forEach((attr) => {
+      attrMap[attr.id] = attr;
+    });
+
+    const enableCardinalityInference =
+      Boolean(this.db?._reactor?.config?.schema) &&
+      ('cardinalityInference' in this.db?._reactor?.config
+        ? Boolean(this.db?._reactor.config?.cardinalityInference)
+        : true);
+
+    const attrsStore = new s.AttrsStoreClass(
+      attrs.reduce((acc, attr) => {
+        acc[attr.id] = attr;
+        return acc;
+      }, {}),
+      createLinkIndex(this.db?._reactor.config.schema),
+    );
+
+    const store = s.createStore(
+      attrsStore,
+      triples,
+      enableCardinalityInference,
+      this.params.db._reactor.config.useDateObjects || false,
+    );
+    const resp = instaql(
+      {
+        store: store,
+        attrsStore: attrsStore,
+        pageInfo: pageInfo,
+        aggregate: undefined,
+      },
+      query,
+    );
+    return resp;
+  };
+
+  public hashQuery = (
+    _query: any,
+    opts?: {
+      ruleParams: RuleParams;
+    },
+  ): { hash: string; query: any } => {
+    if (_query && opts && 'ruleParams' in opts) {
+      _query = { $$ruleParams: opts['ruleParams'], ..._query };
+    }
+    const query = _query ? coerceQuery(_query) : null;
+    return { hash: weakHash(query), query: query };
+  };
+
+  // Run by the server to get triples and attrs
+  public getTriplesAndAttrsForQuery = async (
+    query: any,
+  ): Promise<{
+    triples: any[];
+    attrs: InstantDBAttr[];
+    query: any;
+    queryHash: string;
+    type: 'http';
+    pageInfo?: any;
+  }> => {
+    try {
+      const response = await fetch(
+        `${this.db._reactor.config.apiURI}/runtime/framework/query`,
+        {
+          method: 'POST',
+          headers: {
+            'app-id': this.params.db._reactor.config.appId,
+            'Content-Type': 'application/json',
+            Authorization: this.params.token
+              ? `Bearer ${this.params.token}`
+              : undefined,
+          } as Record<string, string>,
+          body: JSON.stringify({
+            query: query,
+          }),
+        },
+      );
+
+      if (!response.ok) {
+        throw new Error('Error getting triples from server');
+      }
+
+      const data = await response.json();
+
+      const attrs = data?.attrs;
+      if (!attrs) {
+        throw new Error('No attrs');
+      }
+
+      // TODO: make safer
+      const triples =
+        data.result?.[0].data?.['datalog-result']?.['join-rows'][0];
+
+      const pageInfo = data.result?.[0]?.data?.['page-info'];
+
+      return {
+        attrs,
+        triples,
+        type: 'http',
+        queryHash: this.hashQuery(query).hash,
+        query,
+        pageInfo,
+      };
+    } catch (err: any) {
+      const errWithMessage = new Error(
+        'Error getting triples from framework client',
+      );
+      // @ts-expect-error pre es2022
+      errWithMessage.cause = err;
+      throw errWithMessage;
+    }
+  };
+}

package/src/index.ts

@@ -20,10 +20,13 @@ import {
   validateTransactions,
   TransactionValidationError,
 } from './transactionValidation.ts';
+
 import {
   StorageInterface,
   type StorageInterfaceStoreName,
 } from './utils/PersistedObject.ts';
+import { createInstantRouteHandler } from './createRouteHandler.ts';
+import { parseSchemaFromJSON } from './parseSchemaFromJSON.ts';
 
 import type {
   PresenceOpts,
@@ -103,6 +106,7 @@ import type {
 } from './schemaTypes.ts';
 import type { InstantRules } from './rulesTypes.ts';
 import type { UploadFileResponse, DeleteFileResponse } from './StorageAPI.ts';
+import { FrameworkClient, type FrameworkConfig } from './framework.ts';
 
 import type {
   ExchangeCodeForTokenParams,
@@ -153,6 +157,7 @@ export type InstantConfig<
   appId: string;
   schema?: S;
   websocketURI?: string;
+  firstPartyPath?: string;
   apiURI?: string;
   devtool?: boolean | DevtoolConfig;
   verbose?: boolean;
@@ -903,7 +908,9 @@ export {
   validateQuery,
   QueryValidationError,
   validateTransactions,
+  parseSchemaFromJSON,
   TransactionValidationError,
+  FrameworkClient,
 
   // error
   InstantAPIError,
@@ -1019,6 +1026,7 @@ export {
 
   // SSE
   type EventSourceType,
+  type FrameworkConfig,
 
   // sync table types
   type SyncTableCallback,
@@ -1035,4 +1043,5 @@ export {
   // storage (e.g. indexeddb) interface
   StorageInterface,
   type StorageInterfaceStoreName,
+  createInstantRouteHandler,
 };