nexa-runtime 0.7.0 → 0.7.2

package/dist/index.js

@@ -19,7 +19,10 @@ export function mount(vnode, containerOrSelector) {
         ? domOptions.querySelector(containerOrSelector)
         : containerOrSelector;
     if (!container) {
-        throw new Error(`Target container not found: ${containerOrSelector}`);
+        const selector = typeof containerOrSelector === 'string' ? containerOrSelector : String(containerOrSelector);
+        throw new Error(`Target container not found: "${selector}". ` +
+            `Make sure the element exists in the DOM before calling mount(). ` +
+            `Use mount(vnode, document.getElementById('app')) or ensure your HTML has <${selector.replace(/^[#.]/, '')}>.`);
     }
     return baseMount(vnode, container, domOptions);
 }

package/dist/vdom/diff.js

@@ -85,10 +85,68 @@ function diffProps(oldV, newV) {
 function diffChildren(oldV, newV, container, patches) {
     const oldChildren = (oldV.children ?? []);
     const newChildren = (newV.children ?? []);
-    const maxLen = Math.max(oldChildren.length, newChildren.length);
+    const oldKeyMap = new Map();
+    const oldKeyIdx = new Map();
+    const oldUnkeyed = [];
+    for (let i = 0; i < oldChildren.length; i++) {
+        const child = oldChildren[i];
+        if (child.key != null) {
+            oldKeyMap.set(child.key, child);
+            oldKeyIdx.set(child.key, i);
+        }
+        else {
+            oldUnkeyed.push(child);
+        }
+    }
+    const matchedKeys = new Set();
+    const newUnkeyed = [];
+    for (let newIdx = 0; newIdx < newChildren.length; newIdx++) {
+        const newChild = newChildren[newIdx];
+        if (newChild.key != null) {
+            if (oldKeyMap.has(newChild.key)) {
+                const oldChild = oldKeyMap.get(newChild.key);
+                matchedKeys.add(newChild.key);
+                const oldIdx = oldKeyIdx.get(newChild.key);
+                if (oldIdx !== newIdx) {
+                    patches.push({
+                        type: 'replace',
+                        oldVNode: oldChild,
+                        newVNode: newChild,
+                        parent: container,
+                        anchor: null,
+                    });
+                }
+                else {
+                    diffVNode(oldChild, newChild, container, patches);
+                }
+            }
+            else {
+                patches.push({
+                    type: 'create',
+                    newVNode: newChild,
+                    parent: container,
+                    anchor: null,
+                });
+            }
+        }
+        else {
+            newUnkeyed.push(newChild);
+        }
+    }
+    for (const oldChild of oldChildren) {
+        if (oldChild.key != null && !matchedKeys.has(oldChild.key)) {
+            patches.push({
+                type: 'remove',
+                oldVNode: oldChild,
+                parent: container,
+                anchor: null,
+            });
+        }
+    }
+    const maxLen = Math.max(oldUnkeyed.length, newUnkeyed.length);
     for (let i = 0; i < maxLen; i++) {
-        const oldChild = oldChildren[i];
-        const newChild = newChildren[i];
+        const oldChild = oldUnkeyed[i];
+        const newChild = newUnkeyed[i];
         if (!oldChild && newChild) {
             patches.push({
                 type: 'create',

package/dist/vdom/dom.js

@@ -94,6 +94,10 @@ export const domOptions = {
         else if (key === 'htmlFor') {
             el.setAttribute('for', String(nextValue));
         }
+        else if (key === 'ref') {
+            if (typeof nextValue === 'function')
+                nextValue(el);
+        }
         else if (typeof nextValue === 'boolean') {
             if (nextValue)
                 el.setAttribute(key, '');

package/dist/vdom/hmr.js

@@ -23,14 +23,63 @@ export function unregisterInstance(instance) {
         instances.delete(instance);
     }
 }
+function deepClonePreservingSignals(obj) {
+    if (!obj || typeof obj !== 'object')
+        return obj;
+    if (Array.isArray(obj))
+        return obj.map(deepClonePreservingSignals);
+    const clone = {};
+    for (const key in obj) {
+        const val = obj[key];
+        if (val && typeof val === 'object' && 'value' in val && typeof val.peek === 'function') {
+            clone[key] = val;
+        }
+        else if (val && typeof val === 'object' && 'peek' in val) {
+            clone[key] = val;
+        }
+        else {
+            clone[key] = deepClonePreservingSignals(val);
+        }
+    }
+    return clone;
+}
 export function reloadComponent(id, newComp) {
     const instances = componentInstances.get(id);
     if (!instances)
         return;
     for (const instance of instances) {
-        // Update the component definition
-        instance.component.render = newComp.render;
-        // Trigger update
+        const hasNewSetup = typeof newComp.setup === 'function';
+        const hasNewRender = typeof newComp.render === 'function';
+        if (hasNewSetup && instance.component.setup) {
+            const oldPropsValue = deepClonePreservingSignals(instance.props.value);
+            instance.component.setup = newComp.setup;
+            instance.component.render = newComp.render;
+            if (instance.slots) {
+                const slotsCtx = {
+                    emit: (event, ...args) => {
+                        const key = `on${event[0].toUpperCase()}${event.slice(1)}`;
+                        const resolvedProps = instance.props.value;
+                        const handler = resolvedProps?.[key];
+                        if (handler)
+                            handler(...args);
+                    },
+                    slots: instance.slots.value,
+                };
+                const propsProxy = new Proxy({}, {
+                    get(_, key) {
+                        const val = instance.props.value[key];
+                        return val !== undefined ? val : oldPropsValue[key];
+                    },
+                });
+                const newSetupState = newComp.setup(propsProxy, slotsCtx);
+                if (typeof newSetupState === 'object' && newSetupState !== null) {
+                    instance.setupState = newSetupState;
+                }
+            }
+        }
+        else if (hasNewRender) {
+            instance.component.render = newComp.render;
+        }
         if (instance.update && typeof instance.update.run === 'function') {
             instance.update.run();
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nexa-runtime",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -13,7 +13,7 @@
     }
   },
   "dependencies": {
-    "nexa-reactivity": "0.7.0"
+    "nexa-reactivity": "0.7.2"
   },
   "files": [
     "dist"