Skip to content

Commit

Permalink
roar
Browse files Browse the repository at this point in the history 
roar

keep rolling

roar

roar

roar

roar

sm
  • Loading branch information
@stopachka
stopachka committed Jan 16, 2025
1 parent 5b0cadb commit 6d60414
Show file tree
Hide file tree
Showing 12 changed files with 279 additions and 101 deletions.
23 changes: 16 additions & 7 deletions client/packages/react/src/InstantReactAbstractDatabase.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import {
} from "react";
import { useQueryInternal } from "./useQuery";
import { useTimeout } from "./useTimeout";
import { InstantReactRoom } from "./InstantReactRoom";
import { InstantReactRoom, rooms } from "./InstantReactRoom";

const defaultAuthState = {
isLoading: true,
Expand Down Expand Up @@ -82,12 +82,8 @@ export default abstract class InstantReactAbstractDatabase<
* @see https://instantdb.com/docs/presence-and-topics
*
* @example
* const {
* useTopicEffect,
* usePublishTopic,
* useSyncPresence,
* useTypingIndicator,
* } = db.room(roomType, roomId);
* const room = db.room('chat', roomId);
* const { peers } = db.rooms.usePresence(room);
*/
room<RoomType extends keyof Rooms>(
type: RoomType = "_defaultRoomType" as RoomType,
Expand All @@ -96,6 +92,19 @@ export default abstract class InstantReactAbstractDatabase<
return new InstantReactRoom<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 { peers } = db.rooms.usePresence(room);
* const publish = db.rooms.usePublishTopic(room, 'emoji');
* // ...
*/
rooms = rooms

/**
* Use this to write data! You can create, update, delete, and link objects
*
Expand Down
165 changes: 118 additions & 47 deletions client/packages/react/src/InstantReactRoom.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,20 @@ export const defaultActivityStopTimeout = 1_000;
// ------
// Topics

function useTopicEffect<
/**
* 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"],
Expand All @@ -70,7 +83,22 @@ function useTopicEffect<
}, [room.id, topic]);
}

function usePublishTopic<
/**
* 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"],
Expand Down Expand Up @@ -98,7 +126,21 @@ function usePublishTopic<
// ---------
// Presence

function usePresence<
/**
* 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 {
* peers,
* publishPresence
* } = db.room(roomType, roomId).usePresence({ keys: ["name", "avatar"] });
*
* // ...
* }
*/
export function usePresence<
RoomSchema extends RoomSchemaShape,
RoomType extends keyof RoomSchema,
Keys extends keyof RoomSchema[RoomType]["presence"],
Expand Down Expand Up @@ -138,7 +180,17 @@ function usePresence<
};
}

function useSyncPresence<
/**
* 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,
>(
Expand All @@ -155,7 +207,23 @@ function useSyncPresence<
// -----------------
// Typing Indicator

function useTypingIndicator<
/**
* Manage typing indicator state
*
* @see https://instantdb.com/docs/presence-and-topics
* @example
* function App({ roomId }) {
* const room = db.room('chat', roomId);
* const {
* active,
* setActive,
* inputProps,
* } = db.rooms.useTypingIndicator(room, "chat-input");
*
* return <input {...inputProps} />;
* }
*/
export function useTypingIndicator<
RoomSchema extends RoomSchemaShape,
RoomType extends keyof RoomSchema,
>(
Expand Down Expand Up @@ -220,7 +288,7 @@ function useTypingIndicator<
// --------------
// Hooks

const rooms = {
export const rooms = {
useTopicEffect,
usePublishTopic,
usePresence,
Expand All @@ -247,17 +315,18 @@ export class InstantReactRoom<
}

/**
* Listen for broadcasted events given a room and topic.
* @deprecated
* `db.room(...).useTopicEffect` is deprecated. You can replace it with `db.rooms.useTopicEffect`.
*
* @see https://instantdb.com/docs/presence-and-topics
* @example
* function App({ roomId }) {
* db.room(roomType, roomId).useTopicEffect("chat", (message, peer) => {
* console.log("New message", message, 'from', peer.name);
* });
*
* // ...
* }
* // Before
* const room = db.room('chat', 'room-id');
* room.useTopicEffect('emoji', (message, peer) => { });
*
* // After
* const room = db.room('chat', 'room-id');
* db.rooms.useTopicEffect(room, 'emoji', (message, peer) => { });
*/
useTopicEffect = <TopicType extends keyof RoomSchema[RoomType]["topics"]>(
topic: TopicType,
Expand All @@ -270,18 +339,18 @@ export class InstantReactRoom<
};

/**
* Broadcast an event to a room.
* @deprecated
* `db.room(...).usePublishTopic` is deprecated. You can replace it with `db.rooms.usePublishTopic`.
*
* @see https://instantdb.com/docs/presence-and-topics
* @example
* function App({ roomId }) {
* const publishTopic = db.room(roomType, roomId).usePublishTopic("clicks");
*
* return (
* <button onClick={() => publishTopic({ ts: Date.now() })}>Click me</button>
* );
* }
* // Before
* const room = db.room('chat', 'room-id');
* const publish = room.usePublishTopic('emoji');
*
* // After
* const room = db.room('chat', 'room-id');
* const publish = db.rooms.usePublishTopic(room, 'emoji');
*/
usePublishTopic = <Topic extends keyof RoomSchema[RoomType]["topics"]>(
topic: Topic,
Expand All @@ -290,18 +359,18 @@ export class InstantReactRoom<
};

/**
* Listen for peer's presence data in a room, and publish the current user's presence.
* @deprecated
* `db.room(...).usePresence` is deprecated. You can replace it with `db.rooms.usePresence`.
*
* @see https://instantdb.com/docs/presence-and-topics
* @example
* function App({ roomId }) {
* const {
* peers,
* publishPresence
* } = db.room(roomType, roomId).usePresence({ keys: ["name", "avatar"] });
*
* // ...
* }
* // Before
* const room = db.room('chat', 'room-id');
* const { peers } = room.usePresence({ keys: ["name", "avatar"] });
*
* // After
* const room = db.room('chat', 'room-id');
* const { peers } = db.rooms.usePresence(room, { keys: ["name", "avatar"] });
*/
usePresence = <Keys extends keyof RoomSchema[RoomType]["presence"]>(
opts: PresenceOpts<RoomSchema[RoomType]["presence"], Keys> = {},
Expand All @@ -310,15 +379,18 @@ export class InstantReactRoom<
};

/**
* Publishes presence data to a room
* @deprecated
* `db.room(...).useSyncPresence` is deprecated. You can replace it with `db.rooms.useSyncPresence`.
*
* @see https://instantdb.com/docs/presence-and-topics
* @example
* function App({ roomId }) {
* db.room(roomType, roomId).useSyncPresence({ name, avatar, color });
*
* // ...
* }
* // Before
* const room = db.room('chat', 'room-id');
* room.useSyncPresence(room, { nickname });
*
* // After
* const room = db.room('chat', 'room-id');
* db.rooms.useSyncPresence(room, { nickname });
*/
useSyncPresence = (
data: Partial<RoomSchema[RoomType]["presence"]>,
Expand All @@ -328,19 +400,18 @@ export class InstantReactRoom<
};

/**
* Manage typing indicator state
* @deprecated
* `db.room(...).useTypingIndicator` is deprecated. You can replace it with `db.rooms.useTypingIndicator`.
*
* @see https://instantdb.com/docs/presence-and-topics
* @example
* function App({ roomId }) {
* const {
* active,
* setActive,
* inputProps,
* } = db.room(roomType, roomId).useTypingIndicator("chat-input", opts);
*
* return <input {...inputProps} />;
* }
* // Before
* const room = db.room('chat', 'room-id');
* const typing = room.useTypingIndiactor(room, 'chat-input');
*
* // After
* const room = db.room('chat', 'room-id');
* const typing = db.rooms.useTypingIndiactor(room, 'chat-input');
*/
useTypingIndicator = (
inputName: string,
Expand Down
39 changes: 38 additions & 1 deletion client/sandbox/strong-init-vite/src/typescript_tests_experimental_v2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,27 @@ function ReactNormalApp() {
const _reactPublishEmoji = reactRoom.usePublishTopic("emoji");
const _reactPresenceUser = reactPresence.user!;
const _reactPresencePeers = reactPresence.peers!;
_reactPresenceUser.name;
_reactPresencePeers[0].name;

const reactPresenceNew = reactDB.rooms.usePresence(reactRoom, { keys: ["name"] });
const _reactPublishEmojiNew = reactDB.rooms.usePublishTopic(reactRoom, "emoji");
const _reactPresenceUserNew = reactPresenceNew.user!;
const _reactPresencePeersNew = reactPresenceNew.peers!;
_reactPresenceUserNew.name;
_reactPresencePeersNew[0].name;

// More room tsts
reactDB.rooms.useTopicEffect(reactRoom, "emoji", (emoji) => {
emoji.directionAngle;
});
const publish = reactDB.rooms.usePublishTopic(reactRoom, "emoji");
publish({ name: "confetti", rotationAngle: 1, directionAngle: 0 })

reactDB.rooms.useSyncPresence(reactRoom, { name: 'foo', avatarURI: 'bar' });
const typing = reactDB.rooms.useTypingIndicator(reactRoom, 'chatInput');
typing;

// queries
const { isLoading, error, data } = reactDB.useQuery({
messages: { creator: {} },
Expand All @@ -86,7 +107,10 @@ function ReactNormalApp() {
// to silence ts warnings
_reactPublishEmoji;
_reactPresenceUser;
_reactPresencePeers;
_reactPresencePeersNew;
_reactPublishEmojiNew;
_reactPresenceUserNew;
_reactPresencePeersNew;
}

// ----
Expand All @@ -104,6 +128,16 @@ function ReactNativeNormalApp() {
const _reactPublishEmoji = reactRoom.usePublishTopic("emoji");
const _reactPresenceUser = reactPresence.user!;
const _reactPresencePeers = reactPresence.peers!;
_reactPresenceUser.name;
_reactPresencePeers[0].name;

const reactPresenceNew = reactNativeDB.rooms.usePresence(reactRoom, { keys: ["name"] });
const _reactPublishEmojiNew = reactNativeDB.rooms.usePublishTopic(reactRoom, "emoji");
const _reactPresenceUserNew = reactPresenceNew.user!;
const _reactPresencePeersNew = reactPresenceNew.peers!;
_reactPresenceUserNew.name;
_reactPresencePeersNew[0].name;

// queries
const { isLoading, error, data } = reactNativeDB.useQuery({
messages: { creator: {} },
Expand All @@ -119,6 +153,9 @@ function ReactNativeNormalApp() {
_reactPublishEmoji;
_reactPresenceUser;
_reactPresencePeers;
_reactPublishEmojiNew;
_reactPresenceUserNew;
_reactPresencePeersNew;
}

// ----
Expand Down
Loading

0 comments on commit 6d60414

Please sign in to comment.