fix: flow

Author: cha0s

README.md

@@ -4,15 +4,15 @@
 
 A high-performance low-level state management system for games :video_game:. Contains supercharged [proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy).
 
-Propertea supports:
+## :fire: Features
 
-- Change/dirty tracking ([`MarkClean`](#), [`onDirty`](#))
-- Creating and applying diffs ([`Diff`](#), [`Set`](#), [`SetWithDefaults`](#))
-- Full (de)serialization to/from JSON ([`ToJSON`](#), [`ToJSONWithoutDefaults`](#))
-- Fixed-size binary representation for efficient state transformations using `TypedArray` or WASM.
+- Change/dirty tracking
+- Creating and applying diffs
+- Full (de)serialization to/from JSON
+- Fixed-size contiguous binary representation for efficient state transformations using `TypedArray` or even WASM.
 - Object pooling
 
-## Examples
+## Examples :mag:
 
 ### Pool (fixed-size)
 
@@ -79,7 +79,7 @@ const user = userPool.allocate();
 assert(user.age === 0);
 assert(user.name === '');
 // same structure, null buffer
-assert(userPool.data.memory.buffer.byteLength === 0)
+assert(userPool.data.memory.buffer.byteLength === 0);
 ```
 
 Notice that even though `age` is a `uint32` (a fixed-size type), **the type becomes dynamic-sized if any type contained within is dynamic-sized**.
@@ -111,27 +111,35 @@ assert(another[Diff]() === undefined);
 Changes may trigger a callback:
 
 ```js
-const reactivePool = new Pool({
+const blueprint = {
   type: 'object',
   properties: {
     foo: {type: 'string'},
   },
-}, {
+};
+const params = {
   onDirty: (
     // the dirty bit
     bit,
     // the proxy triggering this change
     proxy,
   ) => {
     // ... do something!
-    console.log('dirty!');
+    console.log('bit:', bit, 'proxy:', proxy);
   }
-});
+};
+const reactivePool = new Pool(blueprint, params);
+reactivePool.allocate();
+// bit: 0 proxy: ConcreteProxy {
+//   [Symbol(element)]: { foo: '' },
+//   [Symbol(DataOffset)]: 0,
+//   [Symbol(DirtyOffset)]: 0
+// }
 ```
 
 ### WASM
 
-Pools are structured to be operated on by WASM. See [src/pool.test.wat](./src/pool.test.wat) for a minimal example of using WASM to transform data.
+Pools are structured to be operated on by WASM. See [src/pool.test.wat](./src/pool.test.wat) for a minimal example of using WASM to transform data (and track changes).
 
 Excerpted from [src/pool.test.js](./src/pool.test.js):
 
@@ -179,15 +187,18 @@ Networked real-time applications with arbitrarily-large mutable state (read: gam
 
 ### Performance
 
-It is greatly beneficial for performance when data is arranged contiguously so that e.g. SIMD may be leveraged for data transformations.
+Code generation (`new Function`) is used to generate a [monomorphic](https://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html) proxy shape from a blueprint. This keeps the [inline cache](https://mathiasbynens.be/notes/shapes-ics) hot and performant.
 
-This library is *fast*. As you can see in [`src/pool.bench.js`](./src/pool.bench.js), Propertea beats native JavaScript by 100-1000x transforming contiguous data.
+It is greatly beneficial for performance when data is arranged contiguously so that e.g. SIMD may be leveraged for data transformations.
 
-Pooled allocations actually beat native after warming the pool.
+This library is *fast*. As you can see in [`src/pool.bench.js`](./src/pool.bench.js), Propertea beats native JavaScript by 100-1000x transforming contiguous data. Pooled allocations actually beat native after warming the pool.
 
-Code generation (`new Function`) is used to generate a [monomorphic](https://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html) proxy shape, based off the blueprint.
+### Onward and upward
 
-### etc...
+Specifically, this is motivated by my pure JavaScript ECS which is the next to be released.
 
-Specifically, this is motivated by my pure JavaScript ECS that is the next to be open sourced.
+## TODO
 
+- Fixed-length arrays
+- Fixed-shape maps (depends on `crunches` codec support)
+- More array proxy ops

src/array.js

@@ -7,6 +7,8 @@ import {registry} from './register.js';
 const Key = Symbol('Index');
 const ArraySymbol = Symbol('ArraySymbol');
 
+const nop = () => {};
+
 registry.array = class extends ProxyProperty {
 
   constructor(blueprint) {
@@ -29,6 +31,8 @@ registry.array = class extends ProxyProperty {
   generateProxy(views) {
     const {blueprint, property} = this;
     const {dirtyWidth} = property;
+    const onDirty = views.onDirty ?? true;
+    const onDirtyCallback = 'function' === typeof onDirty ? onDirty : nop;
     let Concrete;
     let pool;
     if (property instanceof ProxyProperty) {
@@ -41,15 +45,15 @@ registry.array = class extends ProxyProperty {
             [ArraySymbol] = undefined;
           },
         },
-        {
+        onDirty ? {
           onDirty: (bit, proxy) => {
-            views.onDirty?.(bit, proxy);
+            onDirtyCallback(bit, proxy);
             const index = Math.floor(bit / dirtyWidth);
             if (index < pool.length.value) {
               pool.proxies[index][ArraySymbol].dirty.add(pool.proxies[index][Key]);
             }
           },
-        },
+        } : {},
       );
     }
 
@@ -58,6 +62,7 @@ registry.array = class extends ProxyProperty {
 
       constructor() {
         super();
+        this[ProperteaSet](blueprint.defaultValue);
       }
 
       dirty = new Set();
@@ -67,13 +72,25 @@ registry.array = class extends ProxyProperty {
           if (property instanceof ProxyProperty) {
             pool.free(this[i]);
           }
-          this.dirty.add(i);
+          if (onDirty) {
+            this.dirty.add(i);
+          }
         }
         super.length = length;
       }
 
       setAt(key, value) {
-        if (property instanceof ProxyProperty) {
+        if (undefined === value) {
+          if (key in this) {
+            pool.free(this[key]);
+          }
+          if (onDirty) {
+            this.dirty.add(key);
+          }
+        }
+        const isProxy = property instanceof ProxyProperty;
+        let previous;
+        if (isProxy) {
           if (this[key]) {
             this[key][ProperteaSet](value instanceof Concrete ? value[ToJSON]() : value);
             value = this[key];
@@ -87,8 +104,18 @@ registry.array = class extends ProxyProperty {
             value = localValue;
           }
         }
-        this.dirty.add(key);
+        else {
+          previous = this[key];
+        }
+        if (onDirty) {
+          this.dirty.add(key);
+        }
         this[key] = value;
+        if (!isProxy) {
+          if (previous !== value) {
+            onDirtyCallback(parseInt(key), this);
+          }
+        }
       }
 
       [ToJSON]() {
@@ -125,12 +152,24 @@ registry.array = class extends ProxyProperty {
         }
       };
     }
-    ArrayProxy.prototype[SetWithDefaults] = function() {};
-    ArrayProxy.prototype[ProperteaSet] = function(iterable) {
-      this.setLength(0);
-      let i = 0;
-      for (const value of iterable) {
-        this.setAt(i++, value);
+    ArrayProxy.prototype[SetWithDefaults] = function(value) {
+      this[ProperteaSet](value);
+    };
+    ArrayProxy.prototype[ProperteaSet] = function(iterableOrDiff) {
+      if (!iterableOrDiff || 'object' !== typeof iterableOrDiff) {
+        return;
+      }
+      if (Symbol.iterator in iterableOrDiff) {
+        this.setLength(0);
+        let i = 0;
+        for (const value of iterableOrDiff) {
+          this.setAt(i++, value);
+        }
+      }
+      else {
+        for (const key in iterableOrDiff) {
+          this.setAt(parseInt(key), iterableOrDiff[key]);
+        }
       }
     };
     return ArrayProxy;

src/array.test.js

@@ -6,12 +6,22 @@ import './primitives.js';
 import {Diff, MarkClean, Set, ToJSON} from './proxy.js';
 import {registry} from './register.js';
 
+test('default value', () => {
+  const property = new registry.array({
+    defaultValue: [1, 2, 3],
+    element: {type: 'uint8'},
+  });
+  const Proxy = property.concrete();
+  const proxy = new Proxy();
+  expect(proxy[Diff]()).toEqual({0: 1, 1: 2, 2: 3});
+});
+
 test('primitive', () => {
   const property = new registry.array({
     element: {type: 'uint8'},
   });
-  const Map = property.concrete();
-  const proxy = new Map();
+  const Proxy = property.concrete();
+  const proxy = new Proxy();
   proxy.setAt(0, 1);
   expect(proxy[0]).toEqual(1);
   expect(proxy[Diff]()).toEqual({0: 1});
@@ -21,8 +31,8 @@ test('proxy', () => {
   const property = new registry.array({
     element: {type: 'object', properties: {x: {type: 'uint8'}}},
   });
-  const Map = property.concrete();
-  const proxy = new Map();
+  const Proxy = property.concrete();
+  const proxy = new Proxy();
   const value = {x: 4};
   proxy.setAt(0, value);
   const first = proxy[0];
@@ -50,8 +60,8 @@ test('within', () => {
       x: {type: 'array', element: {type: 'uint8'}},
     },
   });
-  const Map = property.concrete();
-  const proxy = new Map();
+  const Proxy = property.concrete();
+  const proxy = new Proxy();
   const value = [1, 2, 3];
   proxy.x = value;
   expect(proxy.x[ToJSON]()).not.toBe(value);
@@ -60,3 +70,54 @@ test('within', () => {
   proxy.x.setAt(1, 3);
   expect(proxy[Diff]()).toEqual({x: {1: 3}});
 });
+
+test('set partial', () => {
+  const property = new registry.array({
+    element: {type: 'uint8'},
+  });
+  const Proxy = property.concrete();
+  const proxy = new Proxy();
+  proxy.setAt(0, 1);
+  proxy.setAt(1, 2);
+  proxy[Set]({2: 3});
+  expect(proxy[Diff]()).toEqual({0: 1, 1: 2, 2: 3});
+});
+
+test('reactivity', () => {
+  let dirties = 0;
+  const property = new registry.array({
+    element: {type: 'uint8'},
+  });
+  const Proxy = property.concrete({
+    onDirty: () => { dirties += 1; }
+  });
+  const proxy = new Proxy();
+  expect(dirties).toEqual(0);
+  proxy.setAt(0, 1);
+  expect(dirties).toEqual(1);
+  proxy.setAt(1, 2);
+  expect(dirties).toEqual(2);
+  proxy[Set]({2: 3});
+  expect(proxy[Diff]()).toEqual({0: 1, 1: 2, 2: 3});
+});
+
+test('reactivity (proxy)', () => {
+  let dirties = 0;
+  const property = new registry.array({
+    element: {
+      type: 'object',
+      properties: {
+        x: {type: 'uint8'},
+      },
+    },
+  });
+  const Proxy = property.concrete({
+    onDirty: () => { dirties += 1; }
+  });
+  const proxy = new Proxy();
+  expect(dirties).toEqual(0);
+  proxy.setAt(0, {x: 3});
+  expect(dirties).toEqual(2);
+  proxy[0].x = 4;
+  expect(dirties).toEqual(3);
+});

src/index.js

@@ -5,5 +5,5 @@ import './map.js';
 import './object.js';
 export {Index, Pool} from './pool.js';
 export {Property} from './property.js';
-export {Diff, MarkClean, Set, SetWithDefaults, ToJSON, ToJSONWithoutDefaults} from './proxy.js';
+export {Diff, Instance, MarkClean, Set, SetWithDefaults, ToJSON, ToJSONWithoutDefaults} from './proxy.js';
 export {registry} from './register.js';

src/map.js

@@ -14,8 +14,7 @@ registry.map = class extends ProxyProperty {
     if (!registry[blueprint.value.type]) {
       throw new TypeError(`Propertea(map): value type '${blueprint.value.type}' not registered`);
     }
-    const property = new registry[blueprint.value.type](blueprint.value);
-    this.property = property;
+    this.property = new registry[blueprint.value.type](blueprint.value);
     this.codec = new Codecs.map(blueprint);
   }
 
@@ -59,6 +58,7 @@ registry.map = class extends ProxyProperty {
 
       constructor() {
         super();
+        this[ProperteaSet](blueprint.defaultValue);
       }
 
       clear() {
@@ -130,6 +130,9 @@ registry.map = class extends ProxyProperty {
     }
     MapProxy.prototype[SetWithDefaults] = function() {};
     MapProxy.prototype[ProperteaSet] = function(entries) {
+      if (!entries) {
+        return;
+      }
       this.clear();
       for (const entry of entries) {
         this.set(entry[0], entry[1]);