diff --git a/docs/pages/api-reference/liveblocks-client.mdx b/docs/pages/api-reference/liveblocks-client.mdx index c221ec8465..7af81f12a4 100644 --- a/docs/pages/api-reference/liveblocks-client.mdx +++ b/docs/pages/api-reference/liveblocks-client.mdx @@ -6639,6 +6639,12 @@ declare global { // Custom metadata set on comments CommentMetadata: {}; + // Custom metadata set on feeds + FeedMetadata: {}; + + // The shape of the data stored in each feed message + FeedMessageData: {}; + // Custom room info set with resolveRoomsInfo RoomInfo: {}; @@ -6701,6 +6707,22 @@ declare global { spam: boolean; }; + // Custom metadata set on feeds + FeedMetadata: { + // Example, a title and a type for each feed + title: string; + type: "chat" | "thread"; + }; + + // The shape of the data stored in each feed message + FeedMessageData: { + // Example, a message with an author, content, status, and reactions + userId: string; + content: string; + status: "streaming" | "complete"; + reactions?: { emoji: string; userId: string; createdAt: number }[]; + }; + // Custom room info set with resolveRoomsInfo RoomInfo: { // Example, rooms with a title and url diff --git a/docs/pages/api-reference/liveblocks-react.mdx b/docs/pages/api-reference/liveblocks-react.mdx index 98bf4de8a7..81da209274 100644 --- a/docs/pages/api-reference/liveblocks-react.mdx +++ b/docs/pages/api-reference/liveblocks-react.mdx @@ -7135,6 +7135,12 @@ declare global { // Custom metadata set on comments, for useCreateThread, useCreateComment, etc. CommentMetadata: {}; + // Custom metadata set on feeds, for useFeeds, useUpdateFeedMetadata, etc. + FeedMetadata: {}; + + // The shape of the data stored in each feed message, for useFeedMessages, etc. + FeedMessageData: {}; + // Custom room info set with resolveRoomsInfo, for useRoomInfo RoomInfo: {}; @@ -7197,6 +7203,22 @@ declare global { spam: boolean; }; + // Custom metadata set on feeds, for useFeeds, useUpdateFeedMetadata, etc. + FeedMetadata: { + // Example, a title and a type for each feed + title: string; + type: "chat" | "thread"; + }; + + // The shape of the data stored in each feed message, for useFeedMessages, etc. + FeedMessageData: { + // Example, a message with an author, content, status, and reactions + userId: string; + content: string; + status: "streaming" | "complete"; + reactions?: { emoji: string; userId: string; createdAt: number }[]; + }; + // Custom room info set with resolveRoomsInfo, for useRoomInfo RoomInfo: { // Example, rooms with a title and url diff --git a/docs/pages/errors/FeedMessageData.mdx b/docs/pages/errors/FeedMessageData.mdx new file mode 100644 index 0000000000..6f8563159e --- /dev/null +++ b/docs/pages/errors/FeedMessageData.mdx @@ -0,0 +1,86 @@ +--- +meta: + title: "The type you provided for 'FeedMessageData' is not a valid JSON value" + parentTitle: "Error" + description: + "Your 'FeedMessageData' type is incorrect and needs to be updated" +--- + +## Why this error occurred + +You have provided a custom `FeedMessageData` type for your application, but the +type you provided isn’t a (completely) valid JSON value. Values like `Date`, +`Map`, `Set`, functions, classes, or `unknown` aren’t valid JSON. + +```ts highlight="4-8" +declare global { + interface Liveblocks { + FeedMessageData: { + // Your own fields go here… + userId: string; + content: string; + status: "streaming" | "complete"; + sentAt: Date; // ❌ The issue is here + }; + } +} +``` + +In the example above, the problem is in the `sentAt` field, because a `Date` +isn’t a valid JSON value. + +## How to fix it + +You’ll need to figure out what part of your provided `FeedMessageData` type +definition isn’t valid JSON. Sometimes this is immediately obvious, like in the +example above. + +Sometimes the issue may be a bit less obvious: + +```ts highlight="6-7" +import type { Json } from "@liveblocks/client"; + +declare global { + interface Liveblocks { + FeedMessageData: { + content: unknown; // ❌ Unknowns could contain non-JSON + content: Json; // ✅ Prefer using Json + }; + } +} +``` + +By using `Json`, you can still work with unknown or unspecified values, but +still ensure they will be valid JSON. + +## If you cannot find the root cause + +Sometimes types can be complex and the root cause is still unclear. In those +cases, there is a small trick you can use. Try to assign your type to the +required base type, with this line: + +```ts highlight="9-10" +import type { Json } from "@liveblocks/client"; + +declare global { + interface Liveblocks { + FeedMessageData: MyFeedMessageData; + } +} + +// Quick debugging snippet to find root cause +const xxx: Json = {} as MyFeedMessageData; +// ^? +// The error will appear here +``` + +Now TypeScript will explain why it thinks your type isn’t valid JSON: + +```error showLineNumbers={false} +Type 'MyFeedMessageData' is not assignable to type 'Json'. + Type 'MyFeedMessageData' is not assignable to type 'JsonObject'. + Property 'sentAt' is incompatible with index signature. + Type 'Date' is not assignable to type 'Json | undefined'. + Type 'Date' is not assignable to type 'JsonObject'. + Index signature for type 'string' is missing in type 'Date'. +``` diff --git a/docs/pages/errors/FeedMetadata.mdx b/docs/pages/errors/FeedMetadata.mdx new file mode 100644 index 0000000000..49a57828e8 --- /dev/null +++ b/docs/pages/errors/FeedMetadata.mdx @@ -0,0 +1,84 @@ +--- +meta: + title: "The type you provided for 'FeedMetadata' is not a valid JSON value" + parentTitle: "Error" + description: "Your 'FeedMetadata' type is incorrect and needs to be updated" +--- + +## Why this error occurred + +You have provided a custom `FeedMetadata` type for your application, but the +type you provided isn’t a (completely) valid JSON value. Values like `Date`, +`Map`, `Set`, functions, classes, or `unknown` aren’t valid JSON. + +```ts highlight="4-7" +declare global { + interface Liveblocks { + FeedMetadata: { + // Your own fields go here… + title: string; + type: "chat" | "thread"; + createdAt: Date; // ❌ The issue is here + }; + } +} +``` + +In the example above, the problem is in the `createdAt` field, because a `Date` +isn’t a valid JSON value. + +## How to fix it + +You’ll need to figure out what part of your provided `FeedMetadata` type +definition isn’t valid JSON. Sometimes this is immediately obvious, like in the +example above. + +Sometimes the issue may be a bit less obvious: + +```ts highlight="6-7" +import type { Json } from "@liveblocks/client"; + +declare global { + interface Liveblocks { + FeedMetadata: { + custom: unknown; // ❌ Unknowns could contain non-JSON + custom: Json; // ✅ Prefer using Json + }; + } +} +``` + +By using `Json`, you can still work with unknown or unspecified values, but +still ensure they will be valid JSON. + +## If you cannot find the root cause + +Sometimes types can be complex and the root cause is still unclear. In those +cases, there is a small trick you can use. Try to assign your type to the +required base type, with this line: + +```ts highlight="9-10" +import type { Json } from "@liveblocks/client"; + +declare global { + interface Liveblocks { + FeedMetadata: MyFeedMetadata; + } +} + +// Quick debugging snippet to find root cause +const xxx: Json = {} as MyFeedMetadata; +// ^? +// The error will appear here +``` + +Now TypeScript will explain why it thinks your type isn’t valid JSON: + +```error showLineNumbers={false} +Type 'MyFeedMetadata' is not assignable to type 'Json'. + Type 'MyFeedMetadata' is not assignable to type 'JsonObject'. + Property 'createdAt' is incompatible with index signature. + Type 'Date' is not assignable to type 'Json | undefined'. + Type 'Date' is not assignable to type 'JsonObject'. + Index signature for type 'string' is missing in type 'Date'. +``` diff --git a/docs/routes.json b/docs/routes.json index 9bb067afc4..9e0ecf2cd8 100644 --- a/docs/routes.json +++ b/docs/routes.json @@ -777,6 +777,14 @@ "title": "The type you provided for 'ThreadMetadata' does not match its requirements", "path": "/errors/ThreadMetadata" }, + { + "title": "The type you provided for 'FeedMetadata' is not a valid JSON value", + "path": "/errors/FeedMetadata" + }, + { + "title": "The type you provided for 'FeedMessageData' is not a valid JSON value", + "path": "/errors/FeedMessageData" + }, { "title": "The type you provided for 'RoomInfo' does not match its requirements", "path": "/errors/RoomInfo"