@onetype/framework 2.0.42 → 2.0.44

package/lib/src/mixins/dom.js

@@ -1,205 +1,208 @@
 const OneTypeDOM =
 {
-    DOMCreate(html)
-    {
-        const wrapper = document.createElement('div');
-        wrapper.innerHTML = html.trim();
-
-        let element;
-
-        if(wrapper.childNodes.length === 1)
-        {
-            element = wrapper.firstChild;
-        }
-        else
-        {
-            element = document.createDocumentFragment();
-            
-            while(wrapper.firstChild)
-            {
-                element.appendChild(wrapper.firstChild);
-            }
-        }
-
-        return element;
-    },
-    
-    DOMPatch(current, target)
-    {
-        if(current === target)
-        {
-            return current;
-        }
-
-        if(!current || !target)
-        {
-            return target;
-        }
-
-        const shouldReplace = current.nodeType !== target.nodeType || (current.nodeType === Node.ELEMENT_NODE && current.nodeName.toUpperCase() !== target.nodeName.toUpperCase());
-
-        if(shouldReplace)
-        {
-            if(current.parentNode)
-            {
-                current.parentNode.replaceChild(target, current);
-                return target;
-            }
-
-            return target;
-        }
-
-        if(current.nodeType === Node.TEXT_NODE)
-        {
-            if(current.textContent !== target.textContent)
-            {
-                current.textContent = target.textContent;
-            }
-
-            return current;
-        }
-
-        if(current.nodeType === Node.ELEMENT_NODE)
-        {
-            const isInput = current.nodeName === 'INPUT' || current.nodeName === 'TEXTAREA' || current.nodeName === 'SELECT';
-            const savedValue = isInput ? current.value : null;
-
-            this.DOMPatchAttributes(current, target);
-            this.DOMPatchChildren(current, target);
-
-            if(isInput && savedValue !== null && !target.hasAttribute('value'))
-            {
-                current.value = savedValue;
-            }
-
-            for(const key in target)
-            {
-                if(key.startsWith('ot') && typeof target[key] === 'function')
-                {
-                    current[key] = target[key];
-                }
-            }
-        }
-
-        return current;
-    },
-    
-    DOMPatchAttributes(current, target)
-    {
-        for(let i = 0; i < target.attributes.length; i++)
-        {
-            const attr = target.attributes[i];
-
-            if(current.getAttribute(attr.name) !== attr.value)
-            {
-                current.setAttribute(attr.name, attr.value);
-            }
-        }
-
-        for(let i = current.attributes.length - 1; i >= 0; i--)
-        {
-            const attr = current.attributes[i];
-
-            if(!target.hasAttribute(attr.name))
-            {
-                current.removeAttribute(attr.name);
-            }
-        }
-    },
-
-    DOMPatchChildren(current, target)
-    {
-        const isWhitespace = (node) => node.nodeType === Node.TEXT_NODE && !node.textContent.trim();
-
-        const currentChildren = Array.from(current.childNodes).filter(n => !isWhitespace(n));
-        const targetChildren = Array.from(target.childNodes).filter(n => !isWhitespace(n));
-
-        const getKey = (node) => node.nodeType === Node.ELEMENT_NODE && node.getAttribute('ot-key');
-        const hasKeys = targetChildren.some(n => getKey(n));
-
-        const currentByKey = hasKeys ? new Map() : null;
-
-        if(currentByKey)
-        {
-            currentChildren.forEach(child =>
-            {
-                const key = getKey(child);
-
-                if(key)
-                {
-                    currentByKey.set(key, child);
-                }
-            });
-        }
-
-        const maxLength = Math.max(currentChildren.length, targetChildren.length);
-
-        for(let i = 0; i < maxLength; i++)
-        {
-            const targetChild = targetChildren[i];
-            let currentChild = currentChildren[i];
-
-            if(!targetChild)
-            {
-                current.removeChild(currentChild);
-                continue;
-            }
-
-            if(!currentChild)
-            {
-                current.appendChild(targetChild);
-                continue;
-            }
-
-            const targetKey = targetChild && getKey(targetChild);
-            const match = targetKey && currentByKey && currentByKey.get(targetKey);
-
-            if(match && match !== currentChild)
-            {
-                current.insertBefore(match, currentChild);
-                this.DOMPatch(match, targetChild);
-            }
-            else
-            {
-                this.DOMPatch(currentChild, targetChild);
-            }
-        }
-    },
-    
-    DOMWalk(element, callback, depth = 0)
-    {
-        if(callback(element, depth) === false)
-        {
-            return;
-        }
-
-        if(element.childNodes)
-        {
-            for(let i = 0; i < element.childNodes.length; i++)
-            {
-                this.DOMWalk(element.childNodes[i], callback, depth + 1);
-            }
-        }
-    },
-
-    DOMObserve(element, options = {}, callback)
-    {
-        const observer = new MutationObserver(mutations =>
-        {
-            callback && callback(mutations);
-        });
-
-        observer.observe(element, {
-            childList: options.children !== false,
-            attributes: options.attributes !== false,
-            characterData: options.text !== false,
-            subtree: options.subtree !== false,
-            attributeOldValue: options.attributeOldValue !== false,
-            characterDataOldValue: options.textOldValue !== false
-        });
-
-        return observer;
-    }
+	DOMCreate(html)
+	{
+		const wrapper = document.createElement('div');
+
+		wrapper.innerHTML = html.trim();
+
+		if(wrapper.childNodes.length === 1)
+		{
+			return wrapper.firstChild;
+		}
+
+		const fragment = document.createDocumentFragment();
+
+		while(wrapper.firstChild)
+		{
+			fragment.appendChild(wrapper.firstChild);
+		}
+
+		return fragment;
+	},
+
+	DOMKey(node)
+	{
+		if(node.nodeType !== Node.ELEMENT_NODE)
+		{
+			return null;
+		}
+
+		return node.__otExternal?.key || node.getAttribute('ot-key') || null;
+	},
+
+	DOMChildren(node)
+	{
+		return Array.from(node.childNodes).filter(child => child.nodeType !== Node.TEXT_NODE || child.textContent.trim());
+	},
+
+	DOMReplace(current, target)
+	{
+		if(current.parentNode)
+		{
+			current.parentNode.replaceChild(target, current);
+		}
+
+		return target;
+	},
+
+	DOMPatch(current, target)
+	{
+		if(current === target || !current || !target)
+		{
+			return current || target;
+		}
+
+		if(this.DOMExternal(current, target))
+		{
+			return current;
+		}
+
+		if(target.__otExternal || current.nodeType !== target.nodeType || current.nodeName !== target.nodeName)
+		{
+			return this.DOMReplace(current, target);
+		}
+
+		if(current.nodeType === Node.TEXT_NODE)
+		{
+			if(current.textContent !== target.textContent)
+			{
+				current.textContent = target.textContent;
+			}
+
+			return current;
+		}
+
+		if(current.nodeType === Node.ELEMENT_NODE)
+		{
+			this.DOMPatchAttributes(current, target);
+			this.DOMPatchChildren(current, target);
+			this.DOMPatchHandlers(current, target);
+		}
+
+		return current;
+	},
+
+	DOMExternal(current, target)
+	{
+		if(!current.__otExternal || !target.__otExternal)
+		{
+			return false;
+		}
+
+		const a = current.__otExternal;
+		const b = target.__otExternal;
+
+		if(a.name !== b.name || a.key !== b.key)
+		{
+			return false;
+		}
+
+		if(a.render && b.data)
+		{
+			a.render.UpdateData(b.data);
+		}
+
+		return true;
+	},
+
+	DOMPatchAttributes(current, target)
+	{
+		for(const attr of target.attributes)
+		{
+			if(current.getAttribute(attr.name) !== attr.value)
+			{
+				current.setAttribute(attr.name, attr.value);
+			}
+		}
+
+		for(let i = current.attributes.length - 1; i >= 0; i--)
+		{
+			const name = current.attributes[i].name;
+
+			if(!target.hasAttribute(name))
+			{
+				current.removeAttribute(name);
+			}
+		}
+	},
+
+	DOMPatchChildren(current, target)
+	{
+		const children = this.DOMChildren(current);
+		const targets = this.DOMChildren(target);
+		const map = new Map();
+
+		for(const child of children)
+		{
+			const key = this.DOMKey(child);
+
+			if(key)
+			{
+				map.set(key, child);
+			}
+		}
+
+		const length = Math.max(children.length, targets.length);
+
+		for(let i = 0; i < length; i++)
+		{
+			const child = children[i];
+			const goal = targets[i];
+
+			if(!goal)
+			{
+				current.removeChild(child);
+				continue;
+			}
+
+			if(!child)
+			{
+				current.appendChild(goal);
+				continue;
+			}
+
+			const key = this.DOMKey(goal);
+			const match = key && map.get(key);
+
+			if(match && match !== child)
+			{
+				current.insertBefore(match, child);
+				this.DOMPatch(match, goal);
+			}
+			else
+			{
+				this.DOMPatch(child, goal);
+			}
+		}
+	},
+
+	DOMPatchHandlers(current, target)
+	{
+		for(const key in target)
+		{
+			if(key.startsWith('ot') && typeof target[key] === 'function')
+			{
+				current[key] = target[key];
+			}
+		}
+	},
+
+	DOMWalk(element, callback, depth = 0)
+	{
+		if(callback(element, depth) === false)
+		{
+			return;
+		}
+
+		if(element.childNodes)
+		{
+			for(let i = 0; i < element.childNodes.length; i++)
+			{
+				this.DOMWalk(element.childNodes[i], callback, depth + 1);
+			}
+		}
+	}
 };
 
-export default OneTypeDOM;
+export default OneTypeDOM;

package/lib/src/mixins/emitter.js

@@ -2,35 +2,38 @@ const OneTypeEmitter =
 {
     Emit(name, ...args)
     {
-        name = name.toLowerCase();
+        const listeners = this.emitters[name];
 
-        if(!(name in this.emitters))
+        if(!listeners || !listeners.length)
         {
-            return;
+            return false;
         }
 
-        this.emitters[name].forEach(emitter =>
+        for(let i = 0; i < listeners.length; i++)
         {
+            const emitter = listeners[i];
+
             try
             {
                 emitter.callback(...args);
 
-                if (emitter.once)
+                if(emitter.once)
                 {
-                    this.EmitOff(name, emitter.id);
+                    listeners.splice(i, 1);
+                    i--;
                 }
             }
             catch(error)
             {
-                this.LogError(`Error in emitter callback.`, {name}, error);
+                this.Error(500, 'Error in emitter callback.', {name});
             }
-        });
+        }
+
+        return true;
     },
 
     EmitOn(name, callback)
     {
-        name = name.toLowerCase();
-
         if(!this.emitters[name])
         {
             this.emitters[name] = [];
@@ -45,8 +48,6 @@ const OneTypeEmitter =
 
     EmitOnce(name, callback)
     {
-        name = name.toLowerCase();
-
         if(!this.emitters[name])
         {
             this.emitters[name] = [];
@@ -61,8 +62,6 @@ const OneTypeEmitter =
 
     EmitOff(name, id)
     {
-        name = name.toLowerCase();
-
         if(!(name in this.emitters))
         {
             return;

package/lib/src/mixins/error.js

@@ -4,9 +4,22 @@ const OneTypeError =
 {
     Error(code, message, context)
     {
+        if(context && typeof context === 'object')
+        {
+            for(const [key, value] of Object.entries(context))
+            {
+                message = message.replace(':' + key + ':', value);
+            }
+        }
+
         const error = new OneTypeErrorClass(code, message, context);
 
-        this.Emit('error', error);
+        if(!this.emitting)
+        {
+            this.emitting = true;
+            this.Emit('@error', error);
+            this.emitting = false;
+        }
 
         return error;
     }

package/lib/src/mixins/function.js

@@ -27,6 +27,7 @@ const OneTypeFunction =
         }
         catch (error)
         {
+            this.Error(500, 'Function error on :expression:.', {expression});
             return undefined;
         }
     },

package/lib/src/mixins/generate.js

@@ -15,7 +15,7 @@ const OneTypeGenerate =
 
     GenerateUID()
     {
-        return Math.random().toString(36).slice(2, 11);
+        return Date.now().toString(36) + Math.random().toString(36).slice(2, 8);
     },
 
     GenerateString(length = 10, charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789')

package/lib/src/mixins/helper.js

@@ -133,39 +133,11 @@ const OneTypeHelper =
         }, {});
     },
     
-    HelperDeepClone(obj)
+    HelperDeepClone(value)
     {
-        if(obj === null || typeof obj !== 'object')
-        {
-            return obj;
-        }
-        
-        if(obj instanceof Date)
-        {
-            return new Date(obj);
-        }
-        
-        if(obj instanceof Array)
-        {
-            return obj.map(item => this.HelperDeepClone(item));
-        }
-        
-        if(obj instanceof Object)
-        {
-            const clone = {};
-            
-            for(const key in obj)
-            {
-                if(obj.hasOwnProperty(key))
-                {
-                    clone[key] = this.HelperDeepClone(obj[key]);
-                }
-            }
-            
-            return clone;
-        }
+        return structuredClone(value);
     },
-    
+
     HelperDeepMerge(target, ...sources)
     {
         if(!sources.length) return target;