divhunt 2.0.19 → 2.0.20

package/addons/core/commands/front/directives/submit.js

@@ -82,17 +82,21 @@ divhunt.AddonReady('directives', function()
 						event.stopPropagation();
 					}
 
-					await methods.submit();
+					const form = event.target.closest('form') || event.target;
+
+					await methods.submit(form);
 				};
 			};
 
-			methods.submit = async () =>
+			methods.submit = async (form) =>
 			{
 				if(compile.data[config.bind].loading)
 				{
 					return;
 				}
 
+				const formData = divhunt.FormGet(form);
+
 				compile.data[config.bind].loading = true;
 				compile.data[config.bind].error = null;
 
@@ -100,7 +104,6 @@ divhunt.AddonReady('directives', function()
 
 				try
 				{
-					const formData = divhunt.FormGet(config.form);
 					const result = config.api
 						? await commands.Fn('api', config.command, formData)
 						: await commands.Fn('run', config.command, formData);
@@ -119,7 +122,7 @@ divhunt.AddonReady('directives', function()
 					compile.data[config.bind].error    = null;
 					compile.data[config.bind].loading  = false;
 
-					config.reset && config.form.reset();
+					config.reset && form.reset();
 					config.onSuccess && config.onSuccess(compile.data[config.bind]);
 				}
 				catch(error)

package/addons/render/directives/front/js/functions/process/data.js

@@ -52,7 +52,7 @@ directives.Fn('process.data', function(attributes, node, compile)
         {
             try 
             {
-                attribute.value = divhunt.Function(attribute.value, compile, false);
+                attribute.value = divhunt.Function(attribute.value, compile.data, false);
             }
             catch(error)
             {

package/addons/render/directives/front/js/items/100-if.js

@@ -17,7 +17,8 @@ directives.ItemAdd({
 
         if (!result)
         {
-            node.remove();
+            const placeholder = document.createComment('dh-if:' + identifier);
+            node.replaceWith(placeholder);
             return false;
         }
     }

package/addons/render/directives/front/js/items/200-for.js

@@ -57,10 +57,18 @@ directives.ItemAdd({
                 loopData[forIndex] = index;
 
                 const compiled = item.Compile(html, loopData);
+                const key = divhunt.GenerateHash(typeof value === 'object' ? JSON.stringify(value) : String(value));
 
                 while(compiled.element.firstChild)
                 {
-                    fragment.appendChild(compiled.element.firstChild);
+                    const child = compiled.element.firstChild;
+
+                    if(child.nodeType === Node.ELEMENT_NODE)
+                    {
+                        child.setAttribute('dh-key', key);
+                    }
+
+                    fragment.appendChild(child);
                 }
             });
 

package/addons/render/directives/front/js/items/660-form.js

@@ -144,13 +144,13 @@ directives.ItemAdd({
 		methods.submit = async () =>
 		{
 			const state = compile.data[config.bind];
+			const formData = methods.extract();
 
 			state.loading = true;
 			state.error = null;
 
 			try
 			{
-				const formData = methods.extract();
 				const submitData = Object.assign({}, formData, config.data);
 				const response = await methods.fetch(submitData);
 

package/addons/render/pages/core/load.js

@@ -1,3 +1,9 @@
+import divhunt from '#framework/load.js';
 import pages from './addon.js';
 
+divhunt.$dh.page = function(route, parameters = {})
+{
+	return pages.Fn('change', route, parameters, { path: true });
+};
+
 export default pages;

package/lib/src/classes/addon/classes/render/class.js

@@ -15,7 +15,7 @@ class DivhuntAddonRender
         this.Callback = callback;
 
         this._updateTimeout = null;
-        this.Data = { state: window.__STATE__ || {} };
+        this.Data = { state: addon.divhunt.StateGet() };
         this.Attributes = {};
         this.Item = null;
         this.Slots = {};

package/lib/src/classes/addon/classes/render/mixins/compile.js

@@ -52,20 +52,11 @@ const RenderCompile =
 
         compile.nodes[identifier] = node;
 
-        const originalRemove = node.remove;
-        let wasRemoved = false;
-
-        node.remove = function()
-        {
-            wasRemoved = true;
-            originalRemove.call(this);
-        };
+        const parent = node.parentNode;
 
         this.GetDivhunt().Emit('addon.render.compile.node', this, compile, node, identifier);
 
-        node.remove = originalRemove;
-
-        if(wasRemoved)
+        if(node.parentNode !== parent)
         {
             return;
         }

package/lib/src/classes/addon/classes/render/mixins/methods.js

@@ -178,7 +178,6 @@ const RenderMethods =
         return this.EventOn('resize', callback);
     },
     
-    
     OnError(callback)
     {
         return this.EventOn('error', callback);

package/lib/src/classes/addon/classes/render/mixins/set.js

@@ -2,7 +2,7 @@ const RenderSet =
 {
     SetData(data)
     {
-        this.Data = Object.assign({ state: window.__STATE__ || {} }, data);
+        this.Data = Object.assign({ state: this.GetDivhunt().StateGet() }, data);
         return this;
     },
 

package/lib/src/divhunt.js

@@ -18,6 +18,7 @@ import DivhuntError from './mixins/error.js';
 import DivhuntCrypto from './mixins/crypto.js';
 import DivhuntForm from './mixins/form.js';
 import DivhuntCookie from './mixins/cookie.js';
+import DivhuntState from './mixins/state.js';
 
 class Divhunt
 {
@@ -89,5 +90,6 @@ Object.assign(Divhunt.prototype, DivhuntError);
 Object.assign(Divhunt.prototype, DivhuntCrypto);
 Object.assign(Divhunt.prototype, DivhuntForm);
 Object.assign(Divhunt.prototype, DivhuntCookie);
+Object.assign(Divhunt.prototype, DivhuntState);
 
 export default Divhunt;

package/lib/src/mixins/dom.js

@@ -61,9 +61,17 @@ const DivhuntDOM =
 
         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('dh') && typeof target[key] === 'function')
@@ -101,27 +109,78 @@ const DivhuntDOM =
 
     DOMPatchChildren(current, target)
     {
-        const currentChildren = Array.from(current.childNodes);
-        const targetChildren = Array.from(target.childNodes);
+        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 maxLength = Math.max(currentChildren.length, targetChildren.length);
+        const getKey = (node) => node.nodeType === Node.ELEMENT_NODE && node.getAttribute('dh-key');
+        const hasKeys = targetChildren.some(n => getKey(n));
 
-        for(let i = 0; i < maxLength; i++)
+        if(hasKeys)
         {
-            const currentChild = currentChildren[i];
-            const targetChild = targetChildren[i];
+            const currentByKey = new Map();
 
-            if(!targetChild)
+            currentChildren.forEach(child =>
             {
-                current.removeChild(currentChild);
-            }
-            else if(!currentChild)
+                const key = getKey(child);
+
+                if(key)
+                {
+                    currentByKey.set(key, child);
+                }
+            });
+
+            const used = new Set();
+
+            targetChildren.forEach(targetChild =>
             {
-                current.appendChild(targetChild);
-            }
-            else
+                const key = getKey(targetChild);
+                const match = key && currentByKey.get(key);
+
+                if(match)
+                {
+                    used.add(key);
+                    current.appendChild(match);
+                    this.DOMPatch(match, targetChild);
+                }
+                else
+                {
+                    current.appendChild(targetChild);
+                }
+            });
+
+            currentChildren.forEach(child =>
+            {
+                const key = getKey(child);
+
+                if(key && !used.has(key) && child.parentNode === current)
+                {
+                    current.removeChild(child);
+                }
+            });
+        }
+        else
+        {
+            const maxLength = Math.max(currentChildren.length, targetChildren.length);
+
+            for(let i = 0; i < maxLength; i++)
             {
-                this.DOMPatch(currentChild, targetChild);
+                const currentChild = currentChildren[i];
+                const targetChild = targetChildren[i];
+
+                if(!targetChild)
+                {
+                    current.removeChild(currentChild);
+                }
+                else if(!currentChild)
+                {
+                    current.appendChild(targetChild);
+                }
+                else
+                {
+                    this.DOMPatch(currentChild, targetChild);
+                }
             }
         }
     },

package/lib/src/mixins/state.js

@@ -0,0 +1,38 @@
+const DivhuntState =
+{
+    StateGet(key)
+    {
+        const state = this.environment === 'front' ? window.__STATE__ : global.__STATE__;
+
+        if(!state)
+        {
+            return key ? undefined : {};
+        }
+
+        return key ? state[key] : state;
+    },
+
+    StateSet(key, value)
+    {
+        if(this.environment === 'front')
+        {
+            if(!window.__STATE__)
+            {
+                window.__STATE__ = {};
+            }
+
+            window.__STATE__[key] = value;
+        }
+        else
+        {
+            if(!global.__STATE__)
+            {
+                global.__STATE__ = {};
+            }
+
+            global.__STATE__[key] = value;
+        }
+    }
+};
+
+export default DivhuntState;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "divhunt",
-    "version": "2.0.19",
+    "version": "2.0.20",
     "description": "Full-stack isomorphic JavaScript framework built from scratch. One addon abstraction powers databases, servers, commands, pages, directives, queues, and more.",
     "type": "module",
     "main": "lib/load.js",