multyx-client 0.1.5 → 0.1.7

package/src/items/list.ts

@@ -4,7 +4,10 @@ import { Add, Done, Edit, EditWrapper, Unpack } from '../utils';
 import MultyxClientItemRouter from './router';
 import { Message } from '../message';
 
+const isPlainObject = (value: any) => value !== null && typeof value === 'object' && !Array.isArray(value);
+
 export default class MultyxClientList {
+    readonly type = 'list';
     protected list: MultyxClientItem[];
     private multyx: Multyx;
     propertyPath: string[];
@@ -82,6 +85,8 @@ export default class MultyxClientList {
         }
     }
 
+    [index: number]: MultyxClientItem | undefined;
+
     constructor(multyx: Multyx, list: any[] | EditWrapper<any[]>, propertyPath: string[] = [], editable: boolean){
         this.list = [];
         this.propertyPath = propertyPath;
@@ -127,7 +132,7 @@ export default class MultyxClientList {
         return index >= 0 && index < this.length;
     }
 
-    get(index: number | string[]): MultyxClientItem {
+    get(index: number | string[]): MultyxClientItem | undefined{
         if(typeof index === 'number') return this.list[index];
         if(index.length == 0) return this;
         if(index.length == 1) return this.list[parseInt(index[0])];
@@ -155,9 +160,14 @@ export default class MultyxClientList {
         let next = this.get(parseInt(path[0]));
         if(next instanceof MultyxClientValue || next == undefined) {
             this.set(parseInt(path[0]), new EditWrapper({}));
-            next = this.get(parseInt(path[0])) as MultyxClientObject;
+            next = this.get(parseInt(path[0]));
+        }
+
+        if(!next || next instanceof MultyxClientValue) {
+            return false;
         }
-        return next.set(path.slice(1), value);
+
+        return (next as MultyxClientObject | MultyxClientList).set(path.slice(1), value);
     }
 
     set(index: number | string[], value: any): boolean {
@@ -167,41 +177,37 @@ export default class MultyxClientList {
 
         const serverSet = value instanceof EditWrapper;
         const allowed = serverSet || this.editable;
-        if(serverSet || IsMultyxClientItem(value)) value = value.value;
-        if(value === undefined) return this.delete(index, serverSet);
+        const incoming = (serverSet || IsMultyxClientItem(value)) ? value.value : value;
+        if(incoming === undefined) return this.delete(index, serverSet);
 
-        // If value is a MultyxClientValue, set the value
-        if(this.list[index] instanceof MultyxClientValue && typeof value != 'object') {
-            return this.list[index].set(serverSet ? new EditWrapper(value) : value);
+        if(serverSet && this.tryApplyServerValue(index, incoming, oldValue)) {
+            return true;
+        }
+
+        // If value is a MultyxClientValue, set the value directly
+        if(this.list[index] instanceof MultyxClientValue && (typeof incoming !== 'object' || incoming === null)) {
+            const result = this.list[index].set(serverSet ? new EditWrapper(incoming) : incoming);
+            this.enqueueEditCallbacks(index, oldValue);
+            return result;
         }
         
         // Attempting to edit property not editable to client
         if(!allowed) {
             if(this.multyx.options.verbose) {
-                console.error(`Attempting to set property that is not editable. Setting '${this.propertyPath.join('.') + '.' + index}' to ${value}`);
+                console.error(`Attempting to set property that is not editable. Setting '${this.propertyPath.join('.') + '.' + index}' to ${incoming}`);
             }
             return false;
         }
         
-        this.list[index] = new (MultyxClientItemRouter(value))(
+        this.list[index] = new (MultyxClientItemRouter(incoming))(
             this.multyx,
-            serverSet ? new EditWrapper(value) : value,
+            serverSet ? new EditWrapper(incoming) : incoming,
             [...this.propertyPath, index.toString()],
             this.editable
         );
 
-        const propSymbol = Symbol.for("_" + this.propertyPath.join('.') + '.' + index);
-        if(this.multyx.events.has(propSymbol)) {
-            this.multyx[Done].push(...this.multyx.events.get(propSymbol).map(e =>
-                () => e(this.list[index])
-            ));
-        }
-
-        // We have to push into queue, since object may not be fully created
-        // and there may still be more updates to parse
-        for(const listener of this.editCallbacks) {
-            this.multyx[Add](() => listener(index, this.get(index), oldValue));
-        }
+        this.notifyIndexWaiters(index);
+        this.enqueueEditCallbacks(index, oldValue);
         
         return true;
     }
@@ -252,8 +258,8 @@ export default class MultyxClientList {
         return this.length;
     }
     
-    pop(): MultyxClientItem | null {
-        if(this.length === 0) return null;
+    pop(): MultyxClientItem | undefined {
+        if(this.length === 0) return undefined;
 
         const res = this.get(this.length);
         this.delete(this.length);
@@ -288,7 +294,7 @@ export default class MultyxClientList {
     }
 
     splice(start: number, deleteCount?: number, ...items: any[]) {
-        return this.list.splice(start, deleteCount, ...items);
+        return this.list.splice(start, deleteCount ?? 0, ...items);
     }
     
     setSplice(start: number, deleteCount?: number, ...items: any[]) {
@@ -433,6 +439,8 @@ export default class MultyxClientList {
         return Array(this.length).fill(0).map((_, i) => i);
     }
 
+    [Edit](){}
+
     [Unpack](constraints: any[]) {
         for(let i=0; i<this.length; i++) {
             this.get(i)?.[Unpack](constraints[i]);
@@ -443,9 +451,61 @@ export default class MultyxClientList {
     [Symbol.iterator](): Iterator<MultyxClientItem> {
         const values = [];
         for(let i=0; i<this.length; i++) values[i] = this.get(i);
-        return values[Symbol.iterator]();
+        return values[Symbol.iterator]() as Iterator<MultyxClientItem>;
     }
     toString = () => this.value.toString();
     valueOf = () => this.value;
     [Symbol.toPrimitive] = () => this.value;
+
+    hydrateFromServer(values: any[]) {
+        if(!Array.isArray(values)) return;
+        for(let i=0; i<values.length; i++) {
+            this.set(i, new EditWrapper(values[i]));
+        }
+        for(let i=values.length; i<this.length; i++) {
+            this.delete(i, true);
+        }
+        this.length = values.length;
+    }
+
+    private tryApplyServerValue(index: number, incoming: any, oldValue: MultyxClientItem | undefined) {
+        const current = this.list[index];
+        if(!current) return false;
+
+        if(current instanceof MultyxClientValue && (typeof incoming !== 'object' || incoming === null)) {
+            current.set(new EditWrapper(incoming));
+            this.enqueueEditCallbacks(index, oldValue);
+            return true;
+        }
+
+        const canHydrate = typeof (current as any)?.hydrateFromServer === 'function';
+        if(Array.isArray(incoming) && canHydrate && (current as any).type === 'list') {
+            (current as any).hydrateFromServer(incoming);
+            this.enqueueEditCallbacks(index, oldValue);
+            return true;
+        }
+
+        if(isPlainObject(incoming) && canHydrate && (current as any).type === 'object') {
+            (current as any).hydrateFromServer(incoming);
+            this.enqueueEditCallbacks(index, oldValue);
+            return true;
+        }
+
+        return false;
+    }
+
+    private notifyIndexWaiters(index: number) {
+        const propSymbol = Symbol.for("_" + this.propertyPath.join('.') + '.' + index);
+        if(this.multyx.events.has(propSymbol)) {
+            this.multyx[Done].push(...(this.multyx.events.get(propSymbol)?.map(e =>
+                () => e(this.list[index])
+            ) ?? []));
+        }
+    }
+
+    private enqueueEditCallbacks(index: number, oldValue: MultyxClientItem | undefined) {
+        for(const listener of this.editCallbacks) {
+            this.multyx[Add](() => listener(index, this.get(index), oldValue));
+        }
+    }
 }

package/src/items/object.ts

@@ -7,7 +7,10 @@ import { IsMultyxClientItem, type MultyxClientList, type MultyxClientItem } from
 import MultyxClientItemRouter from "./router";
 import MultyxClientValue from "./value";
 
+const isPlainObject = (value: any) => value !== null && typeof value === 'object' && !Array.isArray(value);
+
 export default class MultyxClientObject {
+    readonly type = 'object';
     protected object: RawObject<MultyxClientItem>;
     private multyx: Multyx;
     propertyPath: string[];
@@ -16,7 +19,7 @@ export default class MultyxClientObject {
     private editCallbacks: ((key: any, value: any) => void)[] = [];
 
     get value() {
-        const parsed = {};
+        const parsed: RawObject<MultyxClientItem> = {};
         for(const prop in this.object) parsed[prop] = this.object[prop];
         return parsed;
     }
@@ -38,9 +41,11 @@ export default class MultyxClientObject {
         if(!this.has(updatePath[0])) {
             this.set(updatePath[0], new EditWrapper({}));
         }
-        this.get(updatePath[0])[Edit](updatePath.slice(1), value);
+        this.get(updatePath[0])?.[Edit](updatePath.slice(1), value);
     }
 
+    [key: string]: any;
+
     constructor(multyx: Multyx, object: RawObject | EditWrapper<RawObject>, propertyPath: string[] = [], editable: boolean) {
         this.object = {};
         this.propertyPath = propertyPath;
@@ -85,7 +90,7 @@ export default class MultyxClientObject {
         return property in this.object;
     }
 
-    get(property: string | string[]): MultyxClientItem {
+    get(property: string | string[]): MultyxClientItem | undefined {
         if(typeof property === 'string') return this.object[property];
         if(property.length == 0) return this;
         if(property.length == 1) return this.object[property[0]];
@@ -122,36 +127,35 @@ export default class MultyxClientObject {
 
         const serverSet = value instanceof EditWrapper;
         const allowed = serverSet || this.editable;
-        if(serverSet || IsMultyxClientItem(value)) value = value.value;
-        if(value === undefined) return this.delete(property, serverSet);
+        const incoming = (serverSet || IsMultyxClientItem(value)) ? value.value : value;
+        if(incoming === undefined) return this.delete(property, serverSet);
+
+        if(serverSet && this.applyServerValue(property, incoming)) {
+            return true;
+        }
 
         // Only create new MultyxClientItem when needed
-        if(this.object[property] instanceof MultyxClientValue && typeof value != 'object') {
-            return this.object[property].set(serverSet ? new EditWrapper(value) : value);
+        if(this.object[property] instanceof MultyxClientValue && (typeof incoming !== 'object' || incoming === null)) {
+            return this.object[property].set(serverSet ? new EditWrapper(incoming) : incoming);
         }
         
         // Attempting to edit property not editable to client
         if(!allowed) {
             if(this.multyx.options.verbose) {
-                console.error(`Attempting to set property that is not editable. Setting '${this.propertyPath.join('.') + '.' + property}' to ${value}`);
+                console.error(`Attempting to set property that is not editable. Setting '${this.propertyPath.join('.') + '.' + property}' to ${incoming}`);
             }
             return false;
         }
 
         // Creating a new value
-        this.object[property] = new (MultyxClientItemRouter(value))(
+        this.object[property] = new (MultyxClientItemRouter(incoming))(
             this.multyx,
-            serverSet ? new EditWrapper(value) : value,
+            serverSet ? new EditWrapper(incoming) : incoming,
             [...this.propertyPath, property],
             this.editable
         );
 
-        const propSymbol = Symbol.for("_" + this.propertyPath.join('.') + '.' + property);
-        if(this.multyx.events.has(propSymbol)) {
-            this.multyx[Done].push(...this.multyx.events.get(propSymbol).map(e =>
-                () => e(this.object[property])
-            ));
-        }
+        this.notifyPropertyWaiters(property);
 
         return true;
     }
@@ -214,4 +218,48 @@ export default class MultyxClientObject {
             this.object[prop]?.[Unpack](constraints[prop]);
         }
     }
+
+    hydrateFromServer(value: RawObject) {
+        if(!isPlainObject(value)) return;
+        const remaining = new Set(Object.keys(this.object));
+        for(const [key, entry] of Object.entries(value)) {
+            remaining.delete(key);
+            this.set(key, new EditWrapper(entry));
+        }
+        for(const key of remaining) {
+            this.delete(key, true);
+        }
+    }
+
+    private applyServerValue(property: string, incoming: any) {
+        const current = this.object[property];
+        if(!current) return false;
+
+        if(current instanceof MultyxClientValue && (typeof incoming !== 'object' || incoming === null)) {
+            current.set(new EditWrapper(incoming));
+            return true;
+        }
+
+        const canHydrate = typeof (current as any)?.hydrateFromServer === 'function';
+        if(Array.isArray(incoming) && canHydrate && (current as any).type === 'list') {
+            (current as any).hydrateFromServer(incoming);
+            return true;
+        }
+
+        if(isPlainObject(incoming) && canHydrate && (current as any).type === 'object') {
+            (current as any).hydrateFromServer(incoming);
+            return true;
+        }
+
+        return false;
+    }
+
+    private notifyPropertyWaiters(property: string) {
+        const propSymbol = Symbol.for("_" + this.propertyPath.join('.') + '.' + property);
+        if(this.multyx.events.has(propSymbol)) {
+            this.multyx[Done].push(...(this.multyx.events.get(propSymbol)?.map(e =>
+                () => e(this.object[property])
+            ) ?? []));
+        }
+    }
 }

package/src/items/value.ts

@@ -44,9 +44,9 @@ export default class MultyxClientValue {
 
         const propSymbol = Symbol.for("_" + this.propertyPath.join('.'));
         if(this.multyx.events.has(propSymbol)) {
-            this.multyx[Done].push(...this.multyx.events.get(propSymbol).map(e =>
+            this.multyx[Done].push(...(this.multyx.events.get(propSymbol)?.map(e =>
                 () => e(this.value)
-            ));
+            ) ?? []));
         }
     }
 
@@ -66,7 +66,7 @@ export default class MultyxClientValue {
             return false;
         }
 
-        let nv = value;
+        let nv: Value | null = value;
         for(const constraint in this.constraints) {
             const fn = this.constraints[constraint];
             nv = fn(nv);

package/src/message.ts

@@ -15,8 +15,8 @@ export function UncompressUpdate(str: string) {
     if(instruction == '9') return { instruction: 'self', property: "space", data: JSON.parse(specifier) };
 
     if(instruction == '5') return { instruction: 'resp', name: specifier, response: data[0] };
-    if(instruction == '6') return { instruction: 'conn', uuid: specifier, publicData: data[0] };
-    if(instruction == '7') return { instruction: 'dcon', clientUUID: specifier };
+    if(instruction == '6') return { instruction: 'conn', uuid: specifier, data: data[0] };
+    if(instruction == '7') return { instruction: 'dcon', client: specifier };
     
     if(instruction == '8') return {
         instruction: 'init',
@@ -45,8 +45,8 @@ export function CompressUpdate(update: Update) {
         pieces = [update.name, JSON.stringify(update.response)];
     }
 
-    if(!pieces) return '';
-    let compressed = code;
+    if(!pieces || code === undefined) return '';
+    let compressed = code.toString();
     for(let i = 0; i < pieces.length; i++) {
         compressed += pieces[i].replace(/;/g, ';_');
         if(i < pieces.length - 1) compressed += ';,';

package/tsconfig.json

@@ -6,5 +6,10 @@
         "declaration": true,
         "outDir": "./dist",
         "rootDir": "./src",        // Specify the root directory of your TypeScript source files.
+        "esModuleInterop": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "strictPropertyInitialization": false,
+        "skipLibCheck": true
     }
 }