@fidscript/instant-solidjs 0.1.0

package/src/InstantSolidRoom.ts

@@ -0,0 +1,330 @@
+import {
+  type PresenceOpts,
+  type PresenceResponse,
+  type RoomSchemaShape,
+  InstantCoreDatabase,
+  InstantSchemaDef,
+} from '@fidscript/instant-sdk';
+
+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) => (typeof d === 'function' ? 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 ? true : null,
+    } 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);
+  };
+
+  onCleanup(() => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+
+    // Ensure we don't leave a sticky typing state behind on unmount,
+    // even when opts.timeout is null/0 (i.e. no auto-timeout).
+    setActive(false);
+  });
+
+  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;
+  }
+}

package/src/index.ts

@@ -0,0 +1,204 @@
+import {
+  id,
+  tx,
+  lookup,
+  i,
+
+  // error
+  InstantAPIError,
+
+  // sync table enums
+  SyncTableCallbackEventType,
+
+  // types
+  type QueryResponse,
+  type InstantQuery,
+  type InstantQueryResult,
+  type InstantSchema,
+  type InstantObject,
+  type InstantEntity,
+  type InstantSchemaDatabase,
+  type InstantUnknownSchemaDef,
+  type IInstantDatabase,
+  type User,
+  type AuthState,
+  type Query,
+  type Config,
+  type InstaQLParams,
+  type ConnectionStatus,
+  type ValidQuery,
+
+  // presence types
+  type PresencePeer,
+
+  // schema types
+  type AttrsDefs,
+  type CardinalityKind,
+  type DataAttrDef,
+  type EntitiesDef,
+  type EntitiesWithLinks,
+  type EntityDef,
+  type InstantGraph,
+  type InstantConfig,
+  type LinkAttrDef,
+  type LinkDef,
+  type LinksDef,
+  type ResolveAttrs,
+  type ValueTypes,
+  type InstaQLEntity,
+  type InstaQLFields,
+  type InstaQLResult,
+  type InstaQLEntitySubquery,
+  type RoomsOf,
+  type RoomsDef,
+  type PresenceOf,
+  type TopicsOf,
+  type TopicOf,
+  type RoomHandle,
+  type TransactionChunk,
+  type InstantUnknownSchema,
+  type InstantSchemaDef,
+  type BackwardsCompatibleSchema,
+  type InstantRules,
+  type UpdateParams,
+  type LinkParams,
+  type CreateParams,
+  type CheckMagicCodeParams,
+  type CheckMagicCodeResponse,
+  type ExchangeCodeForTokenParams,
+  type SendMagicCodeParams,
+  type SendMagicCodeResponse,
+  type SignInWithIdTokenParams,
+  type VerifyMagicCodeParams,
+  type VerifyResponse,
+
+  // storage types
+  type FileOpts,
+  type UploadFileResponse,
+  type DeleteFileResponse,
+
+  // sync table types
+  type SyncTableCallback,
+  type SyncTableCallbackEvent,
+  type SyncTableInitialSyncBatch,
+  type SyncTableInitialSyncComplete,
+  type SyncTableSyncTransaction,
+  type SyncTableLoadFromStorage,
+  type SyncTableSetupError,
+  StoreInterface,
+  createInstantRouteHandler,
+  type InstantRouteHandlerPayloadByType,
+  type InstantRouteHandlerType,
+  type InstantRouteHandlerBody,
+  type StoreInterfaceStoreName,
+  type Logger,
+} from '@fidscript/instant-sdk';
+
+import { InstantSolidDatabase } from './InstantSolidDatabase.js';
+import { init } from './InstantSolidDatabase.js';
+import { InstantSolidRoom } from './InstantSolidRoom.js';
+
+export {
+  id,
+  tx,
+  lookup,
+  init,
+  InstantSolidDatabase,
+  InstantSolidRoom,
+  i,
+
+  // error
+  InstantAPIError,
+
+  // sync table enums
+  SyncTableCallbackEventType,
+
+  // types
+  type Config,
+  type InstantConfig,
+  type InstantUnknownSchemaDef,
+  type Query,
+  type QueryResponse,
+  type InstantObject,
+  type User,
+  type AuthState,
+  type ConnectionStatus,
+  type InstantQuery,
+  type InstantQueryResult,
+  type InstantSchema,
+  type InstantEntity,
+  type InstantSchemaDatabase,
+  type IInstantDatabase,
+  type InstaQLParams,
+  type ValidQuery,
+  type InstaQLFields,
+
+  // presence types
+  type PresencePeer,
+
+  // schema types
+  type AttrsDefs,
+  type CardinalityKind,
+  type DataAttrDef,
+  type EntitiesDef,
+  type EntitiesWithLinks,
+  type EntityDef,
+  type InstantGraph,
+  type LinkAttrDef,
+  type LinkDef,
+  type LinksDef,
+  type ResolveAttrs,
+  type ValueTypes,
+  type InstaQLEntity,
+  type InstaQLResult,
+  type InstaQLEntitySubquery,
+  type RoomsOf,
+  type RoomsDef,
+  type TransactionChunk,
+  type PresenceOf,
+  type TopicsOf,
+  type TopicOf,
+  type RoomHandle,
+  type InstantUnknownSchema,
+  type InstantSchemaDef,
+  type BackwardsCompatibleSchema,
+  type InstantRules,
+  type UpdateParams,
+  type LinkParams,
+  type CreateParams,
+  type CheckMagicCodeParams,
+  type CheckMagicCodeResponse,
+  type ExchangeCodeForTokenParams,
+  type SendMagicCodeParams,
+  type SendMagicCodeResponse,
+  type SignInWithIdTokenParams,
+  type VerifyMagicCodeParams,
+  type VerifyResponse,
+
+  // storage types
+  type FileOpts,
+  type UploadFileResponse,
+  type DeleteFileResponse,
+
+  // custom store
+  StoreInterface,
+  type StoreInterfaceStoreName,
+
+  // sync table types
+  type SyncTableCallback,
+  type SyncTableCallbackEvent,
+  type SyncTableInitialSyncBatch,
+  type SyncTableInitialSyncComplete,
+  type SyncTableSyncTransaction,
+  type SyncTableLoadFromStorage,
+  type SyncTableSetupError,
+
+  // Server helper
+  createInstantRouteHandler,
+  type InstantRouteHandlerPayloadByType,
+  type InstantRouteHandlerType,
+  type InstantRouteHandlerBody,
+
+  // logger
+  type Logger,
+};

package/src/version.ts

@@ -0,0 +1,2 @@
+const version = '0.1.0';
+export default version;

package/tsconfig.json

@@ -0,0 +1,45 @@
+{
+  "extends": "../../tsconfig.base.json",
+  // Visit https://aka.ms/tsconfig to read more about this file
+  "compilerOptions": {
+    // File Layout
+    "rootDir": "./src",
+    "outDir": "./dist",
+
+    // Environment Settings
+    // See also https://aka.ms/tsconfig/module
+    "module": "nodenext",
+    "target": "esnext",
+    "types": [],
+    // For nodejs:
+    // "lib": ["esnext"],
+    // "types": ["node"],
+    // and npm install -D @types/node
+
+    // Other Outputs
+    "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true,
+
+    // Stricter Typechecking Options
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+
+    // Style Options
+    // "noImplicitReturns": true,
+    // "noImplicitOverride": true,
+    // "noUnusedLocals": true,
+    // "noUnusedParameters": true,
+    // "noFallthroughCasesInSwitch": true,
+    // "noPropertyAccessFromIndexSignature": true,
+
+    // Recommended Options
+    "strict": true,
+    "jsx": "preserve",
+    "isolatedModules": true,
+    "noUncheckedSideEffectImports": true,
+    "moduleDetection": "force",
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}