@qwik.dev/core 2.0.0-beta.5 → 2.0.0-beta.7

package/dist/core.cjs

@@ -1,6 +1,6 @@
 /**
  * @license
- * @qwik.dev/core 2.0.0-beta.5-dev+8887f7e
+ * @qwik.dev/core 2.0.0-beta.7-dev+2dd89a6
  * Copyright QwikDev. All Rights Reserved.
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/QwikDev/qwik/blob/main/LICENSE
@@ -91,6 +91,9 @@
     const isFunction = (v) => {
         return typeof v === 'function';
     };
+    const isPrimitive = (v) => {
+        return typeof v !== 'object' && typeof v !== 'function' && v !== null && v !== undefined;
+    };
 
     const codeToText = (code, ...parts) => {
         if (qDev) {
@@ -215,9 +218,13 @@
         ']):not([q\\:container=' +
         "text" /* QContainerValue.TEXT */ +
         '])';
+    // Node namespaces
     const HTML_NS = 'http://www.w3.org/1999/xhtml';
     const SVG_NS = 'http://www.w3.org/2000/svg';
     const MATH_NS = 'http://www.w3.org/1998/Math/MathML';
+    // Attributes namespaces
+    const XLINK_NS = 'http://www.w3.org/1999/xlink';
+    const XML_NS = 'http://www.w3.org/XML/1998/namespace';
     const ResourceEvent = 'qResource';
     const RenderEvent = 'qRender';
     const TaskEvent = 'qTask';
@@ -1220,6 +1227,15 @@
             throw qError(11 /* QError.invalidContext */, [context]);
         }
     };
+    /** @internal */
+    const _resolveContextWithoutSequentialScope = (context) => {
+        const iCtx = getInvokeContext();
+        const hostElement = iCtx.$hostElement$;
+        if (!hostElement) {
+            return undefined;
+        }
+        return iCtx.$container$?.resolveContext(hostElement, context);
+    };
 
     const ERROR_CONTEXT = /*#__PURE__*/ createContextId('qk-error');
     const isRecoverable = (err) => {
@@ -1236,7 +1252,7 @@
      *
      * @public
      */
-    const version = "2.0.0-beta.5-dev+8887f7e";
+    const version = "2.0.0-beta.7-dev+2dd89a6";
 
     /** @internal */
     const EMPTY_ARRAY = [];
@@ -1395,6 +1411,52 @@
         return scheduler(2 /* ChoreType.RUN_QRL */, hostElement, runQrl, args);
     };
 
+    /** @internal */
+    const mapApp_findIndx = (array, key, start) => {
+        assertTrue(start % 2 === 0, 'Expecting even number.');
+        let bottom = start >> 1;
+        let top = (array.length - 2) >> 1;
+        while (bottom <= top) {
+            const mid = bottom + ((top - bottom) >> 1);
+            const midKey = array[mid << 1];
+            if (midKey === key) {
+                return mid << 1;
+            }
+            if (midKey < key) {
+                bottom = mid + 1;
+            }
+            else {
+                top = mid - 1;
+            }
+        }
+        return (bottom << 1) ^ -1;
+    };
+    /** @internal */
+    const mapArray_set = (array, key, value, start) => {
+        const indx = mapApp_findIndx(array, key, start);
+        if (indx >= 0) {
+            if (value == null) {
+                array.splice(indx, 2);
+            }
+            else {
+                array[indx + 1] = value;
+            }
+        }
+        else if (value != null) {
+            array.splice(indx ^ -1, 0, key, value);
+        }
+    };
+    /** @internal */
+    const mapArray_get = (array, key, start) => {
+        const indx = mapApp_findIndx(array, key, start);
+        if (indx >= 0) {
+            return array[indx + 1];
+        }
+        else {
+            return null;
+        }
+    };
+
     /** @internal */
     const _CONST_PROPS = Symbol('CONST');
     /** @internal */
@@ -1594,6 +1656,7 @@
     const unwrapStore = (value) => {
         return getStoreTarget(value) || value;
     };
+    /** @internal */
     const isStore = (value) => {
         return STORE_TARGET in value;
     };
@@ -2462,66 +2525,71 @@
         return executeComponentWithPromiseExceptionRetry();
     };
     /**
-     * Stores the JSX output of the last execution of the component.
-     *
-     * Component can execute multiple times because:
+     * Adds `useOn` events to the JSX output.
      *
-     * - Component can have multiple tasks
-     * - Tasks can track signals
-     * - Task A can change signal which causes Task B to rerun.
-     *
-     * So when executing a component we only care about its last JSX Output.
+     * @param jsx The JSX output to modify.
+     * @param useOnEvents The `useOn` events to add.
+     * @returns The modified JSX output.
      */
     function addUseOnEvents(jsx, useOnEvents) {
-        const jsxElement = findFirstStringJSX(jsx);
+        const jsxElement = findFirstElementNode(jsx);
         let jsxResult = jsx;
+        const qVisibleEvent = 'onQvisible$';
         return maybeThen(jsxElement, (jsxElement) => {
-            let isInvisibleComponent = false;
-            if (!jsxElement) {
-                /**
-                 * We did not find any jsx node with a string tag. This means that we should append:
-                 *
-                 * ```html
-                 * <script type="placeholder" hidden on-document:qinit="..."></script>
-                 * ```
-                 *
-                 * This is needed because use on events should have a node to attach them to.
-                 */
-                isInvisibleComponent = true;
-            }
+            // headless components are components that don't render a real DOM element
+            const isHeadless = !jsxElement;
+            // placeholder element is a <script> element that is used to add events to the document or window
+            let placeholderElement = null;
             for (const key in useOnEvents) {
                 if (Object.prototype.hasOwnProperty.call(useOnEvents, key)) {
-                    if (isInvisibleComponent) {
-                        if (key === 'onQvisible$') {
-                            const [jsxElement, jsx] = addScriptNodeForInvisibleComponents(jsxResult);
-                            jsxResult = jsx;
-                            if (jsxElement) {
-                                addUseOnEvent(jsxElement, 'document:onQinit$', useOnEvents[key]);
+                    let targetElement = jsxElement;
+                    let eventKey = key;
+                    if (isHeadless) {
+                        // if the component is headless, we need to add the event to the placeholder element
+                        if (key === qVisibleEvent ||
+                            key.startsWith("document:on" /* EventNameJSXScope.document */) ||
+                            key.startsWith("window:on" /* EventNameJSXScope.window */)) {
+                            if (!placeholderElement) {
+                                const [createdElement, newJsx] = injectPlaceholderElement(jsxResult);
+                                jsxResult = newJsx;
+                                placeholderElement = createdElement;
                             }
+                            targetElement = placeholderElement;
                         }
-                        else if (key.startsWith('document:') || key.startsWith('window:')) {
-                            const [jsxElement, jsx] = addScriptNodeForInvisibleComponents(jsxResult);
-                            jsxResult = jsx;
-                            if (jsxElement) {
-                                addUseOnEvent(jsxElement, key, useOnEvents[key]);
+                        else {
+                            if (build.isDev) {
+                                logWarn('You are trying to add an event "' +
+                                    key +
+                                    '" using `useOn` hook, ' +
+                                    'but a node to which you can add an event is not found. ' +
+                                    'Please make sure that the component has a valid element node. ');
                             }
+                            continue;
                         }
-                        else if (build.isDev) {
+                    }
+                    if (targetElement) {
+                        if (targetElement.type === 'script' && key === qVisibleEvent) {
+                            eventKey = 'document:onQinit$';
                             logWarn('You are trying to add an event "' +
                                 key +
-                                '" using `useOn` hook, ' +
+                                '" using `useVisibleTask$` hook, ' +
                                 'but a node to which you can add an event is not found. ' +
-                                'Please make sure that the component has a valid element node. ');
+                                'Using document:onQinit$ instead.');
                         }
-                    }
-                    else if (jsxElement) {
-                        addUseOnEvent(jsxElement, key, useOnEvents[key]);
+                        addUseOnEvent(targetElement, eventKey, useOnEvents[key]);
                     }
                 }
             }
             return jsxResult;
         });
     }
+    /**
+     * Adds an event to the JSX element.
+     *
+     * @param jsxElement The JSX element to add the event to.
+     * @param key The event name.
+     * @param value The event value.
+     */
     function addUseOnEvent(jsxElement, key, value) {
         let props = jsxElement.props;
         if (props === EMPTY_OBJ) {
@@ -2537,7 +2605,13 @@
         propValue.push(...value);
         props[key] = propValue;
     }
-    function findFirstStringJSX(jsx) {
+    /**
+     * Finds the first element node in the JSX output.
+     *
+     * @param jsx The JSX output to search.
+     * @returns The first element node or null if no element node is found.
+     */
+    function findFirstElementNode(jsx) {
         const queue = [jsx];
         while (queue.length) {
             const jsx = queue.shift();
@@ -2547,44 +2621,69 @@
                 }
                 queue.push(jsx.children);
             }
-            else if (Array.isArray(jsx)) {
+            else if (isArray(jsx)) {
                 queue.push(...jsx);
             }
             else if (isPromise(jsx)) {
-                return maybeThen(jsx, (jsx) => findFirstStringJSX(jsx));
+                return maybeThen(jsx, (jsx) => findFirstElementNode(jsx));
             }
             else if (isSignal(jsx)) {
-                return findFirstStringJSX(untrack(() => jsx.value));
+                return findFirstElementNode(untrack(() => jsx.value));
             }
         }
         return null;
     }
-    function addScriptNodeForInvisibleComponents(jsx) {
+    /**
+     * Injects a placeholder <script> element into the JSX output.
+     *
+     * This is necessary for headless components (components that don't render a real DOM element) to
+     * have an anchor point for `useOn` event listeners that target the document or window.
+     *
+     * @param jsx The JSX output to modify.
+     * @returns A tuple containing the created placeholder element and the modified JSX output.
+     */
+    function injectPlaceholderElement(jsx) {
+        // For regular JSX nodes, we can append the placeholder to its children.
         if (isJSXNode(jsx)) {
-            const jsxElement = new JSXNodeImpl('script', {}, {
-                type: 'placeholder',
-                hidden: '',
-            }, null, 3);
+            const placeholder = createPlaceholderScriptNode();
+            // For slots, we can't add children, so we wrap them in a fragment.
             if (jsx.type === Slot) {
-                return [jsxElement, _jsxSorted(Fragment, null, null, [jsx, jsxElement], 0, null)];
+                return [placeholder, _jsxSorted(Fragment, null, null, [jsx, placeholder], 0, null)];
             }
             if (jsx.children == null) {
-                jsx.children = jsxElement;
+                jsx.children = placeholder;
             }
-            else if (Array.isArray(jsx.children)) {
-                jsx.children.push(jsxElement);
+            else if (isArray(jsx.children)) {
+                jsx.children.push(placeholder);
             }
             else {
-                jsx.children = [jsx.children, jsxElement];
+                jsx.children = [jsx.children, placeholder];
             }
-            return [jsxElement, jsx];
+            return [placeholder, jsx];
         }
-        else if (Array.isArray(jsx) && jsx.length) {
-            // get first element
-            const [jsxElement, _] = addScriptNodeForInvisibleComponents(jsx[0]);
-            return [jsxElement, jsx];
+        // For primitives, we can't add children, so we wrap them in a fragment.
+        if (isPrimitive(jsx)) {
+            const placeholder = createPlaceholderScriptNode();
+            return [placeholder, _jsxSorted(Fragment, null, null, [jsx, placeholder], 0, null)];
         }
-        return [null, null];
+        // For an array of nodes, we inject the placeholder into the first element.
+        if (isArray(jsx) && jsx.length > 0) {
+            const [createdElement, _] = injectPlaceholderElement(jsx[0]);
+            return [createdElement, jsx];
+        }
+        // For anything else we do nothing.
+        return [null, jsx];
+    }
+    /**
+     * Creates a <script> element with a placeholder type.
+     *
+     * @returns A <script> element with a placeholder type.
+     */
+    function createPlaceholderScriptNode() {
+        return new JSXNodeImpl('script', {}, {
+            type: 'placeholder',
+            hidden: '',
+        }, null, 3);
     }
 
     const applyInlineComponent = (ssr, componentHost, inlineComponentFunction, jsx) => {
@@ -3082,6 +3181,7 @@
             this.$destroy$ = $destroy$;
         }
     }
+    /** @internal */
     const isTask = (value) => {
         return value instanceof Task;
     };
@@ -3421,49 +3521,6 @@
         return (jsx.constProps && prop in jsx.constProps ? jsx.constProps[prop] : jsx.varProps[prop]);
     };
 
-    const mapApp_findIndx = (array, key, start) => {
-        assertTrue(start % 2 === 0, 'Expecting even number.');
-        let bottom = start >> 1;
-        let top = (array.length - 2) >> 1;
-        while (bottom <= top) {
-            const mid = bottom + ((top - bottom) >> 1);
-            const midKey = array[mid << 1];
-            if (midKey === key) {
-                return mid << 1;
-            }
-            if (midKey < key) {
-                bottom = mid + 1;
-            }
-            else {
-                top = mid - 1;
-            }
-        }
-        return (bottom << 1) ^ -1;
-    };
-    const mapArray_set = (array, key, value, start) => {
-        const indx = mapApp_findIndx(array, key, start);
-        if (indx >= 0) {
-            if (value == null) {
-                array.splice(indx, 2);
-            }
-            else {
-                array[indx + 1] = value;
-            }
-        }
-        else if (value != null) {
-            array.splice(indx ^ -1, 0, key, value);
-        }
-    };
-    const mapArray_get = (array, key, start) => {
-        const indx = mapApp_findIndx(array, key, start);
-        if (indx >= 0) {
-            return array[indx + 1];
-        }
-        else {
-            return null;
-        }
-    };
-
     const isForeignObjectElement = (elementName) => {
         return build.isDev ? elementName.toLowerCase() === 'foreignobject' : elementName === 'foreignObject';
     };
@@ -3667,6 +3724,24 @@
             elementNamespaceFlag,
         };
     }
+    function getAttributeNamespace(attributeName) {
+        switch (attributeName) {
+            case 'xlink:href':
+            case 'xlink:actuate':
+            case 'xlink:arcrole':
+            case 'xlink:role':
+            case 'xlink:show':
+            case 'xlink:title':
+            case 'xlink:type':
+                return XLINK_NS;
+            case 'xml:base':
+            case 'xml:lang':
+            case 'xml:space':
+                return XML_NS;
+            default:
+                return null;
+        }
+    }
 
     function escapeHTML(html) {
         let escapedHTML = '';
@@ -4209,6 +4284,14 @@
                     }
                     value = serializeAttribute(key, value, scopedStyleIdPrefix);
                     if (value != null) {
+                        if (vNewNode[0 /* VNodeProps.flags */] & 64 /* VNodeFlags.NS_svg */) {
+                            // only svg elements can have namespace attributes
+                            const namespace = getAttributeNamespace(key);
+                            if (namespace) {
+                                element.setAttributeNS(namespace, key, String(value));
+                                continue;
+                            }
+                        }
                         element.setAttribute(key, String(value));
                     }
                 }
@@ -6844,6 +6927,7 @@
         const flag = vNode[0 /* VNodeProps.flags */];
         return (flag & 5 /* VNodeFlags.ELEMENT_OR_TEXT_MASK */) !== 0;
     };
+    /** @internal */
     const vnode_isMaterialized = (vNode) => {
         assertDefined(vNode, 'Missing vNode');
         const flag = vNode[0 /* VNodeProps.flags */];
@@ -6851,11 +6935,13 @@
             vNode[4 /* ElementVNodeProps.firstChild */] !== undefined &&
             vNode[5 /* ElementVNodeProps.lastChild */] !== undefined);
     };
+    /** @internal */
     const vnode_isTextVNode = (vNode) => {
         assertDefined(vNode, 'Missing vNode');
         const flag = vNode[0 /* VNodeProps.flags */];
         return (flag & 4 /* VNodeFlags.Text */) === 4 /* VNodeFlags.Text */;
     };
+    /** @internal */
     const vnode_isVirtualVNode = (vNode) => {
         assertDefined(vNode, 'Missing vNode');
         const flag = vNode[0 /* VNodeProps.flags */];
@@ -6893,6 +6979,7 @@
         }
         return '<unknown>';
     };
+    /** @internal */
     const vnode_ensureElementInflated = (vnode) => {
         const flags = vnode[0 /* VNodeProps.flags */];
         if ((flags & 15 /* VNodeFlags.INFLATED_TYPE_MASK */) === 1 /* VNodeFlags.Element */) {
@@ -7571,6 +7658,7 @@
         const textNode = textVNode[4 /* TextVNodeProps.node */];
         journal.push(1 /* VNodeJournalOpCode.SetText */, textNode, (textVNode[5 /* TextVNodeProps.text */] = text));
     };
+    /** @internal */
     const vnode_getFirstChild = (vnode) => {
         if (vnode_isTextVNode(vnode)) {
             return null;
@@ -7878,12 +7966,14 @@
             callback(peek, consumeValue, consume, getChar, nextToConsumeIdx);
         }
     };
+    /** @internal */
     const vnode_getNextSibling = (vnode) => {
         return vnode[3 /* VNodeProps.nextSibling */];
     };
     const vnode_getPreviousSibling = (vnode) => {
         return vnode[2 /* VNodeProps.previousSibling */];
     };
+    /** @internal */
     const vnode_getAttrKeys = (vnode) => {
         const type = vnode[0 /* VNodeProps.flags */];
         if ((type & 3 /* VNodeFlags.ELEMENT_OR_VIRTUAL_MASK */) !== 0) {
@@ -7929,6 +8019,7 @@
             }
         }
     };
+    /** @internal */
     const vnode_getAttr = (vnode, key) => {
         const type = vnode[0 /* VNodeProps.flags */];
         if ((type & 3 /* VNodeFlags.ELEMENT_OR_VIRTUAL_MASK */) !== 0) {
@@ -7965,6 +8056,7 @@
             props.splice(idx ^ -1, 0, key, value);
         }
     };
+    /** @internal */
     const vnode_getPropStartIndex = (vnode) => {
         const type = vnode[0 /* VNodeProps.flags */] & 7 /* VNodeFlags.TYPE_MASK */;
         if (type === 1 /* VNodeFlags.Element */) {
@@ -7975,6 +8067,7 @@
         }
         throw qError(26 /* QError.invalidVNodeType */, [type]);
     };
+    /** @internal */
     const vnode_getProps = (vnode) => {
         return vnode[vnode_getPropStartIndex(vnode)];
     };
@@ -8756,6 +8849,32 @@
             case 11 /* TypeIds.RefVNode */:
                 const vNode = retrieveVNodeOrDocument(container, value);
                 if (vnode_isVNode(vNode)) {
+                    /**
+                     * If we have a ref, we need to ensure the element is materialized.
+                     *
+                     * Example:
+                     *
+                     * ```
+                     * const Cmp = component$(() => {
+                     *       const element = useSignal<HTMLDivElement>();
+                     *
+                     *       useVisibleTask$(() => {
+                     *         element.value!.innerHTML = 'I am the innerHTML content!';
+                     *       });
+                     *
+                     *       return (
+                     *          <div ref={element} />
+                     *       );
+                     * });
+                     * ```
+                     *
+                     * If we don't materialize early element with ref property, and change element innerHTML it
+                     * will be applied to a vnode tree during the lazy materialization, and it is wrong.
+                     *
+                     * Next if we rerender component it will remove applied innerHTML, because the system thinks
+                     * it is a part of the vnode tree.
+                     */
+                    ensureMaterialized(vNode);
                     return vnode_getNode(vNode);
                 }
                 else {
@@ -11779,25 +11898,40 @@
     exports._getDomContainer = getDomContainer;
     exports._getQContainerElement = _getQContainerElement;
     exports._isJSXNode = isJSXNode;
+    exports._isStore = isStore;
     exports._isStringifiable = isStringifiable;
+    exports._isTask = isTask;
     exports._jsxBranch = _jsxBranch;
     exports._jsxC = _jsxC;
     exports._jsxQ = _jsxQ;
     exports._jsxS = _jsxS;
     exports._jsxSorted = _jsxSorted;
     exports._jsxSplit = _jsxSplit;
+    exports._mapApp_findIndx = mapApp_findIndx;
+    exports._mapArray_get = mapArray_get;
+    exports._mapArray_set = mapArray_set;
     exports._noopQrl = _noopQrl;
     exports._noopQrlDEV = _noopQrlDEV;
     exports._preprocessState = preprocessState;
     exports._qrlSync = _qrlSync;
     exports._regSymbol = _regSymbol;
+    exports._resolveContextWithoutSequentialScope = _resolveContextWithoutSequentialScope;
     exports._restProps = _restProps;
     exports._run = queueQRL;
     exports._serializationWeakRef = _serializationWeakRef;
     exports._serialize = _serialize;
     exports._task = scheduleTask;
-    exports._useInvokeContext = useInvokeContext;
     exports._verifySerializable = verifySerializable;
+    exports._vnode_ensureElementInflated = vnode_ensureElementInflated;
+    exports._vnode_getAttr = vnode_getAttr;
+    exports._vnode_getAttrKeys = vnode_getAttrKeys;
+    exports._vnode_getFirstChild = vnode_getFirstChild;
+    exports._vnode_getNextSibling = vnode_getNextSibling;
+    exports._vnode_getPropStartIndex = vnode_getPropStartIndex;
+    exports._vnode_getProps = vnode_getProps;
+    exports._vnode_isMaterialized = vnode_isMaterialized;
+    exports._vnode_isTextVNode = vnode_isTextVNode;
+    exports._vnode_isVirtualVNode = vnode_isVirtualVNode;
     exports._vnode_toString = vnode_toString;
     exports._waitUntilRendered = _waitUntilRendered;
     exports._walkJSX = _walkJSX;