native-document 1.0.139 → 1.0.140

package/src/core/data/observable-helpers/observable.is-to.js

@@ -0,0 +1,196 @@
+import ObservableItem from "../ObservableItem";
+import { Observable } from "../Observable";
+
+const $computed = (fn, dependencies) => Observable.computed(fn, dependencies);
+const $checker = (obs, fn) => obs.transform(fn);
+
+//
+// is... -> ObservableChecker<boolean>
+//
+
+ObservableItem.prototype.isEqualTo = function (value) {
+    if (value?.__$Observable) {
+        return $computed((a, b) => a === b, [this, value]);
+    }
+    return $checker(this, x => x === value);
+};
+
+ObservableItem.prototype.isNotEqualTo = function (value) {
+    if (value?.__$Observable) {
+        return $computed((a, b) => a !== b, [this, value]);
+    }
+    return $checker(this, x => x !== value);
+};
+
+ObservableItem.prototype.isGreaterThan = function (value) {
+    if (value?.__$Observable) {
+        return $computed((a, b) => a > b, [this, value]);
+    }
+    return $checker(this, x => x > value);
+};
+
+ObservableItem.prototype.isGreaterThanOrEqualTo = function (value) {
+    if (value?.__$Observable) {
+        return $computed((a, b) => a >= b, [this, value]);
+    }
+    return $checker(this, x => x >= value);
+};
+
+ObservableItem.prototype.isLessThan = function (value) {
+    if (value?.__$Observable) {
+        return $computed((a, b) => a < b, [this, value]);
+    }
+    return $checker(this, x => x < value);
+};
+
+ObservableItem.prototype.isLessThanOrEqualTo = function (value) {
+    if (value?.__$Observable) {
+        return $computed((a, b) => a <= b, [this, value]);
+    }
+    return $checker(this, x => x <= value);
+};
+
+ObservableItem.prototype.isBetween = function (min, max) {
+    if (min.__$Observable && max.__$Observable) {
+        return $computed((x, a, b) => x >= a && x <= b, [this, min, max]);
+    }
+    if (min.__$Observable) {
+        return $computed((x, a) => x >= a && x <= max, [this, min]);
+    }
+    if (max.__$Observable) {
+        return $computed((x, b) => x >= min && x <= b, [this, max]);
+    }
+    return $checker(this, x => x >= min && x <= max);
+};
+
+ObservableItem.prototype.isNull = function () {
+    return $checker(this, x => x == null);
+};
+
+ObservableItem.prototype.isTruthy = function () {
+    return $checker(this, x => !!x);
+};
+
+ObservableItem.prototype.isFalsy = function () {
+    return $checker(this, x => !x);
+};
+
+ObservableItem.prototype.isStartingWith = function (str) {
+    if (str?.__$Observable) {
+        return $computed((a, b) => String(a).startsWith(b), [this, str]);
+    }
+    return $checker(this, x => String(x).startsWith(str));
+};
+
+ObservableItem.prototype.isEndingWith = function (str) {
+    if (str?.__$Observable) {
+        return $computed((a, b) => String(a).endsWith(b), [this, str]);
+    }
+    return $checker(this, x => String(x).endsWith(str));
+};
+
+ObservableItem.prototype.isMatchingPattern = function (regex) {
+    if (regex?.__$Observable) {
+        return $computed((a, b) => new RegExp(b).test(String(a)), [this, regex]);
+    }
+    return $checker(this, x => regex.test(String(x)));
+};
+
+ObservableItem.prototype.isEmpty = function () {
+    return $checker(this, x => x == null || x === '' || (Array.isArray(x) && x.length === 0));
+};
+
+ObservableItem.prototype.isNotEmpty = function () {
+    return $checker(this, x => x == null || x === '' || (Array.isArray(x) && x.length !== 0));
+};
+
+ObservableItem.prototype.isIncludes = function (value) {
+    if (value?.__$Observable) {
+        return $computed((a, b) => {
+            if (Array.isArray(a)) return a.includes(b);
+            return String(a).includes(String(b));
+        }, [this, value]);
+    }
+    return $checker(this, x => {
+        if (Array.isArray(x)) return x.includes(value);
+        return String(x).includes(String(value));
+    });
+};
+
+ObservableItem.prototype.isIncludedIn = function (array) {
+    if (array?.__$Observable) {
+        return $computed((a, b) => b.includes(a), [this, array]);
+    }
+    return $checker(this, x => array.includes(x));
+};
+
+ObservableItem.prototype.isOneOf = ObservableItem.prototype.isIncludedIn;
+
+ObservableItem.prototype.isHaving = function (key) {
+    if (key?.__$Observable) {
+        return $computed((a, b) => b in Object(a), [this, key]);
+    }
+    return $checker(this, x => key in Object(x));
+};
+
+//
+// to... -> ObservableChecker<any>
+//
+
+ObservableItem.prototype.toUpperCase = function () {
+    return $checker(this, x => String(x).toUpperCase());
+};
+
+ObservableItem.prototype.toLowerCase = function () {
+    return $checker(this, x => String(x).toLowerCase());
+};
+
+ObservableItem.prototype.toTrimmed = function () {
+    return $checker(this, x => String(x).trim());
+};
+
+ObservableItem.prototype.toBoolean = function () {
+    return $checker(this, x => !!x);
+};
+
+ObservableItem.prototype.toLiteral = function (template, placeholder = '${v}') {
+    return $checker(this, x => template.replace(placeholder, x));
+};
+
+ObservableItem.prototype.toFormatted = ObservableItem.prototype.toLiteral;
+
+ObservableItem.prototype.toProperty = function (key) {
+    const keys = key.split('.');
+    return $checker(this, x => {
+        let value = x;
+        for (const k of keys) {
+            if (value == null) return undefined;
+            value = value[k];
+        }
+        return value;
+    });
+};
+
+ObservableItem.prototype.toLength = function () {
+    return $checker(this, x => (x == null ? 0 : x.length));
+};
+
+ObservableItem.prototype.toClamped = function (min, max) {
+    if (min.__$Observable && max.__$Observable) {
+        return $computed((x, a, b) => Math.min(Math.max(x, a), b), [this, min, max]);
+    }
+    if (min.__$Observable) {
+        return $computed((x, a) => Math.min(Math.max(x, a), max), [this, min]);
+    }
+    if (max.__$Observable) {
+        return $computed((x, b) => Math.min(Math.max(x, min), b), [this, max]);
+    }
+    return $checker(this, x => Math.min(Math.max(x, min), max));
+};
+
+ObservableItem.prototype.toPercent = function (total) {
+    if (total?.__$Observable) {
+        return $computed((a, b) => (b === 0 ? 0 : (a / b) * 100), [this, total]);
+    }
+    return $checker(this, x => (total === 0 ? 0 : (x / total) * 100));
+};

package/src/core/elements/anchor/anchor.js

@@ -24,12 +24,12 @@ export default function Anchor(name, isUniqueChild = false) {
     const isParentUniqueChild = isUniqueChild
         ? () => true: (parent) => (parent.firstChild === anchorStart && parent.lastChild === anchorEnd)
 
-    const insertBefore = function(parent, child, target) {
+    const insertBefore = (parent, child, target) => {
         const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
         insertBeforeRaw(parent, childElement, target);
     };
 
-    const insertBeforeRaw = function(parent, child, target) {
+    const insertBeforeRaw = (parent, child, target) => {
         if(parent === anchorFragment) {
             parent.nativeInsertBefore(child, target);
             return;
@@ -129,6 +129,7 @@ export default function Anchor(name, isUniqueChild = false) {
         anchorStart.remove();
         anchorEnd.remove();
     };
+    anchorFragment.delete = anchorFragment.removeWithAnchors;
 
     anchorFragment.replaceContent = function(child) {
         const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);

package/src/core/elements/control/for-each-array.js

@@ -1,19 +1,19 @@
 import Anchor from "../anchor/anchor";
-import {Observable} from "../../data/Observable";
-import Validator from "../../utils/validator";
 import { ElementCreator } from "../../wrappers/ElementCreator";
 import NativeDocumentError from "../../errors/NativeDocumentError";
 
 
 const CREATE_AND_CACHE_ACTIONS = new Set(['clear', 'push', 'unshift', 'replace']);
 
+const SELF_RENDER = (item) => item;
+
 /**
  * Renders items from an ObservableArray with optimized array-specific updates.
  * Provides index observables and handles array mutations efficiently.
  *
  * @param {ObservableArray} data - ObservableArray to iterate over
- * @param {(item: *, index: null|ObservableItem) => NdChild} callback - Function that renders each item (item, indexObservable) => ValidChild
- * @param {Object} [configs={}] - Configuration options
+ * @param {((item: *, index: null|ObservableItem) => NdChild)?} callback - Function that renders each item (item, indexObservable) => ValidChild
+ * @param {Object?} [configs={}] - Configuration options
  * @param {boolean} [configs.shouldKeepItemsInCache] - Whether to cache rendered items
  * @param {boolean} [configs.isParentUniqueChild] - When it's the only child of the parent
  * @returns {AnchorDocumentFragment} Fragment managing the list rendering
@@ -26,6 +26,7 @@ const CREATE_AND_CACHE_ACTIONS = new Set(['clear', 'push', 'unshift', 'replace']
  * items.push(4); // Automatically updates DOM
  */
 export function ForEachArray(data, callback, configs = {}) {
+    callback = callback || SELF_RENDER;
     const element = Anchor('ForEach Array', configs.isParentUniqueChild);
     const blockEnd = element.endElement();
 
@@ -43,21 +44,6 @@ export function ForEachArray(data, callback, configs = {}) {
         return cache.get(item)?.child;
     };
 
-    const updateIndexObservers = (items, startFrom = 0) => {
-        if(!isIndexRequired) {
-            return;
-        }
-        let index = startFrom;
-        for(let i = startFrom, length = items?.length; i < length; i++) {
-            const cacheItem = cache.get(items[i]);
-            if(!cacheItem) {
-                continue;
-            }
-            cacheItem.indexObserver?.set(index);
-            index++;
-        }
-    };
-
     const removeCacheItem = (item, removeChild = true) => {
         const cacheItem = cache.get(item);
         if(!cacheItem) {
@@ -82,8 +68,8 @@ export function ForEachArray(data, callback, configs = {}) {
         return child;
     };
 
-    const createWithIndexAndCache = (item, indexKey) => {
-        const indexObserver = Observable(indexKey);
+    let createWithIndexAndCache = (item, indexKey) => {
+        const indexObserver = data.transform((items) =>  items.indexOf(item));
         const child = ElementCreator.getChild(callback(item, indexObserver));
         if(process.env.NODE_ENV === 'development') {
             if(!child) {
@@ -93,6 +79,18 @@ export function ForEachArray(data, callback, configs = {}) {
         cache.set(item, { child, indexObserver  });
         return child;
     };
+    if(!data.__$Observable) {
+        createWithIndexAndCache = (item, indexKey) => {
+            const child = ElementCreator.getChild(callback(item, indexKey));
+            if(process.env.NODE_ENV === 'development') {
+                if(!child) {
+                    throw new NativeDocumentError("ForEachArray child can't be null or undefined!");
+                }
+            }
+            cache.set(item, { child, indexObserver: null  });
+            return child;
+        };
+    }
 
     const getOrCreate = (item, indexKey) => {
         const cacheItem = cache.get(item);
@@ -148,6 +146,21 @@ export function ForEachArray(data, callback, configs = {}) {
         child.remove();
     };
 
+    let set = null;
+    if(Array.isArray(data)) {
+        set = () => {
+            clear(data);
+            element.appendChildRaw(Actions.toFragment(data));
+        };
+    }
+    else {
+        set = () => {
+            const items = data.val();
+            clear(items);
+            element.appendChildRaw(Actions.toFragment(items));
+        };
+    }
+
     const Actions = {
         toFragment: (items) =>{
             const fragment = document.createDocumentFragment();
@@ -164,11 +177,7 @@ export function ForEachArray(data, callback, configs = {}) {
             clear(items);
             element.appendChildRaw(Actions.toFragment(items));
         },
-        set: () => {
-            const items = data.val();
-            clear(items);
-            element.appendChildRaw(Actions.toFragment(items));
-        },
+        set,
         reOrder: (items) => {
             let child = null;
             const fragment = document.createDocumentFragment();
@@ -217,7 +226,9 @@ export function ForEachArray(data, callback, configs = {}) {
                     }
                 }
             } else {
-                elementBeforeFirst = blockEnd;
+                const indexBefore =  (start - 1 >= 0) ? start - 1 : start;
+                const itemAtStart = data.at(indexBefore);
+                elementBeforeFirst = getItemChild(itemAtStart) || blockEnd.previousSibling;
             }
             garbageFragment.replaceChildren();
 
@@ -266,13 +277,16 @@ export function ForEachArray(data, callback, configs = {}) {
         if(Actions[operations.action]) {
             Actions[operations.action](operations.args, operations.result);
         }
-        updateIndexObservers(items, 0);
     };
 
+    if(Array.isArray(data)) {
+        buildContent(data, null, { action: 'set' });
+        return element;
+    }
+
     if(data.val().length) {
-        buildContent(data.val(), null, {action: null});
+        buildContent(data.val(), null, { action: 'set' });
     }
     data.subscribe(buildContent);
-
     return element;
 }

package/src/core/elements/control/for-each.js

@@ -6,14 +6,16 @@ import {getKey} from "../../utils/helpers";
 import { ElementCreator } from "../../wrappers/ElementCreator";
 import NativeDocumentError from "../../errors/NativeDocumentError";
 
+const SELF_RENDER = (item) => item;
+
 /**
  * Renders a list of items from an observable array or object, automatically updating when data changes.
  * Efficiently manages DOM updates by tracking items with keys.
  *
  * @param {ObservableItem<Array|Object>} data - Observable containing array or object to iterate over
- * @param {(item: *, index: null|ObservableItem) => NdChild} callback - Function that renders each item (item, index) => ValidChild
- * @param {string|Function} [key] - Property name or function to generate unique keys for items
- * @param {Object} [options={}] - Configuration options
+ * @param {((item: *, index: null|ObservableItem) => NdChild)?} callback - Function that renders each item (item, index) => ValidChild
+ * @param {(string|Function)?} [key] - Property name or function to generate unique keys for items
+ * @param {Object?} [options={}] - Configuration options
  * @param {boolean} [options.shouldKeepItemsInCache=false] - Whether to cache rendered items
  * @returns {AnchorDocumentFragment} Fragment managing the list rendering
  * @example
@@ -27,6 +29,7 @@ import NativeDocumentError from "../../errors/NativeDocumentError";
  * ForEach(items, (item) => Div({}, item), (item) => item.id);
  */
 export function ForEach(data, callback, key, { shouldKeepItemsInCache = false } = {}) {
+    callback = callback || SELF_RENDER;
     const element = Anchor('ForEach');
     const blockEnd = element.endElement();
     const blockStart = element.startElement();

package/src/core/elements/control/show-if.js

@@ -19,8 +19,12 @@ import {ElementCreator} from "../../wrappers/ElementCreator";
  * ShowIf(isVisible, Div({}, 'Hello World'));
  */
 export const ShowIf = function(condition, child, { comment = null, shouldKeepInCache = true} = {}) {
-    if(!(Validator.isObservable(condition)) && !Validator.isObservableWhenResult(condition)) {
-        return DebugManager.warn('ShowIf', "ShowIf : condition must be an Observable / "+comment, condition);
+    if(!Validator.isObservable(condition)) {
+        if(typeof condition === "boolean") {
+            return condition ? ElementCreator.getChild(child) : null;
+        }
+
+        return DebugManager.warn('ShowIf', "ShowIf : condition must be an Observable or boolean / "+comment, condition);
     }
     const element = Anchor('Show if : '+(comment || ''));
 
@@ -41,12 +45,13 @@ export const ShowIf = function(condition, child, { comment = null, shouldKeepInC
     if(currentValue) {
         element.appendChild(getChildElement());
     }
-    condition.subscribe(value => {
-        if(value) {
+
+    condition.subscribe((value) => {
+        if(!!value) {
             element.appendChild(getChildElement());
-        } else {
-            element.remove();
+            return;
         }
+        element.remove();
     });
 
     return element;

package/src/core/elements/control/switch.js

@@ -73,6 +73,7 @@ export const Match = function($condition, values, shouldKeepInCache = true) {
         },
         remove(key) {
             shouldKeepInCache && cache.delete(key);
+            $condition.set([...cache.keys()].at(-1) ?? '');
             delete values[key];
         }
     });
@@ -99,7 +100,7 @@ export const Switch = function ($condition, onTrue, onFalse) {
         throw new NativeDocumentError("Toggle : condition must be an Observable");
     }
 
-    return Match($condition, {
+    return Match($condition.toBoolean(), {
         true: onTrue,
         false: onFalse,
     });

package/src/core/elements/index.js

@@ -15,7 +15,7 @@ export * from './list';
 export * from './medias';
 export * from './meta-data';
 export * from './table';
-
+export * from './svg';
 /**
  * Creates an empty `DocumentFragment` wrapper.
  * Useful for grouping elements without adding a DOM node.

package/src/core/elements/svg.js

@@ -0,0 +1,61 @@
+import SvgElementWrapper from "../wrappers/SvgElementWrapper";
+
+export const SvgSvg                 = SvgElementWrapper('svg');
+export const SvgCircle              = SvgElementWrapper('circle');
+export const SvgRect                = SvgElementWrapper('rect');
+export const SvgEllipse             = SvgElementWrapper('ellipse');
+export const SvgLine                = SvgElementWrapper('line');
+export const SvgPolyline            = SvgElementWrapper('polyline');
+export const SvgPolygon             = SvgElementWrapper('polygon');
+export const SvgPath                = SvgElementWrapper('path');
+export const SvgText                = SvgElementWrapper('text');
+export const SvgTSpan               = SvgElementWrapper('tspan');
+export const SvgTextPath            = SvgElementWrapper('textPath');
+export const SvgG                   = SvgElementWrapper('g');
+export const SvgDefs                = SvgElementWrapper('defs');
+export const SvgUse                 = SvgElementWrapper('use');
+export const SvgSymbol              = SvgElementWrapper('symbol');
+export const SvgClipPath            = SvgElementWrapper('clipPath');
+export const SvgMask                = SvgElementWrapper('mask');
+export const SvgMarker              = SvgElementWrapper('marker');
+export const SvgPattern             = SvgElementWrapper('pattern');
+export const SvgImage               = SvgElementWrapper('image');
+export const SvgForeignObject       = SvgElementWrapper('foreignObject');
+export const SvgSwitch              = SvgElementWrapper('switch');
+export const SvgLinearGradient      = SvgElementWrapper('linearGradient');
+export const SvgRadialGradient      = SvgElementWrapper('radialGradient');
+export const SvgStop                = SvgElementWrapper('stop');
+export const SvgFilter              = SvgElementWrapper('filter');
+export const SvgFEBlend             = SvgElementWrapper('feBlend');
+export const SvgFEColorMatrix       = SvgElementWrapper('feColorMatrix');
+export const SvgFEComposite         = SvgElementWrapper('feComposite');
+export const SvgFEFlood             = SvgElementWrapper('feFlood');
+export const SvgFEGaussianBlur      = SvgElementWrapper('feGaussianBlur');
+export const SvgFEMerge             = SvgElementWrapper('feMerge');
+export const SvgFEMergeNode         = SvgElementWrapper('feMergeNode');
+export const SvgFEOffset            = SvgElementWrapper('feOffset');
+export const SvgFETurbulence        = SvgElementWrapper('feTurbulence');
+export const SvgFEDisplacementMap   = SvgElementWrapper('feDisplacementMap');
+export const SvgFEDiffuseLighting   = SvgElementWrapper('feDiffuseLighting');
+export const SvgFESpecularLighting  = SvgElementWrapper('feSpecularLighting');
+export const SvgFEDistantLight      = SvgElementWrapper('feDistantLight');
+export const SvgFEPointLight        = SvgElementWrapper('fePointLight');
+export const SvgFESpotLight         = SvgElementWrapper('feSpotLight');
+export const SvgFEMorphology        = SvgElementWrapper('feMorphology');
+export const SvgFEConvolveMatrix    = SvgElementWrapper('feConvolveMatrix');
+export const SvgFEComponentTransfer = SvgElementWrapper('feComponentTransfer');
+export const SvgFEFuncR             = SvgElementWrapper('feFuncR');
+export const SvgFEFuncG             = SvgElementWrapper('feFuncG');
+export const SvgFEFuncB             = SvgElementWrapper('feFuncB');
+export const SvgFEFuncA             = SvgElementWrapper('feFuncA');
+export const SvgAnimate             = SvgElementWrapper('animate');
+export const SvgAnimateTransform    = SvgElementWrapper('animateTransform');
+export const SvgAnimateMotion       = SvgElementWrapper('animateMotion');
+export const SvgMPath               = SvgElementWrapper('mpath');
+export const SvgSet                 = SvgElementWrapper('set');
+export const SvgDesc                = SvgElementWrapper('desc');
+export const SvgTitle               = SvgElementWrapper('title');
+export const SvgMetadata            = SvgElementWrapper('metadata');
+export const SvgView                = SvgElementWrapper('view');
+export const SvgStyle               = SvgElementWrapper('style');
+export const SvgScript              = SvgElementWrapper('script');

package/src/core/utils/HasEventEmitter.js

@@ -22,10 +22,16 @@ HasEventEmitter.prototype.on = function(eventName, callback) {
 };
 
 HasEventEmitter.prototype.hasListeners = function(eventName) {
+    if(!this.__$events) {
+        return false;
+    }
     return !!this.__$events.get(eventName);
 };
 
 HasEventEmitter.prototype.trigger = async function(eventName, ...args) {
+    if(!this.__$events) {
+        return;
+    }
     const callbacks = this.__$events.get(eventName);
     if(!callbacks) {
         // throw new NativeDocumentError(this.constructor.name, 'Event '+eventName+' not found');

package/src/core/utils/debug-manager.js

@@ -2,11 +2,10 @@ let DebugManager = {};
 
 if(process.env.NODE_ENV === 'development') {
     DebugManager = {
-        enabled: false,
+        enabled: true,
 
         enable() {
-            this.enabled = true;
-            console.log('🔍 NativeDocument Debug Mode enabled');
+            DebugManager.log('🔍 NativeDocument Debug Mode enabled');
         },
 
         disable() {
@@ -14,7 +13,6 @@ if(process.env.NODE_ENV === 'development') {
         },
 
         log(category, message, data) {
-            if (!this.enabled) return;
             console.group(`🔍 [${category}] ${message}`);
             if (data) console.log(data);
             console.trace();
@@ -22,7 +20,6 @@ if(process.env.NODE_ENV === 'development') {
         },
 
         warn(category, message, data) {
-            if (!this.enabled) return;
             console.warn(`⚠️ [${category}] ${message}`, data);
         },
 

package/src/core/utils/filters/standard.js

@@ -1,5 +1,6 @@
 import Validator from "../../utils/validator";
 import { createFilter, createMultiSourceFilter } from "./utils";
+import DebugManager from "../debug-manager";
 
 
 export function equals(observableOrValue){
@@ -70,7 +71,7 @@ export function match(patternObservableOrValue, asRegexObservableOrValue = true,
                     const regex = new RegExp(pattern, flags);
                     return regex.test(String(value));
                 } catch (error){
-                    console.warn('Invalid regex pattern:', pattern, error);
+                    DebugManager.warn('Invalid regex pattern:', pattern, error);
                     return false;
                 }
             }

package/src/core/utils/property-accumulator.js

@@ -2,18 +2,24 @@ import Validator from "./validator";
 
 export const cssPropertyAccumulator = function(initialValue = {}) {
     let data = Validator.isString(initialValue) ? initialValue.split(';').filter(Boolean) : initialValue;
-    const isArray = Validator.isArray(data);
 
     return {
         add(key, value) {
-            if(isArray) {
+            if(Array.isArray(data)) {
                 data.push(key+':  '+value);
                 return;
             }
+            if(Validator.isObject(key)) {
+                value = key;
+                for(const property in value) {
+                    data[property] = value[property];
+                }
+                return;
+            }
             data[key] = value;
         },
         value() {
-            if(isArray) {
+            if(Array.isArray(data)) {
                 return data.join(';').concat(';');
             }
             return { ...data };
@@ -23,18 +29,41 @@ export const cssPropertyAccumulator = function(initialValue = {}) {
 
 export const classPropertyAccumulator = function(initialValue = []) {
     let data = Validator.isString(initialValue) ? initialValue.split(" ").filter(Boolean) : initialValue;
-    const isArray = Validator.isArray(data);
 
     return {
         add(key, value = true) {
-            if(isArray) {
+            if(Validator.isJson(key)) {
+                for(const property in key) {
+                    if(key[property]) {
+                        data[property] = key[property];
+                    }
+                }
+                return;
+            }
+            if(value != null || key.__$Observable) {
+                if(Array.isArray(data)) {
+                    data = data.reduce((acc, item) => {
+                        acc[item] = true;
+                        return acc;
+                    }, {});
+                }
+                if(key.__$Observable) {
+                    const uniqueId = `obs-${Math.random().toString(36).substr(2, 9)}`
+                    data[uniqueId] = key;
+                }
+                else {
+                    data[key] = value;
+                }
+                return;
+            }
+            if(Array.isArray(data)) {
                 data.push(key);
                 return;
             }
             data[key] = value;
         },
         value() {
-            if(isArray) {
+            if(Array.isArray(data)) {
                 return data.join(' ');
             }
             return { ...data };