@instantdb/react 0.22.90-experimental.drewh-ssr.20320632959.1 → 0.22.90-experimental.drewh-ssr.20347747146.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instantdb/react",
-  "version": "0.22.90-experimental.drewh-ssr.20320632959.1",
+  "version": "0.22.90-experimental.drewh-ssr.20347747146.1",
   "description": "Instant DB for React",
   "homepage": "https://github.com/instantdb/instant/tree/main/client/packages/react",
   "repository": {
@@ -66,9 +66,9 @@
   },
   "dependencies": {
     "eventsource": "^4.0.0",
-    "@instantdb/core": "0.22.90-experimental.drewh-ssr.20320632959.1",
-    "@instantdb/react-common": "0.22.90-experimental.drewh-ssr.20320632959.1",
-    "@instantdb/version": "0.22.90-experimental.drewh-ssr.20320632959.1"
+    "@instantdb/core": "0.22.90-experimental.drewh-ssr.20347747146.1",
+    "@instantdb/react-common": "0.22.90-experimental.drewh-ssr.20347747146.1",
+    "@instantdb/version": "0.22.90-experimental.drewh-ssr.20347747146.1"
   },
   "scripts": {
     "test": "vitest",

package/src/index.ts

@@ -83,7 +83,6 @@ import {
   type SyncTableSyncTransaction,
   type SyncTableLoadFromStorage,
   type SyncTableSetupError,
-  createInstantRouteHandler,
 } from '@instantdb/core';
 
 import { InstantReactAbstractDatabase } from '@instantdb/react-common';
@@ -97,7 +96,6 @@ export {
   lookup,
   init,
   init_experimental,
-  createInstantRouteHandler,
   InstantReactWebDatabase,
   Cursors,
   i,

package/src/next-ssr/InstantNextDatabase.tsx

@@ -0,0 +1,57 @@
+'use client';
+import {
+  AuthState,
+  InstantSchemaDef,
+  InstaQLResponse,
+  PageInfoResponse,
+  RuleParams,
+  ValidQuery,
+} from '@instantdb/core';
+import InstantReactWebDatabase from '../InstantReactWebDatabase.ts';
+import { useContext } from 'react';
+import { SuspsenseQueryContext } from './InstantSuspenseProvider.tsx';
+
+export class InstantNextDatabase<
+  Schema extends InstantSchemaDef<any, any, any>,
+  UseDates extends boolean,
+> extends InstantReactWebDatabase<Schema, UseDates> {
+  public useSuspenseQuery = <Q extends ValidQuery<Q, Schema>>(
+    q: Q,
+    opts?: {
+      ruleParams: RuleParams;
+    },
+  ): {
+    data: InstaQLResponse<Schema, Q, NonNullable<UseDates>>;
+    pageInfo?: PageInfoResponse<Q>;
+  } => {
+    const ctx = useContext(SuspsenseQueryContext);
+    if (!ctx) {
+      throw new Error(
+        'useSuspenseQuery must be used within a SuspenseQueryProvider',
+      );
+    }
+    return ctx.useSuspenseQuery(q, opts) as any;
+  };
+
+  useAuth = (): AuthState => {
+    const ctx = useContext(SuspsenseQueryContext);
+    const realAuthResult = this._useAuth();
+    if (!ctx) {
+      return realAuthResult;
+    }
+
+    const { ssrUser } = ctx;
+    if (ssrUser === undefined) {
+      return realAuthResult;
+    }
+    if (realAuthResult.isLoading) {
+      return {
+        error: undefined,
+        isLoading: false,
+        user: ssrUser ?? undefined, // null -> undefined for the response
+      };
+    }
+
+    return realAuthResult;
+  };
+}

package/src/next-ssr/InstantSuspenseProvider.tsx

@@ -0,0 +1,187 @@
+'use client';
+import {
+  FrameworkClient,
+  InstantConfig,
+  InstantSchemaDef,
+  InstaQLResponse,
+  PageInfoResponse,
+  RuleParams,
+  User,
+  ValidQuery,
+} from '@instantdb/core';
+import InstantReactWebDatabase from '../InstantReactWebDatabase.ts';
+import {
+  createHydrationStreamProvider,
+  isServer,
+} from './HydrationStreamProvider.tsx';
+import { createContext, useContext, useRef, useState } from 'react';
+import { InstantReactAbstractDatabase } from '@instantdb/react-common';
+
+type InstantSuspenseProviderProps<
+  Schema extends InstantSchemaDef<any, any, any>,
+> = {
+  nonce?: string;
+  children: React.ReactNode;
+  db?: InstantReactWebDatabase<Schema, any>;
+  config?: Omit<InstantConfig<any, any>, 'schema'> & {
+    schema: string;
+  };
+  user?: User | null;
+};
+
+const stream = createHydrationStreamProvider<any>();
+
+type SuspenseQueryContextValue = {
+  useSuspenseQuery: (query: any, opts?: SuspenseQueryOpts) => any;
+  ssrUser: User | null | undefined;
+};
+
+export const SuspsenseQueryContext =
+  createContext<SuspenseQueryContextValue | null>(null);
+
+// Creates a typed useSuspense hook
+export const createUseSuspenseQuery = <
+  Schema extends InstantSchemaDef<any, any, any>,
+  UseDates extends boolean,
+>(
+  _db: InstantReactWebDatabase<Schema, UseDates>,
+): (<Q extends ValidQuery<Q, Schema>>(
+  q: Q,
+  opts?: {
+    ruleParams: RuleParams;
+  },
+) => {
+  data: InstaQLResponse<Schema, Q, NonNullable<UseDates>>;
+  pageInfo?: PageInfoResponse<Q>;
+}) => {
+  return <Q extends ValidQuery<Q, Schema>>(q: any, opts: any) => {
+    const ctx = useContext(SuspsenseQueryContext);
+    if (!ctx) {
+      throw new Error(
+        'useSuspenseQuery must be used within a SuspenseQueryProvider',
+      );
+    }
+    return ctx.useSuspenseQuery(q, opts) as any;
+  };
+};
+
+type SuspenseQueryOpts = {
+  ruleParams: RuleParams;
+};
+
+export const InstantSuspenseProvider = (
+  props: InstantSuspenseProviderProps<any>,
+) => {
+  const clientRef = useRef<FrameworkClient | null>(null);
+
+  if (!props.db) {
+    throw new Error(
+      'Must provide either a db or config to InstantSuspenseProvider',
+    );
+  }
+
+  const db = useRef<InstantReactAbstractDatabase<any, any>>(props.db);
+
+  const [trackedKeys] = useState(() => new Set<string>());
+
+  if (!clientRef.current) {
+    if (props.user && !props.user.refresh_token) {
+      throw new Error(
+        'User must have a refresh_token field. Recieved: ' +
+          JSON.stringify(props.user, null, 2),
+      );
+    }
+    clientRef.current = new FrameworkClient({
+      token: props.user?.refresh_token,
+      db: db.current.core,
+    });
+  }
+
+  if (isServer) {
+    clientRef.current.subscribe((result) => {
+      const { queryHash } = result;
+      trackedKeys.add(queryHash);
+    });
+  }
+
+  const useSuspenseQuery = (query: any, opts: SuspenseQueryOpts) => {
+    const nonSuspenseResult = db.current.useQuery(query, {
+      ...opts,
+    });
+
+    if (nonSuspenseResult.data) {
+      return {
+        data: nonSuspenseResult.data,
+        pageInfo: nonSuspenseResult.pageInfo,
+      };
+    }
+
+    // should never happen (typeguard)
+    if (!clientRef.current) {
+      throw new Error('Client ref not set up');
+    }
+
+    let entry = clientRef.current.getExistingResultForQuery(query, {
+      ruleParams: opts?.ruleParams,
+    });
+
+    if (!entry) {
+      entry = clientRef.current!.query(query, opts);
+    }
+
+    if (entry.status === 'pending') {
+      throw entry.promise;
+    }
+
+    if (entry.status === 'error') {
+      throw entry.error;
+    }
+
+    if (entry.status === 'success' && entry.type === 'session') {
+      return entry.data;
+    }
+
+    if (entry.status === 'success') {
+      const data = entry.data;
+      const result = clientRef.current.completeIsomorphic(
+        query,
+        data.triples,
+        data.attrs,
+        data.pageInfo,
+      );
+
+      return result;
+    }
+  };
+
+  return (
+    <SuspsenseQueryContext.Provider
+      value={{ useSuspenseQuery, ssrUser: props.user }}
+    >
+      <stream.Provider
+        nonce={props.nonce}
+        onFlush={() => {
+          const toSend: { queryKey: string; value: any }[] = [];
+          for (const [key, value] of clientRef.current!.resultMap.entries()) {
+            if (trackedKeys.has(key) && value.status === 'success') {
+              toSend.push({
+                queryKey: key,
+                value: value.data,
+              });
+            }
+          }
+
+          trackedKeys.clear();
+          return toSend;
+        }}
+        onEntries={(entries) => {
+          entries.forEach((entry) => {
+            clientRef.current!.addQueryResult(entry.queryKey, entry.value);
+          });
+        }}
+      >
+        {props.children}
+      </stream.Provider>
+    </SuspsenseQueryContext.Provider>
+  );
+};

package/src/next-ssr/getUserOnServer.ts

@@ -0,0 +1,8 @@
+import { cookies } from 'next/headers.js';
+
+export const getUserOnServer = async () => {
+  const cookieStore = await cookies();
+  const userJSON = cookieStore.get('instant_user');
+  const user = userJSON ? JSON.parse(userJSON.value) : null;
+  return user;
+};

package/src/next-ssr/index.tsx

@@ -1,195 +1,19 @@
-'use client';
 import {
-  AuthState,
-  FrameworkClient,
   InstantConfig,
   InstantSchemaDef,
   InstantUnknownSchema,
-  InstaQLResponse,
-  PageInfoResponse,
-  RuleParams,
-  User,
-  ValidQuery,
 } from '@instantdb/core';
-import { createContext, useContext, useRef, useState } from 'react';
-import {
-  createHydrationStreamProvider,
-  isServer,
-} from './HydrationStreamProvider.tsx';
-import version from '../version.ts';
-
-import InstantReactWebDatabase from '../InstantReactWebDatabase.ts';
-import { InstantReactAbstractDatabase } from '@instantdb/react-common';
-
-type InstantSuspenseProviderProps<
-  Schema extends InstantSchemaDef<any, any, any>,
-> = {
-  nonce?: string;
-  children: React.ReactNode;
-  db?: InstantReactWebDatabase<Schema, any>;
-  config?: Omit<InstantConfig<any, any>, 'schema'> & {
-    schema: string;
-  };
-  user?: User | null;
-};
-
-const stream = createHydrationStreamProvider<any>();
-
-type SuspenseQueryContextValue = {
-  useSuspenseQuery: (query: any, opts?: SuspenseQueryOpts) => any;
-  ssrUser: User | null | undefined;
-};
-
-const SuspsenseQueryContext = createContext<SuspenseQueryContextValue | null>(
-  null,
-);
-
-// Creates a typed useSuspense hook
-export const createUseSuspenseQuery = <
-  Schema extends InstantSchemaDef<any, any, any>,
-  UseDates extends boolean,
->(
-  _db: InstantReactWebDatabase<Schema, UseDates>,
-): (<Q extends ValidQuery<Q, Schema>>(
-  q: Q,
-  opts?: {
-    ruleParams: RuleParams;
-  },
-) => {
-  data: InstaQLResponse<Schema, Q, NonNullable<UseDates>>;
-  pageInfo?: PageInfoResponse<Q>;
-}) => {
-  return <Q extends ValidQuery<Q, Schema>>(q: any, opts: any) => {
-    const ctx = useContext(SuspsenseQueryContext);
-    if (!ctx) {
-      throw new Error(
-        'useSuspenseQuery must be used within a SuspenseQueryProvider',
-      );
-    }
-    return ctx.useSuspenseQuery(q, opts) as any;
-  };
-};
-
-type SuspenseQueryOpts = {
-  ruleParams: RuleParams;
-};
-
-export const InstantSuspenseProvider = (
-  props: InstantSuspenseProviderProps<any>,
-) => {
-  const clientRef = useRef<FrameworkClient | null>(null);
-
-  if (!props.db) {
-    throw new Error(
-      'Must provide either a db or config to InstantSuspenseProvider',
-    );
-  }
-
-  const db = useRef<InstantReactAbstractDatabase<any, any>>(props.db);
-
-  const [trackedKeys] = useState(() => new Set<string>());
-
-  if (!clientRef.current) {
-    if (props.user && !props.user.refresh_token) {
-      throw new Error(
-        'User must have a refresh_token field. Recieved: ' +
-          JSON.stringify(props.user, null, 2),
-      );
-    }
-    clientRef.current = new FrameworkClient({
-      token: props.user?.refresh_token,
-      db: db.current.core,
-    });
-  }
 
-  if (isServer) {
-    clientRef.current.subscribe((result) => {
-      const { queryHash } = result;
-      trackedKeys.add(queryHash);
-    });
-  }
-
-  const useSuspenseQuery = (query: any, opts: SuspenseQueryOpts) => {
-    const nonSuspenseResult = db.current.useQuery(query, {
-      ...opts,
-    });
-
-    if (nonSuspenseResult.data) {
-      return {
-        data: nonSuspenseResult.data,
-        pageInfo: nonSuspenseResult.pageInfo,
-      };
-    }
-
-    // should never happen (typeguard)
-    if (!clientRef.current) {
-      throw new Error('Client ref not set up');
-    }
-
-    let entry = clientRef.current.getExistingResultForQuery(query, {
-      ruleParams: opts?.ruleParams,
-    });
-
-    if (!entry) {
-      entry = clientRef.current!.query(query, opts);
-    }
-
-    if (entry.status === 'pending') {
-      throw entry.promise;
-    }
-
-    if (entry.status === 'error') {
-      throw entry.error;
-    }
-
-    if (entry.status === 'success' && entry.type === 'session') {
-      return entry.data;
-    }
+import version from '../version.ts';
 
-    if (entry.status === 'success') {
-      const data = entry.data;
-      const result = clientRef.current.completeIsomorphic(
-        query,
-        data.triples,
-        data.attrs,
-        data.pageInfo,
-      );
+import { InstantNextDatabase } from './InstantNextDatabase.tsx';
 
-      return result;
-    }
-  };
+export { getUserOnServer } from './getUserOnServer.ts';
 
-  return (
-    <SuspsenseQueryContext.Provider
-      value={{ useSuspenseQuery, ssrUser: props.user }}
-    >
-      <stream.Provider
-        nonce={props.nonce}
-        onFlush={() => {
-          const toSend: { queryKey: string; value: any }[] = [];
-          for (const [key, value] of clientRef.current!.resultMap.entries()) {
-            if (trackedKeys.has(key) && value.status === 'success') {
-              toSend.push({
-                queryKey: key,
-                value: value.data,
-              });
-            }
-          }
+export { InstantNextDatabase } from './InstantNextDatabase.tsx';
+export { InstantSuspenseProvider } from './InstantSuspenseProvider.tsx';
 
-          trackedKeys.clear();
-          return toSend;
-        }}
-        onEntries={(entries) => {
-          entries.forEach((entry) => {
-            clientRef.current!.addQueryResult(entry.queryKey, entry.value);
-          });
-        }}
-      >
-        {props.children}
-      </stream.Provider>
-    </SuspsenseQueryContext.Provider>
-  );
-};
+export { createInstantRouteHandler } from '@instantdb/core';
 
 /**
  *
@@ -221,48 +45,3 @@ export function init<
     '@instantdb/react': version,
   });
 }
-
-export class InstantNextDatabase<
-  Schema extends InstantSchemaDef<any, any, any>,
-  UseDates extends boolean,
-> extends InstantReactWebDatabase<Schema, UseDates> {
-  public useSuspenseQuery = <Q extends ValidQuery<Q, Schema>>(
-    q: Q,
-    opts?: {
-      ruleParams: RuleParams;
-    },
-  ): {
-    data: InstaQLResponse<Schema, Q, NonNullable<UseDates>>;
-    pageInfo?: PageInfoResponse<Q>;
-  } => {
-    const ctx = useContext(SuspsenseQueryContext);
-    if (!ctx) {
-      throw new Error(
-        'useSuspenseQuery must be used within a SuspenseQueryProvider',
-      );
-    }
-    return ctx.useSuspenseQuery(q, opts) as any;
-  };
-
-  useAuth = (): AuthState => {
-    const ctx = useContext(SuspsenseQueryContext);
-    const realAuthResult = this._useAuth();
-    if (!ctx) {
-      return realAuthResult;
-    }
-
-    const { ssrUser } = ctx;
-    if (ssrUser === undefined) {
-      return realAuthResult;
-    }
-    if (realAuthResult.isLoading) {
-      return {
-        error: undefined,
-        isLoading: false,
-        user: ssrUser ?? undefined, // null -> undefined for the response
-      };
-    }
-
-    return realAuthResult;
-  };
-}