feat(vdom): add universal syncable value PROPERTY()

Universal syncable value for assigning properties instead of attributes.

packages/ivi-core/src/__tests__/syncable_value.spec.ts

@@ -0,0 +1,34 @@
+import { PROPERTY, SYNCABLE_VALUE_SKIP_UNDEFINED } from "../syncable_value";
+
+describe(`PROPERTY()`, () => {
+  test(`undefined should return SYNCABLE_VALUE_SKIP_UNDEFINED`, () => {
+    expect(PROPERTY(undefined)).toBe(SYNCABLE_VALUE_SKIP_UNDEFINED);
+  });
+
+  test(`value`, () => {
+    expect(PROPERTY(1).v).toBe(1);
+  });
+
+  test(`assign custom property`, () => {
+    const e = document.createElement("div");
+    const p = PROPERTY(1);
+    p.s(e, "_custom", void 0, 1);
+    expect((e as any)._custom).toBe(1);
+  });
+
+  test(`update custom property`, () => {
+    const e = document.createElement("div");
+    const p = PROPERTY(1);
+    p.s(e, "_custom", void 0, 1);
+    p.s(e, "_custom", void 0, 2);
+    expect((e as any)._custom).toBe(2);
+  });
+
+  test(`update custom property with the same value`, () => {
+    const e = document.createElement("div");
+    const p = PROPERTY(1);
+    p.s(e, "_custom", void 0, 1);
+    p.s(e, "_custom", void 0, 1);
+    expect((e as any)._custom).toBe(1);
+  });
+});

packages/ivi-core/src/index.ts

@@ -30,6 +30,7 @@ export {
 export {
   SyncableValue,
   SYNCABLE_VALUE_SKIP_UNDEFINED, SYNCABLE_VALUE_REMOVE_ATTR_UNDEFINED,
+  PROPERTY,
 } from "./syncable_value";
 
 export { SVG_NAMESPACE, XLINK_NAMESPACE, XML_NAMESPACE, KeyCode, KeyLocation, KeyName, MouseButtons } from "./const";

packages/ivi-core/src/syncable_value.ts

@@ -19,3 +19,13 @@ export const SYNCABLE_VALUE_REMOVE_ATTR_UNDEFINED = {
     }
   },
 };
+
+export function PROPERTY<T>(v: T | undefined): SyncableValue<T> {
+  return (v === void 0) ? SYNCABLE_VALUE_SKIP_UNDEFINED : { v, s: syncProperty };
+}
+
+function syncProperty(element: Element, key: string, prev: any, next: any) {
+  if (prev !== next) {
+    (element as any)[key] = next!;
+  }
+}

packages/ivi/src/index.ts

@@ -1,7 +1,7 @@
 /**
  * Common types and functions re-exported from ivi-core.
  */
-export { KeyCode, KeyLocation, MouseButtons, SyncableValue, _ } from "ivi-core";
+export { KeyCode, KeyLocation, MouseButtons, SyncableValue, PROPERTY, _ } from "ivi-core";
 
 // Virtual DOM
 export { VNodeFlags } from "./vdom/flags";