multyx-client 0.1.5 → 0.1.7

package/dist/controller.js

@@ -19,7 +19,7 @@ class Controller {
         };
         document.addEventListener('keydown', e => {
             if (this.preventDefault)
-                e.preventDefault;
+                e.preventDefault();
             const key = e.key.toLowerCase();
             // When holding down key
             if (this.keys[key] && this.listening.has('keyhold')) {
@@ -40,7 +40,7 @@ class Controller {
         });
         document.addEventListener('keyup', e => {
             if (this.preventDefault)
-                e.preventDefault;
+                e.preventDefault();
             const key = e.key.toLowerCase();
             delete this.keys[key];
             delete this.keys[e.code];
@@ -52,7 +52,7 @@ class Controller {
         // Mouse input events
         document.addEventListener('mousedown', e => {
             if (this.preventDefault)
-                e.preventDefault;
+                e.preventDefault();
             if (this.mouseGetter) {
                 const mouse = this.mouseGetter();
                 this.mouse.x = mouse.x;
@@ -70,7 +70,7 @@ class Controller {
         });
         document.addEventListener('mouseup', e => {
             if (this.preventDefault)
-                e.preventDefault;
+                e.preventDefault();
             if (this.mouseGetter) {
                 const mouse = this.mouseGetter();
                 this.mouse.x = mouse.x;
@@ -88,7 +88,7 @@ class Controller {
         });
         document.addEventListener('mousemove', e => {
             if (this.preventDefault)
-                e.preventDefault;
+                e.preventDefault();
             if (this.mouseGetter) {
                 const mouse = this.mouseGetter();
                 this.mouse.x = mouse.x;
@@ -115,7 +115,6 @@ class Controller {
      * @param anchor Anchor the origin at a specific spot on the canvas
      */
     mapCanvasPosition(canvas, position) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         const t = 'top' in position;
         const b = 'bottom' in position;
         const l = 'left' in position;
@@ -180,12 +179,12 @@ class Controller {
                 return error(true, 'bottom');
             position.bottom = 0;
             if (l) {
-                (_a = position.top) !== null && _a !== void 0 ? _a : (position.top = Math.abs(hToW * position.left * 2));
-                (_b = position.right) !== null && _b !== void 0 ? _b : (position.right = -position.left);
+                position.top = Math.abs(hToW * position.left * 2);
+                position.right = -position.left;
             }
             else if (r) {
-                (_c = position.top) !== null && _c !== void 0 ? _c : (position.top = Math.abs(hToW * position.right * 2));
-                (_d = position.left) !== null && _d !== void 0 ? _d : (position.left = -position.right);
+                position.top = Math.abs(hToW * position.right * 2);
+                position.left = -position.right;
             }
             else {
                 position.left = -Math.abs(wToH * position.top / 2);
@@ -199,12 +198,12 @@ class Controller {
                 return error(true, 'top');
             position.top = 0;
             if (l) {
-                (_e = position.bottom) !== null && _e !== void 0 ? _e : (position.bottom = Math.abs(hToW * position.left * 2));
-                (_f = position.right) !== null && _f !== void 0 ? _f : (position.right = -position.left);
+                position.bottom = Math.abs(hToW * position.left * 2);
+                position.right = -position.left;
             }
             else if (r) {
-                (_g = position.bottom) !== null && _g !== void 0 ? _g : (position.bottom = Math.abs(hToW * position.right * 2));
-                (_h = position.left) !== null && _h !== void 0 ? _h : (position.left = -position.right);
+                position.bottom = Math.abs(hToW * position.right * 2);
+                position.left = -position.right;
             }
             else {
                 position.left = -Math.abs(wToH * position.bottom / 2);
@@ -218,12 +217,12 @@ class Controller {
                 return error(true, 'left');
             position.left = 0;
             if (t) {
-                (_j = position.right) !== null && _j !== void 0 ? _j : (position.right = -Math.abs(wToH * position.top * 2));
-                (_k = position.bottom) !== null && _k !== void 0 ? _k : (position.bottom = -position.top);
+                position.right = -Math.abs(wToH * position.top * 2);
+                position.bottom = -position.top;
             }
             else if (b) {
-                (_l = position.right) !== null && _l !== void 0 ? _l : (position.right = Math.abs(wToH * position.bottom * 2));
-                (_m = position.top) !== null && _m !== void 0 ? _m : (position.top = -position.bottom);
+                position.right = Math.abs(wToH * position.bottom * 2);
+                position.top = -position.bottom;
             }
             else {
                 position.top = -Math.abs(hToW * position.right / 2);
@@ -237,12 +236,12 @@ class Controller {
                 return error(true, 'right');
             position.right = 0;
             if (t) {
-                (_o = position.left) !== null && _o !== void 0 ? _o : (position.left = -Math.abs(wToH * position.top * 2));
-                (_p = position.bottom) !== null && _p !== void 0 ? _p : (position.bottom = -position.top);
+                position.left = -Math.abs(wToH * position.top * 2);
+                position.bottom = -position.top;
             }
             else if (b) {
-                (_q = position.left) !== null && _q !== void 0 ? _q : (position.left = Math.abs(wToH * position.bottom * 2));
-                (_r = position.top) !== null && _r !== void 0 ? _r : (position.top = -position.bottom);
+                position.left = Math.abs(wToH * position.bottom * 2);
+                position.top = -position.bottom;
             }
             else {
                 position.top = -Math.abs(hToW * position.right / 2);
@@ -294,14 +293,14 @@ class Controller {
                 position.left = Math.abs(wToH * position.top);
         }
         const ctx = canvas.getContext("2d");
-        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx === null || ctx === void 0 ? void 0 : ctx.setTransform(1, 0, 0, 1, 0, 0);
         canvas.width = Math.floor(Math.abs(position.right - position.left));
         canvas.height = Math.floor(Math.abs(position.bottom - position.top));
         if (position.right < position.left)
-            ctx.scale(-1, 1);
+            ctx === null || ctx === void 0 ? void 0 : ctx.scale(-1, 1);
         if (position.top > position.bottom)
-            ctx.scale(1, -1);
-        ctx.translate(-position.left, -position.top);
+            ctx === null || ctx === void 0 ? void 0 : ctx.scale(1, -1);
+        ctx === null || ctx === void 0 ? void 0 : ctx.translate(-position.left, -position.top);
     }
     /**
      * @param centerX Anchor x-value corresponding to mouse position x-value of 0
@@ -329,15 +328,15 @@ class Controller {
      */
     mapMouseToCanvas(canvas) {
         const ctx = canvas.getContext("2d");
-        const transform = ctx.getTransform();
+        const transform = ctx === null || ctx === void 0 ? void 0 : ctx.getTransform();
         const bounding = canvas.getBoundingClientRect();
         // Ratio between canvas scale to unit pixels
         const canvasRatioX = bounding.width / canvas.width;
         const canvasRatioY = bounding.height / canvas.height;
-        this.mouse.centerX = bounding.left + transform.e * canvasRatioX;
-        this.mouse.centerY = bounding.top + transform.f * canvasRatioY;
-        this.mouse.scaleX = canvasRatioX * transform.a;
-        this.mouse.scaleY = canvasRatioY * transform.d;
+        this.mouse.centerX = bounding.left + (transform === null || transform === void 0 ? void 0 : transform.e) * canvasRatioX;
+        this.mouse.centerY = bounding.top + (transform === null || transform === void 0 ? void 0 : transform.f) * canvasRatioY;
+        this.mouse.scaleX = canvasRatioX * (transform === null || transform === void 0 ? void 0 : transform.a);
+        this.mouse.scaleY = canvasRatioY * (transform === null || transform === void 0 ? void 0 : transform.d);
     }
     /**
      * Utilize mouse coordinates of another object

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Add, Done } from './utils';
+import { Add, Done, Interpolate } from './utils';
 import { RawObject } from "./types";
 import { Controller } from "./controller";
 import { MultyxClientObject } from "./items";
@@ -27,6 +27,7 @@ export default class Multyx {
     static Native: symbol;
     static Custom: symbol;
     static Any: symbol;
+    static Interpolate: typeof Interpolate;
     constructor(options?: Options, callback?: () => void);
     /**
      * Listen for a message from the server

package/dist/index.js

@@ -12,8 +12,10 @@ class Multyx {
         // Queue of functions to be called after each frame
         this[_a] = [];
         this.options = Object.assign(Object.assign({}, options_1.DefaultOptions), options);
-        const url = `ws${this.options.secure ? 's' : ''}://${this.options.uri.split('/')[0]}:${this.options.port}/${(_b = this.options.uri.split('/')[1]) !== null && _b !== void 0 ? _b : ''}`;
-        this.ws = new WebSocket(url);
+        if (!this.options.uri)
+            throw new Error('URI is required');
+        const uri = `ws${this.options.secure ? 's' : ''}://${this.options.uri.split('/')[0]}:${this.options.port}/${(_b = this.options.uri.split('/')[1]) !== null && _b !== void 0 ? _b : ''}`;
+        this.ws = new WebSocket(uri);
         this.ping = 0;
         this.space = 'default';
         this.events = new Map();
@@ -108,7 +110,7 @@ class Multyx {
      * @param msg Message to parse
      */
     parseNativeEvent(msg) {
-        var _b, _c, _d, _e;
+        var _b, _c, _d, _e, _f;
         msg.data = msg.data.map(message_1.UncompressUpdate);
         if (this.options.logUpdateFrame)
             console.log(msg.data);
@@ -172,9 +174,10 @@ class Multyx {
                 }
                 // Response to client
                 case 'resp': {
-                    const promiseResolve = this.events.get(Symbol.for("_" + update.name))[0];
+                    const promiseResolve = (_f = this.events.get(Symbol.for("_" + update.name))) === null || _f === void 0 ? void 0 : _f[0];
                     this.events.delete(Symbol.for("_" + update.name));
-                    this[utils_1.Done].push(() => promiseResolve(update.response));
+                    if (promiseResolve)
+                        this[utils_1.Done].push(() => promiseResolve(update.response));
                     break;
                 }
                 default: {
@@ -256,4 +259,5 @@ Multyx.Edit = Symbol('edit');
 Multyx.Native = Symbol('native');
 Multyx.Custom = Symbol('custom');
 Multyx.Any = Symbol('any');
+Multyx.Interpolate = utils_1.Interpolate;
 exports.default = Multyx;

package/dist/items/index.js

@@ -1,12 +1,15 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MultyxClientValue = exports.MultyxClientObject = exports.MultyxClientList = void 0;
 exports.IsMultyxClientItem = IsMultyxClientItem;
-const list_1 = require("./list");
+const list_1 = __importDefault(require("./list"));
 exports.MultyxClientList = list_1.default;
-const object_1 = require("./object");
+const object_1 = __importDefault(require("./object"));
 exports.MultyxClientObject = object_1.default;
-const value_1 = require("./value");
+const value_1 = __importDefault(require("./value"));
 exports.MultyxClientValue = value_1.default;
 function IsMultyxClientItem(value) {
     return value instanceof list_1.default || value instanceof object_1.default || value instanceof value_1.default;

package/dist/items/list.d.ts

@@ -1,7 +1,8 @@
 import Multyx from '../';
 import { type MultyxClientItem, type MultyxClientObject, MultyxClientValue } from '.';
-import { EditWrapper, Unpack } from '../utils';
+import { Edit, EditWrapper, Unpack } from '../utils';
 export default class MultyxClientList {
+    readonly type = "list";
     protected list: MultyxClientItem[];
     private multyx;
     propertyPath: string[];
@@ -21,9 +22,10 @@ export default class MultyxClientList {
      * @param shift Shift amount, positive for right, negative for left
      */
     private handleShiftOperation;
-    constructor(multyx: Multyx, list: any[] | EditWrapper<any[]>, propertyPath: string[], editable: boolean);
+    [index: number]: MultyxClientItem | undefined;
+    constructor(multyx: Multyx, list: any[] | EditWrapper<any[]>, propertyPath: string[] | undefined, editable: boolean);
     has(index: number): boolean;
-    get(index: number | string[]): MultyxClientItem;
+    get(index: number | string[]): MultyxClientItem | undefined;
     private recursiveSet;
     set(index: number | string[], value: any): boolean;
     delete(index: number, native?: boolean): boolean;
@@ -34,9 +36,9 @@ export default class MultyxClientList {
      */
     await(index: number): Promise<unknown>;
     push(...items: any): number;
-    pop(): MultyxClientItem | null;
+    pop(): MultyxClientItem | undefined;
     unshift(...items: any[]): number;
-    shift(): MultyxClientList | MultyxClientObject | MultyxClientValue;
+    shift(): MultyxClientList | MultyxClientObject | MultyxClientValue | undefined;
     slice(start?: number, end?: number): (MultyxClientList | MultyxClientObject | MultyxClientValue)[];
     splice(start: number, deleteCount?: number, ...items: any[]): (MultyxClientList | MultyxClientObject | MultyxClientValue)[];
     setSplice(start: number, deleteCount?: number, ...items: any[]): void;
@@ -51,13 +53,18 @@ export default class MultyxClientList {
     forEach(callbackfn: (value: any, index: number, array: MultyxClientList) => void): void;
     every(predicate: (value: any, index: number, array: MultyxClientList) => boolean): boolean;
     some(predicate: (value: any, index: number, array: MultyxClientList) => boolean): boolean;
-    find(predicate: (value: any, index: number, array: MultyxClientList) => boolean): MultyxClientList | MultyxClientObject | MultyxClientValue;
+    find(predicate: (value: any, index: number, array: MultyxClientList) => boolean): MultyxClientList | MultyxClientObject | MultyxClientValue | undefined;
     findIndex(predicate: (value: any, index: number, array: MultyxClientList) => boolean): number;
     entries(): [any, number][];
     keys(): number[];
+    [Edit](): void;
     [Unpack](constraints: any[]): void;
     [Symbol.iterator](): Iterator<MultyxClientItem>;
     toString: () => string;
     valueOf: () => any[];
     [Symbol.toPrimitive]: () => any[];
+    hydrateFromServer(values: any[]): void;
+    private tryApplyServerValue;
+    private notifyIndexWaiters;
+    private enqueueEditCallbacks;
 }

package/dist/items/list.js

@@ -1,10 +1,14 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 const _1 = require(".");
 const utils_1 = require("../utils");
-const router_1 = require("./router");
+const router_1 = __importDefault(require("./router"));
 const message_1 = require("../message");
+const isPlainObject = (value) => value !== null && typeof value === 'object' && !Array.isArray(value);
 class MultyxClientList {
     addEditCallback(callback) {
         this.editCallbacks.push(callback);
@@ -70,6 +74,7 @@ class MultyxClientList {
         }
     }
     constructor(multyx, list, propertyPath = [], editable) {
+        this.type = 'list';
         this.editCallbacks = [];
         this.toString = () => this.value.toString();
         this.valueOf = () => this.value;
@@ -148,6 +153,9 @@ class MultyxClientList {
             this.set(parseInt(path[0]), new utils_1.EditWrapper({}));
             next = this.get(parseInt(path[0]));
         }
+        if (!next || next instanceof _1.MultyxClientValue) {
+            return false;
+        }
         return next.set(path.slice(1), value);
     }
     set(index, value) {
@@ -156,31 +164,28 @@ class MultyxClientList {
         const oldValue = this.get(index);
         const serverSet = value instanceof utils_1.EditWrapper;
         const allowed = serverSet || this.editable;
-        if (serverSet || (0, _1.IsMultyxClientItem)(value))
-            value = value.value;
-        if (value === undefined)
+        const incoming = (serverSet || (0, _1.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 _1.MultyxClientValue && typeof value != 'object') {
-            return this.list[index].set(serverSet ? new utils_1.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 _1.MultyxClientValue && (typeof incoming !== 'object' || incoming === null)) {
+            const result = this.list[index].set(serverSet ? new utils_1.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 ((0, router_1.default)(value))(this.multyx, serverSet ? new utils_1.EditWrapper(value) : value, [...this.propertyPath, index.toString()], this.editable);
-        const propSymbol = Symbol.for("_" + this.propertyPath.join('.') + '.' + index);
-        if (this.multyx.events.has(propSymbol)) {
-            this.multyx[utils_1.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[utils_1.Add](() => listener(index, this.get(index), oldValue));
-        }
+        this.list[index] = new ((0, router_1.default)(incoming))(this.multyx, serverSet ? new utils_1.EditWrapper(incoming) : incoming, [...this.propertyPath, index.toString()], this.editable);
+        this.notifyIndexWaiters(index);
+        this.enqueueEditCallbacks(index, oldValue);
         return true;
     }
     delete(index, native = false) {
@@ -225,7 +230,7 @@ class MultyxClientList {
     }
     pop() {
         if (this.length === 0)
-            return null;
+            return undefined;
         const res = this.get(this.length);
         this.delete(this.length);
         return res;
@@ -255,7 +260,7 @@ class MultyxClientList {
         return this.list.slice(start, end);
     }
     splice(start, deleteCount, ...items) {
-        return this.list.splice(start, deleteCount, ...items);
+        return this.list.splice(start, deleteCount !== null && deleteCount !== void 0 ? deleteCount : 0, ...items);
     }
     setSplice(start, deleteCount, ...items) {
         if (deleteCount === undefined) {
@@ -385,6 +390,7 @@ class MultyxClientList {
     keys() {
         return Array(this.length).fill(0).map((_, i) => i);
     }
+    [utils_1.Edit]() { }
     [utils_1.Unpack](constraints) {
         var _b;
         for (let i = 0; i < this.length; i++) {
@@ -398,6 +404,51 @@ class MultyxClientList {
             values[i] = this.get(i);
         return values[Symbol.iterator]();
     }
+    hydrateFromServer(values) {
+        if (!Array.isArray(values))
+            return;
+        for (let i = 0; i < values.length; i++) {
+            this.set(i, new utils_1.EditWrapper(values[i]));
+        }
+        for (let i = values.length; i < this.length; i++) {
+            this.delete(i, true);
+        }
+        this.length = values.length;
+    }
+    tryApplyServerValue(index, incoming, oldValue) {
+        const current = this.list[index];
+        if (!current)
+            return false;
+        if (current instanceof _1.MultyxClientValue && (typeof incoming !== 'object' || incoming === null)) {
+            current.set(new utils_1.EditWrapper(incoming));
+            this.enqueueEditCallbacks(index, oldValue);
+            return true;
+        }
+        const canHydrate = typeof (current === null || current === void 0 ? void 0 : current.hydrateFromServer) === 'function';
+        if (Array.isArray(incoming) && canHydrate && current.type === 'list') {
+            current.hydrateFromServer(incoming);
+            this.enqueueEditCallbacks(index, oldValue);
+            return true;
+        }
+        if (isPlainObject(incoming) && canHydrate && current.type === 'object') {
+            current.hydrateFromServer(incoming);
+            this.enqueueEditCallbacks(index, oldValue);
+            return true;
+        }
+        return false;
+    }
+    notifyIndexWaiters(index) {
+        var _b, _c;
+        const propSymbol = Symbol.for("_" + this.propertyPath.join('.') + '.' + index);
+        if (this.multyx.events.has(propSymbol)) {
+            this.multyx[utils_1.Done].push(...((_c = (_b = this.multyx.events.get(propSymbol)) === null || _b === void 0 ? void 0 : _b.map(e => () => e(this.list[index]))) !== null && _c !== void 0 ? _c : []));
+        }
+    }
+    enqueueEditCallbacks(index, oldValue) {
+        for (const listener of this.editCallbacks) {
+            this.multyx[utils_1.Add](() => listener(index, this.get(index), oldValue));
+        }
+    }
 }
 _a = Symbol.toPrimitive;
 exports.default = MultyxClientList;

package/dist/items/object.d.ts

@@ -1,19 +1,22 @@
 import { RawObject } from '../types';
 import { Edit, EditWrapper, Unpack } from "../utils";
 import type Multyx from '../index';
-import { type MultyxClientItem } from ".";
+import { type MultyxClientList, type MultyxClientItem } from ".";
+import MultyxClientValue from "./value";
 export default class MultyxClientObject {
+    readonly type = "object";
     protected object: RawObject<MultyxClientItem>;
     private multyx;
     propertyPath: string[];
     editable: boolean;
     private editCallbacks;
-    get value(): {};
+    get value(): RawObject<MultyxClientList | MultyxClientObject | MultyxClientValue>;
     addEditCallback(callback: (key: any, value: any) => void): void;
     [Edit](updatePath: string[], value: any): void;
-    constructor(multyx: Multyx, object: RawObject | EditWrapper<RawObject>, propertyPath: string[], editable: boolean);
+    [key: string]: any;
+    constructor(multyx: Multyx, object: RawObject | EditWrapper<RawObject>, propertyPath: string[] | undefined, editable: boolean);
     has(property: any): boolean;
-    get(property: string | string[]): MultyxClientItem;
+    get(property: string | string[]): MultyxClientItem | undefined;
     private recursiveSet;
     set(property: string | string[], value: any): boolean;
     delete(property: any, native?: boolean): boolean;
@@ -31,4 +34,7 @@ export default class MultyxClientObject {
      * @param constraints Packed constraints object mirroring MultyxClientObject shape
      */
     [Unpack](constraints: RawObject): void;
+    hydrateFromServer(value: RawObject): void;
+    private applyServerValue;
+    private notifyPropertyWaiters;
 }

package/dist/items/object.js

@@ -1,10 +1,14 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const message_1 = require("../message");
 const utils_1 = require("../utils");
 const _1 = require(".");
-const router_1 = require("./router");
-const value_1 = require("./value");
+const router_1 = __importDefault(require("./router"));
+const value_1 = __importDefault(require("./value"));
+const isPlainObject = (value) => value !== null && typeof value === 'object' && !Array.isArray(value);
 class MultyxClientObject {
     get value() {
         const parsed = {};
@@ -16,6 +20,7 @@ class MultyxClientObject {
         this.editCallbacks.push(callback);
     }
     [utils_1.Edit](updatePath, value) {
+        var _a;
         if (updatePath.length == 1) {
             this.set(updatePath[0], new utils_1.EditWrapper(value));
             return;
@@ -26,9 +31,10 @@ class MultyxClientObject {
         if (!this.has(updatePath[0])) {
             this.set(updatePath[0], new utils_1.EditWrapper({}));
         }
-        this.get(updatePath[0])[utils_1.Edit](updatePath.slice(1), value);
+        (_a = this.get(updatePath[0])) === null || _a === void 0 ? void 0 : _a[utils_1.Edit](updatePath.slice(1), value);
     }
     constructor(multyx, object, propertyPath = [], editable) {
+        this.type = 'object';
         this.editCallbacks = [];
         this.object = {};
         this.propertyPath = propertyPath;
@@ -109,27 +115,26 @@ class MultyxClientObject {
             return this.recursiveSet(property, value);
         const serverSet = value instanceof utils_1.EditWrapper;
         const allowed = serverSet || this.editable;
-        if (serverSet || (0, _1.IsMultyxClientItem)(value))
-            value = value.value;
-        if (value === undefined)
+        const incoming = (serverSet || (0, _1.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 value_1.default && typeof value != 'object') {
-            return this.object[property].set(serverSet ? new utils_1.EditWrapper(value) : value);
+        if (this.object[property] instanceof value_1.default && (typeof incoming !== 'object' || incoming === null)) {
+            return this.object[property].set(serverSet ? new utils_1.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 ((0, router_1.default)(value))(this.multyx, serverSet ? new utils_1.EditWrapper(value) : value, [...this.propertyPath, property], this.editable);
-        const propSymbol = Symbol.for("_" + this.propertyPath.join('.') + '.' + property);
-        if (this.multyx.events.has(propSymbol)) {
-            this.multyx[utils_1.Done].push(...this.multyx.events.get(propSymbol).map(e => () => e(this.object[property])));
-        }
+        this.object[property] = new ((0, router_1.default)(incoming))(this.multyx, serverSet ? new utils_1.EditWrapper(incoming) : incoming, [...this.propertyPath, property], this.editable);
+        this.notifyPropertyWaiters(property);
         return true;
     }
     delete(property, native = false) {
@@ -184,5 +189,43 @@ class MultyxClientObject {
             (_a = this.object[prop]) === null || _a === void 0 ? void 0 : _a[utils_1.Unpack](constraints[prop]);
         }
     }
+    hydrateFromServer(value) {
+        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 utils_1.EditWrapper(entry));
+        }
+        for (const key of remaining) {
+            this.delete(key, true);
+        }
+    }
+    applyServerValue(property, incoming) {
+        const current = this.object[property];
+        if (!current)
+            return false;
+        if (current instanceof value_1.default && (typeof incoming !== 'object' || incoming === null)) {
+            current.set(new utils_1.EditWrapper(incoming));
+            return true;
+        }
+        const canHydrate = typeof (current === null || current === void 0 ? void 0 : current.hydrateFromServer) === 'function';
+        if (Array.isArray(incoming) && canHydrate && current.type === 'list') {
+            current.hydrateFromServer(incoming);
+            return true;
+        }
+        if (isPlainObject(incoming) && canHydrate && current.type === 'object') {
+            current.hydrateFromServer(incoming);
+            return true;
+        }
+        return false;
+    }
+    notifyPropertyWaiters(property) {
+        var _a, _b;
+        const propSymbol = Symbol.for("_" + this.propertyPath.join('.') + '.' + property);
+        if (this.multyx.events.has(propSymbol)) {
+            this.multyx[utils_1.Done].push(...((_b = (_a = this.multyx.events.get(propSymbol)) === null || _a === void 0 ? void 0 : _a.map(e => () => e(this.object[property]))) !== null && _b !== void 0 ? _b : []));
+        }
+    }
 }
 exports.default = MultyxClientObject;

package/dist/items/value.d.ts

@@ -16,7 +16,7 @@ export default class MultyxClientValue {
     addReadModifier(modifier: (value: Value) => Value): void;
     addEditCallback(callback: (value: Value, previousValue: Value) => void): void;
     [Edit](updatePath: string[], value: any): void;
-    constructor(multyx: Multyx, value: Value | EditWrapper<Value>, propertyPath: string[], editable: boolean);
+    constructor(multyx: Multyx, value: Value | EditWrapper<Value>, propertyPath: string[] | undefined, editable: boolean);
     set(value: Value | EditWrapper<Value>): boolean;
     bindElement(element: HTMLElement): void;
     /**

package/dist/items/value.js

@@ -22,6 +22,7 @@ class MultyxClientValue {
         this.set(new utils_1.EditWrapper(value));
     }
     constructor(multyx, value, propertyPath = [], editable) {
+        var _b, _c;
         this.readModifiers = [];
         this.editCallbacks = [];
         /* Native methods to allow MultyxValue to be treated as primitive */
@@ -35,7 +36,7 @@ class MultyxClientValue {
         this.set(value);
         const propSymbol = Symbol.for("_" + this.propertyPath.join('.'));
         if (this.multyx.events.has(propSymbol)) {
-            this.multyx[utils_1.Done].push(...this.multyx.events.get(propSymbol).map(e => () => e(this.value)));
+            this.multyx[utils_1.Done].push(...((_c = (_b = this.multyx.events.get(propSymbol)) === null || _b === void 0 ? void 0 : _b.map(e => () => e(this.value))) !== null && _c !== void 0 ? _c : []));
         }
     }
     set(value) {