@instantdb/solidjs 0.0.1

package/src/InstantSolidDatabase.ts

@@ -0,0 +1,363 @@
+import {
+  // types
+  type AuthState,
+  type User,
+  type ConnectionStatus,
+  type TransactionChunk,
+  type RoomSchemaShape,
+  type InstaQLOptions,
+  type InstantConfig,
+  type PageInfoResponse,
+  type InstaQLLifecycleState,
+  type InstaQLResponse,
+  type ValidQuery,
+  // classes
+  Auth,
+  Storage,
+  txInit,
+  InstantCoreDatabase,
+  init as core_init,
+  coerceQuery,
+  InstantSchemaDef,
+  RoomsOf,
+  InstantError,
+  IInstantDatabase,
+} from '@instantdb/core';
+
+import { createSignal, createEffect, onCleanup, createMemo } from 'solid-js';
+import type { Accessor } from 'solid-js';
+
+import { InstantSolidRoom, rooms } from './InstantSolidRoom.js';
+import version from './version.js';
+
+const defaultState = {
+  isLoading: true,
+  data: undefined,
+  pageInfo: undefined,
+  error: undefined,
+} as const;
+
+const defaultAuthState: AuthState = {
+  isLoading: true,
+  user: undefined,
+  error: undefined,
+};
+
+function stateForResult(result: any) {
+  return {
+    isLoading: !Boolean(result),
+    data: undefined,
+    pageInfo: undefined,
+    error: undefined,
+    ...(result ? result : {}),
+  };
+}
+
+export class InstantSolidDatabase<
+  Schema extends InstantSchemaDef<any, any, any>,
+  UseDates extends boolean = false,
+  Rooms extends RoomSchemaShape = RoomsOf<Schema>,
+> implements IInstantDatabase<Schema>
+{
+  public tx = txInit<Schema>();
+
+  public auth: Auth;
+  public storage: Storage;
+  public core: InstantCoreDatabase<Schema, UseDates>;
+
+  constructor(core: InstantCoreDatabase<Schema, UseDates>) {
+    this.core = core;
+    this.auth = this.core.auth;
+    this.storage = this.core.storage;
+  }
+
+  /**
+   * Returns a unique ID for a given `name`. It's stored in local storage,
+   * so you will get the same ID across sessions.
+   *
+   * @example
+   *  const deviceId = await db.getLocalId('device');
+   */
+  getLocalId = (name: string): Promise<string> => {
+    return this.core.getLocalId(name);
+  };
+
+  /**
+   * Use this to write data! You can create, update, delete, and link objects
+   *
+   * @see https://instantdb.com/docs/instaml
+   *
+   * @example
+   *   const goalId = id();
+   *   db.transact(db.tx.goals[goalId].update({title: "Get fit"}))
+   */
+  transact = (
+    chunks: TransactionChunk<any, any> | TransactionChunk<any, any>[],
+  ) => {
+    return this.core.transact(chunks);
+  };
+
+  /**
+   * One time query for the logged in state.
+   *
+   * @see https://instantdb.com/docs/auth
+   * @example
+   *   const user = await db.getAuth();
+   *   console.log('logged in as', user.email)
+   */
+  getAuth(): Promise<User | null> {
+    return this.core.getAuth();
+  }
+
+  /**
+   * Use this for one-off queries.
+   * Returns local data if available, otherwise fetches from the server.
+   *
+   * @see https://instantdb.com/docs/instaql
+   *
+   * @example
+   *  const resp = await db.queryOnce({ goals: {} });
+   *  console.log(resp.data.goals)
+   */
+  queryOnce = <Q extends ValidQuery<Q, Schema>>(
+    query: Q,
+    opts?: InstaQLOptions,
+  ): Promise<{
+    data: InstaQLResponse<Schema, Q, UseDates>;
+    pageInfo: PageInfoResponse<Q>;
+  }> => {
+    return this.core.queryOnce(query, opts);
+  };
+
+  // -----------
+  // Solid reactive hooks
+
+  /**
+   * Use this to query your data!
+   *
+   * @see https://instantdb.com/docs/instaql
+   *
+   * @example
+   *   const state = db.useQuery({ goals: {} });
+   *   // state().isLoading, state().error, state().data
+   */
+  useQuery = <Q extends ValidQuery<Q, Schema>>(
+    query: null | Q,
+    opts?: InstaQLOptions,
+  ): Accessor<InstaQLLifecycleState<Schema, Q, UseDates>> => {
+    const [state, setState] = createSignal<
+      InstaQLLifecycleState<Schema, Q, UseDates>
+    >(defaultState as InstaQLLifecycleState<Schema, Q, UseDates>);
+
+    createEffect(() => {
+      if (!query) {
+        setState(
+          () => defaultState as InstaQLLifecycleState<Schema, Q, UseDates>,
+        );
+        return;
+      }
+
+      let q = query;
+      if (opts && 'ruleParams' in opts) {
+        q = { $$ruleParams: (opts as any)['ruleParams'], ...q };
+      }
+
+      const coerced = coerceQuery(q);
+      const prev = this.core._reactor.getPreviousResult(coerced);
+      if (prev) {
+        setState(
+          () =>
+            stateForResult(prev) as InstaQLLifecycleState<Schema, Q, UseDates>,
+        );
+      }
+
+      const unsub = this.core.subscribeQuery<Q, UseDates>(coerced, (result) => {
+        setState(
+          () =>
+            Object.assign(
+              {
+                isLoading: false,
+                data: undefined,
+                pageInfo: undefined,
+                error: undefined,
+              },
+              result,
+            ) as InstaQLLifecycleState<Schema, Q, UseDates>,
+        );
+      });
+
+      onCleanup(unsub);
+    });
+
+    return state;
+  };
+
+  /**
+   * Listen for the logged in state. This is useful
+   * for deciding when to show a login screen.
+   *
+   * @see https://instantdb.com/docs/auth
+   * @example
+   *  function App() {
+   *    const auth = db.useAuth();
+   *    // auth().isLoading, auth().user, auth().error
+   *  }
+   */
+  useAuth = (): Accessor<AuthState> => {
+    const [state, setState] = createSignal<AuthState>(
+      this.core._reactor._currentUserCached ?? defaultAuthState,
+    );
+
+    createEffect(() => {
+      const unsub = this.core.subscribeAuth((auth) => {
+        setState({ isLoading: false, ...auth });
+      });
+
+      onCleanup(unsub);
+    });
+
+    return state;
+  };
+
+  /**
+   * Subscribe to the currently logged in user.
+   * If the user is not logged in, this will throw an Error.
+   *
+   * @see https://instantdb.com/docs/auth
+   * @example
+   *  function UserDisplay() {
+   *    const user = db.useUser();
+   *    return <div>Logged in as: {user().email}</div>
+   *  }
+   */
+  useUser = (): Accessor<User> => {
+    const auth = this.useAuth();
+    return createMemo(() => {
+      const { user } = auth();
+      if (!user) {
+        throw new InstantError(
+          'useUser must be used within an auth-protected route',
+        );
+      }
+      return user;
+    });
+  };
+
+  /**
+   * Listen for connection status changes to Instant.
+   *
+   * @see https://www.instantdb.com/docs/patterns#connection-status
+   * @example
+   *  function App() {
+   *    const status = db.useConnectionStatus();
+   *    return <div>Connection state: {status()}</div>
+   *  }
+   */
+  useConnectionStatus = (): Accessor<ConnectionStatus> => {
+    const [status, setStatus] = createSignal<ConnectionStatus>(
+      this.core._reactor.status as ConnectionStatus,
+    );
+
+    createEffect(() => {
+      const unsub = this.core.subscribeConnectionStatus((newStatus) => {
+        setStatus(() => newStatus);
+      });
+
+      onCleanup(unsub);
+    });
+
+    return status;
+  };
+
+  /**
+   * A hook that returns a unique ID for a given `name`. localIds are
+   * stored in local storage, so you will get the same ID across sessions.
+   *
+   * Initially returns `null`, and then loads the localId.
+   *
+   * @example
+   * const deviceId = db.useLocalId('device');
+   * // deviceId() is null initially, then the ID string
+   */
+  useLocalId = (name: string): Accessor<string | null> => {
+    const [localId, setLocalId] = createSignal<string | null>(null);
+
+    createEffect(() => {
+      let mounted = true;
+      this.getLocalId(name).then((id) => {
+        if (mounted) {
+          setLocalId(() => id);
+        }
+      });
+      onCleanup(() => {
+        mounted = false;
+      });
+    });
+
+    return localId;
+  };
+
+  /**
+   * Obtain a handle to a room, which allows you to listen to topics and presence data
+   *
+   * @see https://instantdb.com/docs/presence-and-topics
+   *
+   * @example
+   *  const room = db.room('chat', roomId);
+   *  const presence = db.rooms.usePresence(room);
+   */
+  room<RoomType extends keyof Rooms>(
+    type: RoomType = '_defaultRoomType' as RoomType,
+    id: string = '_defaultRoomId',
+  ) {
+    return new InstantSolidRoom<Schema, Rooms, RoomType>(this.core, type, id);
+  }
+
+  /**
+   * Hooks for working with rooms
+   *
+   * @see https://instantdb.com/docs/presence-and-topics
+   *
+   * @example
+   *  const room = db.room('chat', roomId);
+   *  const presence = db.rooms.usePresence(room);
+   *  const publish = db.rooms.usePublishTopic(room, 'emoji');
+   */
+  rooms = rooms;
+}
+
+// -----------
+// init
+
+/**
+ * The first step: init your application!
+ *
+ * Visit https://instantdb.com/dash to get your `appId` :)
+ *
+ * @example
+ *  import { init } from "@instantdb/solidjs"
+ *
+ *  const db = init({ appId: "my-app-id" })
+ *
+ *  // You can also provide a schema for type safety and editor autocomplete!
+ *
+ *  import { init } from "@instantdb/solidjs"
+ *  import schema from "../instant.schema.ts";
+ *
+ *  const db = init({ appId: "my-app-id", schema })
+ */
+export function init<
+  Schema extends InstantSchemaDef<any, any, any>,
+  UseDates extends boolean = false,
+>(
+  config: Omit<InstantConfig<Schema, UseDates>, 'useDateObjects'> & {
+    useDateObjects?: UseDates;
+  },
+): InstantSolidDatabase<Schema, UseDates> {
+  const coreDb = core_init<Schema, UseDates>(config, undefined, undefined, {
+    '@instantdb/solidjs': version,
+  });
+  return new InstantSolidDatabase<Schema, UseDates>(coreDb);
+}
+
+export const init_experimental = init;

package/src/InstantSolidRoom.ts

@@ -0,0 +1,319 @@
+import {
+  type PresenceOpts,
+  type PresenceResponse,
+  type RoomSchemaShape,
+  InstantCoreDatabase,
+  InstantSchemaDef,
+} from '@instantdb/core';
+
+import { createSignal, createEffect, onCleanup, createMemo } from 'solid-js';
+import type { Accessor } from 'solid-js';
+
+// ------
+// Types
+
+export type PresenceHandle<
+  PresenceShape,
+  Keys extends keyof PresenceShape,
+> = PresenceResponse<PresenceShape, Keys> & {
+  publishPresence: (data: Partial<PresenceShape>) => void;
+};
+
+export type TypingIndicatorOpts = {
+  timeout?: number | null;
+  stopOnEnter?: boolean;
+  // Perf opt - `active` will always be an empty array
+  writeOnly?: boolean;
+};
+
+export type TypingIndicatorHandle<PresenceShape> = {
+  active: Accessor<PresenceShape[]>;
+  setActive(active: boolean): void;
+  inputProps: {
+    onKeyDown: (e: KeyboardEvent) => void;
+    onBlur: () => void;
+  };
+};
+
+export const defaultActivityStopTimeout = 1_000;
+
+// ------
+// Topics
+
+/**
+ * Listen for broadcasted events given a room and topic.
+ *
+ * @see https://instantdb.com/docs/presence-and-topics
+ * @example
+ *  function App({ roomId }) {
+ *    const room = db.room('chats', roomId);
+ *    db.rooms.useTopicEffect(room, 'emoji', (message, peer) => {
+ *      console.log(peer.name, 'sent', message);
+ *    });
+ *    // ...
+ *  }
+ */
+export function useTopicEffect<
+  RoomSchema extends RoomSchemaShape,
+  RoomType extends keyof RoomSchema,
+  TopicType extends keyof RoomSchema[RoomType]['topics'],
+>(
+  room: InstantSolidRoom<any, RoomSchema, RoomType>,
+  topic: TopicType,
+  onEvent: (
+    event: RoomSchema[RoomType]['topics'][TopicType],
+    peer: RoomSchema[RoomType]['presence'],
+  ) => any,
+): void {
+  createEffect(() => {
+    const unsub = room.core._reactor.subscribeTopic(
+      room.type,
+      room.id,
+      topic,
+      (event: any, peer: any) => {
+        onEvent(event, peer);
+      },
+    );
+
+    onCleanup(unsub);
+  });
+}
+
+/**
+ * Broadcast an event to a room.
+ *
+ * @see https://instantdb.com/docs/presence-and-topics
+ * @example
+ * function App({ roomId }) {
+ *   const room = db.room('chat', roomId);
+ *   const publishTopic = db.rooms.usePublishTopic(room, "emoji");
+ *
+ *   return (
+ *     <button onClick={() => publishTopic({ emoji: "🔥" })}>Send emoji</button>
+ *   );
+ * }
+ *
+ */
+export function usePublishTopic<
+  RoomSchema extends RoomSchemaShape,
+  RoomType extends keyof RoomSchema,
+  TopicType extends keyof RoomSchema[RoomType]['topics'],
+>(
+  room: InstantSolidRoom<any, RoomSchema, RoomType>,
+  topic: TopicType,
+): (data: RoomSchema[RoomType]['topics'][TopicType]) => void {
+  createEffect(() => {
+    const unsub = room.core._reactor.joinRoom(room.type as string, room.id);
+    onCleanup(unsub);
+  });
+
+  return (data: RoomSchema[RoomType]['topics'][TopicType]) => {
+    room.core._reactor.publishTopic({
+      roomType: room.type,
+      roomId: room.id,
+      topic,
+      data,
+    });
+  };
+}
+
+// ---------
+// Presence
+
+/**
+ * Listen for peer's presence data in a room, and publish the current user's presence.
+ *
+ * @see https://instantdb.com/docs/presence-and-topics
+ * @example
+ *  function App({ roomId }) {
+ *    const presence = db.rooms.usePresence(room, { keys: ["name", "avatar"] });
+ *    // presence().peers, presence().isLoading, presence().publishPresence
+ *  }
+ */
+export function usePresence<
+  RoomSchema extends RoomSchemaShape,
+  RoomType extends keyof RoomSchema,
+  Keys extends keyof RoomSchema[RoomType]['presence'],
+>(
+  room: InstantSolidRoom<any, RoomSchema, RoomType>,
+  opts: PresenceOpts<RoomSchema[RoomType]['presence'], Keys> = {},
+): Accessor<PresenceHandle<RoomSchema[RoomType]['presence'], Keys>> {
+  const [state, setState] = createSignal<
+    PresenceResponse<RoomSchema[RoomType]['presence'], Keys>
+  >(
+    (room.core._reactor.getPresence(room.type, room.id, opts) ?? {
+      peers: {},
+      isLoading: true,
+    }) as PresenceResponse<RoomSchema[RoomType]['presence'], Keys>,
+  );
+
+  createEffect(() => {
+    const unsub = room.core._reactor.subscribePresence(
+      room.type,
+      room.id,
+      opts,
+      (data: any) => {
+        setState(data);
+      },
+    );
+
+    onCleanup(unsub);
+  });
+
+  const publishPresence = (data: Partial<RoomSchema[RoomType]['presence']>) => {
+    room.core._reactor.publishPresence(room.type, room.id, data);
+  };
+
+  return createMemo(() => ({
+    ...state(),
+    publishPresence,
+  }));
+}
+
+/**
+ * Publishes presence data to a room
+ *
+ * @see https://instantdb.com/docs/presence-and-topics
+ * @example
+ *  function App({ roomId, nickname }) {
+ *    const room = db.room('chat', roomId);
+ *    db.rooms.useSyncPresence(room, { nickname });
+ *  }
+ */
+export function useSyncPresence<
+  RoomSchema extends RoomSchemaShape,
+  RoomType extends keyof RoomSchema,
+>(
+  room: InstantSolidRoom<any, RoomSchema, RoomType>,
+  data: Partial<RoomSchema[RoomType]['presence']>,
+  deps?: any[],
+): void {
+  createEffect(() => {
+    const unsub = room.core._reactor.joinRoom(
+      room.type as string,
+      room.id,
+      data,
+    );
+    onCleanup(unsub);
+  });
+
+  createEffect(() => {
+    // Track deps if provided, otherwise track serialized data
+    if (deps) {
+      deps.forEach((d) => d);
+    } else {
+      JSON.stringify(data);
+    }
+    room.core._reactor.publishPresence(room.type, room.id, data);
+  });
+}
+
+// -----------------
+// Typing Indicator
+
+/**
+ * Manage typing indicator state
+ *
+ * @see https://instantdb.com/docs/presence-and-topics
+ * @example
+ *  function App({ roomId }) {
+ *    const room = db.room('chat', roomId);
+ *    const typing = db.rooms.useTypingIndicator(room, "chat-input");
+ *    // typing.active(), typing.setActive(bool), typing.inputProps
+ *  }
+ */
+export function useTypingIndicator<
+  RoomSchema extends RoomSchemaShape,
+  RoomType extends keyof RoomSchema,
+>(
+  room: InstantSolidRoom<any, RoomSchema, RoomType>,
+  inputName: string,
+  opts: TypingIndicatorOpts = {},
+): TypingIndicatorHandle<RoomSchema[RoomType]['presence']> {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+  const presence = rooms.usePresence(room, {
+    keys: [inputName] as (keyof RoomSchema[RoomType]['presence'])[],
+  });
+
+  const active = createMemo(() => {
+    if (opts?.writeOnly) return [];
+    // Access presence to track it
+    presence();
+    const presenceSnapshot = room.core._reactor.getPresence(room.type, room.id);
+    return Object.values(presenceSnapshot?.peers ?? {}).filter(
+      (p: any) => p[inputName] === true,
+    );
+  });
+
+  const setActive = (isActive: boolean) => {
+    room.core._reactor.publishPresence(room.type, room.id, {
+      [inputName]: isActive,
+    } as unknown as Partial<RoomSchema[RoomType]['presence']>);
+
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+
+    if (!isActive) return;
+
+    if (opts?.timeout === null || opts?.timeout === 0) return;
+
+    timeoutId = setTimeout(() => {
+      room.core._reactor.publishPresence(room.type, room.id, {
+        [inputName]: null,
+      } as Partial<RoomSchema[RoomType]['presence']>);
+    }, opts?.timeout ?? defaultActivityStopTimeout);
+  };
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    const isEnter = opts?.stopOnEnter && e.key === 'Enter';
+    const isActive = !isEnter;
+    setActive(isActive);
+  };
+
+  const onBlur = () => {
+    setActive(false);
+  };
+
+  return {
+    active,
+    setActive,
+    inputProps: { onKeyDown, onBlur },
+  };
+}
+
+// --------------
+// Hooks namespace
+
+export const rooms = {
+  useTopicEffect,
+  usePublishTopic,
+  usePresence,
+  useSyncPresence,
+  useTypingIndicator,
+};
+
+// ------------
+// Class
+
+export class InstantSolidRoom<
+  Schema extends InstantSchemaDef<any, any, any>,
+  RoomSchema extends RoomSchemaShape,
+  RoomType extends keyof RoomSchema,
+> {
+  core: InstantCoreDatabase<Schema, boolean>;
+  type: RoomType;
+  id: string;
+
+  constructor(
+    core: InstantCoreDatabase<Schema, boolean>,
+    type: RoomType,
+    id: string,
+  ) {
+    this.core = core;
+    this.type = type;
+    this.id = id;
+  }
+}