Replace get and set methods with unified value option

BREAKING CHANGE: `get` and `set` methods must be replaced  with `value` option. Properties no longer
reflect value to the corresponding attribute by default. New `reflect` option must be set to `true`.

Author: smalluban

src/cache.js

@@ -39,6 +39,7 @@ export function getEntry(target, key) {
       key,
       target,
       value: undefined,
+      assertValue: undefined,
       lastValue: undefined,
       resolved: false,
       contexts: undefined,
@@ -58,7 +59,11 @@ export function getEntries(target) {
 }
 
 let context = null;
-export function get(target, key, getter) {
+export function getCurrentEntry() {
+  return context;
+}
+
+export function get(target, key, fn) {
   const entry = getEntry(target, key);
 
   if (context) {
@@ -88,7 +93,7 @@ export function get(target, key, getter) {
     context = entry;
     stack.add(entry);
 
-    entry.value = getter(target, entry.value);
+    entry.value = fn(target, entry.assertValue, entry.value);
     entry.resolved = true;
 
     context = lastContext;
@@ -109,24 +114,35 @@ export function get(target, key, getter) {
   return entry.value;
 }
 
-export function set(target, key, setter, value) {
+export function assert(target, key, value) {
   const entry = getEntry(target, key);
-  const newValue = setter(target, value, entry.value);
 
-  if (newValue !== entry.value) {
-    entry.value = newValue;
+  entry.value = undefined;
+  entry.assertValue = value;
+
+  dispatch(entry);
+}
+
+export function set(target, key, fn, value) {
+  const entry = getEntry(target, key);
+  const nextValue = fn(target, value, entry.value);
+
+  if (nextValue !== entry.value) {
+    entry.value = nextValue;
+    entry.assertValue = undefined;
+
     dispatch(entry);
   }
 }
 
-export function observe(target, key, getter, fn) {
+export function observe(target, key, fn, callback) {
   const entry = getEntry(target, key);
 
   entry.observe = () => {
-    const value = get(target, key, getter);
+    const value = get(target, key, fn);
 
     if (value !== entry.lastValue) {
-      fn(target, value, entry.lastValue);
+      callback(target, value, entry.lastValue);
       entry.lastValue = value;
     }
   };
@@ -168,6 +184,7 @@ function invalidateEntry(entry, options) {
 
   if (options.clearValue) {
     entry.value = undefined;
+    entry.assertValue = undefined;
     entry.lastValue = undefined;
   }
 

src/children.js

@@ -26,7 +26,7 @@ export default function children(
       : (hybrids) => hybrids === hybridsOrFn;
 
   return {
-    get: (host) => walk(host, fn, options),
+    value: (host) => walk(host, fn, options),
     connect(host, key, invalidate) {
       const observer = new globalThis.MutationObserver(invalidate);
 

src/define.js

@@ -19,15 +19,25 @@ function compile(hybrids, HybridsElement) {
     }
   } else {
     HybridsElement = class extends globalThis.HTMLElement {
-      connectedCallback() {
-        for (const key of HybridsElement.settable) {
-          if (!hasOwnProperty.call(this, key)) continue;
-
-          const value = this[key];
-          delete this[key];
-          this[key] = value;
+      constructor() {
+        super();
+
+        for (const [key, attrName] of HybridsElement.writable.entries()) {
+          if (hasOwnProperty.call(this, key)) {
+            const value = this[key];
+            delete this[key];
+            this[key] = value;
+          } else {
+            if (this.hasAttribute(attrName)) {
+              const value = this.getAttribute(attrName);
+              this[key] =
+                (value === "" && typeof this[key] === "boolean") || value;
+            }
+          }
         }
+      }
 
+      connectedCallback() {
         const set = new Set();
         disconnects.set(this, set);
 
@@ -56,60 +66,43 @@ function compile(hybrids, HybridsElement) {
 
   const connects = new Set();
   const observers = new Set();
-  const settable = new Set();
+  const writableProps = new Map();
 
   for (const key of Object.keys(hybrids)) {
     if (key === "tag") continue;
 
     let desc = hybrids[key];
-    const type = typeof desc;
-
-    if (type === "function") {
-      if (key === "render") {
-        desc = render(desc, true);
-      } else if (key === "content") {
-        desc = render(desc);
-      } else {
-        desc = { get: desc };
-      }
-    } else if (type !== "object" || desc === null) {
-      desc = { value: desc };
-    } else if (desc.set) {
-      if (hasOwnProperty.call(desc, "value")) {
-        throw TypeError(
-          `Invalid property descriptor for '${key}' property - it must not have 'value' and 'set' properties at the same time.`,
-        );
-      }
 
-      const attrName = camelToDash(key);
-      const get = desc.get || ((host, value) => value);
-      desc.get = (host, value) => {
-        if (value === undefined) {
-          value = desc.set(host, host.getAttribute(attrName) || value);
-        }
-        return get(host, value);
-      };
+    if (typeof desc !== "object" || desc === null) {
+      desc = { value: desc };
     }
 
-    if (hasOwnProperty.call(desc, "value")) {
-      desc = value(key, desc);
-    } else if (!desc.get) {
-      throw TypeError(
-        `Invalid descriptor for '${key}' property - it must contain 'value' or 'get' option`,
-      );
+    if (desc.get || desc.set) {
+      throw TypeError(`'get' and 'set' have been replaced with 'value' option`);
     }
 
-    if (desc.set) settable.add(key);
+    desc =
+      key === "render" || key === "content"
+        ? render(key, desc)
+        : value(key, desc);
+
+    if (desc.writable) {
+      writableProps.set(key, camelToDash(key));
+    }
 
     Object.defineProperty(HybridsElement.prototype, key, {
-      get: function get() {
-        return cache.get(this, key, desc.get);
-      },
-      set:
-        desc.set &&
-        function set(newValue) {
-          cache.set(this, key, desc.set, newValue);
-        },
+      get: desc.writable
+        ? function get() {
+            return cache.get(this, key, desc.value);
+          }
+        : function get() {
+            return cache.get(this, key, (host) => desc.value(host));
+          },
+      set: desc.writable
+        ? function assert(newValue) {
+            cache.assert(this, key, newValue);
+          }
+        : undefined,
       enumerable: true,
       configurable: true,
     });
@@ -123,13 +116,15 @@ function compile(hybrids, HybridsElement) {
     }
 
     if (desc.observe) {
-      observers.add((host) => cache.observe(host, key, desc.get, desc.observe));
+      observers.add((host) =>
+        cache.observe(host, key, desc.value, desc.observe),
+      );
     }
   }
 
   HybridsElement.connects = connects;
   HybridsElement.observers = observers;
-  HybridsElement.settable = settable;
+  HybridsElement.writable = writableProps;
 
   return HybridsElement;
 }
@@ -167,26 +162,32 @@ function update(HybridsElement) {
 function define(hybrids) {
   if (!hybrids.tag) {
     throw TypeError(
-      "Error while defining hybrids: 'tag' property with dashed tag name is required",
+      "Error while defining an element: 'tag' property with dashed tag name is required",
     );
   }
 
-  const HybridsElement = globalThis.customElements.get(hybrids.tag);
+  try {
+    const HybridsElement = globalThis.customElements.get(hybrids.tag);
 
-  if (HybridsElement) {
-    if (constructors.get(HybridsElement)) {
-      update(HybridsElement);
-      compile(hybrids, HybridsElement);
+    if (HybridsElement) {
+      if (constructors.get(HybridsElement)) {
+        update(HybridsElement);
+        compile(hybrids, HybridsElement);
 
-      return hybrids;
+        return hybrids;
+      }
+
+      throw TypeError(
+        `Custom element with '${hybrids.tag}' tag name already defined outside of the hybrids context`,
+      );
     }
 
-    throw TypeError(
-      `Custom element with '${hybrids.tag}' tag name already defined outside of the hybrids context`,
-    );
+    globalThis.customElements.define(hybrids.tag, compile(hybrids));
+  } catch (e) {
+    console.error(`Error while defining '${hybrids.tag}' element:`);
+    throw e;
   }
 
-  globalThis.customElements.define(hybrids.tag, compile(hybrids));
   return hybrids;
 }
 

src/parent.js

@@ -24,7 +24,7 @@ export default function parent(hybridsOrFn) {
       ? hybridsOrFn
       : (hybrids) => hybrids === hybridsOrFn;
   return {
-    get: (host) => walk(host, fn),
+    value: (host) => walk(host, fn),
     connect(host, key, invalidate) {
       return invalidate;
     },

src/render.js

@@ -1,28 +1,58 @@
-export default function render(fn, useShadow) {
-  return {
-    get: useShadow
-      ? (host) => {
-          const updateDOM = fn(host);
-          const target =
-            host.shadowRoot ||
-            host.attachShadow({
-              mode: "open",
-              delegatesFocus: fn.delegatesFocus || false,
-            });
-          return () => {
-            updateDOM(host, target);
-            return target;
-          };
+export default function render(key, desc) {
+  if (desc.writable) {
+    throw TypeError(`'writable' option is not supported on '${key}' property`);
+  }
+  if (desc.reflect) {
+    throw TypeError(`'reflect' option is not supported on '${key}' property`);
+  }
+
+  const { value: fn, observe } = desc;
+
+  if (typeof fn !== "function") {
+    throw TypeError(`'render' function expected as '${key}' property value`);
+  }
+
+  const shadowOptions = key === "render" && {
+    mode: "open",
+    delegatesFocus: fn.delegatesFocus,
+  };
+
+  const rest = {
+    connect: desc.connect,
+    observe: observe
+      ? (host, flush) => {
+          observe(host, flush());
         }
-      : (host) => {
-          const updateDOM = fn(host);
-          return () => {
-            updateDOM(host, host);
-            return host;
-          };
+      : (host, flush) => {
+          flush();
         },
-    observe(host, flush) {
-      flush();
+  };
+
+  // Explicitly disable shadow DOM
+  if (shadowOptions === false) {
+    return {
+      value: (host) => {
+        const updateDOM = fn(host);
+        return () => {
+          updateDOM(host, host);
+          return host;
+        };
+      },
+      ...rest,
+    };
+  }
+
+  // Enable shadow DOM if explicitly set or template function returns a shadow flag
+  return {
+    value: (host) => {
+      const updateDOM = fn(host);
+      const target = host.shadowRoot || host.attachShadow(shadowOptions);
+
+      return () => {
+        updateDOM(host, target);
+        return target;
+      };
     },
+    ...rest,
   };
 }

src/router.js

@@ -311,12 +311,7 @@ function setupView(hybrids, routerOptions, parent, nestedParent) {
       });
     }
 
-    const writableParams = [];
-
-    for (const key of Object.keys(Constructor.prototype)) {
-      const desc = Object.getOwnPropertyDescriptor(Constructor.prototype, key);
-      if (desc.set) writableParams.push(key);
-    }
+    const writableParams = [...Constructor.writable.keys()];
 
     if (options.url) {
       if (options.dialog) {
@@ -1074,13 +1069,13 @@ function router(views, options) {
   };
 
   const desc = {
-    get: (host) => {
+    value: (host) => {
       const stack = stacks.get(host) || [];
       return stack
         .slice(0, stack.findIndex((el) => !configs.get(el).dialog) + 1)
         .reverse();
     },
-    connect: (host, key, invalidate) => {
+    connect: (host, _, invalidate) => {
       for (const param of options.params) {
         if (!(param in host)) {
           throw Error(