0.5.0: customizable user metadata and renderfunction

dist/cursor-chat.es.js

@@ -9846,7 +9846,7 @@ var randomColor = { exports: {} };
   });
 })(randomColor, randomColor.exports);
 var randomcolor = randomColor.exports;
-function cursorFactory(cursor) {
+function defaultCursorRenderer(cursor) {
   const htmlFragment = `<div id="cursor_${cursor.id}" class="cursor">
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -9874,20 +9874,20 @@ function cursorFactory(cursor) {
   const cursorEl = template.content.firstChild;
   return cursorEl;
 }
-const initCursorChat = (room_id, triggerKey = "/", cursorDivId = "cursor-chat-layer", chatDivId = "cursor-chat-box") => {
+const initCursorChat = (room_id = `cursor-chat-room-${window.location.host + window.location.pathname}`, triggerKey = "/", cursorDivId = "cursor-chat-layer", chatDivId = "cursor-chat-box", userMetaData = {}, renderCursor = defaultCursorRenderer) => {
   const cursorDiv = document.getElementById(cursorDivId);
   const chatDiv = document.getElementById(chatDivId);
   if (!cursorDiv || !chatDiv) {
     throw `Couldn't find cursor-chat-related divs! Make sure DOM content is fully loaded before initializing`;
   }
   const me = {
     id: nanoid(),
-    color: randomcolor(),
     x: 0,
     y: 0,
-    chat: ""
+    chat: "",
+    color: randomcolor(),
+    userMetaData
   };
-  room_id = room_id || `cursor-chat-room-${window.location.host + window.location.pathname}`;
   const doc2 = new Doc();
   const provider = new WebrtcProvider(room_id, doc2);
   const others = doc2.getMap("state");
@@ -9941,7 +9941,7 @@ const initCursorChat = (room_id, triggerKey = "/", cursorDivId = "cursor-chat-la
         switch (change.action) {
           case "add":
             const new_cursor = others.get(cursor_id);
-            const new_cursor_div = cursorFactory(new_cursor);
+            const new_cursor_div = renderCursor(new_cursor);
             new_cursor_div.classList.add("new");
             cursorDiv.appendChild(new_cursor_div);
             const add_point_closure = ([x, y]) => new_cursor_div.style.setProperty("transform", `translate(${x}px, ${y}px)`);
@@ -9976,4 +9976,4 @@ const initCursorChat = (room_id, triggerKey = "/", cursorDivId = "cursor-chat-la
   });
   return cleanup;
 };
-export { initCursorChat };
+export { defaultCursorRenderer, initCursorChat };

dist/main.d.ts

@@ -1 +1,14 @@
-export declare const initCursorChat: (room_id?: string, triggerKey?: string, cursorDivId?: string, chatDivId?: string) => () => void;
+declare type UserMetadata<T> = {
+    [key: string]: T;
+};
+interface Cursor<T> {
+    id: string;
+    x: number;
+    y: number;
+    chat: string;
+    color: string;
+    userMetaData: UserMetadata<T>;
+}
+export declare function defaultCursorRenderer<T>(cursor: Cursor<T>): HTMLElement;
+export declare const initCursorChat: <T>(room_id?: string, triggerKey?: string, cursorDivId?: string, chatDivId?: string, userMetaData?: UserMetadata<T>, renderCursor?: <T_1>(cursor: Cursor<T_1>) => HTMLElement) => () => void;
+export {};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cursor-chat",
-  "version": "0.4.9",
+  "version": "0.5.0",
   "license": "MIT",
   "files": [
     "dist"

src/main.ts

@@ -6,15 +6,18 @@ import { PerfectCursor } from 'perfect-cursors'
 import { nanoid } from 'nanoid'
 import randomcolor from 'randomcolor'
 
-interface Cursor {
+type UserMetadata<T> = { [key: string]: T }
+
+interface Cursor<T> {
   id: string
-  color: string
   x: number
   y: number
   chat: string
+  color: string
+  userMetaData: UserMetadata<T>
 }
 
-function cursorFactory(cursor: Cursor): HTMLElement {
+export function defaultCursorRenderer<T>(cursor: Cursor<T>): HTMLElement {
   const htmlFragment = `<div id="cursor_${cursor.id}" class="cursor">
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -43,30 +46,37 @@ function cursorFactory(cursor: Cursor): HTMLElement {
   return cursorEl;
 }
 
-export const initCursorChat = (room_id?: string, triggerKey = "/", cursorDivId = "cursor-chat-layer", chatDivId = "cursor-chat-box") => {
+export const initCursorChat = <T>(
+  room_id: string = `cursor-chat-room-${window.location.host + window.location.pathname}`,
+  triggerKey: string = "/",
+  cursorDivId: string = "cursor-chat-layer",
+  chatDivId: string = "cursor-chat-box",
+  userMetaData: UserMetadata<T> = {},
+  renderCursor: <T>(cursor: Cursor<T>) => HTMLElement = defaultCursorRenderer,
+) => {
   const cursorDiv = document.getElementById(cursorDivId)!
   const chatDiv = document.getElementById(chatDivId)! as HTMLInputElement
 
   if (!cursorDiv || !chatDiv) {
     throw `Couldn't find cursor-chat-related divs! Make sure DOM content is fully loaded before initializing`
   }
 
-  const me: Cursor = {
+  const me: Cursor<T> = {
     id: nanoid(),
-    color: randomcolor(),
     x: 0,
     y: 0,
-    chat: ""
+    chat: "",
+    color: randomcolor(),
+    userMetaData,
   }
 
-  room_id = room_id || `cursor-chat-room-${window.location.host + window.location.pathname}`
   const doc = new Y.Doc()
   const provider = new WebrtcProvider(
     room_id,
     doc
   )
 
-  const others: Y.Map<Cursor> = doc.getMap("state")
+  const others: Y.Map<Cursor<T>> = doc.getMap("state")
   let sendUpdate = false
 
   const cleanup = () => {
@@ -125,7 +135,7 @@ export const initCursorChat = (room_id?: string, triggerKey = "/", cursorDivId =
           case 'add':
             // make a new cursor
             const new_cursor = others.get(cursor_id)!;
-            const new_cursor_div = cursorFactory(new_cursor);
+            const new_cursor_div = renderCursor(new_cursor);
             new_cursor_div.classList.add("new")
             cursorDiv.appendChild(new_cursor_div);
             const add_point_closure = ([x, y]: number[]) => new_cursor_div.style.setProperty("transform", `translate(${x}px, ${y}px)`);