Merge branch 'build/v2' into v2-merge-main

Author: wmertens

.changeset/cyan-bottles-speak.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: creating error overlay

.changeset/dirty-lemons-shop.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: reexecute component with null key

.changeset/fluffy-poets-raise.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: custom event names and DOMContentLoaded handling

.changeset/heavy-kids-wave.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: rendering markdown file with Qwik component

.changeset/tame-glasses-explain.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: inserting new node edge case

packages/docs/src/routes/api/qwik-testing/api.json

@@ -209,7 +209,7 @@
         }
       ],
       "kind": "Function",
-      "content": "Trigger an event in unit tests on an element.\n\nFuture deprecation candidate.\n\n\n```typescript\nexport declare function trigger(root: Element, queryOrElement: string | Element | keyof HTMLElementTagNameMap | null, eventNameCamel: string, eventPayload?: any): Promise<void>;\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nroot\n\n\n</td><td>\n\nElement\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\nqueryOrElement\n\n\n</td><td>\n\nstring \\| Element \\| keyof HTMLElementTagNameMap \\| null\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\neventNameCamel\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\neventPayload\n\n\n</td><td>\n\nany\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n</tbody></table>\n**Returns:**\n\nPromise&lt;void&gt;",
+      "content": "Trigger an event in unit tests on an element.\n\nFuture deprecation candidate.\n\n\n```typescript\nexport declare function trigger(root: Element, queryOrElement: string | Element | keyof HTMLElementTagNameMap | null, eventName: string, eventPayload?: any): Promise<void>;\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nroot\n\n\n</td><td>\n\nElement\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\nqueryOrElement\n\n\n</td><td>\n\nstring \\| Element \\| keyof HTMLElementTagNameMap \\| null\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\neventName\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\neventPayload\n\n\n</td><td>\n\nany\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n</tbody></table>\n**Returns:**\n\nPromise&lt;void&gt;",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/testing/element-fixture.ts",
       "mdFile": "core.trigger.md"
     },

packages/docs/src/routes/api/qwik-testing/index.md

@@ -499,7 +499,7 @@ Future deprecation candidate.
 export declare function trigger(
   root: Element,
   queryOrElement: string | Element | keyof HTMLElementTagNameMap | null,
-  eventNameCamel: string,
+  eventName: string,
   eventPayload?: any,
 ): Promise<void>;
 ```
@@ -541,7 +541,7 @@ string \| Element \| keyof HTMLElementTagNameMap \| null
 </td></tr>
 <tr><td>
 
-eventNameCamel
+eventName
 
 </td><td>
 

packages/qwik/src/core/client/dom-container.ts

@@ -200,15 +200,19 @@ export class DomContainer extends _SharedContainer implements IClientContainer {
         }
         errorDiv.setAttribute('q:key', '_error_');
         const journal: VNodeJournal = [];
-        vnode_getDOMChildNodes(journal, vHost).forEach((child) => errorDiv.appendChild(child));
-        const vErrorDiv = vnode_newElement(errorDiv, 'error-host');
+
+        const vErrorDiv = vnode_newElement(errorDiv, 'errored-host');
+
+        vnode_getDOMChildNodes(journal, vHost, true).forEach((child) => {
+          vnode_insertBefore(journal, vErrorDiv, child, null);
+        });
         vnode_insertBefore(journal, vHost, vErrorDiv, null);
         vnode_applyJournal(journal);
       }
 
       if (err && err instanceof Error) {
         if (!('hostElement' in err)) {
-          (err as any)['hostElement'] = host;
+          (err as any)['hostElement'] = String(host);
         }
       }
       if (!isRecoverable(err)) {

packages/qwik/src/core/client/vnode-diff.ts

@@ -34,11 +34,11 @@ import {
 import { isPromise } from '../shared/utils/promises';
 import { type ValueOrPromise } from '../shared/utils/types';
 import {
-  convertEventNameFromJsxPropToHtmlAttr,
-  getEventNameFromJsxProp,
-  getEventNameScopeFromJsxProp,
+  getEventNameFromJsxEvent,
+  getEventNameScopeFromJsxEvent,
   isHtmlAttributeAnEventName,
   isJsxPropertyAnEventName,
+  jsxEventToHtmlAttribute,
 } from '../shared/utils/event-names';
 import { ChoreType } from '../shared/util-chore-type';
 import { hasClassAttr } from '../shared/utils/scoped-styles';
@@ -491,21 +491,6 @@ export const vnode_diff = (
       // All is good.
       // console.log('  NOOP', String(vCurrent));
     } else {
-      const parent = vnode_getParent(vProjectedNode);
-      const isAlreadyProjected =
-        !!parent && !(vnode_isElementVNode(parent) && vnode_getElementName(parent) === QTemplate);
-      if (isAlreadyProjected && vParent !== parent) {
-        /**
-         * The node is already projected, but structure has been changed. In next steps we will
-         * insert the vProjectedNode at the end. However we will find existing projection elements
-         * (from already projected THE SAME projection as vProjectedNode!) during
-         * vnode_insertBefore. We need to remove vnode from the vnode tree to avoid referencing it
-         * to self and cause infinite loop. Don't remove it from DOM to avoid additional operations
-         * and flickering.
-         */
-        vnode_remove(journal, parent, vProjectedNode, false);
-      }
-
       // move from q:template to the target node
       vnode_insertBefore(
         journal,
@@ -610,8 +595,8 @@ export const vnode_diff = (
         if (isJsxPropertyAnEventName(key)) {
           // So for event handlers we must add them to the vNode so that qwikloader can look them up
           // But we need to mark them so that they don't get pulled into the diff.
-          const eventName = getEventNameFromJsxProp(key);
-          const scope = getEventNameScopeFromJsxProp(key);
+          const eventName = getEventNameFromJsxEvent(key);
+          const scope = getEventNameScopeFromJsxEvent(key);
           if (eventName) {
             vnode_setProp(
               vNewNode as ElementVNode,
@@ -625,7 +610,7 @@ export const vnode_diff = (
             // add an event attr with empty value for qwikloader element selector.
             // We don't need value here. For ssr this value is a QRL,
             // but for CSR value should be just empty
-            const htmlEvent = convertEventNameFromJsxPropToHtmlAttr(key);
+            const htmlEvent = jsxEventToHtmlAttribute(key);
             if (htmlEvent) {
               vnode_setAttr(journal, vNewNode as ElementVNode, htmlEvent, '');
             }
@@ -843,8 +828,8 @@ export const vnode_diff = (
     };
 
     const recordJsxEvent = (key: string, value: any) => {
-      const eventName = getEventNameFromJsxProp(key);
-      const scope = getEventNameScopeFromJsxProp(key);
+      const eventName = getEventNameFromJsxEvent(key);
+      const scope = getEventNameScopeFromJsxEvent(key);
       if (eventName) {
         record(':' + scope + ':' + eventName, value);
         // register an event for qwik loader
@@ -855,7 +840,7 @@ export const vnode_diff = (
         // add an event attr with empty value for qwikloader element selector.
         // We don't need value here. For ssr this value is a QRL,
         // but for CSR value should be just empty
-        const htmlEvent = convertEventNameFromJsxPropToHtmlAttr(key);
+        const htmlEvent = jsxEventToHtmlAttribute(key);
         if (htmlEvent) {
           record(htmlEvent, '');
         }
@@ -999,7 +984,7 @@ export const vnode_diff = (
   }
 
   function expectVirtual(type: VirtualType, jsxKey: string | null) {
-    if (vCurrent && vnode_isVirtualVNode(vCurrent) && getKey(vCurrent) === jsxKey) {
+    if (vCurrent && vnode_isVirtualVNode(vCurrent) && getKey(vCurrent) === jsxKey && !!jsxKey) {
       // All is good.
       return;
     } else if (jsxKey !== null) {
@@ -1058,7 +1043,7 @@ export const vnode_diff = (
         }
         host = vNewNode as VirtualVNode;
         shouldRender = true;
-      } else if (!hashesAreEqual) {
+      } else if (!hashesAreEqual || !jsxNode.key) {
         insertNewComponent(host, componentQRL, jsxProps);
         host = vNewNode as VirtualVNode;
         shouldRender = true;

packages/qwik/src/core/client/vnode.ts

@@ -965,11 +965,29 @@ export const vnode_insertBefore = (
   if (vnode_isElementVNode(parent)) {
     ensureMaterialized(parent);
   }
+  const newChildCurrentParent = newChild[VNodeProps.parent];
   if (newChild === insertBefore) {
     // invalid insertBefore. We can't insert before self reference
     // prevent infinity loop and putting self reference to next sibling
-    insertBefore = null;
+    if (newChildCurrentParent) {
+      // early return, as the newChild is already in the tree and we are already in the correct position
+      return;
+    } else {
+      // if the newChild is not in the tree, than we insert it at the end of the list
+      insertBefore = null;
+    }
+  }
+
+  // ensure that the previous node is unlinked.
+  if (
+    newChildCurrentParent &&
+    (newChild[VNodeProps.previousSibling] ||
+      newChild[VNodeProps.nextSibling] ||
+      newChildCurrentParent !== parent)
+  ) {
+    vnode_remove(journal, newChildCurrentParent, newChild, false);
   }
+
   let adjustedInsertBefore: VNode | null = null;
   if (insertBefore == null) {
     if (vnode_isVirtualVNode(parent)) {
@@ -1013,17 +1031,6 @@ export const vnode_insertBefore = (
       );
   }
 
-  // ensure that the previous node is unlinked.
-  const newChildCurrentParent = newChild[VNodeProps.parent];
-  if (
-    newChildCurrentParent &&
-    (newChild[VNodeProps.previousSibling] ||
-      newChild[VNodeProps.nextSibling] ||
-      (vnode_isElementVNode(newChildCurrentParent) && newChildCurrentParent !== parent))
-  ) {
-    vnode_remove(journal, newChildCurrentParent, newChild, false);
-  }
-
   // link newChild into the previous/next list
   const vNext = insertBefore;
   const vPrevious = vNext