More examples converted

Author: petyosi

apps/virtuoso.dev/docs/guides/virtuoso-message-list/context.md

@@ -18,7 +18,7 @@ The example below has a header component that accesses the `loading` flag from t
 
 ```tsx live 
 import { VirtuosoMessageList, VirtuosoMessageListProps, VirtuosoMessageListLicense } from '@virtuoso.dev/message-list'
-import React, { useState } from 'react'
+import { useState } from 'react'
 
 interface MessageListContext {
   loading: boolean

apps/virtuoso.dev/docs/guides/virtuoso-message-list/examples/01-messaging.md

@@ -22,7 +22,7 @@ The example below is a simplified version of the final result of the tutorial -
 ```tsx live  
 import * as React from 'react'
 import { VirtuosoMessageList, VirtuosoMessageListProps, VirtuosoMessageListMethods, ListScrollLocation, VirtuosoMessageListLicense } from '@virtuoso.dev/message-list'
-import { ChatChannel, ChatMessage } from './ChatChannel'
+import { rand, randFullName, randSentence, randPhrase, randNumber } from "@ngneat/falso";
 
 interface MessageListContext {
   loadingNewer: boolean
@@ -131,7 +131,7 @@ export default function App() {
   )
 
   return (
-    <div className="tall-example" style={{ height: 800, display: 'flex', flexDirection: 'column', fontSize: '70%' }}>
+    <div className="tall-example" style={{ height: '100%', display: 'flex', flexDirection: 'column', fontSize: '70%' }}>
       <VirtuosoMessageListLicense licenseKey="">
         <VirtuosoMessageList<ChatMessage, MessageListContext>
           key={channel.name}
@@ -181,5 +181,122 @@ export default function App() {
     </div>
   )
 }
+
+type GetMessageParams = { limit?: number } | { before: number; limit?: number };
+
+export class ChatChannel {
+  public users: ChatUser[];
+  private localIdCounter = 0;
+  public messages: ChatMessage[] = [];
+
+  public onNewMessages = (messages: ChatMessage[]) => {
+    void messages;
+  };
+  public currentUser: ChatUser;
+  private otherUser: ChatUser;
+  private loading = false;
+  public loaded = false;
+
+  constructor(
+    public name: string,
+    private totalMessages: number,
+  ) {
+    this.users = Array.from({ length: 2 }, (_, i) => new ChatUser(i));
+    this.currentUser = this.users[0];
+    this.otherUser = this.users[1];
+    if (this.totalMessages === 0) {
+      this.loaded = true;
+    }
+  }
+
+  async getMessages(params: GetMessageParams) {
+    if (this.loading) {
+      return null;
+    }
+
+    this.loading = true;
+
+    await new Promise((r) => setTimeout(r, 1000));
+    const { limit = 10 } = params;
+    this.loading = false;
+
+    if (!this.loaded) {
+      this.loaded = true;
+    }
+
+    if (this.messages.length >= this.totalMessages) {
+      return [];
+    }
+
+    // prepending messages, simplified for the sake of the example
+    if ("before" in params) {
+      if (this.messages.length >= this.totalMessages) {
+        return [];
+      }
+
+      const offset = this.totalMessages - this.messages.length - limit;
+
+      const newMessages = Array.from({ length: limit }, (_, i) => {
+        const id = offset + i;
+        return new ChatMessage(id, rand(this.users));
+      });
+      this.messages = newMessages.concat(this.messages);
+      return newMessages;
+    } else {
+      // initial load
+      this.messages = Array.from({ length: limit }, (_, i) => {
+        const id = this.totalMessages - limit + i;
+        return new ChatMessage(id, rand(this.users));
+      });
+      return this.messages;
+    }
+  }
+
+  createNewMessageFromAnotherUser() {
+    const newMessage = new ChatMessage(this.messages.length, this.otherUser);
+    this.messages.push(newMessage);
+    this.onNewMessages([newMessage]);
+  }
+
+  sendOwnMessage() {
+    const tempMessage = new ChatMessage(null, this.currentUser);
+    tempMessage.localId = ++this.localIdCounter;
+    tempMessage.delivered = false;
+
+    setTimeout(() => {
+      const deliveredMessage = new ChatMessage(
+        this.messages.length,
+        this.currentUser,
+        tempMessage.message,
+      );
+      deliveredMessage.localId = tempMessage.localId;
+      this.messages.push(deliveredMessage);
+      this.onNewMessages([deliveredMessage]);
+    }, 1000);
+
+    return tempMessage;
+  }
+}
+
+export class ChatUser {
+  constructor(
+    public id: number | null,
+    public name = randFullName(),
+    public avatar = `https://i.pravatar.cc/30?u=${encodeURIComponent(name)}`,
+  ) {}
+}
+
+// a ChatMessage class with a random message
+export class ChatMessage {
+  public delivered = true;
+  public localId: number | null = null;
+  constructor(
+    public id: number | null,
+    public user: ChatUser,
+    public message = randSentence({
+      length: randNumber({ min: 1, max: 5 }),
+    }).join(" "),
+  ) {}
+}
 
 ```

apps/virtuoso.dev/docs/guides/virtuoso-message-list/examples/02-ai-chatbot.md

@@ -22,7 +22,7 @@ The example below simulates a conversation with a chatbot. Shortly after the que
 ```tsx live  
 import * as React from 'react'
 import { VirtuosoMessageList, VirtuosoMessageListProps, VirtuosoMessageListMethods, VirtuosoMessageListLicense } from '@virtuoso.dev/message-list'
-import { randTextRange, randPhrase } from './helpers'
+import { randTextRange, randPhrase } from '@ngneat/falso'
 
 interface Message {
   key: string

apps/virtuoso.dev/docs/guides/virtuoso-message-list/examples/03-gemini.md

@@ -26,7 +26,7 @@ import {
   VirtuosoMessageListMethods,
   VirtuosoMessageListProps,
 } from "@virtuoso.dev/message-list";
-import { randTextRange, randPhrase } from './helpers';
+import { randTextRange, randPhrase } from '@ngneat/falso';
 
 interface Message {
   key: string;

apps/virtuoso.dev/docs/guides/virtuoso-message-list/examples/04-reactions.md

@@ -17,7 +17,7 @@ The approach above is not exclusive to reactions - the same principle should be
 ```tsx live 
 import { VirtuosoMessageList, VirtuosoMessageListLicense, useVirtuosoMethods, VirtuosoMessageListProps, VirtuosoMessageListMethods } from '@virtuoso.dev/message-list'
 import * as React from 'react'
-import { randTextRange, rand } from './helpers'
+import { randTextRange, rand } from '@ngneat/falso'
 
 interface Message {
   key: string
@@ -81,18 +81,16 @@ export default function App() {
   const virtuoso = React.useRef<VirtuosoMessageListMethods<Message>>(null)
 
   return (
-    <div class="tall-example" style={{fontSize: '70%'}}>
       <VirtuosoMessageListLicense licenseKey="">
         <VirtuosoMessageList<Message, null>
           ref={virtuoso}
           initialData={messages}
-          style={{ height: 800 }}
+          style={{ height: '100%' }}
           computeItemKey={({ data }) => data.key}
           initialLocation={{ index: 'LAST', align: 'end' }}
           ItemContent={ItemContent}
         />
       </VirtuosoMessageListLicense>
-    </div>
   )
 }
 

apps/virtuoso.dev/docs/guides/virtuoso-message-list/examples/05-date-separators.md

@@ -21,7 +21,7 @@ The example below demonstrates how to implement date separators in a message lis
 ```tsx live 
 import * as React from 'react'
 import { VirtuosoMessageList, VirtuosoMessageListLicense, VirtuosoMessageListProps, useCurrentlyRenderedData } from '@virtuoso.dev/message-list'
-import { randTextRange, rand } from './helpers'
+import { randTextRange, rand } from '@ngneat/falso'
 
 interface Message {
   key: string

apps/virtuoso.dev/docs/guides/virtuoso-message-list/examples/06-scroll-to-reply.md

@@ -15,7 +15,7 @@ This example showcases a chat with a message that replies to another message. Cl
 ```tsx live 
 import * as React from 'react'
 import { VirtuosoMessageList, VirtuosoMessageListLicense, VirtuosoMessageListProps, VirtuosoMessageListMethods, useVirtuosoMethods } from '@virtuoso.dev/message-list'
-import { randPhrase } from './helpers'
+import { randPhrase } from '@ngneat/falso'
 
 interface Message {
   key: string

apps/virtuoso.dev/docs/guides/virtuoso-message-list/examples/07-grouped-messages.md

@@ -15,7 +15,7 @@ You can use similar approach to render the users' avatars only once per group, o
 ```tsx live 
 import * as React from 'react'
 import { VirtuosoMessageList, VirtuosoMessageListLicense, VirtuosoMessageListProps, VirtuosoMessageListMethods } from '@virtuoso.dev/message-list'
-import { randTextRange } from './helpers'
+import { randTextRange } from '@ngneat/falso'
 
 interface Message {
   key: string

apps/virtuoso.dev/docs/guides/virtuoso-message-list/headers-footers.md

@@ -20,6 +20,8 @@ If you need to access certain changing values inside the custom components, use
 The example below features a basic list with Header and Footer specified. 
 
 ```tsx live 
+import { VirtuosoMessageListProps, VirtuosoMessageList, useVirtuosoMethods, VirtuosoMessageListLicense, VirtuosoMessageListMethods} from '@virtuoso.dev/message-list'
+
 const Header: VirtuosoMessageListProps<number, null>['Header'] = () => <div style={{ height: 30, background: 'lightblue' }}>Header</div>
 const Footer: VirtuosoMessageListProps<number, null>['Footer'] = () => <div style={{ height: 30, background: 'lightblue' }}>Footer</div>
 
@@ -45,6 +47,8 @@ export default function App() {
 Unlike the regular ones, the sticky custom components are persistently visible in the viewport, making them suitable for displaying custom UI (like pinned messages, for example). Their size is getting measured, so that the first/last messages are not obscured by them.
 
 ```tsx live 
+import { VirtuosoMessageListProps, VirtuosoMessageList, useVirtuosoMethods, VirtuosoMessageListLicense, VirtuosoMessageListMethods} from '@virtuoso.dev/message-list'
+
 const StickyHeader: VirtuosoMessageListProps<number, null>['StickyHeader'] = () => <div style={{ height: 30, background: 'lightblue' }}>Header</div>
 const StickyFooter: VirtuosoMessageListProps<number, null>['StickyFooter'] = () => <div style={{ height: 30, background: 'lightblue' }}>Footer</div>
 
@@ -70,6 +74,8 @@ export default function App() {
 By default, the sticky header and footer will offset the list content. In some cases, we would like to avoid that - for example, the scroll to bottom button should not leave space below the messages. To achieve that, we can wrap the content with a `position: absolute` container.
 
 ```tsx live 
+import { VirtuosoMessageListProps, VirtuosoMessageList, useVirtuosoMethods, VirtuosoMessageListLicense, VirtuosoMessageListMethods} from '@virtuoso.dev/message-list'
+
 const StickyHeader: VirtuosoMessageListProps<number, null>['StickyHeader'] = () => {
   return (
     <div style={{ position: 'absolute', right: 0, top: 0, background: 'lightblue' }}>Header</div>
@@ -104,6 +110,8 @@ export default function App() {
 If needed, you can combine sticky and regular components. The sticky ones will be always visible, while the regular ones will scroll with the content.
 
 ```tsx live 
+import { VirtuosoMessageListProps, VirtuosoMessageList, useVirtuosoMethods, VirtuosoMessageListLicense, VirtuosoMessageListMethods} from '@virtuoso.dev/message-list'
+
 const StickyHeader: VirtuosoMessageListProps<number, null>['StickyHeader'] = () => <div style={{ height: 30, background: 'lightblue' }}>Sticky Header</div>
 const StickyFooter: VirtuosoMessageListProps<number, null>['StickyFooter'] = () => <div style={{ height: 30, background: 'lightblue' }}>Sticky Footer</div>
 const Header: VirtuosoMessageListProps<number, null>['Header'] = () => <div style={{ height: 30, background: 'lightgreen' }}>Header</div>

apps/virtuoso.dev/docs/guides/virtuoso-message-list/overview.md

@@ -17,6 +17,8 @@ Apart from the structural styling necessary for the virtualized rendering, the c
 ## Live Example
 
 ```tsx live  
+import { VirtuosoMessageListProps, VirtuosoMessageListLicense, VirtuosoMessageList } from '@virtuoso.dev/message-list'
+import { randTextRange } from '@ngneat/falso'
 
 interface Message {
   key: string
@@ -123,6 +125,8 @@ npm install @virtuoso.dev/message-list
 Then, add the component along with your license to your application.
 
 ```tsx live 
+import { VirtuosoMessageListLicense, VirtuosoMessageList } from '@virtuoso.dev/message-list'
+
 // const licenseKey = 'your-license-key'
 const licenseKey = ''
 

apps/virtuoso.dev/docs/guides/virtuoso-message-list/smooth-scrolling.md

@@ -12,7 +12,8 @@ In addition to the default `'smooth'` and `'auto'` scroll behavior values, the c
 
 ```tsx live
 import { VirtuosoMessageList, VirtuosoMessageListProps, VirtuosoMessageListMethods, VirtuosoMessageListLicense } from '@virtuoso.dev/message-list'
-import React from 'react'
+import {useRef} from 'react'
+import {randTextRange, randPhrase} from '@ngneat/falso'
 
 /**
  * Bounce easing function - https://easings.net/#easeOutBounce. This is just an example, you can use any easing function.
@@ -44,7 +45,7 @@ function customSmoothScroll(currentTop: number, targetTop: number) {
 }
 
 export default function App() {
-  const virtuoso = React.useRef<VirtuosoMessageListMethods<Message>>(null);
+  const virtuoso = useRef<VirtuosoMessageListMethods<Message>>(null);
 
   return (
     <div

apps/virtuoso.dev/docs/guides/virtuoso-message-list/working-with-data.md

@@ -15,6 +15,8 @@ The Message List component exposes an imperative API to interact with the list d
 Use this method when you need to add additional messages before the current ones, for example when loading older messages. The component will automatically adjust the scroll position to keep the previous messages in view.
 
 ```tsx live
+import { VirtuosoMessageList, VirtuosoMessageListLicense, VirtuosoMessageListMethods} from '@virtuoso.dev/message-list'
+
 export default function App() {
   const ref = React.useRef<VirtuosoMessageListMethods>(null);
   const offset = React.useRef(0);
@@ -66,6 +68,8 @@ The function should return:
 Experiment with the live example below to see how the scroll behavior changes when appending new items.
 
 ```tsx live
+import { VirtuosoMessageList, VirtuosoMessageListLicense, VirtuosoMessageListMethods} from '@virtuoso.dev/message-list'
+
 export default function App() {
   const ref = React.useRef<VirtuosoMessageListMethods>(null);
   const offset = React.useRef(100);
@@ -112,6 +116,8 @@ To see a `data.map` example usage, visit the [Reactions example](/virtuoso-messa
 The `data.findAndDelete(predicate: (item: Data) => boolean)` method lets you remove a message from the list. The predicate function receives the data item and should return a boolean value indicating whether the item should be removed. The example below adds a button next to each item that removes it.
 
 ```tsx live 
+import { VirtuosoMessageList, useVirtuosoMethods, VirtuosoMessageListLicense, VirtuosoMessageListMethods} from '@virtuoso.dev/message-list'
+
 function ItemContent({ data }) {
   const virtuosoMethods = useVirtuosoMethods();
   return (
@@ -146,6 +152,9 @@ export default function App() {
 You can remove multiple items at once with the `data.deleteRange` method.
 
 ```tsx live 
+import { VirtuosoMessageList, useVirtuosoMethods, VirtuosoMessageListLicense, VirtuosoMessageListMethods} from '@virtuoso.dev/message-list'
+import {useRef} from 'react'
+
 function ItemContent({ data }) {
   const virtuosoMethods = useVirtuosoMethods();
   return <div>Item {data}</div>;
@@ -179,6 +188,8 @@ In case you're building a chat application with multiple channels, you might wan
 The method accepts `data` and, optionally, an `options: { initalLocation: ItemLocation, purgeItemSizes?: boolean }` to specify the initial scroll position and weather to clear the cached item sizes. Purging the item sizes is useful when the new data has different item sizes than the previous data.
 
 ```tsx live
+import { VirtuosoMessageList, VirtuosoMessageListLicense, VirtuosoMessageListMethods} from '@virtuoso.dev/message-list'
+
 export default function App() {
   const ref = React.useRef<VirtuosoMessageListMethods>(null);
 

apps/virtuoso.dev/package.json

@@ -33,7 +33,7 @@
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/themes": "^3.2.0",
     "@tanstack/react-table": "^8.15.0",
-    "@virtuoso.dev/message-list": "^1.9.6",
+    "@virtuoso.dev/message-list": "^1.9.15",
     "clsx": "^2.0.0",
     "css-loader": "^7.1.2",
     "docusaurus-plugin-typedoc": "^1.2.3",

apps/virtuoso.dev/src/theme/CodeBlock/LiveCodeBlock/esmTransform.ts

@@ -11,7 +11,7 @@ export async function transformToFunctionBody(code: string) {
     esBuildInitializePromise = new Promise<void>((resolve, reject) => {
       esbuild
         .initialize({
-          wasmURL: 'https://unpkg.com/esbuild-wasm/esbuild.wasm',
+          wasmURL: 'https://unpkg.com/esbuild-wasm@0.25.0/esbuild.wasm',
         })
         .then(() => resolve())
         .catch(() => reject())